wip(org): Work on new site

packages/freesewing.org/components/footer.js

@@ -1,17 +1,169 @@
-import NextLink from 'next/link'
 import Logo from 'shared/components/logos/freesewing.js'
 import contributors from 'site/prebuild/allcontributors.js'
 import patrons from 'site/prebuild/patrons.js'
 import OsiLogo from 'shared/components/logos/osi.js'
 import CreativeCommonsLogo from 'shared/components/logos/cc.js'
 import CcByLogo from 'shared/components/logos/cc-by.js'
+import { useTranslation } from 'next-i18next'
+import PageLink from 'shared/components/page-link'
+import DocsLink from 'shared/components/docs-link'
 
-const Link = ({ href, txt }) => (
+// Classes
-  <NextLink href={href}>
-    <a title={txt} className="hover:underline text-secondary font-bold hover:pointer">{txt}</a>
-  </NextLink>
-)
 const link = "text-secondary font-bold hover:pointer hover:underline px-1"
+const accent = "text-accent font-bold text-lg px-1 block sm:inline"
+const freesewing = "px-1 text-lg font-bold block sm:inline"
+
+// Keep these translations in the component because they're only used here
+const translations = {
+  cc: {
+    en: <span>
+          Content on FreeSewing.org is available under <a
+          className={link} href="https://creativecommons.org/licenses/by/4.0/"
+          >a Creative Commons license</a>
+        </span>,
+    de: <span>
+          Inhalte auf FreeSewing.org sind unter einer <a
+          className={link} href="https://creativecommons.org/licenses/by/4.0/deed.de"
+          >Creative
+          Commons-Lizenz</a> verfügbar
+        </span>,
+    es: <span>
+          El contenido de FreeSewing.org está disponible bajo <a
+          className={link} href="https://creativecommons.org/licenses/by/4.0/deed.es"
+          >una licencia Creative Commons</a>
+        </span>,
+    fr: <span>
+          Le contenu de FreeSewing.org est sous
+          <a className={link} href="https://creativecommons.org/licenses/by/4.0/deed.fr"
+          >licence Creative Commons</a>
+        </span>,
+    nl: <span>
+          De inhoud op FreeSewing.org is beschikbaar onder
+          <a className={link} href="https://creativecommons.org/licenses/by/4.0/deed.nl"
+          >een Creative Commons licentie</a>
+        </span>,
+  },
+  mit: {
+    en: <span>
+          The FreeSewing source code is <a
+          href="https://github.com/freesewing/freesewing" className={link}
+          >available on Github</a> under <a href="https://opensource.org/licenses/MIT"
+          className={link}>the MIT license</a>
+        </span>,
+    de: <span>
+          Der FreeSewing-Quellcode ist <a
+          href="https://github.com/freesewing/freesewing" className={link}
+          >auf Github verfügbar</a> unter <a href="https://opensource.org/licenses/MIT"
+          className={link}>der MIT-Lizenz</a>
+        </span>,
+    es: <span>
+          El código fuente de FreeSewing está <a
+          href="https://github.com/freesewing/freesewing" className={link}
+          >disponible en Github</a> bajo <a href="https://opensource.org/licenses/MIT"
+          className={link}>la licencia MIT</a>
+        </span>,
+    fr: <span>
+          Le code source de FreeSewing est <a
+          href="https://github.com/freesewing/freesewing" className={link}
+          >disponible sur Github</a> sous <a href="https://opensource.org/licenses/MIT"
+          className={link}>la licence MIT</a>
+        </span>,
+    nl: <span>
+          De FreeSewing broncode is <a
+          href="https://github.com/freesewing/freesewing" className={link}
+          >beschikbaar op Github</a> onder <a href="https://opensource.org/licenses/MIT"
+          className={link}>de MIT licentie</a>
+        </span>,
+  },
+  contributors: {
+    en: <>
+          <span className={freesewing}>FreeSewing</span> is made by these <span
+          className={accent}>wonderful contributors</span>
+        </>,
+    de: <>
+          <span className={freesewing}>FreeSewing</span> wird van diesen <span
+          className={accent}>wunderbaren Mitwirkende</span> gemacht
+        </>,
+    es: <>
+          <span className={freesewing}>FreeSewing</span> es hecho por estas <span
+          className={accent}>maravillosxs contribuyente</span>
+        </>,
+    fr: <>
+          <span className={freesewing}>FreeSewing</span> est fait par ces <span
+          className={accent}>merveilleux contributeurs</span>
+        </>,
+    nl: <>
+          <span className={freesewing}>FreeSewing</span> wordt gemaakt door deze <span
+          className={accent}>wonderbaarlijke medewerkers</span>
+        </>,
+  },
+  patrons: {
+    en: <>
+          <span className={freesewing}>FreeSewing</span> is supported by these <span
+          className={accent}>generous patrons</span>
+        </>,
+    de: <>
+          <span className={freesewing}>FreeSewing</span> wird von diesen <span
+          className={accent}>großzügigen Gönnern</span> unterstützt
+        </>,
+    es: <>
+          <span className={freesewing}>FreeSewing</span> cuenta con el apoyo de estos <span
+          className={accent}>generosos patrocinadores</span>
+        </>,
+    fr: <>
+          <span className={freesewing}>FreeSewing</span> est soutenu par ces <span
+          className={accent}>généreux mécènes</span>
+        </>,
+    nl: <>
+          <span className={freesewing}>FreeSewing</span> wordt ondersteund door deze <span
+          className={accent}>gulle patrons</span>
+        </>,
+  },
+  sponsors: {
+    en: <>
+          <span className={freesewing}>FreeSewing</span> is sponsored by these <span
+          className={accent}>awesome companies</span>
+        </>,
+    de: <>
+          <span className={freesewing}>FreeSewing</span> wird von diesen <span
+          className={accent}>großartigen Unternehmen</span> gesponsert
+        </>,
+    es: <>
+          <span className={freesewing}>FreeSewing</span> está patrocinado por estas <span
+          className={accent}>increíbles empresas</span>
+        </>,
+    fr: <>
+          <span className={freesewing}>FreeSewing</span> est sponsorisé par ces <span
+          className={accent}>entreprises géniales</span>
+        </>,
+    nl: <>
+          <span className={freesewing}>FreeSewing</span> wordt gesponsord door deze <span
+          className={accent}>geweldige bedrijven</span>
+        </>,
+  },
+  msf: {
+    en: <>
+          All <span className={freesewing}>FreeSewing</span> revenue goes to <span
+          className={accent}>Doctors Without Borders</span>
+        </>,
+    de: <>
+          Alle <span className={freesewing}>FreeSewing</span>-Einnahmen gehen an <span
+          className={accent}>Ärzte ohne Grenzen</span>
+        </>,
+    es: <>
+          Todos los ingresos de <span className={freesewing}>FreeSewing</span> van a <span
+          className={accent}>Médicos sin Fronteras</span>
+        </>,
+    fr: <>
+          Tous les revenus de <span className={freesewing}>FreeSewing</span> vont à <span
+          className={accent}>Médecins Sans Frontières</span>
+        </>,
+    nl: <>
+          Alle inkomsten van <span className={freesewing}>FreeSewing</span> gaan naar <span
+          className={accent}>Artsen Zonder Grenzen</span>
+        </>,
+  },
+}
 
 const social = {
   Discord: 'https://discord.freesewing.org/',
@@ -22,7 +174,11 @@ const social = {
   Twitter: 'https://twitter.com/freesewing_org',
 }
 
-const Footer = ({ app }) => (
+
+const Footer = ({ app }) => {
+  const { t } = useTranslation(['common', 'patrons'])
+
+  return (
     <footer className="bg-neutral">
       <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">
@@ -33,9 +189,7 @@ const Footer = ({ app }) => (
               <CcByLogo />
             </div>
             <p className="text-sm text-neutral-content text-right basis-3/4">
-            Content on freesewing.org is licensed under
+              {translations.cc[app.locale]}
-            a <a className={link} href="https://creativecommons.org/licenses/by/4.0/">Creative
-            Commons Attribution 4.0 International license</a>
             </p>
           </div>
           <div className="flex flex-row gap-2 justify-center items-center">
@@ -43,33 +197,35 @@ const Footer = ({ app }) => (
               <OsiLogo />
             </div>
             <p className="text-sm text-neutral-content text-right basis-3/4">
-            Our source code and markdown is <a href="https://github.com/freesewing/freesewing"
+              {translations.mit[app.locale]}
-            className={link}>available
-            on GitHub</a> under <a href="https://opensource.org/licenses/MIT"
-            className={link}>the MIT license</a>
             </p>
           </div>
         </div>
 
         <div className="w-full sm:w-auto">
-        <h5 className="text-neutral-content">What is this?</h5>
+          <h5 className="text-neutral-content">FIXME</h5>
           <div className="theme-gradient h-1 mb-4"></div>
           <ul>
             <li>
-            <Link href="https://freesewing.org/docs/guide/what" txt="About FreeSewing" />
+              Footer content goes here
             </li>
             <li>
-            <Link href="https://freesewing.org/docs/faq" txt="Frequently Asked Questions" />
+              <DocsLink slug="docs/guide/what" />
-          </li>
-          <li>
-            <Link href="https://freesewing.org/patrons/join" txt="Become a Patron" />
             </li>
           </ul>
         </div>
 
         <div className="w-full sm:w-auto sm:max-w-xs">
-        <h5 className="text-neutral-content">Where can I turn for help?</h5>
+          <h5 className="text-neutral-content">FIXME</h5>
           <div className="theme-gradient h-1 mb-2"></div>
+          <ul>
+            <li>
+              Footer content goes here
+            </li>
+            <li>
+              <DocsLink slug="docs/guide/what" />
+            </li>
+          </ul>
           <p className="text-sm text-neutral-content">
             <a className={link} href={social.discord}>Our Discord server</a> is
             the best place to ask questions and get help. It&apos;s where our community hangs out
@@ -87,7 +243,7 @@ const Footer = ({ app }) => (
           <h5 className="text-neutral-content">Social Media</h5>
           <div className="theme-gradient h-1 mb-4"></div>
           <ul>
-          {Object.keys(social).map(item => <li key={item}><Link href={social[item]} txt={item}/></li>)}
+            {Object.keys(social).map(item => <li key={item}><PageLink href={social[item]} txt={item}/></li>)}
           </ul>
         </div>
 
@@ -95,16 +251,14 @@ const Footer = ({ app }) => (
           <Logo fill='currentColor' stroke='none' size={164} className="m-auto"/>
           <h5 className="text-neutral-content">FreeSewing</h5>
           <p className="bold text-neutral-content text-sm">
-          Come for the sewing patterns
+            {t('sloganCome')}
             <br />
-          Stay for the community
+            {t('sloganStay')}
           </p>
         </div>
       </div>
       <p className="text-center text-neutral-content text-sm px-2">
-      <span
+        {translations.contributors[app.locale]}
-        className="px-1 text-lg font-bold block sm:inline">FreeSewing</span> is made by these <span
-      className="text-accent font-bold text-lg px-1 block sm:inline">wonderful contributors</span>
       </p>
       <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
         {contributors.map(person => (
@@ -118,9 +272,7 @@ const Footer = ({ app }) => (
       </div>
 
       <p className="text-center text-neutral-content text-sm px-2">
-      <span
+        {translations.patrons[app.locale]}
-        className="px-1 text-lg font-bold block sm:inline">FreeSewing</span> is supported by these <span
-      className="text-accent font-bold text-lg px-1 block sm:inline">generous patrons</span>
       </p>
       <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
         {patrons.map(person => (
@@ -140,9 +292,8 @@ const Footer = ({ app }) => (
       </div>
 
       <p className="text-center text-neutral-content text-sm px-2">
-      <span
+        {translations.sponsors[app.locale]}
-        className="px-1 text-lg font-bold block sm:inline">FreeSewing</span> is sponsored by these <span
+        <br />
-      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/">
@@ -159,9 +310,16 @@ const Footer = ({ app }) => (
         </a>
       </div>
 
+      <p className="text-center text-neutral-content text-sm px-2 my-20">
+        {translations.msf[app.locale]}
+        <br />
+        [ <DocsLink slug="docs/various/pledge" /> ]
+      </p>
+
       <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
     </footer>
   )
+}
 
 export default Footer
 

packages/freesewing.org/next.config.mjs

@@ -16,13 +16,6 @@ const config = {
   i18n: i18nConfig.i18n,
   pageExtensions: [ 'js' ],
   webpack: (config, options) => {
-    // YAML support
-    config.module.rules.push({
-      test: /\.ya?ml$/,
-      type: 'yaml',
-      use: 'yaml-loader'
-    })
-
     // Aliases
     config.resolve.alias.shared = path.resolve('../freesewing.shared/')
     config.resolve.alias.site = path.resolve(`.`)

packages/freesewing.org/package.json

@@ -6,6 +6,7 @@
     "dev": "SITE=org next dev -p 3002",
     "develop": "SITE=org next dev -p 3002",
     "prebuild": "SITE=org node ../freesewing.shared/prebuild/index.mjs",
+    "i18n": "SITE=org node ../freesewing.shared/prebuild/i18n-only.mjs",
     "build": "next build",
     "export": "yarn prebuild && next build && next export",
     "start": "next start -p 3002",

packages/freesewing.shared/components/docs-link.js

@@ -0,0 +1,12 @@
+import PageLink from './page-link'
+import get from 'lodash.get'
+import useApp from 'site/hooks/useApp'
+
+const DocsLink = ({ slug }) => {
+  const app = useApp()
+  return <PageLink href={slug} txt={get(app.navigation, [...slug.split('/'), '__title'])} />
+}
+
+export default DocsLink
+
+

packages/freesewing.shared/components/page-link.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 const PageLink = ({ href, txt }) => (
   <Link href={href}>
     <a className={`
-      text-lg font-bold text-secondary
+      font-bold text-secondary
       hover:text-secondary-focus hover:underline`}
     title={txt}>{txt}</a>
   </Link>

packages/freesewing.shared/prebuild/i18n-only.mjs

@@ -0,0 +1,3 @@
+import { prebuildI18n } from './i18n.mjs'
+
+prebuildI18n(process.env.SITE)

packages/freesewing.shared/prebuild/mdx.mjs

@@ -17,7 +17,7 @@ import yaml from 'js-yaml'
  * which breaks stuff. So this method takes the input and replaces all
  * - - - with ---
  */
-const fixCrowdinBugs = md => {
+export const fixCrowdinBugs = md => {
   md.value = md.value.split("- - -\n").join("---\n")
   return md
 }
@@ -49,7 +49,8 @@ export const getMdxFileList = async (folder, lang) => {
   for (const file of allFiles) {
     if (
       file.slice(-5) === `${lang}.md` &&
-      file.indexOf('/ui/') === -1
+      file.indexOf('/ui/') === -1 &&
+      file.indexOf('/uimd/') === -1
     ) files.push(file)
   }
 
@@ -59,7 +60,7 @@ export const getMdxFileList = async (folder, lang) => {
 /*
  * Helper method to get the website slug (path) from the file path
  */
-const fileToSlug = (file, site, lang) => (file.slice(-6) === `/${lang}.md`)
+export const fileToSlug = (file, site, lang) => (file.slice(-6) === `/${lang}.md`)
   ? file.split(`/markdown/${site}/`).pop().slice(0, -6)
   : false