chore(dev): Changed to prebuild and ReadMore

sites/dev/components/header/index.mjs

@@ -16,6 +16,7 @@ import {
   DocsIcon,
   WrenchIcon,
   FreeSewingIcon,
+  HeartIcon,
 } from 'shared/components/icons.mjs'
 import { Ribbon } from 'shared/components/ribbon.mjs'
 import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs'
@@ -33,6 +34,14 @@ export const ns = ['header', 'sections', ...themeNs]
  * for translators
  * how to work as a team
  * about freesewing
+ *
+ *
+ * designers
+ * contributors
+ * api
+ * translation
+ * infra
+ * content
  * */
 
 const NavIcons = ({ setModal, setSearch }) => {
@@ -45,54 +54,44 @@ const NavIcons = ({ setModal, setSearch }) => {
         <MenuIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
-      <NavButton href="/developers" label="Developers" color={colors[1]}>
-        <CodeIcon className={iconSize} />
-      </NavButton>
-      <NavButton
-        href="/designers"
-        label="Designers"
-        color={colors[2]}
-        extraClasses="hidden lg:flex"
-      >
-        <DesignIcon className={iconSize} />
-      </NavButton>
-      <NavButton href="/writers" label="Writers" color={colors[3]} extraClasses="hidden lg:flex">
+      <NavButton href="/api" label="API Docs" color={colors[1]} extraClasses="hidden lg:flex">
         <DocsIcon className={iconSize} />
       </NavButton>
-      <NavButton
-        href="/translators"
-        label="Translators"
-        color={colors[4]}
-        extraClasses="hidden lg:flex"
-      >
+      <NavButton href="/design" label="Design" color={colors[2]} extraClasses="hidden lg:flex">
+        <DesignIcon className={iconSize} />
+      </NavButton>
+      <NavButton href="/contribute" label="Contribute" color={colors[3]}>
+        <CodeIcon className={iconSize} />
+      </NavButton>
+      <NavButton href="/i18n" label="Translate" color={colors[4]} extraClasses="hidden lg:flex">
         <I18nIcon className={iconSize} />
       </NavButton>
       <NavButton
-        href="/infrastructure"
+        href="/infra"
         label="Infrastrucure"
         color={colors[5]}
         extraClasses="hidden lg:flex"
       >
         <WrenchIcon className={iconSize} stroke={1.5} />
       </NavButton>
-      <NavButton href="/teamwork" label="Teamwork" color={colors[6]} extraClasses="hidden lg:flex">
-        <CommunityIcon className={iconSize} stroke={1.5} />
+      <NavSpacer />
+      <NavButton href="/about" label="About" color={colors[6]}>
+        <FreeSewingIcon className={iconSize} />
+      </NavButton>
+      <NavButton href="/support" label="Support" color={colors[7]}>
+        <HeartIcon className={iconSize} fill />
       </NavButton>
       <NavSpacer />
       <NavButton
         onClick={() => setModal(<ModalThemePicker />)}
         label={t('header:theme')}
-        color={colors[7]}
+        color={colors[8]}
       >
         <ThemeIcon className={iconSize} />
       </NavButton>
-      <NavButton onClick={() => setSearch(true)} label={t('header:search')} color={colors[8]}>
+      <NavButton onClick={() => setSearch(true)} label={t('header:search')} color={colors[9]}>
         <SearchIcon className={iconSize} />
       </NavButton>
-      <NavSpacer />
-      <NavButton href="/about" label="About" color={colors[9]}>
-        <FreeSewingIcon className={iconSize} />
-      </NavButton>
     </>
   )
 }

sites/dev/hooks/use-navigation.mjs

@@ -18,40 +18,46 @@ export const ns = ['account', 'sections', 'design', 'tags']
 const sitePages = () => {
   const pages = {
     // Top-level pages that are the sections menu
-    developers: {
-      t: 'For all Developers',
-      s: 'developers',
+    api: {
+      t: 'API Documentation',
+      s: 'api',
       o: 10,
     },
-    designers: {
-      t: 'For Pattern Designers & Coders',
-      s: 'designers',
+    design: {
+      t: 'Design Sewing Patterns',
+      s: 'design',
+      o: 10,
+    },
+    contribute: {
+      t: 'Contribute to FreeSewing',
+      s: 'contribute',
       o: 20,
     },
-    writers: {
-      t: 'For Writers',
-      s: 'writers',
-      o: 30,
-    },
-    translators: {
-      t: 'For Translators',
-      s: 'translators',
+    i18n: {
+      t: 'Help Translate FreeSewing',
+      s: 'i18n',
       o: 40,
     },
-    infrastructure: {
+    infra: {
       t: 'FreeSewing Infrastructure',
-      s: 'infrastructure',
+      s: 'infra',
       o: 50,
     },
-    teamwork: {
-      t: 'Open Source & Teamwork',
-      s: 'teamwork',
-      o: 60,
-    },
     about: {
       t: 'About FreeSewing',
       s: 'about',
-      o: 99,
+      o: 60,
+    },
+    support: {
+      t: 'Support FreeSewing',
+      s: 'support',
+      o: 70,
+    },
+    sitemap: {
+      t: 'Sitemap',
+      s: 'sitemap',
+      o: 70,
+      h: 1,
     },
   }
   return pages
@@ -78,7 +84,8 @@ const createSections = (nav) => {
   return orderBy(sections, ['o', 't'])
 }
 
-export const useNavigation = ({ path, locale = 'en' }) => {
+export const useNavigation = (params = {}) => {
+  const { path = [], locale = 'en' } = params
   const nav = { ...pbn[locale], ...sitePages() }
   // Hide top-level documentation entries
   for (const page of ['tutorials', 'guides', 'howtos', 'reference', 'training']) {
@@ -95,5 +102,6 @@ export const useNavigation = ({ path, locale = 'en' }) => {
     slug: path.join('/'),
     nav: path.length > 1 ? get(nav, path[0]) : path.length === 0 ? sections : nav[path[0]],
     title: crumbs.length > 0 ? crumbs.slice(-1)[0].t : '',
+    siteNav: nav,
   }
 }

sites/dev/package.json

@@ -16,7 +16,8 @@
   "scripts": {
     "build": "next build",
     "cibuild": "yarn build && node scripts/algolia.mjs",
-    "clean": "rimraf prebuild/* && rimraf public/locales/*/* && rimraf public/feeds/*",
+    "clean": "rimraf prebuild/* && rimraf public/locales/*/* && rimraf public/feeds/* && rimraf ../shared/prebuild/data/*",
+    "predev": "FAST=1 SITE=dev node --experimental-json-modules ../shared/prebuild/index.mjs",
     "dev": "next dev -p 8000",
     "develop": "next dev -p 8000",
     "i18n": "SITE=dev node ../shared/prebuild/i18n-only.mjs",

sites/dev/pages/[...slug].mjs

@@ -28,7 +28,7 @@ const DocsPage = ({ page, slug }) => {
       import(`../../../markdown/dev/${slug}/en.md`).then((mod) => {
         setFrontmatter(mod.frontmatter)
         const Component = mod.default
-        setMDX(<Component components={components} />)
+        setMDX(<Component components={components('dev')} />)
       })
     }
     loadMDX()

sites/shared/components/mdx/index.mjs

@@ -10,34 +10,44 @@ import { ControlTip } from '../control/tip.mjs'
 import { Legend } from './legend.mjs'
 import { V3Wip } from '../v3-wip.mjs'
 
-export const components = {
-  // Custom components
-  Method: HttpMethod,
-  StatusCode: HttpStatusCode,
-  Comment: (props) => <Popout {...props} comment />,
-  Fixme: (props) => <Popout {...props} fixme />,
-  Link: (props) => <Popout {...props} link />,
-  Note: (props) => <Popout {...props} note />,
-  ReadMore,
-  Related: (props) => <Popout {...props} related />,
-  Tip: (props) => <Popout {...props} tip />,
-  Warning: (props) => <Popout {...props} warning />,
-  YouTube,
-  pre: (props) => <Highlight {...props} />,
-  // This Figure component causes hydration errors
-  //img: Figure,
-  table: (props) => (
-    <table {...props} className="mdx-table table-auto w-full">
-      {props.children}
-    </table>
-  ),
-  Tab,
-  Tabs,
-  ControlTip,
-  Example,
-  PatternDocs: V3Wip,
-  PatternOptions: V3Wip,
-  PatternMeasurements: V3Wip,
-  Gauge: V3Wip,
-  Legend,
+export const components = (site = 'org') => {
+  const base = {
+    // Custom components
+    Comment: (props) => <Popout {...props} comment />,
+    Fixme: (props) => <Popout {...props} fixme />,
+    Link: (props) => <Popout {...props} link />,
+    Note: (props) => <Popout {...props} note />,
+    ReadMore: (props) => <ReadMore {...props} site={site} />,
+    Related: (props) => <Popout {...props} related />,
+    Tip: (props) => <Popout {...props} tip />,
+    Warning: (props) => <Popout {...props} warning />,
+    YouTube,
+    pre: (props) => <Highlight {...props} />,
+    // This Figure component causes hydration errors
+    //img: Figure,
+    table: (props) => (
+      <table {...props} className="mdx-table table-auto w-full">
+        {props.children}
+      </table>
+    ),
+    Tab,
+    Tabs,
+    ControlTip,
+    Example,
+  }
+
+  return site === 'dev'
+    ? {
+        ...base,
+        Method: HttpMethod,
+        StatusCode: HttpStatusCode,
+      }
+    : {
+        ...base,
+        PatternDocs: V3Wip,
+        PatternOptions: V3Wip,
+        PatternMeasurements: V3Wip,
+        Gauge: V3Wip,
+        Legend,
+      }
 }

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

@@ -3,29 +3,67 @@ import orderBy from 'lodash.orderby'
 import Link from 'next/link'
 import { useContext } from 'react'
 import { NavigationContext } from 'shared/context/navigation-context.mjs'
+import { useNavigation } from 'site/hooks/use-navigation.mjs'
+
+const baseClasses =
+  'text-base-content no-underline inline-block hover:text-secondary hover:underline'
+const classes = [
+  `text-3xl font-bold py-2 ${baseClasses} list-disc`,
+  `text-2xl font-bold py-1 ${baseClasses}`,
+  `text-xl font-medium ${baseClasses}`,
+  `text-lg font-medium ${baseClasses}`,
+]
+
+const getClasses = (level) => classes[level] || `text-normal font-regular ${baseClasses}`
 
 // 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 }) => {
+const getRoot = {
+  dev: (slug, nav) => {
+    if (!slug || slug === 'docs') return nav
+    if (slug.indexOf('/') === -1) return nav[slug]
+    return get(nav, slug.split('/'))
+  },
+  org: (slug, nav) => {
+    // Fixme: make this work for org
+    if (!slug || slug === 'docs') return nav
+    if (slug.indexOf('/') === -1) return nav[slug]
+    return get(nav, slug.split('/'))
+  },
+}
+
+export const ReadMore = ({
+  app,
+  recurse = 0,
+  root = false,
+  site = 'org',
+  level = 0,
+  pretty = false,
+}) => {
   const { nav, slug } = useContext(NavigationContext)
+  const { siteNav } = useNavigation()
 
   // Deal with recurse not being a number
-  if (recurse) {
+  if (recurse && recurse !== true) {
     if (typeof recurse === 'number') recurse--
     else recurse = 1
   }
 
-  const root = slug && slug !== 'docs' ? get(nav, slug.split('/').slice(1)) : nav
+  // Deal with root being passed as true
+  if (root === true) root = ''
 
+  const tree = getRoot[site](root, siteNav)
   const list = []
-  for (const page of currentChildren(root)) {
+  for (const page of currentChildren(tree)) {
     list.push(
       <li key={page.s}>
-        <Link href={`/${page.s}`}>{page.t}</Link>
-        {recurse > 0 ? <ReadMore app={app} slug={page.s} recurse={recurse} /> : null}
+        <Link href={`/${page.s}`}>
+          <span className={getClasses(level)}>{page.t}</span>
+        </Link>
+        {recurse ? <ReadMore root={page.s} recurse={recurse} level={level + 1} /> : null}
       </li>
     )
   }

sites/shared/components/navigation/primary.mjs

@@ -17,6 +17,7 @@ import {
   I18nIcon,
   WrenchIcon,
   FreeSewingIcon,
+  HeartIcon,
 } from 'shared/components/icons.mjs'
 import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs'
 
@@ -25,13 +26,13 @@ export const ns = ['sections']
 // List of icons matched to top-level slug
 export const icons = {
   // FreeSewing.dev
-  developers: (className = '') => <CodeIcon className={className} />,
-  designers: (className = '') => <DesignIcon className={className} />,
-  writers: (className = '') => <DocsIcon className={className} />,
-  translators: (className = '') => <I18nIcon className={className} />,
-  infrastructure: (className = '') => <WrenchIcon className={className} stroke={1.5} />,
-  teamwork: (className = '') => <CommunityIcon className={className} stroke={1.5} />,
+  api: (className = '') => <DocsIcon className={className} />,
+  design: (className = '') => <DesignIcon className={className} />,
+  contribute: (className = '') => <CodeIcon className={className} />,
+  i18n: (className = '') => <I18nIcon className={className} />,
+  infra: (className = '') => <WrenchIcon className={className} stroke={1.5} />,
   about: (className = '') => <FreeSewingIcon className={className} stroke={1.5} />,
+  support: (className = '') => <HeartIcon className={className} stroke={1.5} fill />,
 
   // FreeSewing.org
   account: (className = '') => <UserIcon className={className} />,

sites/shared/prebuild/index.mjs

@@ -10,15 +10,15 @@ import { prebuildDesigns } from './designs.mjs'
 import { generateOgImage } from './og/index.mjs'
 
 const run = async () => {
-  const linter = process.env.LINTER ? true : false
-  if (linter) return true
+  if (process.env.LINTER) return true
+  const FAST = process.env.FAST ? true : false
   const SITE = process.env.SITE || 'lab'
-  prebuildDesigns()
+  if (!FAST) prebuildDesigns()
   if (['org', 'dev'].includes(SITE)) {
-    await prebuildGitData(SITE)
+    if (!FAST) await prebuildGitData(SITE)
     const docPages = await prebuildDocs(SITE)
     prebuildNavigation(docPages, false, SITE)
-    if (process.env.GENERATE_OG_IMAGES) {
+    if (!FAST && process.env.GENERATE_OG_IMAGES) {
       // Create og image for the home page
       await generateOgImage({
         lang: 'en',
@@ -42,8 +42,10 @@ const run = async () => {
   if (SITE === 'org') await prebuildOrg()
 
   await prebuildI18n(SITE)
-  await prebuildContributors(SITE)
-  await prebuildPatrons(SITE)
+  if (!FAST) {
+    await prebuildContributors(SITE)
+    await prebuildPatrons(SITE)
+  }
   console.log()
 }