fix(fs.dev): Prevent navigation from overwriting keys

packages/freesewing.dev/hooks/useApp.js

@@ -1,6 +1,10 @@
 import { useState } from 'react'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
+// Translation
+import { en } from '@freesewing/i18n'
+// Prebuild navigation
+import prebuildNavigation from 'site/prebuild/navigation.js'
 
 function useApp(full = true) {
 
@@ -9,37 +13,62 @@ function useApp(full = true) {
     ? window.matchMedia(`(prefers-color-scheme: dark`).matches
     : null
 
-  // React State
-  const [primaryMenu, setPrimaryMenu] = useState(false)
-
   // Persistent state
   const [account, setAccount] = useLocalStorage('account', { username: false })
   const [theme, setTheme] = useLocalStorage('theme', prefersDarkMode ? 'dark' : 'light')
   const [language, setLanguage] = useLocalStorage('language', 'en')
 
+  // React State
+  const [primaryMenu, setPrimaryMenu] = useState(false)
+  const [navigation, setNavigation] = useState(prebuildNavigation[language])
+
 
   // State methods
   const togglePrimaryMenu = () => setPrimaryMenu(!primaryMenu)
   const openPrimaryMenu = () => setPrimaryMenu(true)
   const closePrimaryMenu = () => setPrimaryMenu(false)
 
+  /*
+   * Translation method
+   *
+   * Note that freesewing.dev is only available in English
+   * however we use certain shared code/components between
+   * freesewing.dev and freesewing.org, so we still need
+   * a translation method
+   */
+  const t = (key=false, vals=false) => {
+    if (!key) return ''
+    if (!en.strings[key]) return key
+    let val = en.strings[key]
+    if (vals) {
+      for (const [search, replace] of Object.entries(vals)) {
+        val = val.replace(/search/g, replace)
+      }
+    }
+
+    return val
+  }
+
 
   return {
     // Static vars
     site: 'dev',
 
     // State
+    language,
+    navigation,
     primaryMenu,
     theme,
-    language,
 
     // State setters
+    setLanguage,
+    setNavigation,
     setPrimaryMenu,
     setTheme,
-    setLanguage,
 
     // State handlers
     togglePrimaryMenu,
+
   }
 
 }

packages/freesewing.dev/pages/index.js

@@ -6,6 +6,7 @@ export default (props) => {
   const app = useApp()
   return (
     <Page app={app} title='This is not a homepage'>
+      <pre>{JSON.stringify(Object.keys(app.navigation.reference), null, 2)}</pre>
       <p className='px-8'>
         <button
           className='btn btn-primary'

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

@@ -1,6 +1,5 @@
 import get from 'lodash.get'
 import Icon from 'shared/components/icon/index.js'
-import nav from 'site/prebuild/navigation.js'
 import Link from 'next/link'
 import orderBy from 'lodash.orderby'
 import Logo from '@freesewing/components/Logo'
@@ -171,33 +170,34 @@ const TopTheme = ({ app }) => (
 
 // TODO: Get rid of this when markdown has been restructured
 const remove = ['contributors', 'developers', 'editors', 'translators']
-const Navigation = ({ nav, app }) => {
+const Navigation = ({ app }) => {
+  if (!app.navigation) return null
   const output = []
-  for (const key of Object.keys(nav[app.language]).sort()) {
+  for (const key of Object.keys(app.navigation).sort()) {
     if (hide.indexOf(key) === -1) output.push(<TopLevel
       icon={<Icon icon={key}/>}
       title={key}
       slug={key}
       key={key}
       showChildren={keepClosed.indexOf(key) === -1}
-      nav={nav[app.language]}
-      current={orderBy(nav[app.language][key], ['order', 'title'], ['asc', 'asc'])}
+      nav={app.navigation}
+      current={orderBy(app.navigation[key], ['order', 'title'], ['asc', 'asc'])}
     />)
   }
 
   return output
 }
 
-const PrimaryMenu = props => {
+const PrimaryMenu = ({ app }) => {
 
   return (
     <nav className={`
       sm:max-w-sm
       grow
     `}>
-      <TopLogo app={props.app}/>
-      <Navigation nav={nav} app={props.app}/>
-      <TopTheme app={props.app}/>
+      <TopLogo app={app}/>
+      <Navigation app={app}/>
+      <TopTheme app={app}/>
     </nav>
   )
 }

packages/freesewing.shared/components/popout.js

@@ -1,5 +1,4 @@
 import Icon from "shared/components/icon"
-import { translator } from 'shared/lib/i18n'
 
 const colors = {
   note: 'accent',
@@ -12,7 +11,6 @@ const colors = {
 }
 
 const Popout = (props) => {
-  const t = translator(props.t)
   let type = 'none'
   for (const t in colors) {
     if (props[t]) type = t
@@ -24,7 +22,7 @@ const Popout = (props) => {
       <div className={`
         border-l-4 px-8 py-2 prose lg:prose-lg bg-opacity-5 shadow border-${color} bg-${color}`}>
         <div className={`font-bold opacity-50 uppercase`}>
-          {t(type)}
+          {type}
         </div>
         <div className="py-1 first:mt-0 popout-content">{props.children}</div>
       </div>

packages/freesewing.shared/lib/i18n.js

@@ -1 +0,0 @@
-export const translator = function(t) { return t ? t : (x) => x }

packages/freesewing.shared/prebuild/mdx.mjs

@@ -64,8 +64,8 @@ const mdxMetaInfo = async file => {
   let result
   try {
     result = await unified()
-      .use(remarkMdx)
-      .use(remarkIntroPlugin)
+//      .use(remarkMdx)
+//      .use(remarkIntroPlugin)
       .use(remarkParser)
       .use(remarkCompiler)
       .use(remarkFrontmatter)

packages/freesewing.shared/prebuild/navigation.mjs

@@ -16,18 +16,15 @@ export const prebuildNavigation = (mdxPages, strapiPosts, site) => {
     nav[lang] = {}
 
     // Handle MDX content
-    for (const [slug, page] of Object.entries(mdxPages[lang])) {
+    for (const slug of Object.keys(mdxPages[lang]).sort()) {
+      const page = mdxPages[lang][slug]
       const chunks = slug.split('/')
       set(nav, [lang, ...chunks], {
         __title: page.title,
         __linktitle: page.linktitle || page.title,
         __slug: slug,
         __order: page.order,
-        //__children: {}
       })
-      //const children = get(nav, [lang, ...chunks.slice(0, -1), '_children'], {})
-      //children[page.order || slug] = slug
-      //set(nav, [lang, ...chunks.slice(0, -1), '_children'], children)
     }
 
     // Handle strapi content
@@ -37,7 +34,6 @@ export const prebuildNavigation = (mdxPages, strapiPosts, site) => {
         __linktitle: type,
         __slug: type,
         __order: type,
-        //__children: {}
       })
       for (const [slug, page] of Object.entries(strapiPosts[lang][type])) {
         const chunks = slug.split('/')
@@ -46,11 +42,7 @@ export const prebuildNavigation = (mdxPages, strapiPosts, site) => {
           __linktitle: page.linktitle,
           __slug: type + '/' + slug,
           __order: (future - new Date(page.date).getTime()) / 100000,
-          //__children: {}
         })
-        //const children = get(nav, [lang, type, '_children'], {})
-        //children[page.date+slug] = slug
-        //set(nav, [lang, type, '_children'], children)
       }
     }
   }

packages/i18n/src/index.js

@@ -19,4 +19,14 @@ for (let l of languageCodes) {
   languages[l] = strings[l]['i18n.' + l]
 }
 
-export { strings, languages, plugin, jargon }
+export {
+  strings,
+  languages,
+  plugin,
+  jargon,
+  en,
+  de,
+  es,
+  fr,
+  nl
+}