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

-
- - - - -
-

State button styles

-
- - - - -
-

Other button styles

-
- - -
-

Outlined button styles

-
- - - - -
-

Button sizes

-
- - - - - - - - -
-

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()