chore(lab): Do not include dynamic docs in the lab

sites/lab/components/layouts/workbench.mjs

@@ -0,0 +1,7 @@
+export const ns = []
+
+export const WorkbenchLayout = (props) => (
+  <section id="fs-workbench" className="m-0 lg:mt-24 p-0">
+    {props.children}
+  </section>
+)

sites/shared/components/dynamic-docs/core-settings.mjs

@@ -22,7 +22,7 @@ const dynamicDocsFactory = (lang) => {
     const mdx = dynamic(
       () =>
         import(
-          `markdown/docs/site/draft/core-settings/${setting ? setting + '/' : ''}${lang}.md`
+          `orgmarkdown/docs/site/draft/core-settings/${setting ? setting + '/' : ''}${lang}.md`
         ).then((mod) => {
           setFrontmatter(mod.frontmatter)
           return mod

sites/shared/components/dynamic-docs/org.mjs

@@ -0,0 +1,54 @@
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { Spinner } from 'shared/components/spinner.mjs'
+import { MdxWrapper } from './wrapper.mjs'
+import { components } from 'shared/components/mdx/index.mjs'
+
+/*
+ * Webpack will check on disk for all possible files matching this
+ * dynamic import. So unless we divide it up a bit your computer
+ * will melt when running this in development mode
+ *
+ * This will return a language-specific component
+ */
+const dynamicDocsFactory = (lang) => {
+  return function ({ path }) {
+    const [frontmatter, setFrontmatter] = useState({})
+    const mdx = dynamic(
+      () =>
+        import(`orgmarkdown/docs/${path}/${lang}.md`).then((mod) => {
+          setFrontmatter(mod.frontmatter)
+          return mod
+        }),
+      { ssr: false }
+    )
+    const MDX = mdx ? mdx : <Spinner className="w16 h-16 animate-spin text-primary" />
+
+    return (
+      <MdxWrapper {...frontmatter} path={`site/draft/core-settings`} language={lang}>
+        <MDX components={components} />
+      </MdxWrapper>
+    )
+  }
+}
+
+/*
+ * Instantiate language-specific components
+ */
+const OrgDocsEn = dynamicDocsFactory('en')
+const OrgDocsDe = dynamicDocsFactory('de')
+const OrgDocsFr = dynamicDocsFactory('fr')
+const OrgDocsEs = dynamicDocsFactory('es')
+const OrgDocsNl = dynamicDocsFactory('nl')
+
+/*
+ * Return language-specific component
+ */
+export const DynamicOrgDocs = ({ path = false, language = 'en' }) => {
+  if (!path) return null
+  if (language === 'en') return <OrgDocsEn path={path} />
+  if (language === 'de') return <OrgDocsDe path={path} />
+  if (language === 'es') return <OrgDocsEs path={path} />
+  if (language === 'fr') return <OrgDocsFr path={path} />
+  if (language === 'nl') return <OrgDocsNl path={path} />
+}

sites/shared/components/dynamic-docs/wrapper.mjs

@@ -1,6 +1,5 @@
 import { PageLink } from 'shared/components/page-link.mjs'
 import { useTranslation } from 'next-i18next'
-import { components } from 'shared/components/mdx/index.mjs'
 
 export const ns = ['modal']
 

sites/shared/components/workbench/index.mjs

@@ -42,7 +42,7 @@ const defaultUi = {
 
 const draftViews = ['draft', 'test']
 
-export const Workbench = ({ design, Design, set = false }) => {
+export const Workbench = ({ design, Design, set = false, DynamicDocs = false }) => {
   // Hooks
   const { t, i18n } = useTranslation(ns)
   const { language } = i18n
@@ -111,7 +111,17 @@ export const Workbench = ({ design, Design, set = false }) => {
       <WorkbenchHeader setView={setView} view={view} />
       {view === 'draft' && (
         <DraftView
-          {...{ design, pattern, patternConfig, setView, update, settings, ui, language }}
+          {...{
+            design,
+            pattern,
+            patternConfig,
+            setView,
+            update,
+            settings,
+            ui,
+            language,
+            DynamicDocs,
+          }}
           account={account}
         />
       )}

sites/shared/components/workbench/menus/core-settings/index.mjs

@@ -7,7 +7,6 @@ import { ModalContext } from 'shared/context/modal-context.mjs'
 import { loadSettingsConfig } from './config.mjs'
 // Components
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
-import { DynamicCoreSettingsDocs } from 'shared/components/dynamic-docs/core-settings.mjs'
 import { SettingsIcon, ClearIcon, HelpIcon } from 'shared/components/icons.mjs'
 import Link from 'next/link'
 import {
@@ -118,11 +117,13 @@ export const Setting = ({
   if (name === 'sabool') drillProps.samm = samm
 
   const buttons = []
-  const openButtons = [
+  const openButtons = []
+  if (loadDocs)
+    openButtons.push(
       <button className="btn btn-xs btn-ghost px-0" onClick={(evt) => loadDocs(evt, name)}>
         <HelpIcon className="w-4 h-4" />
-    </button>,
-  ]
+      </button>
+    )
   if (changed) {
     buttons.push(
       <button
@@ -165,7 +166,15 @@ export const Setting = ({
 
 export const ns = ['i18n', 'core-settings', 'modal']
 
-export const CoreSettings = ({ design, update, settings, patternConfig, language, account }) => {
+export const CoreSettings = ({
+  design,
+  update,
+  settings,
+  patternConfig,
+  language,
+  account,
+  DynamicDocs,
+}) => {
   // FIXME: Update this namespace
   const { t } = useTranslation(['i18n', 'core-settings', design])
   const { setModal } = useContext(ModalContext)
@@ -179,16 +188,29 @@ export const CoreSettings = ({ design, update, settings, patternConfig, language
   // Default control level is 2 (in case people are not logged in)
   const control = account.control || 2
 
-  const loadDocs = (evt, setting = false) => {
+  const loadDocs = DynamicDocs
+    ? (evt, setting = false) => {
         evt.stopPropagation()
+        let path = `site/draft/core-settings`
+        if (setting) path += `/${setting}`
+        console.log(path)
         setModal(
           <ModalWrapper>
             <div className="max-w-prose">
-          <DynamicCoreSettingsDocs setting={setting} language={language} />
+              <DynamicDocs path={path} language={language} />
             </div>
           </ModalWrapper>
         )
       }
+    : false
+
+  const openButtons = []
+  if (loadDocs)
+    openButtons.push(
+      <button className="btn btn-xs btn-ghost px-0 z-10" onClick={(evt) => loadDocs(evt)}>
+        <HelpIcon className="w-4 h-4" />
+      </button>
+    )
 
   return (
     <Collapse
@@ -201,11 +223,7 @@ export const CoreSettings = ({ design, update, settings, patternConfig, language
         </div>
       }
       openTitle={t('core-settings:coreSettings')}
-      openButtons={[
-        <button className="btn btn-xs btn-ghost px-0 z-10" onClick={(evt) => loadDocs(evt)}>
-          <HelpIcon className="w-4 h-4" />
-        </button>,
-      ]}
+      openButtons={openButtons}
     >
       <p>{t('core-settings:coreSettings.d')}</p>
       {Object.keys(settingsConfig)

sites/shared/components/workbench/menus/design-options/index.mjs

@@ -39,7 +39,6 @@ import {
   MmOptionValue,
   PctOptionValue,
 } from './values.mjs'
-import { DynamicMdx } from 'shared/components/dynamic-mdx.mjs'
 
 export const ns = ['design-options']
 
@@ -135,11 +134,13 @@ export const DesignOption = ({
   }
 
   const buttons = []
-  const openButtons = [
+  const openButtons = []
+  if (loadDocs)
+    openButtons.push(
       <button className="btn btn-xs btn-ghost px-0" onClick={(evt) => loadDocs(evt, name)}>
         <HelpIcon className="w-4 h-4" />
-    </button>,
-  ]
+      </button>
+    )
   if (['pct', 'count', 'deg'].includes(type))
     openButtons.push(
       <button
@@ -224,6 +225,7 @@ export const DesignOptions = ({
   language,
   account,
   Option = false,
+  DynamicDocs = false,
 }) => {
   const { t } = useTranslation([design])
   const { setModal } = useContext(ModalContext)
@@ -232,12 +234,13 @@ export const DesignOptions = ({
   if (!Option) Option = DesignOption
   const optionsMenu = optionsMenuStructure(patternConfig.options)
 
-  const loadDocs = (evt, option = false) => {
+  const loadDocs = DynamicDocs
+    ? (evt, option = false) => {
         evt.stopPropagation()
         setModal(
           <ModalWrapper>
             <div className="max-w-prose">
-          <DynamicMdx
+              <DynamicDocs
                 path={`patterns/${design}/options/${option.toLowerCase()}`}
                 language={language}
               />
@@ -245,6 +248,7 @@ export const DesignOptions = ({
           </ModalWrapper>
         )
       }
+    : false
 
   return (
     <Collapse

sites/shared/components/workbench/views/draft/index.mjs

@@ -13,13 +13,26 @@ export const DraftView = ({
   update,
   language,
   account,
+  DynamicDocs,
 }) => (
   <div className="flex flex-row items-tope">
     <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
       <Pattern {...{ pattern, setView, settings, ui, update }} />
     </div>
     <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-      <DraftMenu {...{ design, pattern, patternConfig, settings, ui, update, language, account }} />
+      <DraftMenu
+        {...{
+          design,
+          pattern,
+          patternConfig,
+          settings,
+          ui,
+          update,
+          language,
+          account,
+          DynamicDocs,
+        }}
+      />
     </div>
   </div>
 )

sites/shared/components/workbench/views/draft/menu.mjs

@@ -19,12 +19,15 @@ export const DraftMenu = ({
   update,
   language,
   account,
+  DynamicDocs,
 }) => (
   <nav className="grow mb-12">
-    <DesignOptions {...{ design, patternConfig, settings, update, language, account }} />
+    <DesignOptions
+      {...{ design, patternConfig, settings, update, language, account, DynamicDocs }}
+    />
     {account.control === 1 ? null : (
-      <CoreSettings {...{ patternConfig, settings, update, language, account }} />
+      <CoreSettings {...{ patternConfig, settings, update, language, account, DynamicDocs }} />
     )}
-    {ui.renderer === 'react' && <XrayMenu {...{ ui, update }} />}
+    {ui.renderer === 'react' && <XrayMenu {...{ ui, update, DynamicDocs }} />}
   </nav>
 )

sites/shared/config/next.mjs

@@ -166,6 +166,8 @@ const config = ({ site, jargon = {} }) => {
       config.resolve.alias.shared = path.resolve('../shared/')
       config.resolve.alias.site = path.resolve(`../${site}/`)
       config.resolve.alias.markdown = path.resolve(`../../markdown/${site}/`)
+      config.resolve.alias.orgmarkdown = path.resolve(`../../markdown/org/`)
+      config.resolve.alias.devmarkdown = path.resolve(`../../markdown/dev}/`)
       config.resolve.alias.config = path.resolve('../../config/')
       config.resolve.alias.designs = path.resolve('../../designs/')
       config.resolve.alias.plugins = path.resolve('../../plugins/')

sites/shared/page-templates/new-pattern-from-cset.mjs.mustache

@@ -9,6 +9,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Workbench, ns as wbNs } from 'shared/components/workbench/index.mjs'
 import { WorkbenchLayout } from 'site/components/layouts/workbench.mjs'
 import { Null } from 'shared/components/null.mjs'
+{{{ docs }}}
 
 // Translation namespaces used on this page
 const namespaces = [...new Set(['{{ design }}', ...wbNs, ...pageNs])]
@@ -28,7 +29,7 @@ const New{{ Design }}FromCsetPage = ({ page, id }) => {
 
   return (
     <PageWrapper {...page} title="{{ Design }}" layout={WorkbenchLayout} header={Null}>
-      <Workbench design="{{ design }}" Design={ {{ Design }} } set={set} />
+      <Workbench design="{{ design }}" Design={ {{ Design }} } set={set} DynamicDocs={DynamicDocs}/>
     </PageWrapper>
   )
 }

sites/shared/page-templates/new-pattern-from-set.mjs.mustache

@@ -10,6 +10,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Workbench, ns as wbNs } from 'shared/components/workbench/index.mjs'
 import { WorkbenchLayout } from 'site/components/layouts/workbench.mjs'
 import { Null } from 'shared/components/null.mjs'
+{{{ docs }}}
 
 // Translation namespaces used on this page
 const namespaces = [...new Set(['{{ design }}', ...wbNs, ...pageNs])]
@@ -30,7 +31,7 @@ const New{{ Design }}FromSetPage = ({ page, id }) => {
 
   return (
     <PageWrapper {...page} title="{{ Design }}" layout={WorkbenchLayout} header={Null}>
-      <Workbench design="{{ design }}" Design={ {{ Design }} } set={set} />
+      <Workbench design="{{ design }}" Design={ {{ Design }} } set={set} DynamicDocs={DynamicDocs}/>
     </PageWrapper>
   )
 }

sites/shared/prebuild/lab.mjs

@@ -2,20 +2,10 @@ import fs_ from 'fs'
 import path from 'path'
 import { capitalize } from '../utils.mjs'
 import { plugins, designs } from '../../../config/software/index.mjs'
+import { header, prebuildOrg } from './org.mjs'
 
 const fs = fs_.promises
 
-const header = `/*
- *
- * This page was auto-generated by the prebuild script
- * Any changes you make to it will be lost on the next (pre)build.
- *
- * If you want to make changes, update the pageTemplate in:
- *
- *   sites/shared/prebuild/lab.mjs
- *
- */`
-
 const copyFromOrg = [
   'pages/account',
   'pages/confirm',
@@ -26,49 +16,6 @@ const copyFromOrg = [
   'pages/welcome',
 ]
 
-/*
- * Main method that does what needs doing
- */
-
 export const prebuildLab = async () => {
-  // FIXME: handle this
-  return
-  const promises = []
-  for (const section in designsByType) {
-    // Iterate over sections
-    console.log(`Generating pages for ${section} designs`)
-    for (const design in designsByType[section]) {
-      // Generate pattern pages for next
-      console.log(`  - ${design}`)
-      const page = pageTemplate(design)
-      const pages = ['..', 'lab', 'pages']
-      await fs.mkdir(path.resolve(...pages, 'v', 'next'), { recursive: true })
-      await fs.mkdir(path.resolve(...pages, section, 'v', 'next'), { recursive: true })
-      promises.push(
-        fs.writeFile(path.resolve(...pages, `${design}.mjs`), page),
-        fs.writeFile(path.resolve(...pages, section, `${design}.mjs`), page)
-      )
-    }
-  }
-
-  // Write designs file
-  const header =
-    '// This file is auto-generated by the prebuild script | Any changes will be overwritten\n'
-  const nl = '\n'
-  promises.push(
-    fs.writeFile(
-      path.resolve('..', 'lab', 'prebuild', 'designs.mjs'),
-      `${header}export const designs = ${JSON.stringify(Object.keys(designs))}${nl}`
-    ),
-    fs.writeFile(
-      path.resolve('..', 'lab', 'prebuild', 'plugins.mjs'),
-      `${header}export const plugins = ${JSON.stringify(Object.keys(plugins))}${nl}`
-    ),
-    fs.writeFile(
-      path.resolve('..', 'lab', 'prebuild', 'designs-by-type.mjs'),
-      `${header}export const designsByType = ${JSON.stringify(designsByType)}${nl}`
-    )
-  )
-
-  await Promise.all(promises)
+  await prebuildOrg('lab')
 }

sites/shared/prebuild/org.mjs

@@ -6,7 +6,7 @@ import mustache from 'mustache'
 
 const fs = fs_.promises
 
-const header = `/*
+export const header = `/*
  *
  * This page was auto-generated by the prebuild script
  * Any changes you make to it will be lost on the next (pre)build.
@@ -17,6 +17,9 @@ const header = `/*
  *
  */`
 
+const withDocs = `import { DynamicOrgDocs as DynamicDocs } from 'shared/components/dynamic-docs/org.mjs'`
+const withoutDocs = `const DynamicDocs = false`
+
 const loadTemplate = async (name) =>
   await fs.readFile(path.resolve('..', 'shared', 'page-templates', name), 'utf-8')
 
@@ -24,9 +27,9 @@ const loadTemplate = async (name) =>
  * Main method that does what needs doing
  */
 
-export const prebuildOrg = async () => {
+export const prebuildOrg = async (site = 'org') => {
   const promises = []
-  const folder = ['..', 'org', 'pages', 'new', 'pattern']
+  const folder = ['..', site, 'pages', 'new', 'pattern']
   const pages = {
     index: {
       page: await loadTemplate('new-pattern.mjs.mustache'),
@@ -45,14 +48,17 @@ export const prebuildOrg = async () => {
     },
   }
 
+  // Only add docs to org pages
+  const docs = site === 'org' ? withDocs : withoutDocs
+
   for (const design in designs) {
     // Generate new/pattern/design pages
     for (const page in pages) {
+      await fs.mkdir(pages[page].folder(design), { recursive: true })
       promises.push(
-        fs.mkdir(pages[page].folder(design), { recursive: true }),
         fs.writeFile(
           pages[page].file(design),
-          mustache.render(pages[page].page, { design, Design: capitalize(design) })
+          mustache.render(pages[page].page, { docs, design, Design: capitalize(design) })
         )
       )
     }