Translate single stigmata page

public/locales/en-US/common.json

@@ -9,7 +9,11 @@
   },
   "breadcrumb": {
     "honkai-3rd": "Honkai 3rd",
-    "battlesuits": "Battlesuits"
+    "battlesuits": "Battlesuits",
+    "stigmata": "Stigmata",
+    "top": "Top",
+    "mid": "Mid",
+    "bot": "Bot"
   },
   "battlesuits-list": {
     "heading": "Battlesuits",

public/locales/ko-KR/common.json

@@ -9,7 +9,11 @@
   },
   "breadcrumb": {
     "honkai-3rd": "붕괴 3rd",
-    "battlesuits": "발키리"
+    "battlesuits": "발키리",
+    "stigmata": "성흔",
+    "top": "(상)",
+    "mid": "(중)",
+    "bot": "(하)"
   },
   "battlesuits-list": {
     "heading": "발키리",

src/components/pages/SingleStigmataPage.tsx

@@ -6,8 +6,9 @@ import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
-import { capitalize } from '../../lib/string'
 import SecondaryLabel from '../atoms/SecondaryLabel'
+import { useRouter } from 'next/router'
+import { translate, useTranslation } from '../../lib/i18n'
 
 export interface SingleStigmataPageProps {
   type: 'single'
@@ -21,22 +22,39 @@ const SingleStigmataPage = ({
   stigmataSet,
   stigmataSetList,
 }: SingleStigmataPageProps) => {
+  const { locale } = useRouter()
+  const { t } = useTranslation()
+
+  const stigmataName = translate(
+    locale,
+    { 'ko-KR': stigmataData.krName },
+    stigmataData.name
+  )
+
+  const stigmataSkillDescription = translate(
+    locale,
+    {
+      'ko-KR': stigmataData.skill.krDescription,
+    },
+    stigmataData.skill.description
+  )
+
   return (
     <Box>
       <Honkai3rdNavigator />
       <Box p={3}>
         <Breadcrumb
           items={[
-            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
-            { href: '/honkai3rd/stigmata', label: 'Stigmata' },
+            { href: '/honkai3rd/stigmata', label: t('breadcrumb.stigmata') },
             {
               href: `/honkai3rd/stigmata/${stigmataData.id}`,
-              label: stigmataData.name,
+              label: stigmataName,
             },
           ]}
         />
 
-        <Heading as='h1'>{stigmataData.name}</Heading>
+        <Heading as='h1'>{stigmataName}</Heading>
 
         <Box
           mb={3}
@@ -49,7 +67,7 @@ const SingleStigmataPage = ({
           }}
         >
           <Image
-            alt={stigmataData.name}
+            alt={stigmataName}
             src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
             width={600}
             height={600}
@@ -59,7 +77,7 @@ const SingleStigmataPage = ({
 
         <Card mb={3}>
           <Box p={2} sx={{ borderBottom: 'default' }}>
-            {capitalize(stigmataData.type)}
+            {t(`breadcrumb.${stigmataData.type}`)}
           </Box>
           <Box p={2} sx={{ borderBottom: 'default' }}>
             {'⭐'.repeat(stigmataData.rarity)}
@@ -68,7 +86,7 @@ const SingleStigmataPage = ({
             HP : {stigmataData.hp} / ATK : {stigmataData.atk} / DEF :{' '}
             {stigmataData.def} / CRT : {stigmataData.crt}
           </Box>
-          <Paragraph p={2}>{stigmataData.skill.description}</Paragraph>
+          <Paragraph p={2}>{stigmataSkillDescription}</Paragraph>
         </Card>
 
         {stigmataSet != null && (
@@ -76,10 +94,20 @@ const SingleStigmataPage = ({
             <Box sx={{ p: 2, borderBottom: 'default' }}>
               <Heading as='h2' mb={1}>
                 <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
-                  {stigmataSet.name}
+                  {translate(
+                    locale,
+                    { 'ko-KR': stigmataSet.krName },
+                    stigmataSet.name
+                  )}
                 </PageLink>
               </Heading>
-              <SecondaryLabel>Set</SecondaryLabel>
+              <SecondaryLabel>
+                {translate(
+                  locale,
+                  { 'ko-KR': stigmataSet.krAltName },
+                  stigmataSet.altName
+                )}
+              </SecondaryLabel>
             </Box>
 
             <Flex
@@ -101,16 +129,32 @@ const SingleStigmataPage = ({
             </Flex>
 
             <Heading as='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {stigmataSet.twoSetSkill.name}
+              {translate(
+                locale,
+                { 'ko-KR': stigmataSet.twoSetSkill.krName },
+                stigmataSet.twoSetSkill.name
+              )}
             </Heading>
             <Paragraph m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {stigmataSet.twoSetSkill.description}
+              {translate(
+                locale,
+                { 'ko-KR': stigmataSet.twoSetSkill.krDescription },
+                stigmataSet.twoSetSkill.description
+              )}
             </Paragraph>
             <Heading as='h3' m={0} p={2} sx={{ borderBottom: 'default' }}>
-              {stigmataSet.threeSetSkill.name}
+              {translate(
+                locale,
+                { 'ko-KR': stigmataSet.threeSetSkill.krName },
+                stigmataSet.threeSetSkill.name
+              )}
             </Heading>
             <Paragraph m={0} p={2}>
-              {stigmataSet.threeSetSkill.description}
+              {translate(
+                locale,
+                { 'ko-KR': stigmataSet.threeSetSkill.krDescription },
+                stigmataSet.threeSetSkill.description
+              )}
             </Paragraph>
           </Card>
         )}

src/lib/honkai3rd/stigmata.ts

@@ -1,11 +1,14 @@
 export interface StigmataSkill {
   name: string
+  krName?: string
   description: string
+  krDescription?: string
 }
 
 export interface StigmataData {
   id: string
   name: string
+  krName?: string
   skill: StigmataSkill
   atk: number
   def: number
@@ -21,7 +24,9 @@ export interface StigmataData {
 export interface StigmataSet {
   id: string
   name: string
+  krName?: string
   altName: string
+  krAltName?: string
   twoSetSkill: StigmataSkill
   threeSetSkill: StigmataSkill
   rarity: 3 | 4 | 5

src/pages/honkai3rd/stigmata/[stigmataId].tsx

@@ -41,6 +41,7 @@ export async function getStaticProps({
           (a, b) => -a.type.localeCompare(b.type)
         ),
         stigmataSet: getStigmataSetBySetId(stigmataData.set!) || null,
+        ...(await getI18NProps(locale)),
       },
     }
   }

src/server/data/honkai3rd/stigmata.ts

@@ -1,4 +1,4 @@
-import { readdirSync, readJsonFileSync } from '../fs'
+import { readdirSync, readFileSync, readJsonFileSync } from '../fs'
 import { compareVersion } from '../../../lib/string'
 import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
 
@@ -8,6 +8,18 @@ const stigmataList = stigmataDataFileNameList
     const filePathname = 'honkai3rd/stigmata/' + fileName
     const data = readJsonFileSync(filePathname) as StigmataData
 
+    const krDataFilePath = `honkai3rd/ko-KR/stigmata/${data.id}.md`
+    try {
+      const krData = parseStigmataData(readFileSync(krDataFilePath).toString())
+
+      data.krName = krData.name
+      data.skill.krName = krData.skill.name
+      data.skill.krDescription = krData.skill.description
+    } catch (error) {
+      // console.warn('Failed to read', krDataFilePath)
+      // console.warn(error)
+    }
+
     return data
   })
   .filter((stigmataData) => !stigmataData.hidden)
@@ -57,6 +69,23 @@ const stigmataSetList = stigmataSetFileNameList
     const filePathname = 'honkai3rd/stigmata-sets/' + fileName
     const data = readJsonFileSync(filePathname) as StigmataSet
 
+    const krDataFilePath = `honkai3rd/ko-KR/stigmata-sets/${data.id}.md`
+    try {
+      const krData = parseStigmataSetData(
+        readFileSync(krDataFilePath).toString()
+      )
+
+      data.krName = krData.name
+      data.krAltName = krData.altName
+      data.twoSetSkill.krName = krData.twoSetSkill.name
+      data.twoSetSkill.krDescription = krData.twoSetSkill.description
+      data.threeSetSkill.krName = krData.threeSetSkill.name
+      data.threeSetSkill.krDescription = krData.threeSetSkill.description
+    } catch (error) {
+      // console.warn('Failed to read', krDataFilePath)
+      // console.warn(error)
+    }
+
     return data
   })
   .filter((stigmataSet) => !stigmataSet.hidden)
@@ -100,3 +129,41 @@ export function getStigmataListBySetId(setId: string) {
 export function getStigmataSetBySetId(setId: string) {
   return stigmataSetMap.get(setId)
 }
+
+function parseStigmataData(rawData: string) {
+  const [name, skillName, skillDescription] = rawData
+    .split('\n\n')
+    .map((data) => data.replace(/#+\s/, '').trim())
+
+  return {
+    name,
+    skill: {
+      name: skillName,
+      description: skillDescription,
+    },
+  }
+}
+
+function parseStigmataSetData(rawData: string) {
+  const [
+    name,
+    altName,
+    twoSetSkillName,
+    twoSetSkillDescription,
+    threeSetSkillName,
+    threeSetSkillDescription,
+  ] = rawData.split('\n\n').map((data) => data.replace(/#+\s/, '').trim())
+
+  return {
+    name,
+    altName,
+    twoSetSkill: {
+      name: twoSetSkillName,
+      description: twoSetSkillDescription,
+    },
+    threeSetSkill: {
+      name: threeSetSkillName,
+      description: threeSetSkillDescription,
+    },
+  }
+}