use single source of truth for navigation

packages/freesewing.lab/components/pattern-picker.js

@@ -20,7 +20,7 @@ const PatternPicker = ({ app }) => {
           <span>{t('designs')}</span>
         </div>
         <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
-          {Object.keys(app.patterns).map(section => (
+          {Object.keys(app.navigation).map(section => (
             <React.Fragment key={section}>
               <li className={`
                 capitalize font-bold text-base-content text-center
@@ -28,17 +28,18 @@ const PatternPicker = ({ app }) => {
               `}>
                   {t(app.navigation[section].__title)}
               </li>
-              {app.patterns[section].map(pattern => (
+              {Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => {
+                return (
                 <li key={pattern}>
-                  <Link href={formatVersionUri(version, pattern)}>
+                  <Link href={app.navigation[section][pattern].__slug}>
                     <button className="btn btn-ghost">
                       <span className="text-base-content">
-                        {pattern}
+                        {app.navigation[section][pattern].__title}
                       </span>
                     </button>
                   </Link>
                 </li>
-              ))}
+              )})}
             </React.Fragment>
           ))}
         </ul>

packages/freesewing.lab/hooks/useApp.js

@@ -6,6 +6,7 @@ import patterns from 'shared/config/designs.json'
 // Locale and translation
 import { useTranslation } from 'next-i18next'
 import { capitalize } from 'shared/utils'
+import { formatVersionUri } from '../components/version-picker.js'
 import useVersion from 'site/hooks/useVersion.js'
 
 // Initial navigation
@@ -42,7 +43,7 @@ const initialNavigation = (t, version) => {
         __title: capitalize(design),
         __order: design,
         __linktitle: capitalize(design),
-        __slug: `v/${version}/${design}`
+        __slug: formatVersionUri(version,design)
       }
     }
   }

packages/freesewing.lab/page-templates/pattern-list.js

@@ -20,17 +20,17 @@ const links = (section, list, version) => list.map(design => (
   </li>
 ))
 
-const icons = {
+export const default_icons = {
   accessories: (className='') => <TutorialIcon className={className}/>,
   blocks: (className='') => <BoxIcon className={className}/>,
   garments: (className='') => <DesignIcon className={className}/>,
   utilities: (className='') => <CogIcon className={className}/>,
 }
 
-const Section = ({ section, version, patterns }) => {
+const Section = ({ section, version, patterns, icons }) => {
   const { t } = useTranslation(['patterns'])
   return patterns.map(design => (
-    <Link href={formatVersionUri(version, design)}>
+    <Link href={design.__slug} key={design.__order}>
       <a className={`
         text-secondary border rounded-lg
         flex flex-col gap-1 px-4 py-2 grow justify-between text-2xl
@@ -43,17 +43,17 @@ const Section = ({ section, version, patterns }) => {
       `}>
         <div className="flex flex-row items-center justify-items-start w-full">
           <span className="text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-bold grow capitalize">
-            {t(`patterns:${design}.t`)}
+            {design.__title}
           </span>
-          {icons[section]("w-12 h-12 md:h-20 md:w-20 xl:w-32 xl:h-32 shrink-0")}
+          {icons[section] && icons[section]("w-12 h-12 md:h-20 md:w-20 xl:w-32 xl:h-32 shrink-0")}
         </div>
-          <span className="text-xl md:text-2xl xl:text-3xl pb-2 xl:pb-4 2xl:text-4xl">{t(`patterns:${design}.d`)}</span>
+          <span className="text-xl md:text-2xl xl:text-3xl pb-2 xl:pb-4 2xl:text-4xl">{t(`patterns:${design.__order}.d`)}</span>
       </a>
     </Link>
   ))
 }
 
-const PatternListPageTemplate = ({ section=false, version=false }) => {
+const PatternListPageTemplate = ({ section=false, version=false, icons=default_icons }) => {
   const app = useApp()
   const { t } = useTranslation(['app'])
 
@@ -61,6 +61,8 @@ const PatternListPageTemplate = ({ section=false, version=false }) => {
     ? app.navigation[section].__title
     : t('designs')
 
+  const sectionPatterns = section ? Object.values(app.navigation[section]).filter((o)=> typeof o == 'object') : [];
+
   return (
     <Page app={app} title={`FreeSewing Lab: ${formatVersionTitle(version)}`} layout={Layout}>
       <Head>
@@ -78,18 +80,18 @@ const PatternListPageTemplate = ({ section=false, version=false }) => {
       </Head>
       <div className="max-w-7xl m-auto py-20 md:py-36 min-h-screen">
         <section className="px-8">
-          <PageTitle app={app} slug={'/'+section} title={title} />
+          <PageTitle app={app} slug={section ? app.navigation[section].__slug : '/' } title={title} />
-            {section
+            { section
               ? (
                 <div className="flex flex-row flex-wrap gap-4 items-center justify-center my-8">
-                  <Section section={section} version={version} patterns={app.patterns[section]} />
+                  <Section section={section} version={version} patterns={sectionPatterns} icons={icons} />
                 </div>
               )
               : Object.keys(app.patterns).map(section => (
                 <div key={section} className="mb-12">
                   <h2 className="pb-0">{app.navigation[section].__title}</h2>
                   <div className="flex flex-row flex-wrap gap-4 items-center justify-center my-8">
-                    <Section {...{section, version}} patterns={app.patterns[section]} />
+                    <Section {...{section, version, icons}} patterns={sectionPatterns} />
                   </div>
                 </div>
               ))

packages/freesewing.shared/components/navigation/primary.js

@@ -8,12 +8,9 @@ import DocsIcon from 'shared/components/icons/docs.js'
 import DesignIcon from 'shared/components/icons/design.js'
 import BoxIcon from 'shared/components/icons/box.js'
 import CogIcon from 'shared/components/icons/cog.js'
-import UserIcon from 'shared/components/icons/user.js'
-import CommunityIcon from 'shared/components/icons/community.js'
-import ShowcaseIcon from 'shared/components/icons/camera.js'
 
 // Don't show children for blog and showcase posts
-const keepClosed = ['blog', 'showcase' ]
+const keepClosed = ['blog', 'showcase', ]
 
 // TODO: For now we force tailwind to pickup these styles
 // At some point this should 'just work' though, but let's not worry about it now
@@ -24,19 +21,14 @@ const force = [
 
 // List of icons matched to top-level slug
 const icons = {
-  accessories: (className='') => <TutorialIcon className={className}/>,
-  account: (className='') => <UserIcon className={className}/>,
-  blocks: (className='') => <BoxIcon className={className}/>,
   blog: (className='') => <RssIcon className={className}/>,
-  community: (className='') => <CommunityIcon className={className}/>,
+  tutorials: (className='') => <TutorialIcon className={className}/>,
-  designs: (className='') => <DesignIcon className={className}/>,
-  docs: (className='') => <DocsIcon className={className}/>,
-  garments: (className='') => <DesignIcon className={className}/>,
   guides: (className='') => <GuideIcon className={className}/>,
   howtos: (className='') => <HelpIcon className={className}/>,
   reference: (className='') => <DocsIcon className={className}/>,
-  showcase: (className='') => <ShowcaseIcon className={className}/>,
+  accessories: (className='') => <TutorialIcon className={className}/>,
-  tutorials: (className='') => <TutorialIcon className={className}/>,
+  blocks: (className='') => <BoxIcon className={className}/>,
+  garments: (className='') => <DesignIcon className={className}/>,
   utilities: (className='') => <CogIcon className={className}/>,
 }
 
@@ -94,7 +86,7 @@ const SubLevel = ({ nodes={}, active }) => (
               hover:cursor-row-resize
               items-center
             `}>
-              <Link href={`/${child.__slug}`}>
+              <Link href={`${child.__slug}`}>
                 <a title={child.__title} className={`
                   grow pl-2 border-l-2
                   ${linkClasses}
@@ -127,7 +119,7 @@ const SubLevel = ({ nodes={}, active }) => (
         </li>
       ) : (
         <li className='pl-2 flex flex-row items-center' key={child.__slug}>
-          <Link href={`/${child.__slug}`} title={child.__title}>
+          <Link href={`${child.__slug}`} title={child.__title}>
             <a className={`
               pl-2 border-l-2
               grow
@@ -172,7 +164,7 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
       items-center
     `}>
       <span className="text-secondary">{icon}</span>
-      <Link href={`/${slug}`}>
+      <Link href={`${slug}`}>
         <a className={`
           grow ${linkClasses} hover:cursor-pointer
           ${slug === active
@@ -215,16 +207,15 @@ export const Icons = ({
   liClasses='',
   linkClasses=`grow text-lg lg:text-xl py-1 text-base-content sm:text-base-content
   hover:text-secondary sm:hover:text-secondary hover:cursor-pointer
-  flex flex-col items-center`,
+  flex flex-col items-center`
-  linkStyle={}
 }) => {
   if (!app.navigation) return null
   const output = []
   for (const page of order(app.navigation)) {
     output.push(
       <li key={page.__slug} className={liClasses}>
-        <Link href={`/${page.__slug}`}>
+        <Link href={`${page.__slug}`}>
-          <a className={linkClasses} title={page.__title} style={linkStyle}>
+          <a className={linkClasses} title={page.__title}>
             {icons[page.__slug]
               ? icons[page.__slug]('w-14 h-14')
               : <HelpIcon />