feature(www): Translate text through js-lingui

www/.babelrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["macros"],
+  "presets": [["babel-preset-gatsby"]]
+}

www/.gitignore

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

www/.linguirc

@@ -0,0 +1,7 @@
+{
+   "sourceLocale": "en",
+   "localeDir": "src/data/locales",
+   "srcPathDirs": ["src/components", "src/pages", "src/templates", "src/views"],
+   "format": "po",
+   "sorting": "origin"
+}

www/i18n.json

@@ -1,8 +1 @@
-[
-  { "code": "es", "name": "Spanish" },
-  { "code": "id", "name": "Indonesian" },
-  { "code": "ja", "name": "Japanese" },
-  { "code": "pl", "name": "Polish" },
-  { "code": "pt-BR", "name": "Brazilian Portuguese" },
-  { "code": "zh-Hans", "name": "Simplified Chinese" }
-]
+[{ "code": "ja", "name": "Japanese" }]

www/package.json

@@ -4,8 +4,10 @@
   "version": "2.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "@babel/core": "^7.8.4",
     "@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",
@@ -111,7 +113,7 @@
   "main": "n/a",
   "private": true,
   "scripts": {
-    "build": "gatsby build",
+    "build": "lingui compile && gatsby build",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "develop": "cross-env GATSBY_GRAPHQL_IDE=playground gatsby develop",
     "start": "npm run develop",
@@ -121,11 +123,18 @@
     "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": "NODE_ENV=test lingui extract",
+    "lingui:compile": "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)

www/src/components/search-form/search-form.js

@@ -2,6 +2,8 @@
 import { jsx } from "theme-ui"
 import React from "react"
 import { navigate } from "gatsby"
+import { withI18n } from "@lingui/react"
+import { t } from "@lingui/macro"
 
 import SearchIcon from "../search-icon"
 import { themedInput } from "../../utils/styles"
@@ -13,7 +15,7 @@ import { Global } from "@emotion/core"
 
 import algoliaStyles from "./algolia-styles"
 
-export default function SearchForm() {
+function SearchForm({ i18n }) {
   const [focused, setFocus] = React.useState(false)
   const [isInit, setInit] = React.useState(false)
   const searchInput = React.useRef(null)
@@ -144,9 +146,9 @@ export default function SearchForm() {
               `width ${t.transition.speed.default} ${t.transition.curve.default}, padding ${t.transition.speed.default} ${t.transition.curve.default}`,
           }}
           type="search"
-          placeholder={`Search gatsbyjs.org`}
-          aria-label="Search gatsbyjs.org"
-          title="Hit 's' to search docs"
+          placeholder={i18n._(t`Search gatsbyjs.org`)}
+          aria-label={i18n._(t`Search gatsbyjs.org`)}
+          title={i18n._(t`Hit 's' to search docs`)}
           onFocus={() => setFocus(true)}
           onBlur={() => setFocus(false)}
           ref={searchInput}
@@ -156,3 +158,5 @@ export default function SearchForm() {
     </form>
   )
 }
+
+export default withI18n(SearchForm)