diff --git a/packages/freesewing.dev/next-i18next.config.js b/packages/freesewing.dev/next-i18next.config.js
new file mode 100644
index 00000000000..49b060e4a64
--- /dev/null
+++ b/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}',
+}
diff --git a/packages/freesewing.dev/next.config.mjs b/packages/freesewing.dev/next.config.mjs
index 05d14efe112..fd1138f2497 100644
--- a/packages/freesewing.dev/next.config.mjs
+++ b/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
diff --git a/packages/freesewing.dev/pages/[...mdxslug].js b/packages/freesewing.dev/pages/[...mdxslug].js
index afd0c45c24a..4185a843571 100644
--- a/packages/freesewing.dev/pages/[...mdxslug].js
+++ b/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
}
}
+
diff --git a/packages/freesewing.dev/pages/_app.js b/packages/freesewing.dev/pages/_app.js
index e125a54674f..7e91632721b 100644
--- a/packages/freesewing.dev/pages/_app.js
+++ b/packages/freesewing.dev/pages/_app.js
@@ -1,5 +1,6 @@
import 'shared/styles/globals.css'
+import { appWithTranslation } from 'next-i18next'
const FreeSewingDev = ({ Component, pageProps }) =>
-export default FreeSewingDev
+export default appWithTranslation(FreeSewingDev)
diff --git a/packages/freesewing.dev/pages/blog/[slug].js b/packages/freesewing.dev/pages/blog/[slug].js
index 1613faf203f..4394850f72f 100644
--- a/packages/freesewing.dev/pages/blog/[slug].js
+++ b/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
+
diff --git a/packages/freesewing.dev/pages/blog/index.js b/packages/freesewing.dev/pages/blog/index.js
index 36ff2ff78d0..b21109a848c 100644
--- a/packages/freesewing.dev/pages/blog/index.js
+++ b/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)),
+ }
+ }
+}
+
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index 84006665715..fcb37dde7c7 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/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)),
+ }
+ }
+}
+
diff --git a/packages/freesewing.dev/pages/typography.js b/packages/freesewing.dev/pages/typography.js
deleted file mode 100644
index 49140ad1373..00000000000
--- a/packages/freesewing.dev/pages/typography.js
+++ /dev/null
@@ -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 = (
-
- This paragraph is here to show the vertical spacing between headings and paragraphs.
- In addition, let's make it a bit longer so we can see the line height as the text wraps.
-
- )
-
- return (
-
-
-
This typography page shows an overview of different elements and how they are styled.
-
It's a good starting point for theme development.
-
Headings (this is h2)
- {p}
-
This is h3 {p}
-
This is h4 {p}
-
This is h5 {p}
-
This is h6 {p}
-
Links and buttons
-
A regular link looks like this , whereas buttons look like this:
-
Main button styles
-
- Neutral button
- Primary button
- Secondary button
- Accent button
-
-
State button styles
-
- Info button
- Success button
- Warning button
- Error button
-
-
Other button styles
-
- Ghost button
- Link button
-
-
Outlined button styles
-
- Neutral button
- Primary button
- Secondary button
- Accent button
-
-
Button sizes
-
- Large
- Normal
- Small
- Tiny
- Large wide
- Normal wide
- Small wide
- Tiny wide
-
-
Popouts
-
The Popout component is what powers various custom MDX components under the hood:
- {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
- const props = {}
- props[type] = true
- return (
-
-
{type}
-
- I am the {type} title
- {p}
-
-
- )
- })}
-
-
- )
-}
-
-export default TypographyPage
-
diff --git a/packages/freesewing.shared/prebuild/i18n.mjs b/packages/freesewing.shared/prebuild/i18n.mjs
index 67e00ce4a45..44efaa601a5 100644
--- a/packages/freesewing.shared/prebuild/i18n.mjs
+++ b/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)
}
}
diff --git a/packages/freesewing.shared/prebuild/index.mjs b/packages/freesewing.shared/prebuild/index.mjs
index f12ff161d45..a93e92f5678 100644
--- a/packages/freesewing.shared/prebuild/index.mjs
+++ b/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()