feature(www): Translate text through js-lingui

.typo-ci.yml

@@ -30,6 +30,7 @@ excluded_files:
   - "**/*.ts"
   - "**/*.jsx"
   - "**/*.tsx"
+  - "*.po" # PO translation files
 # Any typos we should ignore?
 excluded_words:
   - typoci

www/.gitignore

@@ -34,3 +34,7 @@ src/cache
 
 # Env variables
 .env*
+
+# Lingui
+src/data/locales/**/messages.js
+src/data/locales/_build

www/gatsby-node.js

@@ -1,6 +1,7 @@
 const Promise = require(`bluebird`)
 const fetch = require(`node-fetch`)
 const fs = require(`fs-extra`)
+const child_process = require(`child_process`)
 const startersRedirects = require(`./starter-redirects.json`)
 const yaml = require(`js-yaml`)
 const redirects = yaml.load(fs.readFileSync(`./redirects.yaml`))
@@ -37,6 +38,10 @@ exports.onCreateNode = helpers => {
   sections.forEach(section => section.onCreateNode(helpers))
 }
 
+exports.onPreInit = () => {
+  child_process.execSync(`yarn lingui:build`)
+}
+
 exports.onPostBuild = () => {
   fs.copySync(
     `../docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/gatsbygram.mp4`,

www/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/styled": "^10.0.23",
     "@jamo/graphql-request": "2.0.2",
+    "@lingui/react": "^2.9.1",
     "@loadable/component": "^5.11.0",
     "@mdx-js/mdx": "^1.5.1",
     "@reach/skip-nav": "^0.6.2",
@@ -110,6 +111,26 @@
   "license": "MIT",
   "main": "n/a",
   "private": true,
+  "lingui": {
+    "sourceLocale": "en",
+    "extractBabelOptions": {
+      "presets": [
+        "babel-preset-gatsby"
+      ]
+    },
+    "localeDir": "src/data/locales",
+    "srcPathDirs": [
+      "src/components",
+      "src/pages",
+      "src/templates",
+      "src/views"
+    ],
+    "srcPathIgnorePatterns": [
+      "__tests__"
+    ],
+    "format": "po",
+    "sorting": "origin"
+  },
   "scripts": {
     "build": "gatsby build",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
@@ -121,11 +142,19 @@
     "scrapeStarters": "cd src/data/StarterShowcase && node scraper.js",
     "stylelint": "stylelint './src/**/*.js'",
     "forestry:preview": "gatsby develop -p 8080 -H 0.0.0.0",
-    "postinstall": "cd plugins/gatsby-transformer-gatsby-api-calls && npm install"
+    "postinstall": "cd plugins/gatsby-transformer-gatsby-api-calls && npm install",
+    "lingui:add-locale": "lingui add-locale",
+    "lingui:extract": "lingui extract",
+    "lingui:compile": "lingui compile",
+    "lingui:build": "yarn lingui:extract && yarn lingui:compile"
   },
   "devDependencies": {
+    "@lingui/cli": "^2.9.1",
+    "@lingui/macro": "^2.9.1",
     "@testing-library/react": "^8.0.9",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
+    "babel-plugin-macros": "^2.8.0",
     "babel-preset-gatsby": "^0.2.23",
     "cross-env": "^5.2.1",
     "front-matter": "^2.3.0",

www/src/components/dark-mode-toggle.js

@@ -1,6 +1,8 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { useColorMode } from "theme-ui"
+import { t } from "@lingui/macro"
+import { withI18n } from "@lingui/react"
 
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
@@ -123,26 +125,27 @@ const MoonMask = styled.div`
   width: 24px;
 `
 
-function DarkModeToggle() {
+function DarkModeToggle({ i18n }) {
   const [colorMode, setColorMode] = useColorMode()
   const isDark = colorMode === `dark`
 
   function toggleColorMode(event) {
     event.preventDefault()
     setColorMode(isDark ? `light` : `dark`)
   }
+  const label = isDark ? t`Activate light mode` : t`Activate dark mode`
 
   return (
     <IconWrapper
       isDark={isDark}
       onClick={toggleColorMode}
-      aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
-      title={isDark ? `Activate light mode` : `Activate dark mode`}
+      aria-label={label}
+      title={label}
     >
       <MoonOrSun isDark={isDark} />
       <MoonMask isDark={isDark} />
     </IconWrapper>
   )
 }
 
-export default DarkModeToggle
+export default withI18n()(DarkModeToggle)

www/src/components/docs-table-of-contents.js

@@ -1,7 +1,11 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import { Link } from "gatsby"
-import { colors, mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
+import { Trans } from "@lingui/macro"
+import {
+  colors,
+  mediaQueries,
+} from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 function isUnderDepthLimit(depth, maxDepth) {
   if (maxDepth === null) {
@@ -86,7 +90,7 @@ function TableOfContents({ page, location }) {
           textTransform: `uppercase`,
         }}
       >
-        Table of Contents
+        <Trans>Table of Contents</Trans>
       </h2>
       <ul
         sx={{

www/src/components/guide-list.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Trans } from "@lingui/macro"
 
 import docsHierarchy from "../data/sidebars/doc-links.yaml"
 import tutorialHierarchy from "../data/sidebars/tutorial-links.yaml"
@@ -42,7 +43,9 @@ const GuideList = ({ slug }) => {
   ))
   const toc = subitemList.length ? (
     <>
-      <h2>In this section:</h2>
+      <h2>
+        <Trans>In this section:</Trans>
+      </h2>
       <ul>{subitemList}</ul>
     </>
   ) : null

www/src/components/markdown-page-footer.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import React from "react"
+import { Trans } from "@lingui/macro"
 import { graphql } from "gatsby"
 import EditIcon from "react-icons/lib/md/create"
 
@@ -20,9 +21,9 @@ export default class MarkdownPageFooter extends React.Component {
               this.props.packagePage ? `packages` : `docs`
             }/${this.props.page ? this.props.page.parent.relativePath : ``}`}
           >
-            <EditIcon sx={{ marginRight: 2 }} />
-            {` `}
-            Edit this page on GitHub
+            <Trans>
+              <EditIcon sx={{ marginRight: 2 }} /> Edit this page on GitHub
+            </Trans>
           </a>
         )}
       </>

www/src/components/navigation-mobile.js

@@ -1,6 +1,8 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import { Link } from "gatsby"
+import { t } from "@lingui/macro"
+import { withI18n } from "@lingui/react"
 
 import {
   BlogIcon,
@@ -39,8 +41,15 @@ const MobileNavItem = ({ linkTo, label, icon }) => (
     <div>{label}</div>
   </Link>
 )
+const navItems = [
+  { id: "docs", text: t`Docs`, icon: DocsIcon },
+  { id: `tutorial`, text: t`Tutorials`, icon: TutorialIcon },
+  { id: `plugins`, text: t`Plugins`, icon: PluginsIcon },
+  { id: `blog`, text: t`Blog`, icon: BlogIcon },
+  { id: `showcase`, text: t`Showcase`, icon: ShowcaseIcon },
+]
 
-const MobileNavigation = () => (
+const MobileNavigation = ({ i18n }) => (
   <div
     sx={{
       alignItems: `center`,
@@ -62,15 +71,18 @@ const MobileNavigation = () => (
       },
     }}
   >
-    <MobileNavItem linkTo="/docs/" label="Docs" icon={DocsIcon} />
-    <MobileNavItem linkTo="/tutorial/" label="Tutorials" icon={TutorialIcon} />
-    <MobileNavItem linkTo="/plugins/" label="Plugins" icon={PluginsIcon} />
-    <MobileNavItem linkTo="/blog/" label="Blog" icon={BlogIcon} />
-    <MobileNavItem linkTo="/showcase/" label="Showcase" icon={ShowcaseIcon} />
+    {navItems.map(({ id, text, icon }) => (
+      <MobileNavItem
+        linkTo={`/${id}/`}
+        key={id}
+        text={i18n._(text)}
+        icon={icon}
+      />
+    ))}
   </div>
 )
 
-export default MobileNavigation
+export default withI18n()(MobileNavigation)
 
 const styles = {
   svg: {

www/src/components/navigation.js

@@ -1,6 +1,8 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import { useColorMode } from "theme-ui"
+import { withI18n } from "@lingui/react"
+import { t, Trans } from "@lingui/macro"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import TwitterIcon from "react-icons/lib/fa/twitter"
 
@@ -80,7 +82,17 @@ const SocialNavItem = ({ href, title, children }) => (
   </a>
 )
 
-const Navigation = ({ pathname }) => {
+const navItems = [
+  { id: "docs", text: t`Docs` },
+  { id: "tutorial", text: t`Tutorial` },
+  { id: "plugins", text: t`Plugins` },
+  { id: "features", text: t`Features` },
+  { id: "blog", text: t`Blog` },
+  { id: "showcase", text: t`Showcase` },
+  { id: "contributing", text: t`Contributing` },
+]
+
+const Navigation = ({ pathname, i18n }) => {
   const [colorMode] = useColorMode()
   const isHomepage = pathname === `/`
 
@@ -149,7 +161,7 @@ const Navigation = ({ pathname }) => {
             width: [`24px`, null, `auto`],
             overflow: [`hidden`, null, `visible`],
           }}
-          aria-label="Gatsby, Back to homepage"
+          aria-label={i18n._(t`Gatsby, Back to homepage`)}
         >
           <img
             src={colorMode === `light` ? logo : logoInverted}
@@ -159,13 +171,13 @@ const Navigation = ({ pathname }) => {
               maxWidth: `none`,
               m: 0,
             }}
-            alt="Gatsby Logo"
+            alt={i18n._(t`Gatsby Logo`)}
             aria-hidden="true"
           />
         </Link>
         <nav
           className="navigation"
-          aria-label="Primary Navigation"
+          aria-label={i18n._(t`Primary Navigation`)}
           sx={{
             display: `none`,
             [mediaQueries.md]: {
@@ -193,14 +205,11 @@ const Navigation = ({ pathname }) => {
               },
             }}
           >
-            <NavItem linkTo="/docs/">Docs</NavItem>
-            <NavItem linkTo="/tutorial/">Tutorials</NavItem>
-            <NavItem linkTo="/plugins/">Plugins</NavItem>
-            <NavItem linkTo="/features/">Features</NavItem>
-            <NavItem linkTo="/blog/">Blog</NavItem>
-            <NavItem linkTo="/showcase/">Showcase</NavItem>
-            <NavItem linkTo="/contributing/">Contributing</NavItem>
-            {/* <NavItem linkTo="/starters/">Starters</NavItem> */}
+            {navItems.map(({ id, text }) => (
+              <NavItem key={id} linkTo={`/${id}/`}>
+                <Trans id={text} />
+              </NavItem>
+            ))}
           </ul>
         </nav>
         <SearchForm key="SearchForm" offsetVertical={navItemTopOffset} />
@@ -254,4 +263,4 @@ const Navigation = ({ pathname }) => {
   )
 }
 
-export default Navigation
+export default withI18n()(Navigation)

www/src/components/prev-and-next.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
+import { t, Trans } from "@lingui/macro"
+import { withI18n } from "@lingui/react"
 import Link from "./localized-link"
 import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 import ArrowBackIcon from "react-icons/lib/md/arrow-back"
@@ -25,14 +27,14 @@ const prevNextLabelStyles = {
   mt: 0,
 }
 
-const PrevAndNext = ({ prev = null, next = null, ...props }) => {
+const PrevAndNext = ({ prev = null, next = null, i18n, ...props }) => {
   if (!prev && !next) {
     return null
   }
 
   return (
     <nav
-      aria-label="pagination"
+      aria-label={i18n._(t`pagination`)}
       sx={{
         [mediaQueries.sm]: {
           display: `flex`,
@@ -45,7 +47,9 @@ const PrevAndNext = ({ prev = null, next = null, ...props }) => {
       <div css={{ [mediaQueries.sm]: { width: `48%` } }}>
         {prev && (
           <Link to={prev.link} sx={prevNextLinkStyles}>
-            <p sx={prevNextLabelStyles}>Previous</p>
+            <p sx={prevNextLabelStyles}>
+              <Trans>Previous</Trans>
+            </p>
             <span
               sx={{
                 [mediaQueries.md]: {
@@ -76,7 +80,9 @@ const PrevAndNext = ({ prev = null, next = null, ...props }) => {
       >
         {next && (
           <Link to={next.link} sx={prevNextLinkStyles}>
-            <p sx={prevNextLabelStyles}>Next</p>
+            <p sx={prevNextLabelStyles}>
+              <Trans>Next</Trans>
+            </p>
             <span
               sx={{
                 [mediaQueries.md]: {
@@ -102,4 +108,4 @@ const PrevAndNext = ({ prev = null, next = null, ...props }) => {
   )
 }
 
-export default PrevAndNext
+export default withI18n()(PrevAndNext)