feat: add zh-Hant (#120)

public/locales/en/translation.json

@@ -42,5 +42,11 @@
   "gettingStartedWithExample": "Try with namae",
   "pressEnterToSearch": "Press Enter to search",
   "available": "Available",
-  "unavailable": "Unavailable"
+  "unavailable": "Unavailable",
+  "language": "Language",
+  "community": "Community",
+  "about": "About",
+  "contributors": "Contributors",
+  "issues": "Issues",
+  "blog": "Blog Article"
 }

public/locales/ja/translation.json

@@ -42,5 +42,11 @@
   "gettingStartedWithExample": "namae を調べる",
   "pressEnterToSearch": "エンターキーで検索",
   "available": "取得できます",
-  "unavailable": "取得できません"
+  "unavailable": "取得できません",
+  "language": "言語",
+  "community": "コミュニティ",
+  "about": "概要",
+  "contributors": "貢献者",
+  "issues": "Issues",
+  "blog": "ブログ"
 }

public/locales/zh-Hans/translation.json

@@ -42,5 +42,11 @@
   "gettingStartedWithExample": "试试 namae",
   "pressEnterToSearch": "按Enter键搜索",
   "available": "可获得",
-  "unavailable": "买不到"
+  "unavailable": "不可获得",
+  "language": "语言",
+  "community": "社区",
+  "about": "关于",
+  "contributors": "贡献者",
+  "issues": "问题",
+  "blog": "博客"
 }

public/locales/zh-Hant/translation.json

@@ -0,0 +1,52 @@
+{
+  "title": "為您的新應用取個好聽的名字",
+  "description": "namae可讓您給您的應用程序、Web服務或組織起一個好名字。",
+  "placeholder": "檢驗",
+  "providers": {
+    "domains": "域名",
+    "github": "GitHub 組織",
+    "gitlab": "GitLab",
+    "npm": "npm",
+    "pypi": "PyPI",
+    "rubygems": "RubyGems",
+    "rust": "Rust",
+    "homebrew": "Homebrew",
+    "linux": "Linux",
+    "instagram": "Instagram",
+    "twitter": "推特",
+    "slack": "Slack",
+    "s3": "AWS S3",
+    "jsorg": "js.org",
+    "githubSearch": "GitHub 倉庫",
+    "appStore": "App Store",
+    "google": "谷歌",
+    "spectrum": "Spectrum",
+    "heroku": "Heroku",
+    "now": "Vercel",
+    "netlify": "Netlify",
+    "nta": "在日本的公司",
+    "ocaml": "OCaml",
+    "firebase": "Firebase"
+  },
+  "uniqueness": {
+    "high": "超級獨特",
+    "moderate": "有點獨特",
+    "low": "普通",
+    "description": "UNIQ表示名稱的獨特性（0-100）"
+  },
+  "countryCode": "jp",
+  "try": "這個呢？",
+  "showMore": "更多",
+  "noResult": "無結果",
+  "gettingStarted": "起步",
+  "gettingStartedWithExample": "試試 namae",
+  "pressEnterToSearch": "按Enter鍵搜索",
+  "available": "可獲得",
+  "unavailable": "不可獲得",
+  "language": "語言",
+  "community": "社區",
+  "about": "關於",
+  "contributors": "貢獻者",
+  "issues": "問題",
+  "blog": "博客"
+}

src/components/Footer.tsx

@@ -9,35 +9,46 @@ import { tablet } from '../util/css';
 import Contributors from '../components/Contributors';
 
 const Footer: React.FC = () => {
+  return (
+    <Container>
+      <Languages />
+      <Community />
+      <About />
+    </Container>
+  );
+};
+export default Footer;
+
+const Languages = () => {
   const { t } = useTranslation();
 
   return (
-    <Container>
     <Pane>
-        <Title>Language</Title>
-        <LangBox>
-          <Links>
-            <a href="/?lng=en">
-              <span role="img" aria-label="English">
-                🇬🇧
-              </span>
-            </a>
-            <a href="/?lng=ja">
-              <span role="img" aria-label="Japanese">
-                🇯🇵
-              </span>
-            </a>
-            <a href="/?lng=zh-Hans">
-              <span role="img" aria-label="Simplified Chinese">
-                🇨🇳
-              </span>
-            </a>
-          </Links>
-        </LangBox>
+      <Title>{t('language')}</Title>
+      <ul>
+        <li>
+          <a href="/?lng=en">English</a>
+        </li>
+        <li>
+          <a href="/?lng=ja">日本語</a>
+        </li>
+        <li>
+          <a href="/?lng=zh-Hans">简体中文</a>
+        </li>
+        <li>
+          <a href="/?lng=zh-Hant">繁体中文</a>
+        </li>
+      </ul>
     </Pane>
+  );
+};
 
+const Community = () => {
+  const { t } = useTranslation();
+
+  return (
     <Pane>
-        <Title>Community</Title>
+      <Title>{t('community')}</Title>
       <ul>
         <li>
           <OutboundLink
@@ -56,7 +67,7 @@ const Footer: React.FC = () => {
             aria-label="Go to GitHub Issues"
             target="_blank"
           >
-              Issues
+            {t('issues')}
           </OutboundLink>
         </li>
         <li>
@@ -66,18 +77,24 @@ const Footer: React.FC = () => {
             aria-label="Go to blog"
             target="_blank"
           >
-              Blog Article
+            {t('blog')}
           </OutboundLink>
         </li>
       </ul>
       <Box>
-          <Subtitle>Contributors</Subtitle>
+        <Subtitle>{t('contributors')}</Subtitle>
         <Contributors />
       </Box>
     </Pane>
+  );
+};
 
+const About = () => {
+  const { t } = useTranslation();
+
+  return (
     <Pane>
-        <Title>About</Title>
+      <Title>{t('about')}</Title>
       <p>
         Made with{'  '}
         <span role="img" aria-label="coffee">
@@ -135,10 +152,8 @@ const Footer: React.FC = () => {
         </Links>
       </ShareBox>
     </Pane>
-    </Container>
   );
 };
-export default Footer;
 
 const Container = styled(Section)`
   --text: #bdbdbd;
@@ -197,17 +212,6 @@ const Links = styled.div`
   }
 `;
 
-const LangBox = styled.div`
-  line-height: 1em;
-  font-size: 2rem;
-
-  ${Links} {
-    a {
-      margin-right: 5px;
-    }
-  }
-`;
-
 const ShareBox = styled.div`
   margin-top: 15px;
   line-height: 1em;

src/util/i18n.ts

@@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-const TRANSLATION_VERSION = '1.19';
+const TRANSLATION_VERSION = '2';
 
 i18n
   .use(Backend)
@@ -20,6 +20,7 @@ i18n
             en: TRANSLATION_VERSION,
             ja: TRANSLATION_VERSION,
             'zh-Hans': TRANSLATION_VERSION,
+            'zh-Hant': TRANSLATION_VERSION,
           },
         },
       ],