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,137 +9,152 @@ import { tablet } from '../util/css';
 import Contributors from '../components/Contributors';
 
 const Footer: React.FC = () => {
-  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>
-      </Pane>
-
-      <Pane>
-        <Title>Community</Title>
-        <ul>
-          <li>
-            <OutboundLink
-              to="https://github.com/uetchy/namae"
-              eventLabel="GitHub Repo"
-              aria-label="Go to GitHub repository"
-              target="_blank"
-            >
-              GitHub
-            </OutboundLink>
-          </li>
-          <li>
-            <OutboundLink
-              to="https://github.com/uetchy/namae/issues"
-              eventLabel="GitHub Issues"
-              aria-label="Go to GitHub Issues"
-              target="_blank"
-            >
-              Issues
-            </OutboundLink>
-          </li>
-          <li>
-            <OutboundLink
-              to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
-              eventLabel="Blog article"
-              aria-label="Go to blog"
-              target="_blank"
-            >
-              Blog Article
-            </OutboundLink>
-          </li>
-        </ul>
-        <Box>
-          <Subtitle>Contributors</Subtitle>
-          <Contributors />
-        </Box>
-      </Pane>
-
-      <Pane>
-        <Title>About</Title>
-        <p>
-          Made with{'  '}
-          <span role="img" aria-label="coffee">
-            ☕️
-          </span>{' '}
-          by{' '}
-          <OutboundLink
-            to="https://twitter.com/uechz"
-            eventLabel="Author Page"
-            aria-label="Author page"
-            target="_blank"
-          >
-            <Bold>Yasuaki Uechi</Bold>
-          </OutboundLink>
-        </p>
-        <ShareBox>
-          <Links>
-            <OutboundLink
-              to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
-                `namae — ${t('title')}`,
-              )}&url=${encodeURIComponent('https://namae.dev')}`}
-              eventLabel="Tweet"
-              aria-label="Tweet this page"
-              target="_blank"
-            >
-              <FaTwitter />
-            </OutboundLink>
-            <OutboundLink
-              to="https://www.producthunt.com/posts/namae"
-              eventLabel="ProductHunt"
-              aria-label="Go to ProductHunt page"
-              target="_blank"
-            >
-              <FaProductHunt />
-            </OutboundLink>
-            <OutboundLink
-              to="https://github.com/uetchy/namae"
-              eventLabel="GitHub Repo"
-              aria-label="Go to GitHub repository"
-              target="_blank"
-            >
-              <FaGithub />
-            </OutboundLink>
-            <OutboundLink
-              to="https://github.com/sponsors/uetchy"
-              eventLabel="GitHub Sponsors"
-              aria-label="Go to GitHub Sponsors"
-              target="_blank"
-            >
-              <SponsorBadge>
-                <GoHeart size="1.3rem" />
-                <span>Sponsor</span>
-              </SponsorBadge>
-            </OutboundLink>
-          </Links>
-        </ShareBox>
-      </Pane>
+      <Languages />
+      <Community />
+      <About />
     </Container>
   );
 };
 export default Footer;
 
+const Languages = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Pane>
+      <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>{t('community')}</Title>
+      <ul>
+        <li>
+          <OutboundLink
+            to="https://github.com/uetchy/namae"
+            eventLabel="GitHub Repo"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+          >
+            GitHub
+          </OutboundLink>
+        </li>
+        <li>
+          <OutboundLink
+            to="https://github.com/uetchy/namae/issues"
+            eventLabel="GitHub Issues"
+            aria-label="Go to GitHub Issues"
+            target="_blank"
+          >
+            {t('issues')}
+          </OutboundLink>
+        </li>
+        <li>
+          <OutboundLink
+            to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
+            eventLabel="Blog article"
+            aria-label="Go to blog"
+            target="_blank"
+          >
+            {t('blog')}
+          </OutboundLink>
+        </li>
+      </ul>
+      <Box>
+        <Subtitle>{t('contributors')}</Subtitle>
+        <Contributors />
+      </Box>
+    </Pane>
+  );
+};
+
+const About = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Pane>
+      <Title>{t('about')}</Title>
+      <p>
+        Made with{'  '}
+        <span role="img" aria-label="coffee">
+          ☕️
+        </span>{' '}
+        by{' '}
+        <OutboundLink
+          to="https://twitter.com/uechz"
+          eventLabel="Author Page"
+          aria-label="Author page"
+          target="_blank"
+        >
+          <Bold>Yasuaki Uechi</Bold>
+        </OutboundLink>
+      </p>
+      <ShareBox>
+        <Links>
+          <OutboundLink
+            to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+              `namae — ${t('title')}`,
+            )}&url=${encodeURIComponent('https://namae.dev')}`}
+            eventLabel="Tweet"
+            aria-label="Tweet this page"
+            target="_blank"
+          >
+            <FaTwitter />
+          </OutboundLink>
+          <OutboundLink
+            to="https://www.producthunt.com/posts/namae"
+            eventLabel="ProductHunt"
+            aria-label="Go to ProductHunt page"
+            target="_blank"
+          >
+            <FaProductHunt />
+          </OutboundLink>
+          <OutboundLink
+            to="https://github.com/uetchy/namae"
+            eventLabel="GitHub Repo"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+          >
+            <FaGithub />
+          </OutboundLink>
+          <OutboundLink
+            to="https://github.com/sponsors/uetchy"
+            eventLabel="GitHub Sponsors"
+            aria-label="Go to GitHub Sponsors"
+            target="_blank"
+          >
+            <SponsorBadge>
+              <GoHeart size="1.3rem" />
+              <span>Sponsor</span>
+            </SponsorBadge>
+          </OutboundLink>
+        </Links>
+      </ShareBox>
+    </Pane>
+  );
+};
+
 const Container = styled(Section)`
   --text: #bdbdbd;
   --background: #404040;
@@ -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,
           },
         },
       ],