feat(dev): Added next-i18next to dev site

packages/freesewing.dev/next-i18next.config.js

@@ -0,0 +1,13 @@
+// See: https://github.com/isaachinman/next-i18next
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+    defaultNS: 'common',
+  },
+  interpolation: {
+    prefix: '{',
+    suffix: '}',
+  },
+  localeStructure: '{lng}/{ns}',
+}

packages/freesewing.dev/next.config.mjs

@@ -1,3 +1,7 @@
 import configBuilder from '../freesewing.shared/config/next.mjs'
+import i18nConfig from './next-i18next.config.js'
 
-export default configBuilder('dev')
+const config = configBuilder('dev')
+config.i18n = i18nConfig.i18n
+
+export default config

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

@@ -5,6 +5,7 @@ import mdxLoader from 'shared/mdx/loader'
 import MdxWrapper from 'shared/components/wrappers/mdx'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const MdxPage = props => {
 
@@ -58,7 +59,7 @@ export default MdxPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params }) {
+export async function getStaticProps({ params, locale }) {
 
   const { mdx, intro } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
 
@@ -72,7 +73,8 @@ export async function getStaticProps({ params }) {
         slugArray: params.mdxslug,
         ...mdxMeta[params.mdxslug.join('/')],
       },
-      params
+      params,
+      ...(await serverSideTranslations(locale)),
     }
   }
 }
@@ -94,3 +96,4 @@ export async function getStaticPaths() {
     fallback: false
   }
 }
+

packages/freesewing.dev/pages/_app.js

@@ -1,5 +1,6 @@
 import 'shared/styles/globals.css'
+import { appWithTranslation } from 'next-i18next'
 
 const FreeSewingDev = ({ Component, pageProps }) => <Component {...pageProps} />
 
-export default FreeSewingDev
+export default appWithTranslation(FreeSewingDev)

packages/freesewing.dev/pages/blog/[slug].js

@@ -7,6 +7,7 @@ import MdxWrapper from 'shared/components/wrappers/mdx'
 import Markdown from 'react-markdown'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const strapi = "https://posts.freesewing.org"
 
@@ -104,7 +105,14 @@ const PostPage = ({ post, author }) => {
 export const getStaticProps = async (props) => {
   const { post, author } = await strapiLoader('en', 'dev', 'blog', props.params.slug)
 
-  return { props: { post, author, slug: `blog/${props.params.slug}` } }
+  return {
+    props: {
+      post,
+      author,
+      slug: `blog/${props.params.slug}`,
+      ...(await serverSideTranslations(props.locale)),
+    }
+  }
 }
 
 export const getStaticPaths = async () => {
@@ -120,3 +128,4 @@ export const getStaticPaths = async () => {
 }
 
 export default PostPage
+

packages/freesewing.dev/pages/blog/index.js

@@ -6,6 +6,7 @@ import orderBy from 'lodash.orderby'
 import TimeAgo from 'react-timeago'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const strapi = "https://posts.freesewing.org"
 
@@ -76,3 +77,12 @@ const BlogIndexPage = (props) => {
 }
 
 export default BlogIndexPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+

packages/freesewing.dev/pages/index.js

@@ -4,6 +4,7 @@ import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
 import Link from 'next/link'
 import Script from 'next/script'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const HomePage = (props) => {
   const app = useApp()
@@ -122,3 +123,12 @@ const HomePage = (props) => {
 }
 
 export default HomePage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+

packages/freesewing.dev/pages/typography.js

@@ -1,99 +0,0 @@
-import { useEffect } from 'react'
-import Page from 'shared/components/wrappers/page.js'
-import useApp from 'site/hooks/useApp.js'
-import Popout from 'shared/components/popout.js'
-
-const TypographyPage = (props) => {
-  const app = useApp()
-  const { updateNavigation } = app
-
-  useEffect(() => {
-    updateNavigation(
-      ['typography'],
-      {
-        __title: 'Typography',
-        __linktitle: 'Typography',
-        __slug: 'typography',
-        __order: 'typography'
-      })
-  }, [updateNavigation])
-
-  const p = (
-    <p>
-      This paragraph is here to show the vertical spacing between headings and paragraphs.
-      In addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
-    </p>
-  )
-
-  return (
-    <Page app={app} title='Typography'>
-      <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
-        <p>This typography page shows an overview of different elements and how they are styled.</p>
-        <p>It&apos;s a good starting point for theme development.</p>
-        <h2>Headings (this is h2)</h2>
-        {p}
-        <h3>This is h3</h3>{p}
-        <h4>This is h4</h4>{p}
-        <h5>This is h5</h5>{p}
-        <h6>This is h6</h6>{p}
-        <h2>Links and buttons</h2>
-        <p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
-        <h3>Main button styles</h3>
-        <div className="flex flex-row gap-2 flex-wrap">
-          <button className="btn btn-neutral">Neutral button</button>
-          <button className="btn btn-primary">Primary button</button>
-          <button className="btn btn-secondary">Secondary button</button>
-          <button className="btn btn-accent">Accent button</button>
-        </div>
-        <h3>State button styles</h3>
-        <div className="flex flex-row gap-2 flex-wrap">
-          <button className="btn btn-info">Info button</button>
-          <button className="btn btn-success">Success button</button>
-          <button className="btn btn-warning">Warning button</button>
-          <button className="btn btn-error">Error button</button>
-        </div>
-        <h3>Other button styles</h3>
-        <div className="flex flex-row gap-2 flex-wrap">
-          <button className="btn btn-ghost">Ghost button</button>
-          <button className="btn btn-link">Link button</button>
-        </div>
-        <h3>Outlined button styles</h3>
-        <div className="flex flex-row gap-2 flex-wrap">
-          <button className="btn btn-outline btn-neutral">Neutral button</button>
-          <button className="btn btn-outline btn-primary">Primary button</button>
-          <button className="btn btn-outline btn-secondary">Secondary button</button>
-          <button className="btn btn-outline btn-accent">Accent button</button>
-        </div>
-        <h3>Button sizes</h3>
-        <div className="flex flex-row gap-2 flex-wrap">
-          <button className="btn btn-primary btn-lg">Large</button>
-          <button className="btn btn-primary">Normal</button>
-          <button className="btn btn-primary btn-sm">Small</button>
-          <button className="btn btn-primary btn-xs">Tiny</button>
-          <button className="btn btn-primary btn-lg btn-wide">Large wide</button>
-          <button className="btn btn-primary btn-wide">Normal wide</button>
-          <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
-          <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
-        </div>
-        <h2>Popouts</h2>
-        <p>The Popout component is what powers various custom MDX components under the hood:</p>
-        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
-          const props = {}
-          props[type] = true
-          return (
-            <div key={type}>
-              <h3 className="capitalize">{type}</h3>
-              <Popout {...props}>
-                <h5>I am the {type} title</h5>
-                {p}
-              </Popout>
-            </div>
-          )
-        })}
-      </div>
-    </Page>
-  )
-}
-
-export default TypographyPage
-

packages/freesewing.shared/prebuild/i18n.mjs

@@ -22,16 +22,19 @@ const writeJson = (site, locale, namespace, content) => fs.writeFileSync(
 export const prebuildI18n = async (site) => {
   // Iterate over locales
   for (const locale in locales) {
-    console.log('Generating translation files for', locale)
-    const loc = locales[locale]
-    // Fan out into namespaces
-    for (const namespace in loc) {
-      writeJson(
-        site, locale, namespace,
-        loc[namespace]
-      )
+    // Only English for dev site
+    if (site !== 'dev' || locale === 'en') {
+      console.log('Generating translation files for', locale)
+      const loc = locales[locale]
+      // Fan out into namespaces
+      for (const namespace in loc) {
+        writeJson(
+          site, locale, namespace,
+          loc[namespace]
+        )
+      }
+      writeJson(site, locale, 'locales', languages)
     }
-    writeJson(site, locale, 'locales', languages)
   }
 }
 

packages/freesewing.shared/prebuild/index.mjs

@@ -16,7 +16,7 @@ const run = async () => {
   } else {
     await prebuildLab()
   }
-  if (SITE !== 'dev') await prebuildI18n(SITE)
+  await prebuildI18n(SITE)
   await prebuildContributors(SITE)
   await prebuildPatrons(SITE)
   console.log()