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
+

packages/freesewing.org/freesewing.config.js

@@ -5,7 +5,7 @@ const config = {
     key: '589c7a7e4d9c95a4f12868581259bf3a', // Search-only API key
   },
   strapi: 'https://posts.freesewing.org',
-  monorepo: 'https://github.com/freesewing/freesewing'
+  monorepo: 'https://github.com/freesewing/freesewing',
 }
 
 export default config

packages/freesewing.org/hooks/useApp.js

@@ -2,13 +2,47 @@ import { useState } from 'react'
 import set from 'lodash.set'
 // 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'
+// Translation
+import { useTranslation } from 'next-i18next'
 
+/*
+ * Helper method for a simple navigation item
+ */
+const simpleNav = (term, t, lng, prefix='') => ({
+  __title: t(term, { lng }),
+  __linktitle: t(term, { lng }),
+  __slug: prefix+term,
+  __order: t(term, { lng })
+})
+
+/*
+ * Generated the static navigation
+ * Static means not mdx, not strapi
+ */
+const staticNavigation = (t, lang) => ({
+  designs: simpleNav('designs', t, lang),
+  community: simpleNav('community', t, lang),
+  account: simpleNav('account', t, lang),
+})
+
+/*
+ * Merges prebuild navigation with the static navigation
+ */
+const buildNavigation = (lang, t) => ({
+  ...prebuildNavigation[lang],
+  ...staticNavigation(t, lang),
+})
+
+/*
+ * The actual hook
+ */
 function useApp(full = true) {
 
+  // Load translation method
+  const { t } = useTranslation()
+
   // User color scheme preference
   const prefersDarkMode = (typeof window !== 'undefined' && typeof  window.matchMedia === 'function')
     ? window.matchMedia(`(prefers-color-scheme: dark`).matches
@@ -21,7 +55,7 @@ function useApp(full = true) {
 
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)
-  const [navigation, setNavigation] = useState(prebuildNavigation[language])
+  const [navigation, setNavigation] = useState(buildNavigation(language, t))
   const [slug, setSlug] = useState('/')
   const [loading, setLoading] = useState(false)
 

packages/freesewing.org/next.config.mjs

@@ -19,7 +19,7 @@ const config = {
     // YAML support
     config.module.rules.push({
       test: /\.ya?ml$/,
-      type: 'json',
+      type: 'yaml',
       use: 'yaml-loader'
     })
 

packages/freesewing.org/package.json

@@ -3,8 +3,8 @@
   "version": "2.20.8",
   "private": true,
   "scripts": {
-    "dev": "SITE=org node ../freesewing.shared/prebuild/index.mjs && next dev -p 3002",
-    "develop": "SITE=org node ../freesewing.shared/prebuild/index.mjs && next dev -p 3002",
+    "dev": "SITE=org next dev -p 3002",
+    "develop": "SITE=org next dev -p 3002",
     "prebuild": "SITE=org node ../freesewing.shared/prebuild/index.mjs",
     "build": "next build",
     "export": "yarn prebuild && next build && next export",

packages/freesewing.org/pages/docs/[...mdxslug].js

@@ -0,0 +1,110 @@
+import Page from 'site/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import mdxMeta from 'site/prebuild/mdx.en.js'
+import mdxLoader from 'shared/mdx/loader'
+import MdxWrapper from 'shared/components/wrappers/mdx'
+import TocWrapper from 'shared/components/wrappers/toc'
+import Head from 'next/head'
+import HelpUs from 'site/components/help-us.js'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+const MdxPage = props => {
+
+  // This hook is used for shared code and global state
+  const app = useApp()
+
+  /*
+   * Each page should be wrapped in the Page wrapper component
+   * You MUST pass it the result of useApp() as the `app` prop
+   * and for MDX pages you can spread the props.page props to it
+   * to automatically set the title and navigation
+   *
+   * Like breadcrumbs and updating the primary navigation with
+   * active state
+   */
+  return (
+    <Page app={app} {...props.page}>
+      <Head>
+        <meta property="og:title" content={props.page.title} key="title" />
+        <meta property="og:type" content="article" key='type' />
+        <meta property="og:description" content={props.intro} key='type' />
+        <meta property="og:article:author" content='Joost De Cock' key='author' />
+        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' />
+        <meta property="og:locale" content="en_US" key='locale' />
+        <meta property="og:site_name" content="freesewing.dev" key='site' />
+      </Head>
+      <div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end px-8 xl:px-0">
+        {props.toc && (
+          <div className="mb-8 px-0 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
+            <TocWrapper toc={props.toc} app={app}/>
+          </div>
+        )}
+        <div className="px-0 xl:pl-8 2xl:pl-16">
+          <MdxWrapper mdx={props.mdx} app={app} />
+          <HelpUs mdx slug={`/${props.page.slug}`} />
+        </div>
+      </div>
+    </Page>
+  )
+}
+
+/*
+ * Default export is the NextJS page object
+ */
+export default MdxPage
+
+
+/*
+ * getStaticProps() is used to fetch data at build-time.
+ *
+ * On this page, it is loading the mdx (markdown) content
+ * from the markdown file on disk.
+ *
+ * This, in combination with getStaticPaths() below means this
+ * page will be used to render/generate all markdown/mdx content.
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export async function getStaticProps({ params, locale }) {
+
+  const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
+
+  return {
+    props: {
+      mdx,
+      toc,
+      intro: intro.join(' '),
+      page: {
+        slug: params.mdxslug.join('/'),
+        path: '/' + params.mdxslug.join('/'),
+        slugArray: params.mdxslug,
+        ...mdxMeta[params.mdxslug.join('/')],
+      },
+      params,
+      ...(await serverSideTranslations('en')),
+    }
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ *
+ * On this page, it is returning a list of routes (think URLs) for all
+ * the mdx (markdown) content.
+ * That list comes from mdxMeta, which is build in the prebuild step
+ * and contains paths, titles, and intro for all markdown.
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export async function getStaticPaths() {
+  return {
+    paths: Object.keys(mdxMeta).map(slug => '/'+slug),
+    fallback: false
+  }
+}
+

packages/freesewing.org/pages/index.js

@@ -1,37 +1,86 @@
-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 { useTranslation } from 'next-i18next'
+import Layout from 'site/components/layouts/bare'
+import Navigation, { Icons } from 'shared/components/navigation/primary'
 
 const HomePage = (props) => {
   const app = useApp()
+  const { t, i18n } = useTranslation(['ograph'])
+  const { language } = i18n
+
   return (
-    <Page app={app} title="Welcome to FreeSewing.org">
+    <Page app={app} title="Welcome to FreeSewing.org" layout={Layout}>
       <Head>
         <meta property="og:title" content="FreeSewing.org" key="title" />
         <meta property="og:type" content="article" key='type' />
-        <meta property="og:description" content="Made-to-measure sewing patterns. Free and Open Source" key='description' />
+        <meta property="og:description" content={t('og:orgDesc')} key='description' />
         <meta property="og:article:author" content='Joost De Cock' key='author' />
-        <meta property="og:image" content="https://canary.backend.freesewing.org/og-img/en/org/" key='image' />
+        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/${language}/org/`} key='image' />
         <meta property="og:image:type" content="image/png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
         <meta property="og:url" content="https://freesewing.org/" key='url' />
-        <meta property="og:locale" content="en_US" key='locale' />
+        <meta property="og:locale" content={language} key='locale' />
         <meta property="og:site_name" content="freesewing.org" key='site' />
       </Head>
-      <div className="max-w-screen-md">
-        <p>
-          FreeSewing.dev hosts documentation for contributors and developers alike.
-          <br />
-          For our maker site, and to try our platform, go
-          to <a
+        <section
+          style={{
+            backgroundImage: "url('/img/splash.jpg')",
+            backgroundSize: 'cover',
+            backgroundPosition: '40% 50%',
+          }}
+          className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
+        >
+          <div className="mx-auto px-8 flex flex-col items-center justify-center min-h-screen lg:min-h-0 lg:py-96">
+            <div className="flex flex-col items-end max-w-4xl">
+              <h1
+                className={`
+                  text-4xl font-black text-right px-4
+                  sm:text-6xl
+                  md:text-7xl px-6
+                  lg:px-8
+                  bg-primary
+                  `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >
+                FreeSewing
+                <span className="font-light">.org</span>
+              </h1>
+              <h2
+                className={`
+                  text-right text-2xl mr-0
+                  sm:text-3xl
+                  md:text-4xl
+                  lg:max-w-1/2 lg:text-4xl xl:pr-0 `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+                dangerouslySetInnerHTML={{ __html: t('orgDescription')}}
+              />
+            </div>
+            <Icons app={app}  active='/'
+              ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+              liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-24"
+              linkClasses={`
+                text-lg lg:text-xl py-1 text-secondary
+                hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+                flex flex-col items-center capitalize`}
+            />
+            <p className="text-neutral-content text-center mt-8">
+              To learn more about FreeSewing and try our platform
+              go to <a
                 href="https://freesewing.org/"
                 title="Go to FreeSewing.org"
                 className="text-secondary font-bold"
-          >freesewing.org</a>.
+              >freesewing.org</a>
             </p>
-
+          </div>
+        </section>
+      <div>
+      <div className="max-w-7xl m-auto my-32">
         <div className="bg-cover bg-neutral w-full bg-center rounded-lg shadow p-4 "
           style={{backgroundImage: "url(/support.jpg)"}}
         >
@@ -46,10 +95,36 @@ const HomePage = (props) => {
           </p>
           <a role="button" className="btn btn-accent btn-wide ml-4 mb-8" href="https://freesewing.org/patrons/join">Become a Patron</a>
         </div>
+      </div>
+      <div className="max-w-7xl m-auto my-32">
+        <div className="px-8 text-base-content">
+          <Icons app={app}
+            active='/'
+            ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+            liClasses="w-1/3 my-4 lg:mx-2 lg:w-24"
+            linkClasses={`
+              text-lg lg:text-xl py-1 text-base-content
+              hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+              flex flex-col items-center capitalize`}
+          />
+        </div>
+      </div>
+      <div className="max-w-xl m-auto my-32">
         <HelpUs slug='/' />
       </div>
+    </div>
+
     </Page>
   )
 }
 
 export default HomePage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations('en')),
+    }
+  }
+}
+