docs: ✏️ 添加基础翻译（导航,游戏界面,说明界面)

Author: lei

public/locales/en/translation.json

@@ -1,3 +1,6 @@
 {
-  "Start Game": "Start Game"
+  "Design Patterns Intro": "get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!",
+  "Game Intro1": "Each question contains a code snippet and four answer choices.",
+  "Game Intro2": "Look carefully at the code and choose the one correct answer.",
+  "Game Intro3": "After answering all 23 questions you'll be shown your results."
 }

public/locales/zh/translation.json

@@ -1,3 +1,18 @@
 {
-  "Start Game": "开始游戏"
+  "Start Game": "开始游戏",
+  "Game": "游戏",
+  "Pattern Reference": "参考",
+  "About": "关于",
+  "Back to Patterns List": "返回模式列表",
+  "Design Patterns Game": "设计模式游戏",
+  "\"Gang of Four\" patterns in JavaScript": "JavaScript 中的 GOF 设计模式",
+  "The Game": "游戏介绍",
+  "Design Patterns": "设计模式",
+  "Design Patterns Intro": "熟悉在JavaScript中实现的设计模式，用来测试自己（或其他人）或只是为了好玩🤣",
+  "References": "引用",
+  "Felipe Beline References": "所有的示例代码来自于",
+  "Addy Osmani References": "如果你想深入了解这个主题，推荐 Addy Osmani的",
+  "Game Intro1": "每个问题都包含一个代码片段和四个答案选项。",
+  "Game Intro2": "仔细查看代码并选择一个正确答案。",
+  "Game Intro3": "回答全部23个问题后你会看到你的测试结果"
 }

src/components/Header.jsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { Route, withRouter, NavLink as Link } from 'react-router-dom';
 import Toggle from './Toggle';
 import Title from './Title';
+import { useTranslation } from 'react-i18next';
 
 const StyledHeader = styled.header`
   align-items: center;
@@ -56,22 +57,23 @@ const StyledRouterSpan = styled.span`
 `;
 
 const Header = props => {
+  const { t } = useTranslation();
   const {
     location: { pathname }
   } = props;
 
   const paths = [
     {
       path: '/',
-      page: 'Game'
+      page: t("Game")
     },
     {
       path: '/patterns',
-      page: 'Pattern Reference'
+      page: t("Pattern Reference")
     },
     {
       path: '/about',
-      page: 'About'
+      page: t("About")
     }
   ];
 
@@ -93,7 +95,6 @@ const Header = props => {
         <Route exact path="/" render={() => <Toggle control="js" />} />
         <Toggle control="mode" />
       </StyledSettingsContainer>
-
       <Title />
     </StyledHeader>
   );

src/components/Pattern.jsx

@@ -10,6 +10,8 @@ import styleDark from '../styles/hljs/hljs.dark';
 import { patterns } from '../static/patterns';
 import { restart } from '../actions/restart';
 import { getMode } from '../selectors';
+import { withTranslation } from 'react-i18next';
+
 
 SyntaxHighlighter.registerLanguage('javascript', js);
 
@@ -62,9 +64,11 @@ class Pattern extends React.Component {
 
     const style = this.props.mode === 'dark' ? styleDark : styleLight;
 
+    const { t } = this.props;
+
     return (
       <StyledPattern>
-        <StyledLink to="/patterns">&larr; Back to Patterns List</StyledLink>
+        <StyledLink to="/patterns">&larr; {t('Back to Patterns List')}</StyledLink>
         {pattern && (
           <React.Fragment>
             <h2>{pattern.name}</h2>
@@ -105,11 +109,11 @@ Pattern.propTypes = {
   reset: PropTypes.func.isRequired
 };
 
-export default connect(
+export default withTranslation()(connect(
   state => ({
     mode: getMode(state)
   }),
   {
     reset: () => restart()
   }
-)(Pattern);
+)(Pattern));

src/components/PatternsList.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { patterns } from '../static/patterns';
+import { useTranslation } from 'react-i18next';
 
 const StyledPatterns = styled.div`
   color: ${props => props.theme.text};
@@ -44,9 +45,10 @@ const PatternsList = () => {
     </ul>
   );
 
+  const { t } = useTranslation();
   return (
     <StyledPatterns>
-      <h2>Design Patterns</h2>
+      <h2>{t('Design Patterns')}</h2>
 
       <p>
         In software engineering, a design pattern is a general repeatable solution to a commonly

src/components/Title.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 
 const TitleContainer = styled.div`
   padding: 0.75rem 0 1rem;
@@ -23,11 +24,14 @@ const SubHeading = styled.h2`
   margin: 0.75rem 0 0;
 `;
 
-export const Title = () => (
-  <TitleContainer>
-    <Heading>Design Patterns Game</Heading>
-    <SubHeading>&ldquo;Gang of Four&rdquo; patterns in JavaScript</SubHeading>
-  </TitleContainer>
-);
+export const Title = () => {
+  const { t } = useTranslation();
+  return (
+    <TitleContainer>
+      <Heading>{t('Design Patterns Game')}</Heading>
+      <SubHeading>{t('"Gang of Four" patterns in JavaScript')}</SubHeading>
+    </TitleContainer>
+  );
+};
 
 export default Title;

src/pages/About.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 
 const StyledAbout = styled.div`
   color: ${props => props.theme.text};
@@ -20,36 +21,37 @@ const Header = styled.h3`
   margin-top: 2rem;
 `;
 
-const About = () => (
-  <StyledAbout>
-    <Header>The Game</Header>
-    <p>
-      Design Patterns - get familiar with the design patterns implemented in JavaScript, test
-      yourself (or someone else) or simply for fun. Enjoy!
-    </p>
-
-    <Header>References</Header>
-    <p>
-      All the code samples are taken from this{' '}
-      <cite>
-        <a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
-          awesome code compilation
-        </a>{' '}
-        by Felipe Beline
-      </cite>
-      .
-    </p>
-    <p>
-      If you want a deep dive into the subject I can't recommend enough{' '}
-      <cite>
-        <a href="//addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank">
-          Learning JavaScript Design Patterns
-        </a>{' '}
-        by Addy Osmani
-      </cite>
-      .
-    </p>
-  </StyledAbout>
-);
+const About = () => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledAbout>
+      <Header>{t('The Game')}</Header>
+      <p>
+        {t('Design Patterns')} - {t('Design Patterns Intro')}
+      </p>
+
+      <Header>{t('References')}</Header>
+      <p>
+        {t('Felipe Beline References')}
+        <cite>
+          <a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
+            awesome code compilation
+          </a>
+        </cite>
+        .
+      </p>
+      <p>
+        {t('Addy Osmani References')}
+        <cite>
+          <a href="//addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank">
+            Learning JavaScript Design Patterns
+          </a>
+        </cite>
+        .
+      </p>
+    </StyledAbout>
+  );
+};
 
 export default About;

src/pages/Game.jsx

@@ -52,11 +52,11 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
       {intro && (
         <Intro>
           <p>
-            Each question contains a code snippet and four answer choices.
+            {t('Game Intro1')}
             <br />
-            Look carefully at the code and choose the one correct answer.
+            {t('Game Intro2')}
           </p>
-          <p>After answering all 23 questions you'll be shown your results.</p>
+          <p>  {t('Game Intro3')}</p>
           <StartButtonContainer>
             <Button label={t("Start Game")} id="start" onClick={onStart} />
           </StartButtonContainer>