chore(freesewing.dev): Layout composition changes

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

@@ -0,0 +1,66 @@
+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'
+
+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} mobileOnly />,
+    children
+  ]
+}
+
+export default DefaultLayout

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

@@ -1,17 +1,10 @@
 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 Aside from 'shared/components/navigation/aside'
 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>
@@ -60,89 +53,24 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
   )
 }
 
-const DefaultLayout = ({
+const DefaultLayout = ({ app, title=false, children=[] }) => {
-  app,
-  title=false,
-  children=[],
-  search,
-  setSearch,
-  noSearch=false,
-  workbench=false,
-  AltMenu=null,
-}) => {
-  const startNavigation = () => {
-    app.startLoading()
-    // Force close of menu on mobile if it is open
-    if (app.primaryNavigation) app.setPrimaryNavigation(false)
-    // Force close of search modal if it is open
-    if (search) setSearch(false)
-  }
-
   const router = useRouter()
-  router.events?.on('routeChangeStart', startNavigation)
-  router.events?.on('routeChangeComplete', () => app.stopLoading())
   const slug = router.asPath.slice(1)
-  const [collapsePrimaryNav, setCollapsePrimaryNav] = useState(workbench || false)
-  const [collapseAltMenu, setCollapseAltMenu] = useState(false)
 
   return (
-    <div className={`
+    <div className="m-auto flex flex-row justify-center">
-    flex flex-col justify-between
+      <Aside app={app} slug={slug} />
-    min-h-screen
+      <section className="py-28 md:py-36 max-w-2/3">
-    bg-base-100
+        <div>
-    `}>
+          {title && (
-      <Header app={app} setSearch={setSearch} />
+            <div className="px-8 xl:pl-8 2xl:pl-16">
-      <main className="grow">
+              <Breadcrumbs app={app} slug={slug} title={title} />
-        <div className="m-auto flex flex-row justify-center">
+              <PageTitle app={app} slug={slug} title={title} />
-
-          <aside className={`
-            fixed top-0 right-0 h-screen w-screen
-            overflow-y-auto z-20
-            bg-base-100 text-base-content md:bg-base-50
-            transition-all
-            ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
-            md:flex md:sticky md:flex-row-reverse
-            md:relative md:transform-none
-            px-8 py-24
-
-            md:w-40
-            lg:w-1/2 lg:min-w-80 lg:pr-2 lg:border-r-2
-            xl:w-1/3 xl:min-w-80 xl:pr-2 xl:border-0
-            2xl:min-w-96 2xl:pr-8
-          `}>
-            <PrimaryNavigation app={app} active={slug}/>
-          </aside>
-
-          <section className="py-28 md:py-36 max-w-2/3">
-            <div>
-              {title && (
-                <div className="px-8 xl:pl-8 2xl:pl-16">
-                  <Breadcrumbs app={app} slug={slug} title={title} />
-                  <PageTitle app={app} slug={slug} title={title} />
-                </div>
-              )}
-              {children}
             </div>
-          </section>
+          )}
-
+          {children}
         </div>
-
+      </section>
-      </main>
-      {!noSearch && search && (
-        <>
-        <div className={`
-          fixed w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
-          md:rounded-lg md:top-24
-          md:max-w-xl md:m-auto md:inset-x-12
-          md:max-w-2xl
-          lg:max-w-4xl
-        `}>
-          <Search app={app} search={search} setSearch={setSearch}/>
-        </div>
-        <div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
-        </>
-      )}
-      <Footer app={app} />
     </div>
   )
 }

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

@@ -0,0 +1,115 @@
+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,
+  children=[],
+  search,
+  setSearch,
+  noSearch=false,
+  workbench=false,
+  AltMenu=null,
+}) => {
+  const startNavigation = () => {
+    app.startLoading()
+    // Force close of menu on mobile if it is open
+    if (app.primaryNavigation) app.setPrimaryNavigation(false)
+    // Force close of search modal if it is open
+    if (search) setSearch(false)
+  }
+
+  const router = useRouter()
+  router.events?.on('routeChangeStart', startNavigation)
+  router.events?.on('routeChangeComplete', () => app.stopLoading())
+  const slug = router.asPath.slice(1)
+  const [collapsePrimaryNav, setCollapsePrimaryNav] = useState(workbench || false)
+  const [collapseAltMenu, setCollapseAltMenu] = useState(false)
+
+  return (
+    <div className={`
+    flex flex-col justify-between
+    min-h-screen
+    bg-base-100
+    `}>
+      <Header app={app} setSearch={setSearch} />
+      <main className="grow">{children}</main>
+      {!noSearch && search && (
+        <>
+        <div className={`
+          fixed w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
+          md:rounded-lg md:top-24
+          md:max-w-xl md:m-auto md:inset-x-12
+          md:max-w-2xl
+          lg:max-w-4xl
+        `}>
+          <Search app={app} search={search} setSearch={setSearch}/>
+        </div>
+        <div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
+        </>
+      )}
+      <Footer app={app} />
+    </div>
+  )
+}
+
+export default LayoutWrapper

packages/freesewing.dev/components/wrappers/page.js

@@ -3,6 +3,7 @@ import { useSwipeable } from 'react-swipeable'
 import { useRouter } from 'next/router'
 import { useHotkeys } from 'react-hotkeys-hook'
 // Layouts components
+import LayoutWrapper from 'site/components/wrappers/layout'
 import Docs from 'site/components/layouts/docs'
 
 const layouts = {
@@ -14,7 +15,7 @@ const PageWrapper= ({
   title="FIXME: No title set",
   noSearch=false,
   app=false,
-  layout=false,
+  layout=Docs,
   children=[]
 }) => {
 
@@ -44,7 +45,7 @@ const PageWrapper= ({
     noSearch: noSearch,
   }
 
-  const Layout = layouts[layout]
+  const Layout = layout
 
   return (
     <div
@@ -53,10 +54,12 @@ const PageWrapper= ({
       data-theme={app.theme}
       key={app.theme} // Thiis forces the data-theme update
     >
-      {layout
+      <LayoutWrapper {...childProps}>
-        ? <Layout {...childProps}>{children}</Layout>
+        {Layout
-        : children
+          ? <Layout {...childProps}>{children}</Layout>
-      }
+          : children
+        }
+      </LayoutWrapper>
     </div>
   )
 }

packages/freesewing.dev/pages/[...mdxslug].js

@@ -23,7 +23,7 @@ const MdxPage = props => {
    * active state
    */
   return (
-    <Page app={app} {...props.page} layout="docs">
+    <Page app={app} {...props.page}>
       <Head>
         <meta property="og:title" content={props.page.title} key="title" />
         <meta property="og:type" content="article" key='type' />

packages/freesewing.dev/pages/index.js

@@ -1,15 +1,15 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
 import Link from 'next/link'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import Robot from 'shared/components/robot'
+import Layout from 'site/components/layouts/bare'
 
 const HomePage = (props) => {
   const app = useApp()
   return (
-    <Page app={app} title="Welcome to FreeSewing.dev">
+    <Page app={app} title="Welcome to FreeSewing.dev" layout={Layout}>
       <Head>
         <meta property="og:title" content="FreeSewing.dev" key="title" />
         <meta property="og:type" content="article" key='type' />
@@ -23,7 +23,31 @@ const HomePage = (props) => {
         <meta property="og:locale" content="en_US" key='locale' />
         <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
-      <div className="max-w-screen-md">
+        <section
+          style={{
+            backgroundImage: "url('/img/splash.jpg')",
+            backgroundSize: 'cover',
+            backgroundPosition: '50% 50%',
+            minHeight: '100vh'
+          }}
+          className="mt-4 mb-8 shadow drop-shadow-lg lg:mt-8 lg:mb-20 w-full"
+        >
+          <div className="mx-auto max-w-4xl px-8 py-12 lg:py-36">
+            <h1
+              className="text-8xl font-black lg:text-8xl"
+              style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+            >
+              FreeSewing<span className="font-light">.dev</span>
+            </h1>
+            <h2
+              className="w-2/3 text-2xl lg:max-w-xl lg:text-4xl xl:pr-0"
+              style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+            >
+              Documentation for FreeSewing contributors & developers
+            </h2>
+          </div>
+        </section>
+      <div>
         <p>
           FreeSewing.dev hosts documentation for contributors and developers alike.
           <br />

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

@@ -0,0 +1,24 @@
+import PrimaryNavigation from './primary'
+
+const Aside = ({ app, slug, mobileOnly=false }) => (
+  <aside className={`
+    fixed top-0 right-0 h-screen w-screen
+    overflow-y-auto z-20
+    bg-base-100 text-base-content md:bg-base-50
+    transition-all
+    ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+    md:flex md:sticky md:flex-row-reverse
+    md:relative md:transform-none
+    px-8 py-24
+
+    md:w-40
+    lg:w-1/2 lg:min-w-80 lg:pr-2 lg:border-r-2
+    xl:w-1/3 xl:min-w-80 xl:pr-2 xl:border-0
+    2xl:min-w-96 2xl:pr-8
+    ${mobileOnly ? 'block md:hidden' : ''}
+  `}>
+    <PrimaryNavigation app={app} active={slug}/>
+  </aside>
+)
+
+export default Aside