feat(about): i18n

tokanada · Oct 6, 2022 · 87f9fdb · 87f9fdb
1 parent 5da258a
commit 87f9fdb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 52 deletions.
diff --git a/locales/en/about.json b/locales/en/about.json
@@ -0,0 +1,16 @@
+{
+    "About": "About",
+    "Contributors:": "Contributors:",
+    "site_desc": "INFO PRIDE is a info site for Project IDOLY PRIDE fans/players.",
+    "loading_contribs": "Loading contributors...",
+    "emoji_a11y": "Accessibility",
+    "emoji_audio": "Audio",
+    "emoji_blog": "Blog",
+    "emoji_bug": "Bug",
+    "emoji_code": "Code",
+    "emoji_content": "Content",
+    "emoji_data": "Data",
+    "emoji_design": "Design",
+    "emoji_doc": "Documentation",
+    "emoji_translation": "Translation"
+}
diff --git a/locales/zh-hans/about.json b/locales/zh-hans/about.json
@@ -0,0 +1,16 @@
+{
+    "About": "关于",
+    "Contributors:": "贡献者们：",
+    "site_desc": "INFO PRIDE 是一个为 IDOLY PRIDE 企划同好及游戏玩家设计的信息站点。",
+    "loading_contribs": "正在加载贡献列表...",
+    "emoji_a11y": "可访问性",
+    "emoji_audio": "音频",
+    "emoji_blog": "文章",
+    "emoji_bug": "问题报告",
+    "emoji_code": "代码",
+    "emoji_content": "内容",
+    "emoji_data": "数据",
+    "emoji_design": "设计",
+    "emoji_doc": "文档",
+    "emoji_translation": "翻译"
+}
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,5 +1,6 @@
 import { Avatar, Card, Grid } from '@mantine/core'
 import { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
 
 import type { Contributor } from '#components/api/contributors/types'
 import Title from '#components/Title'
@@ -12,50 +13,22 @@ import getI18nProps from '#utils/getI18nProps'
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 // Adopted from https://github.com/all-contributors/cli/blob/e9c1f55beb2c18391a5d5f0c9e8243dc3f89ebe3/src/util/contribution-types.js
-const EmojiTypes = {
-    a11y: {
-        symbol: '️️️️♿️',
-        description: '可访问性',
-    },
-    audio: {
-        symbol: '🔊',
-        description: '音频',
-    },
-    blog: {
-        symbol: '📝',
-        description: '文章',
-    },
-    bug: {
-        symbol: '🐛',
-        description: '问题报告',
-    },
-    code: {
-        symbol: '💻',
-        description: '代码',
-    },
-    content: {
-        symbol: '🖋',
-        description: '内容',
-    },
-    data: {
-        symbol: '🔣',
-        description: '数据',
-    },
-    design: {
-        symbol: '🎨',
-        description: '设计',
-    },
-    doc: {
-        symbol: '📖',
-        description: '文档',
-    },
-    translation: {
-        symbol: '🌍',
-        description: '翻译',
-    },
+const EmojiTypes: Record<string, string> = {
+    a11y: '️️️️♿️',
+    audio: '🔊',
+    blog: '📝',
+    bug: '🐛',
+    code: '💻',
+    content: '🖋',
+    data: '🔣',
+    design: '🎨',
+    doc: '📖',
+    translation: '🌍',
 }
 
 const ContributorBox = ({ contrib }: { contrib: Contributor }) => {
+    const $t = useTranslations('about')
+
     const { name, login, avatar_url, profile, contributions } = contrib
     return (
         <Card shadow="sm" p="sm" radius="md" className="flex items-center">
@@ -71,11 +44,11 @@ const ContributorBox = ({ contrib }: { contrib: Contributor }) => {
                 </a>
                 <br />
                 {contributions.map((c, key) => {
-                    const typ = EmojiTypes[c as keyof typeof EmojiTypes]
+                    const typ = EmojiTypes[c]
                     if (typ) {
                         return (
-                            <a key={key} href="#" title={typ.description}>
-                                {typ.symbol}
+                            <a key={key} href="#" title={$t(`emoji_${c}`)}>
+                                {typ}
                             </a>
                         )
                     }
@@ -87,6 +60,8 @@ const ContributorBox = ({ contrib }: { contrib: Contributor }) => {
 }
 
 const AboutPage = () => {
+    const $t = useTranslations('about')
+
     const [contribs, setContribs] = useState<Contributor[]>([])
 
     useEffect(() => {
@@ -99,16 +74,13 @@ const AboutPage = () => {
     }, [])
     return (
         <>
-            <Title title="关于" />
-            <p>
-                INFO PRIDE 是一个为 IDOLY PRIDE
-                企划同好及游戏玩家设计的信息站点。
-            </p>
+            <Title title={$t('About')} />
+            <p>{$t('site_desc')}</p>
             {contribs.length === 0 ? (
-                <p className="text-gray-500">正在加载贡献列表...</p>
+                <p className="text-gray-500">{$t('loading_contribs')}</p>
             ) : (
                 <>
-                    <p>贡献者们：</p>
+                    <p>{$t('Contributors:')}</p>
                     <Grid>
                         {contribs.map((one, idx) => (
                             <Grid.Col xs={12} md={6} lg={4} key={idx}>
@@ -122,6 +94,6 @@ const AboutPage = () => {
     )
 }
 
-export const getStaticProps = getI18nProps()
+export const getStaticProps = getI18nProps(['about'])
 
 export default AboutPage