feat: add simple i18n mechanism

gatsby-browser.tsx

@@ -17,14 +17,19 @@
 
 import React from "react"
 
+import { CommonLayout, CommonProviders } from "./src/components"
+
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  type TLayoutElement = typeof element.type & { Layout: React.ElementType }
+  return <CommonLayout {...props}>{element}</CommonLayout>
+}
 
-  const Layout = (element.type as TLayoutElement).Layout ?? React.Fragment
-  return <Layout {...props}>{element}</Layout>
+export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
+  element,
+}) => {
+  return <CommonProviders>{element}</CommonProviders>
 }

gatsby-config.ts

@@ -15,6 +15,8 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import { langs, defaultLang } from "./src/i18n"
+
 import type { GatsbyConfig } from "gatsby"
 
 const config: GatsbyConfig = {
@@ -41,6 +43,28 @@ const config: GatsbyConfig = {
     },
     "gatsby-source-local-git",
     "gatsby-source-package",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/src/i18n/locales`,
+        name: "locale",
+      },
+    },
+    {
+      resolve: "gatsby-plugin-react-i18next",
+      options: {
+        languages: langs,
+        defaultLanguage: defaultLang,
+        i18nextOptions: {
+          fallbackLng: defaultLang,
+          supportedLngs: langs,
+          defaultNS: "common",
+          interpolation: {
+            escapeValue: false,
+          },
+        },
+      },
+    },
   ],
   siteMetadata: {
     title: "Periotris.js",

gatsby-ssr.tsx

@@ -17,14 +17,19 @@
 
 import React from "react"
 
+import { CommonLayout, CommonProviders } from "./src/components"
+
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  type TLayoutElement = typeof element.type & { Layout: React.ElementType }
+  return <CommonLayout {...props}>{element}</CommonLayout>
+}
 
-  const Layout = (element.type as TLayoutElement).Layout ?? React.Fragment
-  return <Layout {...props}>{element}</Layout>
+export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
+  element,
+}) => {
+  return <CommonProviders>{element}</CommonProviders>
 }

package.json

@@ -40,14 +40,18 @@
     "gatsby": "^5.8.1",
     "gatsby-plugin-manifest": "^5.8.0",
     "gatsby-plugin-offline": "^6.8.0",
+    "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-typescript": "^5.8.0",
+    "gatsby-source-filesystem": "^5.10.0",
     "gatsby-source-local-git": "^1.3.0",
     "gatsby-source-package": "^1.0.1",
+    "i18next": "^22.5.0",
     "is-in-browser": "^2.0.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.3.1",
     "react-redux": "^8.0.5",
     "toposort": "^2.0.2"
   },

src/components/CommonLayout.tsx

@@ -23,15 +23,14 @@ import "./CommonLayout.css"
 import { graphql, useStaticQuery } from "gatsby"
 import { SnackbarProvider } from "notistack"
 import React from "react"
-import { Provider as ReduxProvider } from "react-redux"
 
 import Box from "@mui/material/Box"
 import CssBaseline from "@mui/material/CssBaseline"
 import { StyledEngineProvider } from "@mui/material/styles"
 import ThemeProvider from "@mui/material/styles/ThemeProvider"
 
 import { theme } from "../../src/ThemeOptions"
-import { appStore } from "../viewmodel"
+
 import { MainAppBar } from "./mainAppBar/MainAppBar"
 
 export interface IPageLocationElement {
@@ -40,39 +39,38 @@ export interface IPageLocationElement {
 }
 
 export interface ICommonLayoutProps {
-  children: React.ReactNode
+  readonly children: React.ReactNode
 }
 
-export const CommonLayout = (props: ICommonLayoutProps): React.ReactElement => {
+export const CommonLayout = ({
+  children,
+}: ICommonLayoutProps): React.ReactElement => {
   return (
-    <>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <ReduxProvider store={appStore}>
-            <SnackbarProvider
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "center",
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center",
+          }}
+        >
+          <>
+            <CssBaseline enableColorScheme />
+            <Box
+              sx={{
+                display: "flex",
+                flexFlow: "column nowrap",
+                minHeight: "100vh",
+                maxHeight: "100vh",
               }}
             >
-              <CssBaseline enableColorScheme />
-              <Box
-                sx={{
-                  display: "flex",
-                  flexFlow: "column nowrap",
-                  minHeight: "100vh",
-                  maxHeight: "100vh",
-                }}
-              >
-                <MainAppBar />
-                {/* Now injecting real children. */}
-                {props.children}
-              </Box>
-            </SnackbarProvider>
-          </ReduxProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </>
+              <MainAppBar />
+              {children}
+            </Box>
+          </>
+        </SnackbarProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   )
 }
 

src/components/CommonProviders.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
+import React from "react"
+import { Provider as ReduxProvider } from "react-redux"
+
+import { appStore } from "../viewmodel"
+
+export interface ICommonProvidersProps {
+  readonly children: React.ReactNode
+}
+
+export const CommonProviders = ({
+  children,
+}: ICommonProvidersProps): React.ReactElement => {
+  return <ReduxProvider store={appStore}>{children}</ReduxProvider>
+}

src/components/index.ts

@@ -16,7 +16,8 @@
  */
 
 import { BlocksGrid } from "./blocksGrid/BlocksGrid"
-import { CommonLayout, CommonHead } from "./CommonLayout"
+import { CommonHead, CommonLayout } from "./CommonLayout"
+import { CommonProviders } from "./CommonProviders"
 import { FileFormControl } from "./FileFormControl"
 import { GameControlBackdrop } from "./gameControlBackdrop/GameControlBackdrop"
 import { NumberFormControl } from "./NumberFormControl"
@@ -30,8 +31,8 @@ export {
   PortraitWarningBackdrop,
   CommonLayout,
   CommonHead,
+  CommonProviders,
   FileFormControl,
   NumberFormControl,
 }
-
 export type { ICommonLayoutProps }

src/pages/404.css → src/i18n/index.ts

@@ -14,3 +14,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
+
+import { langs, defaultLang } from "./lang"
+
+export { langs, defaultLang }

src/i18n/lang.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
+import { join } from "path"
+import { readdirSync, lstatSync } from "fs"
+
+export const defaultLang = "en"
+
+export const langs = readdirSync(join(__dirname, "locales")).filter((f) =>
+  lstatSync(join(__dirname, "locales", f)).isDirectory()
+)

src/i18n/locales/en/common.json

@@ -0,0 +1 @@
+{}

src/i18n/locales/en/index.json

@@ -0,0 +1,4 @@
+{
+  "indexStart": "START",
+  "indexVersion": "Version {{version}}"
+}

src/i18n/locales/zh/common.json

@@ -0,0 +1 @@
+{}

src/i18n/locales/zh/index.json

@@ -0,0 +1,4 @@
+{
+  "indexStart": "开始",
+  "indexVersion": "版本{{version}}"
+}

src/pages/404.tsx

@@ -15,8 +15,6 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
-import "./404.css"
-
 import React from "react"
 
 import { CommonHead } from "../components"

src/pages/about.tsx

@@ -26,7 +26,7 @@ import Link from "@mui/material/Link"
 import Stack from "@mui/material/Stack"
 import Typography from "@mui/material/Typography"
 
-import { CommonLayout, CommonHead } from "../components"
+import { CommonHead } from "../components"
 
 const codeStyle = {
   fontFamily: '"Fira Code", Consolas, monospace',
@@ -111,13 +111,9 @@ const App = ({
   )
 }
 
-App.Layout = CommonLayout
-
 export default App
 
-export const Head = (): React.ReactElement => {
-  return <CommonHead />
-}
+export const Head = CommonHead
 
 export const query = graphql`
   query AboutPage {

src/pages/game.tsx

@@ -23,12 +23,7 @@ import { useDrag } from "@use-gesture/react"
 import Box from "@mui/material/Box"
 
 import { flushed } from "../common"
-import {
-  BlocksGrid,
-  CommonHead,
-  CommonLayout,
-  GameControlBackdrop,
-} from "../components"
+import { BlocksGrid, CommonHead, GameControlBackdrop } from "../components"
 import { GameViewModel } from "../viewmodel"
 
 const App = (): React.ReactElement => {
@@ -105,10 +100,6 @@ const App = (): React.ReactElement => {
   )
 }
 
-App.Layout = CommonLayout
-
 export default App
 
-export const Head = (): React.ReactElement => {
-  return <CommonHead />
-}
+export const Head = CommonHead