Feature: Support Muliple Languages #93

gatsby-node.js

@@ -5,6 +5,7 @@ const _ = require("lodash")
 //const PAGINATION_OFFSET = 7
 const fs = require("fs")
 //const contributers = require("./.all-contributorsrc")
+const locales = require(`./src/i18n/language-config`)
 
 const createPosts = (createPage, createRedirect, edges) => {
   edges.forEach(({ node }, i) => {
@@ -292,3 +293,26 @@ exports.sourceNodes = async ({
     actions.createNode(node)
   })
 }
+
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions
+
+  deletePage(page)
+
+  // Grab the keys of locales and map over them
+  Object.keys(locales).map((lang) => {
+    // Use the values defined in "locales" to construct the path
+    const localizedPath = locales[lang].is_default
+      ? page.path
+      : `${locales[lang].path}${page.path}`
+
+    return createPage({
+      ...page,
+      path: localizedPath,
+      context: {
+        ...page.context,
+        locale: lang,
+      },
+    })
+  })
+}

package.json

@@ -52,6 +52,8 @@
     "gatsby-transformer-yaml": "^2.2.20",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
+    "i18next": "^19.8.3",
+    "i18next-browser-languagedetector": "^6.0.1",
     "isomorphic-fetch": "^2.2.1",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
@@ -63,6 +65,7 @@
     "react-alice-carousel": "^1.17.3",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.0",
+    "react-i18next": "^11.7.3",
     "react-modal": "^3.11.1",
     "react-player": "^2.1.0",
     "react-share": "^3.0.1",

src/components/Header/Links.js

@@ -1,74 +1,78 @@
 // import { ToggleMode } from "components/Mode"
 import React from "react"
 import ThemeToggle from "components/Theme/ThemeToggle"
-import { Link } from "gatsby"
+import { Link } from "../language/Link"
 import Spotify from "assets/spotify.svg"
 import ApplePodcast from "assets/apple-podcast.svg"
 import GooglePodcast from "assets/google-podcast.svg"
+import { useTranslation } from "react-i18next"
 
-export default ({ id }) => (
-  <>
-    <Link
-      to="/"
-      activeClassName="active"
-      aria-label="View Home page"
-      className="item"
-    >
-      Home
-    </Link>
-    <Link
-      to="/blablas"
-      activeClassName="active"
-      className="item"
-      aria-label="View Blabla page"
-    >
-      Blablas
-    </Link>
-    <Link
-      to="/suggest-new-episode"
-      activeClassName="active"
-      className="item"
-      aria-label="Suggest New Episode"
-    >
-      Suggest Blabla
-    </Link>
-    <Link
-      to="/about"
-      activeClassName="active"
-      className="item"
-      aria-label="View About page"
-    >
-      About
-    </Link>
+export default ({ id }) => {
+  const { t, i18n } = useTranslation()
+  return (
+    <>
+      <Link
+        to="/"
+        activeClassName="active"
+        aria-label="View Home page"
+        className="item"
+      >
+        {t("Home")}
+      </Link>
+      <Link
+        to="/blablas"
+        activeClassName="active"
+        className="item"
+        aria-label="View Blabla page"
+      >
+        {t("Blablas")}
+      </Link>
+      <Link
+        to="/suggest-new-episode"
+        activeClassName="active"
+        className="item"
+        aria-label="Suggest New Episode"
+      >
+        {t("Suggest Blabla")}
+      </Link>
+      <Link
+        to="/about"
+        activeClassName="active"
+        className="item"
+        aria-label="View About page"
+      >
+        {t("About")}
+      </Link>
 
-    <a
-      href="https://open.spotify.com/show/0UlTBXh7iH6x0HO6FgYzAD"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <Spotify className="spotify podcast-icon" alt="spotify" />
-    </a>
-    <a
-      href="https://podcasts.google.com/?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy84OGUzMDQ4L3BvZGNhc3QvcnNz"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <GooglePodcast
-        className="google-podcast podcast-icon"
-        alt="google-podcast"
-      />
-    </a>
-    <a
-      href="https://podcasts.apple.com/us/podcast/geeksblabla/id1449493227"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <ApplePodcast
-        className="apple-podcast podcast-icon"
-        alt="apple-podcast"
-      />
-    </a>
-    {/* <ToggleMode id={id} /> */}
-    <ThemeToggle />
-  </>
-)
+      <a
+        href="https://open.spotify.com/show/0UlTBXh7iH6x0HO6FgYzAD"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Spotify className="spotify podcast-icon" alt="spotify" />
+      </a>
+      <a
+        href="https://podcasts.google.com/?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy84OGUzMDQ4L3BvZGNhc3QvcnNz"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <GooglePodcast
+          className="google-podcast podcast-icon"
+          alt="google-podcast"
+        />
+      </a>
+      <a
+        href="https://podcasts.apple.com/us/podcast/geeksblabla/id1449493227"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <ApplePodcast
+          className="apple-podcast podcast-icon"
+          alt="apple-podcast"
+        />
+      </a>
+      {/* <ToggleMode id={id} /> */}
+      <ThemeToggle />
+    </>
+  )
+}

src/components/Home/Hero/index.js

@@ -7,21 +7,19 @@ import HeroImage from "assets/hero.svg"
 import HeroImageMobile from "assets/hero_mobile.svg"
 import HeroImageMobileLight from "assets/hero_mobile_light.svg"
 import "./index.scss"
-
+import { useTranslation } from "react-i18next"
 export default () => {
   const { dark } = useTheme()
+  const { t } = useTranslation()
 
   return (
     <div className="container hero">
       <div className="description">
-        <h1>Hottest technology trends, In Darija!</h1>
-        <p>
-          GeeksBlaBla is a community initiative, to discuss, highlight and share
-          the latest IT topics in Moroccan Darija.
-        </p>
+        <h1>{t("Hottest technology")}</h1>
+        <p>{t("intro")}</p>
         <div className="actions">
           <Link to="/blablas" className="button left">
-            <PlayIcon /> Start Watching
+            <PlayIcon /> {t("Start Watching")}
           </Link>
           {/* <Link to="/suggest-new-episode" className="button outline">
             Suggest a topic

src/components/language/Link.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { Link as GatsbyLink } from "gatsby"
+import language_config from "../../i18n/language-config"
+import { useTranslation } from "react-i18next"
+
+export const Link = ({ to, language, ...props }) => {
+  // If it's the default language, don't do anything
+  // If it's another language, add the "path"
+  const { i18n } = useTranslation()
+  const { is_default, path } = language_config[i18n.language]
+  const path_to = is_default ? to : `/${path}/${to}`
+
+  return <GatsbyLink {...props} to={path_to} />
+}

src/i18n/i18n.js

@@ -0,0 +1,22 @@
+import i18n from "i18next"
+import { initReactI18next } from "react-i18next"
+import { resources } from "./translate"
+import LanguageDetector from "i18next-browser-languagedetector"
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: "en",
+    keySeparator: false,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ["path"],
+      lookupFromPathIndex: 0,
+    },
+  })
+
+export default i18n

src/i18n/language-config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  en: {
+    is_default: true,
+    path: "en",
+    display_name: "English",
+    locale: `en-US`,
+    siteLanguage: `en`,
+  },
+  fr: {
+    path: "fr",
+    display_name: "Français",
+    siteLanguage: `fr`,
+    locale: `fr`,
+  },
+}

src/i18n/translate.js

@@ -0,0 +1,29 @@
+// the translations
+// (tip move them in a JSON file and import them)
+exports.resources = {
+  en: {
+    translation: {
+      "Hottest technology": "Hottest technology trends, In Darija!",
+      intro:
+        "GeeksBlaBla is a community initiative, to discuss, highlight and share the latest IT topics in Moroccan Darija.",
+      Home: "Home",
+      Blablas: "Blablas",
+      "Suggest Blabla": "Suggest Blabla",
+      About: "About",
+      "Start Watching": "Start Watching",
+    },
+  },
+  fr: {
+    translation: {
+      "Hottest technology":
+        "Les tendances technologiques les plus chaudes, en Darija!",
+      intro:
+        "GeeksBlaBla est une initiative communautaire visant à discuter, mettre en lumière et partager les derniers sujets liés aux technologies de l'information par la Darija marocaine.",
+      Home: "Accueil",
+      Blablas: "Blablas",
+      "Suggest Blabla": "Suggérer Blabla",
+      About: "À propos",
+      "Start Watching": "Commencez à regarder",
+    },
+  },
+}

src/pages/index.js

@@ -1,5 +1,5 @@
 import React from "react"
-
+import "../i18n/i18n"
 import Layout from "components/Layout"
 import {
   Hero,