feat(shared): Moved breadcrumbs to shared component

packages/freesewing.org/components/layouts/bare.js

@@ -1,66 +1,14 @@
-import React from 'react'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
-// Shared components
-import Logo from 'shared/components/logos/freesewing.js'
 import Aside from 'shared/components/navigation/aside'
-import get from 'lodash.get'
 import ThemePicker from 'shared/components/theme-picker'
 
-const PageTitle = ({ app, slug, title }) => {
-  if (title) return <h1>{title}</h1>
-  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
-
-  return <h1>FIXME: This page has no title</h1>
-}
-
-const Breadcrumbs = ({ app, slug=false, title }) => {
-  if (!slug) return null
-  const crumbs = []
-  const chunks = slug.split('/')
-  for (const i in chunks) {
-    const j = parseInt(i)+parseInt(1)
-    const page = get(app.navigation, chunks.slice(0,j))
-    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
-  }
-
-  return (
-    <ul className="flex flex-row flex-wrap gap-2 font-bold">
-      <li>
-        <Link href="/">
-          <a title="To the homepage" className="text-base-content">
-            <Logo size={24} fill="currentColor" stroke={false}/>
-          </a>
-        </Link>
-      </li>
-      {crumbs.map(crumb => (
-        <React.Fragment key={crumb[1]}>
-          <li className="text-base-content">&raquo;</li>
-          <li>
-            {crumb[2]
-              ?  (
-                <Link href={crumb[1]}>
-                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
-                    {crumb[0]}
-                  </a>
-                </Link>
-              )
-              : <span className="text-base-content">{crumb[0]}</span>
-            }
-          </li>
-        </React.Fragment>
-      ))}
-    </ul>
-  )
-}
-
 const DefaultLayout = ({ app, title=false, children=[] }) => {
   const router = useRouter()
   const slug = router.asPath.slice(1)
 
   return (
     <>
-      <Aside app={app} slug={slug} before={<ThemePicker app={app} />} mobileOnly/>
+      <Aside app={app} slug={slug} before={<ThemePicker app={app} />} mobileOnly />
       {children}
     </>
   )

packages/freesewing.org/components/layouts/docs.js

@@ -1,62 +1,17 @@
-import React from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 // Shared components
-import Logo from 'shared/components/logos/freesewing.js'
 import Aside from 'shared/components/navigation/aside'
-import get from 'lodash.get'
 import ThemePicker from 'shared/components/theme-picker'
+import Breadcrumbs from 'shared/components/breadcrumbs.js'
+import { getCrumbs } from 'shared/utils.js'
 
-const PageTitle = ({ app, slug, title }) => {
+const DefaultLayout = ({ app, title=false, crumbs=false, children=[] }) => {
-  if (title) return <h1>{title}</h1>
-  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
-
-  return <h1>FIXME: This page has no title</h1>
-}
-
-const Breadcrumbs = ({ app, slug=false, title }) => {
-  if (!slug) return null
-  const crumbs = []
-  const chunks = slug.split('/')
-  for (const i in chunks) {
-    const j = parseInt(i)+parseInt(1)
-    const page = get(app.navigation, chunks.slice(0,j))
-    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
-  }
-
-  return (
-    <ul className="flex flex-row flex-wrap gap-2 font-bold">
-      <li>
-        <Link href="/">
-          <a title="To the homepage" className="text-base-content">
-            <Logo size={24} fill="currentColor" stroke={false}/>
-          </a>
-        </Link>
-      </li>
-      {crumbs.map(crumb => (
-        <React.Fragment key={crumb[1]}>
-          <li className="text-base-content">&raquo;</li>
-          <li>
-            {crumb[2]
-              ?  (
-                <Link href={crumb[1]}>
-                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
-                    {crumb[0]}
-                  </a>
-                </Link>
-              )
-              : <span className="text-base-content">{crumb[0]}</span>
-            }
-          </li>
-        </React.Fragment>
-      ))}
-    </ul>
-  )
-}
-
-const DefaultLayout = ({ app, title=false, children=[] }) => {
   const router = useRouter()
   const slug = router.asPath.slice(1)
+  const breadcrumbs = crumbs
+    ? crumbs
+    : getCrumbs(app, slug, title)
 
   return (
     <div className="m-auto flex flex-row justify-center">
@@ -65,8 +20,11 @@ const DefaultLayout = ({ app, title=false, children=[] }) => {
         <div>
           {title && (
             <div className="px-8 xl:pl-8 2xl:pl-16">
-              <Breadcrumbs app={app} slug={slug} title={title} />
+              <Breadcrumbs title={title} crumbs={breadcrumbs} />
-              <PageTitle app={app} slug={slug} title={title} />
+              {title
+                ? <h1>{title}</h1>
+                : <h1>{app.getTitle(slug)}</h1>
+              }
             </div>
           )}
           {children}

packages/freesewing.org/components/wrappers/layout.js

@@ -1,65 +1,9 @@
-import React from 'react'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
-// Shared components
-import Logo from 'shared/components/logos/freesewing.js'
-import PrimaryNavigation from 'shared/components/navigation/primary'
-import get from 'lodash.get'
-import Right from 'shared/components/icons/right.js'
-import Left from 'shared/components/icons/left.js'
-// Site components
 import Header from 'site/components/header'
 import Footer from 'site/components/footer'
 import Search from 'site/components/search'
 
-const PageTitle = ({ app, slug, title }) => {
-  if (title) return <h1>{title}</h1>
-  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
-
-  return <h1>FIXME: This page has no title</h1>
-}
-
-const Breadcrumbs = ({ app, slug=false, title }) => {
-  if (!slug) return null
-  const crumbs = []
-  const chunks = slug.split('/')
-  for (const i in chunks) {
-    const j = parseInt(i)+parseInt(1)
-    const page = get(app.navigation, chunks.slice(0,j))
-    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
-  }
-
-  return (
-    <ul className="flex flex-row flex-wrap gap-2 font-bold">
-      <li>
-        <Link href="/">
-          <a title="To the homepage" className="text-base-content">
-            <Logo size={24} fill="currentColor" stroke={false}/>
-          </a>
-        </Link>
-      </li>
-      {crumbs.map(crumb => (
-        <React.Fragment key={crumb[1]}>
-          <li className="text-base-content">&raquo;</li>
-          <li>
-            {crumb[2]
-              ?  (
-                <Link href={crumb[1]}>
-                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
-                    {crumb[0]}
-                  </a>
-                </Link>
-              )
-              : <span className="text-base-content">{crumb[0]}</span>
-            }
-          </li>
-        </React.Fragment>
-      ))}
-    </ul>
-  )
-}
-
 const LayoutWrapper = ({
   app,
   title=false,

packages/freesewing.org/hooks/useApp.js

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import get from 'lodash.get'
 import set from 'lodash.set'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
@@ -97,6 +98,16 @@ function useApp(full = true) {
     setNavigation(set(navigation, path, content))
   }
 
+  /*
+   * Helper method to get title from navigation structure
+   */
+  const getTitle = slug => get(navigation, slug).__title
+
+  /*
+   * Helper method to construct breadcrumb from navigation structure
+   */
+  const getBreadcrumb = slug => ({ title: get(navigation, slug).__title, slug })
+
   return {
     // Static vars
     site: 'org',
@@ -123,6 +134,10 @@ function useApp(full = true) {
 
     // State handlers
     togglePrimaryMenu,
+
+    // Navigation
+    getTitle,
+    getBreadcrumb,
   }
 }
 

packages/freesewing.shared/components/breadcrumbs.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from 'next/link'
+import Logo from 'shared/components/logos/freesewing.js'
+
+const Breadcrumbs = ({ crumbs=[], title }) => (
+  <ul className="flex flex-row flex-wrap gap-2 font-bold">
+    <li>
+      <Link href="/">
+        <a title="FreeSewing" className="text-base-content">
+          <Logo size={24} fill="currentColor" stroke={false}/>
+        </a>
+      </Link>
+    </li>
+    {crumbs.map(crumb => (
+      <React.Fragment key={crumb[1]}>
+        <li className="text-base-content px-2">&raquo;</li>
+        <li>
+          {crumb[2]
+            ?  (
+              <Link href={crumb[1]}>
+                <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                  {crumb[0]}
+                </a>
+              </Link>
+            )
+            : <span className="text-base-content">{crumb[0]}</span>
+          }
+        </li>
+      </React.Fragment>
+    ))}
+  </ul>
+)
+
+export default Breadcrumbs

packages/freesewing.shared/utils.js

@@ -1,3 +1,5 @@
+import get from 'lodash.get'
+
 // Generic rounding method
 export const round = (val, decimals=1) => Math.round(val*Math.pow(10, decimals))/Math.pow(10, decimals)
 
@@ -106,3 +108,17 @@ export const strapiImage = (img, sizes=['thumbnail', 'xlarge', 'large', 'medium'
 
   return image
 }
+
+export const getCrumbs = (app, slug=false, title) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return crumbs
+}
+