wip(shared): Work on MDX wrapper

sites/org/page-templates/docs.mjs.mustache

@@ -75,7 +75,7 @@ export default DocsPage
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ns)),
+      ...(await serverSideTranslations(locale, ['docs', ...ns])),
       locale,
       page: {
         locale,

sites/org/pages/docs/docs.en.yaml

@@ -1 +1,20 @@
+account: Account
 docs: Documentation
+controltip.t: Power versus Simplicity
+controltip.d1: The <b>Power versus Simplicity</b> setting of your FreeSewing account will impact how you experience the FreeSewing website.
+controltip.d2: By default, some of the more advanced features of this site are hidden to make it more easy for new users to find their way.
+controltip.d3: If you want to sacrify some of that simplicy to gain more power, you can update your Power versus Simplicity setting accordingly.
+helpWithDocs: Help us improve our documentation
+authors: Authors
+maintainers: Maintainers
+lastUpdated: Last updated
+editThisPage: Edit this page
+years: years
+months: months
+days: days
+oneDay: one day
+lessThanADay: less than a day
+ago: ago
+helpImproveDocs: Help us improve the FreeSewing documentation
+helpTranslateDocs: Help us translate the FreeSewing documentation
+learnMore: Learn more

sites/shared/components/account/account.en.yaml

@@ -98,10 +98,6 @@ control5t: Get out of my way
 control5d: Reveals all features, removes all handrails and safety checks.
 controlShowMore: Show more options
 controlTitle: What do you prefer?
-controltip.d1: The <b>Power versus Simplicity</b> setting of your FreeSewing account will impact how you experience the FreeSewing website.
-controltip.d2: By default, some of the more advanced features of this site are hidden to make it more easy for new users to find their way.
-controltip.d3: If you want to sacrify some of that simplicy to gain more power, you can update your Power versus Simplicity setting accordingly.
-
 # img
 imgTitle: How about a picture?
 imgDragAndDropImageHere: Drag and drop an image here

sites/shared/components/control/tip.mjs

@@ -3,14 +3,14 @@ import { PageLink } from 'shared/components/page-link.mjs'
 import { useTranslation } from 'next-i18next'
 import { RightIcon } from 'shared/components/icons.mjs'
 
-export const ns = ['account']
+export const ns = ['docs']
 
 export const ControlTip = () => {
   const { t } = useTranslation(ns)
 
   return (
     <Popout note>
-      <h5>{t('account:control')}</h5>
+      <h5>{t('controltip.t')}</h5>
       <p dangerouslySetInnerHTML={{ __html: t('controltip.d1') }} />
       <p>
         {t('controltip.d2')}
@@ -18,9 +18,9 @@ export const ControlTip = () => {
         {t('controltip.d3')}
       </p>
       <div className="flex flex-row gap-1 items-center">
-        <PageLink href="/account/" txt={t('account:account')} />
+        <PageLink href="/account/" txt={t('account')} />
         <RightIcon className="w-4 h-4" />
-        <PageLink href="/account/control/" txt={t('account:control')} />
+        <PageLink href="/account/control/" txt={t('controltip.t')} />
       </div>
     </Popout>
   )

sites/shared/components/mdx/index.mjs

@@ -2,7 +2,7 @@ import { Popout } from 'shared/components/popout.mjs'
 import { Highlight } from './highlight.mjs'
 import { YouTube } from './youtube.mjs'
 import { Figure } from './figure.mjs'
-//import { ReadMore } from './read-more.mjs'
+import { ReadMore } from './read-more.mjs'
 import { Tab, Tabs } from './tabs.mjs'
 import { TabbedExample as Example } from './tabbed-example.mjs'
 import { HttpMethod, HttpStatusCode } from './http.mjs'
@@ -18,7 +18,7 @@ export const components = {
   Fixme: (props) => <Popout {...props} fixme />,
   Link: (props) => <Popout {...props} link />,
   Note: (props) => <Popout {...props} note />,
-  ReadMore: (props) => <Popout fixme>ReadMore is not implemented (yet) in v3</Popout>,
+  ReadMore,
   Related: (props) => <Popout {...props} related />,
   Tip: (props) => <Popout {...props} tip />,
   Warning: (props) => <Popout {...props} warning />,

sites/shared/components/mdx/read-more.mjs

@@ -1,15 +1,16 @@
 import get from 'lodash.get'
 import orderBy from 'lodash.orderby'
 import Link from 'next/link'
+import { useContext } from 'react'
+import { NavigationContext } from 'shared/context/navigation-context.mjs'
 
 // Helper method to filter out the real children
 const order = (obj) => orderBy(obj, ['o', 't'], ['asc', 'asc'])
 const currentChildren = (current) =>
   Object.values(order(current)).filter((entry) => typeof entry === 'object')
 
-export const ReadMore = ({ app, recurse = 0, slug = false }) => {
+export const ReadMore = ({ app, recurse = 0 }) => {
-  // Don't bother if we don't have the navigation tree in app
+  const { nav, slug } = useContext(NavigationContext)
-  if (!app) return null
 
   // Deal with recurse not being a number
   if (recurse) {
@@ -17,9 +18,7 @@ export const ReadMore = ({ app, recurse = 0, slug = false }) => {
     else recurse = 1
   }
 
-  const root =
+  const root = slug && slug !== 'docs' ? get(nav, slug.split('/').slice(1)) : nav
-    slug && slug !== 'docs' ? get(app.state.nav, slug.split('/').slice(1)) : app.state.nav
-  console.log(root)
 
   const list = []
   for (const page of currentChildren(root)) {
@@ -30,5 +29,6 @@ export const ReadMore = ({ app, recurse = 0, slug = false }) => {
       </li>
     )
   }
+
   return <ul>{list}</ul>
 }

sites/shared/components/wrappers/mdx.mjs

@@ -1,14 +1,115 @@
 // Components that are available in MDX content
 import { components as baseComponents } from 'shared/components/mdx/index.mjs'
+// List of authors
+import { authors as allAuthors } from 'config/authors.mjs'
+// FreeSewing config
+import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
+// Components
+import { PageLink } from 'shared/components/page-link.mjs'
+import { WebLink } from 'shared/components/web-link.mjs'
+import { DateTime, Interval } from 'luxon'
+import { DocsIcon } from 'shared/components/icons.mjs'
+// Context
+import { useContext } from 'react'
+import { NavigationContext } from 'shared/context/navigation-context.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
 
 // Previous-Next navigation
 //import { PrevNext } from '../mdx/prev-next.mjs'
+//
+//
+const TimeAgo = ({ date, t }) => {
+  const i = Interval.fromDateTimes(DateTime.fromISO(date), DateTime.now())
+    .toDuration(['hours', 'days', 'months', 'years'])
+    .toObject()
+  let ago = ''
+  if (i.years > 0) ago += `${i.years} ${t('years')}, `
+  if (i.months > 0) ago += `${i.months} ${t('months')}, `
+  if (Math.floor(i.days) === 1) ago += `${t('oneDay')}`
+  else if (Math.floor(i.days) === 0) ago += `${t('lessThanADay')}`
+  else ago += `${Math.floor(i.days)} days`
+
+  return `${ago} ${t('ago')}`
+}
+
+const PersonList = ({ list }) =>
+  list.map((id, i) => (
+    <li key={id} className="list-none">
+      {allAuthors[id] ? (
+        <PageLink href={`/users/${allAuthors[id].id}`} txt={allAuthors[id].name} />
+      ) : (
+        <span className="font-medium">{id}</span>
+      )}
+      {i !== list.length - 1 ? ',' : <span className="pl-2 pr-1 font-bold">|</span>}
+    </li>
+  ))
+const Ul = ({ children }) => (
+  <ul key="authors" className="flex flex-row flex-wrap gap-1 -ml-3">
+    {children}
+  </ul>
+)
+
+const MetaData = ({ authors = [], maintainers = [], updated = '20220825', locale, slug, t }) => (
+  <div className="py-4 px-4 rounded-lg bg-secondary bg-opacity-5 shadow mb-4">
+    {locale === 'en' ? (
+      <div className="flex flex-row items-center gap-4 justify-between text-base-content mb-2">
+        <span className="font-medium text-lg">{t('helpImproveDocs')}</span>
+        <a
+          href={`https://github.dev/freesewing/freesewing/blob/develop/markdown/org/${slug}/en.md`}
+          className="btn btn-secondary btn-sm flex flex-row gap-2 items-center"
+        >
+          <span role="img">✏️</span>
+          <span className="text-secondary-content">{t('editThisPage')}</span>
+        </a>
+      </div>
+    ) : (
+      <div className="flex flex-row items-center gap-4 justify-between text-base-content mb-2">
+        <span className="font-medium text-lg">{t('helpTranslateDocs')}</span>
+        <a
+          href={`https://freesewing.dev/guides/translation`}
+          className="btn btn-secondary btn-sm flex flex-row gap-2 items-center"
+        >
+          <span role="img">💡</span>
+          <span className="text-secondary-content">{t('learnMore')}</span>
+        </a>
+      </div>
+    )}
+    <div className="p-2 text-sm">
+      <Ul>
+        {authors.length > 0 ? (
+          <>
+            <li className="list-none font-medium opacity-70 italic">{t('authors')}:</li>
+            <PersonList list={authors} />
+          </>
+        ) : null}
+
+        {maintainers.length > 0 ? (
+          <>
+            <li className="list-none font-medium opacity-70 italic">{t('maintainers')}:</li>
+            <PersonList list={authors} />
+          </>
+        ) : null}
+
+        <li className="list-none font-medium opacity-70 italic">{t('lastUpdated')}:</li>
+        <li className="list-none font-medium">
+          <TimeAgo date={updated} t={t} />
+        </li>
+      </Ul>
+    </div>
+  </div>
+)
 
 export const MdxWrapper = ({ MDX, frontmatter = {}, components = {} }) => {
+  const { t } = useTranslation('docs')
   const allComponents = { ...baseComponents, ...components }
+  const { locale, slug } = useContext(NavigationContext)
+
+  const { authors = [], maintainers = [] } = frontmatter || {}
 
   return (
     <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base">
+      <MetaData {...frontmatter} {...{ locale, slug, t }} />
       <MDX components={allComponents} />
     </div>
   )