wip(org): Work on new site

packages/freesewing.org/components/footer.js

@@ -24,7 +24,7 @@ const social = {
 
 const Footer = ({ app }) => (
   <footer className="bg-neutral">
-    <div className={`theme-gradient h-1 w-full relative ${app.loading ? 'loading' : ''}`}></div>
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
     <div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
       <div className="w-64 mt-2">
         <div className="px-4 mb-4"><CreativeCommonsLogo /></div>
@@ -141,24 +141,25 @@ const Footer = ({ app }) => (
 
     <p className="text-center text-neutral-content text-sm px-2">
       <span
-        className="px-1 text-lg font-bold block sm:inline">FreeSewing</span> is hosted by these <span
+        className="px-1 text-lg font-bold block sm:inline">FreeSewing</span> is sponsored by these <span
       className="text-accent font-bold text-lg px-1 block sm:inline">awesome companies</span>
     </p>
     <div className="p-4 py-16 flex flex-row bg-neutral -mt-2 z-0 gap-8 flex-wrap justify-center items-center text-neutral-content">
       <a title="Search powered by Algolia" href="https://www.algolia.com/">
         <img src="/brands/algolia.svg" className="w-64 mx-12 sm:mx-4" alt="Search powered by Algolia"/>
       </a>
+      <a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
+        <img src="/brands/bugsnag.svg" className="h-32 mx-12 sm:mx-4" alt="Error handling by bugsnag" />
+      </a>
       <a title="Translation powered by Crowdin" href="https://www.crowdin.com/">
         <img src="/brands/crowdin.svg" className="w-64 mx-12 sm:mx-4" alt="Translation powered by Crowdin" />
       </a>
-      <a title="Deploys & hosting by Netlify" href="https://www.netlify.com/">
-        <img src="/brands/netlify.svg" className="w-44 mx-12 sm:mx-4" alt="Deploys & hosting by Netlify" />
-      </a>
-      <a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
-        <img src="/brands/bugsnag.svg" className="h-36 mx-12 sm:mx-4" alt="Error handling by bugsnag" />
+      <a title="Builds & hosting by Vercel" href="https://www.vercel.com/?utm_source=freesewing&utm_campaign=oss">
+        <img src="/brands/vercel.svg" className="w-64 mx-12 sm:mx-4" alt="Builds & Hosting by Vercel" />
       </a>
     </div>
 
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
   </footer>
 )
 

packages/freesewing.org/components/header.js

@@ -46,6 +46,8 @@ const Header = ({ app, setSearch }) => {
         z-30
         transition-transform
         ${show ? '': 'fixed top-0 left-0 -translate-y-20'}
+        drop-shadow-xl
+        ${app.loading ? "theme-gradient loading" : ""}
       `}>
         <div className="max-w-6xl m-auto">
           <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
@@ -55,23 +57,38 @@ const Header = ({ app, setSearch }) => {
                 text-neutral-content bg-transparent
                 border border-transparent
                 hover:bg-transparent hover:border-base-100
-                sm:hidden
+                md:hidden
                 h-12
               `}
               onClick={app.togglePrimaryMenu}>
                 {app.primaryMenu
-                  ? <><CloseIcon /><span className="opacity-50 pl-2 flex flex-row items-center gap-1"><Left />swipe</span></>
-                  : <><MenuIcon /><span className="opacity-50 pl-2 flex flex-row items-center gap-1"><Right />swipe</span></>
+                  ? (
+                    <>
+                      <CloseIcon />
+                      <span className="opacity-50 pl-2 flex flex-row items-center gap-1">
+                        <Left />
+                        swipe
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <MenuIcon />
+                      <span className="opacity-50 pl-2 flex flex-row items-center gap-1">
+                        <Right />
+                        swipe
+                      </span>
+                    </>
+                  )
                 }
             </button>
-            <div className="flex flex-row gap-2 sm:hidden">
+            <div className="flex flex-row gap-2 md:hidden">
               <button className="btn btn-sm btn h-12 px-12" onClick={() => setSearch(true)}>
                 <SearchIcon />
               </button>
             </div>
             <button className={`
               btn btn-sm h-12
-              hidden sm:flex
+              hidden md:flex
               flex-row gap-1 mr-4 w-64 px-2
               bg-base-100 text-base-content
               hover:bg-base-100 hover:text-base-content
@@ -90,17 +107,16 @@ const Header = ({ app, setSearch }) => {
                 </a>
               </Link>
               <Link href="/">
-                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12">
-                  freesewing.dev
+                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12 font-normal lowercase text-2xl">
+                  <span className="font-black px-1 normal-case">FreeSewing</span>.org
                 </a>
               </Link>
             </div>
-            <div className="hidden sm:flex flex-row items-center">
+            <div className="hidden md:flex flex-row items-center">
               <ThemePicker app={app} />
             </div>
           </div>
         </div>
-        <div className={`theme-gradient h-1 w-full z-10 relative -mb-1 ${app.loading ? 'loading' : ''}`}></div>
       </header>
   )
 }

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

@@ -0,0 +1,69 @@
+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/>
+      {children}
+    </>
+  )
+}
+
+export default DefaultLayout

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

@@ -0,0 +1,79 @@
+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 (
+    <div className="m-auto flex flex-row justify-center">
+      <Aside app={app} slug={slug} before={<ThemePicker app={app}/>}/>
+      <section className="py-28 md:py-36">
+        <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>
+    </div>
+  )
+}
+
+export default DefaultLayout

packages/freesewing.org/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.org/components/wrappers/page.js

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react'
+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 = {
+  docs: Docs,
+}
+
+/* This component should wrap all page content */
+const PageWrapper= ({
+  title="FIXME: No title set",
+  noSearch=false,
+  app=false,
+  layout=Docs,
+  children=[]
+}) => {
+
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null,
+    onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true),
+    trackMouse: true
+  })
+
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  useEffect(() => app.setSlug(slug), [slug])
+
+  // Trigger search with Ctrl+k
+  useHotkeys('ctrl+k', (evt) => {
+    evt.preventDefault()
+    setSearch(true)
+  })
+
+  const [search, setSearch] = useState(false)
+
+  const childProps = {
+    app: app,
+    title: title,
+    search, setSearch, toggleSearch: () => setSearch(!search),
+    noSearch: noSearch,
+  }
+
+  const Layout = layout
+
+  return (
+    <div
+      ref={swipeHandlers.ref}
+      onMouseDown={swipeHandlers.onMouseDown}
+      data-theme={app.theme}
+      key={app.theme} // Thiis forces the data-theme update
+    >
+      <LayoutWrapper {...childProps}>
+        {Layout
+          ? <Layout {...childProps}>{children}</Layout>
+          : children
+        }
+      </LayoutWrapper>
+    </div>
+  )
+}
+
+export default PageWrapper
+