Add layouts

public/locales/en-US/common.json

@@ -6,6 +6,8 @@
     "battlesuits": "Battlesuits",
     "weapons": "Weapons",
     "stigmata": "Stigmata",
+    "stigmata-set": "Stigmata (Set)",
+    "stigmata-single": "Stigmata (Single)",
     "elfs": "ELFs",
     "elysian-realm": "Elysian Realm",
     "wip": "WIP",
@@ -44,8 +46,15 @@
   },
   "stigmata-list": {
     "description": "Stigmata list of Honkai 3rd",
-    "stigmata": "Stigmata",
+    "stigmata-single": "Stigmata (Single)",
-    "set-list": "Set List"
+    "set-list": "Set List",
+    "show-set-list": "Show Stigmata Set List"
+  },
+  "stigmata-set-list": {
+    "description": "Stigmata Set list of Honkai 3rd",
+    "stigmata-set": "Stigmata (Set)",
+    "set-list": "Set List",
+    "show-signle-list": "Show Single Stigmata List"
   },
   "stigmata-show": {
     "stigmata": "Stigmata",

public/locales/ko-KR/common.json

@@ -7,6 +7,8 @@
     "versions": "업데이트",
     "weapons": "무기",
     "stigmata": "성흔",
+    "stigmata-set": "성흔 (세트)",
+    "stigmata-single": "성흔 (단일)",
     "elfs": "인형",
     "wip": "작업중",
     "media": "미디어",
@@ -34,8 +36,15 @@
   },
   "stigmata-list": {
     "description": "붕괴 3rd 성흔 목록",
-    "stigmata": "성흔",
+    "stigmata-single": "성흔 (단일)",
-    "set-list": "세트 일람"
+    "set-list": "세트 일람",
+    "show-set-list": "단일 성흔 목록"
+  },
+  "stigmata-set-list": {
+    "description": "붕괴 3rd 성흔 세트 목록",
+    "stigmata-set": "성흔 (세트)",
+    "set-list": "세트 일람",
+    "show-signle-list": "단일 성흔 목록"
   },
   "stigmata-show": {
     "stigmata": "성흔",

src/components/organisms/Honkai3rdNavigator.tsx

@@ -1,16 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { mdiClose, mdiMenuSwap } from '@mdi/js'
 import Icon from '@mdi/react'
-import {
+import { NavLink, Heading, Text, Box, Flex, IconButton, Switch, Label } from '@theme-ui/components'
-  NavLink,
-  Heading,
-  Text,
-  Box,
-  Flex,
-  IconButton,
-  Switch,
-  Label,
-} from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useColorMode } from 'theme-ui'
@@ -30,7 +21,7 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
   return (
     <Box
       sx={{
-        p: 2,
+        p: 2
       }}
     >
       <Flex
@@ -40,38 +31,32 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
           top: 0,
           height: 50,
           ml: -2,
-          mt: -2,
+          mt: -2
         }}
       >
         <IconButton sx={{ width: 50, height: 50 }} onClick={close}>
           <Icon path={mdiClose} size={1} />
         </IconButton>
       </Flex>
-      <NextLink href='/' passHref>
+      <NextLink href="/" passHref>
         <NavLink mb={2}>Abyss Lab</NavLink>
       </NextLink>
       <Heading mb={3}>
-        <NextLink href='/honkai3rd' passHref>
+        <NextLink href="/honkai3rd" passHref>
           <NavLink>{t('common.honkai-3rd')}</NavLink>
         </NextLink>
       </Heading>
 
       <Box sx={{ mb: 3 }}>
-        <NavItem target='versions' />
+        <NavItem target="battlesuits" />
-        <NavItem target='battlesuits' />
+        <NavItem target="weapons" />
-        <NavItem target='weapons' />
+        <NavItem target="stigmata" />
-        <NavItem target='stigmata' />
+        <NavItem target="elfs" />
-        <NavItem target='elfs' />
+        <NavItem target="elysian-realm" />
-        <NavItem target='elysian-realm' />
+        <NavItem target="media" />
-        <NavItem target='media' />
       </Box>
 
-      <NextLink
+      <NextLink href={{ pathname, query }} locale={locale === 'en-US' ? 'ko-KR' : 'en-US'} as={asPath} passHref>
-        href={{ pathname, query }}
-        locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
-        as={asPath}
-        passHref
-      >
         <NavLink
           sx={{
             overflow: 'hidden',
@@ -80,11 +65,11 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
             display: 'flex',
             alignItems: 'center',
             px: 2,
-            mb: 2,
+            mb: 2
           }}
         >
           <Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
-          <Icon path={mdiMenuSwap} size='20px' />
+          <Icon path={mdiMenuSwap} size="20px" />
         </NavLink>
       </NextLink>
       <Box>
@@ -93,23 +78,23 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'left',
-            mb: 2,
+            mb: 2
           }}
         >
           <Box>
             <Switch
               checked={colorMode === 'dark'}
-              onChange={(event) => {
+              onChange={event => {
                 setColorMode(event.target.checked ? 'dark' : 'default')
               }}
               sx={{
                 width: 50,
                 'input ~ &': {
-                  backgroundColor: 'muted',
+                  backgroundColor: 'muted'
                 },
                 'input:checked ~ &': {
-                  backgroundColor: 'primary',
+                  backgroundColor: 'primary'
-                },
+                }
               }}
             />
           </Box>
@@ -122,28 +107,22 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
 
 export default Honkai3rdNavigator
 
+type NavItemTarget = 'battlesuits' | 'stigmata' | 'weapons' | 'elfs' | 'elysian-realm' | 'media'
 interface NavItemProps {
-  target:
+  target: NavItemTarget
-    | 'versions'
-    | 'battlesuits'
-    | 'stigmata'
-    | 'weapons'
-    | 'elfs'
-    | 'elysian-realm'
-    | 'media'
 }
 
 const NavItem = ({ target }: NavItemProps) => {
   const { t } = useTranslation()
   return (
-    <NextLink href={`/honkai3rd/${target}`} passHref>
+    <NextLink href={getHref(target)} passHref>
       <NavLink
         sx={{
           fontFamily: 'monospace',
           display: 'flex',
           alignItems: 'center',
           overflow: 'hidden',
-          p: 1,
+          p: 1
         }}
       >
         <SquareImageBox size={30} mr={1} src={getIconByTarget(target)} />
@@ -151,7 +130,7 @@ const NavItem = ({ target }: NavItemProps) => {
           sx={{
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            whiteSpace: 'nowrap'
           }}
         >
           {t(`common.${target}`)}
@@ -171,3 +150,17 @@ function getIconByTarget(target: string) {
       return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`
   }
 }
+
+function getHref(target: NavItemTarget) {
+  switch (target) {
+    case 'battlesuits':
+    case 'weapons':
+    case 'elfs':
+      return `/honkai3rd/v2/${target}`
+    case 'stigmata':
+      return '/honkai3rd/v2/stigmata-sets'
+    case 'elysian-realm':
+      return '/honkai3rd/v2/er'
+  }
+  return `/honkai3rd/${target}`
+}

src/components/v2/BattlesuitCatalogItemCard.tsx

@@ -11,12 +11,7 @@ const BattlesuitCatalogItemCard = ({ battlesuit, label = false }: BattlesuitCata
   return (
     <Box
       sx={{
-        mb: 2,
+        mb: 2
-        transform: 'scale(1)',
-        transition: 'transform 200ms ease-in-out',
-        '&:hover': {
-          transform: 'scale(1.05)'
-        }
       }}
     >
       <BattlesuitAvatarIcon battlesuit={battlesuit} />

src/components/v2/StigmaIcon.tsx

@@ -11,12 +11,12 @@ const starSize = 16
 
 const StigmaIcon = ({ icon: fileName, rarity }: StigmaIconProps) => {
   return (
-    <Box sx={{ width: 112 }}>
+    <Box sx={{ width: 96 }}>
       <Box
         sx={{
           borderRadius: 4,
-          width: (128 / 8) * 7,
+          width: (128 / 8) * 6,
-          height: (112 / 8) * 7,
+          height: (112 / 8) * 6,
           background: ` no-repeat 100% 100% /100% url(${assetsBucketBaseUrl}/raw/stigmataicons/${fileName}.png), ${getBackgroundByRarity(
             rarity
           )}`

src/lib/v2/data/formatText.ts

@@ -68,7 +68,7 @@ export function replaceNewLine(value: string) {
   if (value == null) {
     return ''
   }
-  return value.replace(/\\n/g, '\n')
+  return value.replace(/\\n/g, '\n').trim()
 }
 
 function convertToPercentage(value: number) {

src/pages/honkai3rd/v2/battlesuits/[battlesuitId].tsx

@@ -22,14 +22,31 @@ import StarIcon from '../../../../components/v2/StarIcon'
 import ChibiIcon from '../../../../components/v2/ChibiIcon'
 import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
 import { sortBattlesuitSkill } from '../../../../lib/v2/data/utils'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { getI18NProps } from '../../../../server/i18n'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
 
 interface BattlesuitShowPageProps {
   battlesuit: Battlesuit
 }
 
 const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${battlesuit.fullName} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('battlesuit-show.battlesuit')} / ${battlesuit.fullName} / ${
+          battlesuit.attributeType
+        } / ${battlesuit.tags
+          .map(tag => {
+            return getTagTypeLabel(tag)
+          })
+          .join(', ')}`}
+        canonicalHref={`/honkai3rd/battlesuits/${battlesuit.id}`}
+      />
+      <Box p={2}>
         <Heading as="h1">{battlesuit.fullName}</Heading>
 
         <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
@@ -141,6 +158,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
         })}
         {/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -150,7 +168,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   const battlesuit = loadBattlesuitData(params.battlesuitId)
 
   return {
-    props: { battlesuit }
+    props: { battlesuit, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/battlesuits/index.tsx

@@ -5,20 +5,41 @@ import { Flex, Link } from 'theme-ui'
 import { loadBattlesuitCatalog } from '../../../../lib/v2/server/loadData'
 import { BattlesuitCatalogItem } from '../../../../lib/v2/data/types'
 import BattlesuitCatalogItemCard from '../../../../components/v2/BattlesuitCatalogItemCard'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../server/i18n'
 
 interface BattlesuitListPageProps {
   battlesuitCatalog: BattlesuitCatalogItem[]
 }
 
 const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
   return (
-    <Box>
+    <Honkai3rdLayout>
-      <h1>Battlesuits</h1>
+      <Head
+        title={`${t('common.battlesuits')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('battlesuits-list.description')}
+        canonicalHref={`/honkai3rd/battlesuits`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/battlesuits',
+              label: t('common.battlesuits')
+            }
+          ]}
+        />
+        <h1>{t('battlesuits-list.heading')}</h1>
         <Flex sx={{ flexWrap: 'wrap' }}>
           {battlesuitCatalog.map(battlesuit => {
             return (
               <Box key={battlesuit.id}>
-              <Link href={`/v2-pre/battlesuits/${battlesuit.id}`}>
+                <Link href={`/honkai3rd/v2/battlesuits/${battlesuit.id}`}>
                   <BattlesuitCatalogItemCard battlesuit={battlesuit} />
                 </Link>
               </Box>
@@ -26,6 +47,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
           })}
         </Flex>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -35,6 +57,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const battlesuitCatalog = loadBattlesuitCatalog()
 
   return {
-    props: { battlesuitCatalog }
+    props: { battlesuitCatalog, ...(await getI18NProps(locale)) }
   }
 }

src/pages/honkai3rd/v2/er/battlesuits/[battlesuitId].tsx

@@ -1,10 +1,16 @@
 import { NextPageContext } from 'next'
-import { Box, Card, Flex, Heading, Image } from 'theme-ui'
+import { Box, Card, Flex, Heading, Image, Link } from 'theme-ui'
 import AvatarFigureImage from '../../../../../components/v2/AvatarFigureImage'
 import { loadBattlesuitData, loadErBattlesuit, loadErBattlesuitCatalog } from '../../../../../lib/v2/server/loadData'
 import { Battlesuit, ErBattlesuit, ErSignet } from '../../../../../lib/v2/data/types'
 import { Fragment, useMemo } from 'react'
 import { assetsBucketBaseUrl } from '../../../../../lib/consts'
+import BattlesuitCatalogItemCard from '../../../../../components/v2/BattlesuitCatalogItemCard'
+import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../../server/i18n'
 
 interface BattlesuitShowPageProps {
   battlesuit: Battlesuit
@@ -12,6 +18,8 @@ interface BattlesuitShowPageProps {
 }
 
 const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
+
   const signetSets = useMemo(() => {
     const signetSetMap = erBattlesuit.signets
       .slice()
@@ -36,11 +44,40 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
   }, [erBattlesuit.signets])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${battlesuit.fullName} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`}
+        canonicalHref={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: `/honkai3rd/v2/er/battlesuits/${battlesuit.id}`,
+              label: battlesuit.fullName
+            }
+          ]}
+        />
+
         <Heading as="h1">{battlesuit.fullName}</Heading>
 
         <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
 
+        <Box>
+          <Link href={`/battlesuits/${battlesuit.id}`}>
+            <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+          </Link>
+        </Box>
+
         <Heading as="h2">ER Adjustments</Heading>
 
         <Card mb={3}>
@@ -52,7 +89,9 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
                     {ability.name}
                   </Heading>
                 </Box>
-              <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>{ability.desc}</Box>
+                <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                  {ability.desc}
+                </Box>
               </Fragment>
             )
           })}
@@ -87,6 +126,7 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
           )
         })}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -97,7 +137,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   const erBattlesuit = loadErBattlesuit(params.battlesuitId)
 
   return {
-    props: { battlesuit, erBattlesuit }
+    props: { battlesuit, erBattlesuit, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/er/index.tsx

@@ -15,6 +15,11 @@ import SquareImage from '../../../../components/v2/SquareImage'
 import { signetGroups } from '../../../../lib/v2/data/er'
 import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
 import MaterialIcon from '../../../../components/v2/MaterialIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
 
 interface ErPageProps {
   erBattlesuitCatalog: ErBattlesuitCatalogItem[]
@@ -24,6 +29,8 @@ interface ErPageProps {
 }
 
 const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: ErPageProps) => {
+  const { t } = useTranslation()
+
   const battlesuitCatalogMap = useMemo(() => {
     return battlesuitCatalog.reduce((map, item) => {
       map.set(item.id, item)
@@ -32,13 +39,30 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
   }, [battlesuitCatalog])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
-      <h1>Elysian Realm</h1>
+      <Head
+        title={`${t('common.elysian-realm')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('common.elysian-realm')}
+        canonicalHref={`/honkai3rd/elysian-realm`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            }
+          ]}
+        />
+        <Heading as="h1">Elysian Realm</Heading>
+
         <Heading as="h2">Signets</Heading>
-      <Flex sx={{ flexWrap: 'wrap' }}>
+        <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
           {signetGroups.map(signetGroup => {
             return (
-            <Link href={`/v2-pre/er/signets/${signetGroup.id}`} key={signetGroup.id}>
+              <Link href={`/honkai3rd/v2/er/signets/${signetGroup.id}`} key={signetGroup.id}>
                 <Card p={1} m={1}>
                   <Flex sx={{ alignItems: 'center' }}>
                     <SquareImage
@@ -55,12 +79,12 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
         </Flex>
 
         <Heading as="h2">Battlesuits</Heading>
-      <Flex sx={{ flexWrap: 'wrap' }}>
+        <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
           {erBattlesuitCatalog.map(erBattlesuit => {
             const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
             return (
               <Box key={battlesuit.id}>
-              <Link href={`/v2-pre/er/battlesuits/${battlesuit.id}`}>
+                <Link href={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}>
                   <BattlesuitCatalogItemCard battlesuit={battlesuit} />
                 </Link>
               </Box>
@@ -75,10 +99,12 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
             const battlesuit = battlesuitCatalogMap.get(support)!
             return (
               <Box key={support}>
-              <Link href={`/v2-pre/er/supports#${support}`}>
+                <Link href={`/honkai3rd/v2/er/supports#${support}`}>
                   <Box sx={{ p: 1, m: 1, width: 110 }}>
                     <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
-                  <Box sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <Box
+                      sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
                       {battlesuit.fullName}
                     </Box>
                   </Box>
@@ -95,7 +121,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
           {erSigils.map(sigil => {
             return (
               <Card key={sigil.id} p={1} m={1}>
-              <Link href={`/v2-pre/er/sigils#${sigil.id}`}>
+                <Link href={`/honkai3rd/v2/er/sigils#${sigil.id}`}>
                   <MaterialIcon materialId={sigil.id} />
                 </Link>
               </Card>
@@ -103,6 +129,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
           })}
         </Flex>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -123,6 +150,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   })
 
   return {
-    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
+    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils, ...(await getI18NProps(locale)) }
   }
 }

src/pages/honkai3rd/v2/er/sigils.tsx

@@ -1,16 +1,46 @@
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
 import { Box, Card, Flex, Heading } from 'theme-ui'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 import MaterialIcon from '../../../../components/v2/MaterialIcon'
 import { ErSigil } from '../../../../lib/v2/data/types'
 import { loadErSigils } from '../../../../lib/v2/server/loadData'
+import { getI18NProps } from '../../../../server/i18n'
 
 interface SigilsPageProps {
   erSigils: ErSigil[]
 }
 
 const SigilsPage = ({ erSigils }: SigilsPageProps) => {
+  const { t } = useTranslation()
+
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('elysian-realm.remembrance-sigil')} (${t('common.elysian-realm')}) - ${t(
+          'common.honkai-3rd'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
+        canonicalHref={`/honkai3rd/v2/er/sigils`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: '/honkai3rd/v2/er/sigils',
+              label: t('elysian-realm.remembrance-sigil')
+            }
+          ]}
+        />
+
         <Heading as="h1">ER Sigils</Heading>
 
         <Card mb={3}>
@@ -39,6 +69,7 @@ const SigilsPage = ({ erSigils }: SigilsPageProps) => {
           })}
         </Card>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -48,6 +79,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const erSigils = loadErSigils()
 
   return {
-    props: { erSigils }
+    props: { erSigils, ...(await getI18NProps(locale)) }
   }
 }

src/pages/honkai3rd/v2/er/signets/[groupId].tsx

@@ -7,6 +7,11 @@ import { assetsBucketBaseUrl } from '../../../../../lib/consts'
 import { signetGroups } from '../../../../../lib/v2/data/er'
 import SquareImage from '../../../../../components/v2/SquareImage'
 import { getErSignetTypeLabel } from '../../../../../lib/v2/data/text'
+import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../../server/i18n'
 
 interface BattlesuitShowPageProps {
   group: ErSignetGroup
@@ -14,6 +19,8 @@ interface BattlesuitShowPageProps {
 }
 
 const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
+
   const signetSets = useMemo(() => {
     const signetSetMap = signets.reduce<Map<string, ErSignet[]>>((map, signet) => {
       const [id1, _id2] = signet.id.split('-')
@@ -28,8 +35,31 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
 
     return [...signetSetMap.values()]
   }, [signets])
+
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${group.name} ${t('elysian-realm.signets')} (${t('common.elysian-realm')}) - ${t(
+          'common.honkai-3rd'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${group.name} ${t('elysian-realm.signets')}`}
+        canonicalHref={`/honkai3rd/elysian-realm/signets/${group.id}`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: `/honkai3rd/v2/er/signets/${group.id}`,
+              label: group.name
+            }
+          ]}
+        />
         <Heading as="h1">{group.name}</Heading>
 
         {signetSets.map((set, index) => {
@@ -63,6 +93,7 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
         <code>{JSON.stringify(signets, null, 2)}</code>
       </pre> */}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -73,7 +104,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   const group = signetGroups.find(group => group.id === params.groupId)
 
   return {
-    props: { signets, group }
+    props: { signets, group, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/er/supports.tsx

@@ -1,9 +1,14 @@
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import { Box, Card, Flex, Heading } from 'theme-ui'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
 import { BattlesuitCatalogItem, ErSupportBattlesuit } from '../../../../lib/v2/data/types'
 import { loadBattlesuitCatalog, loadErSupports } from '../../../../lib/v2/server/loadData'
+import { getI18NProps } from '../../../../server/i18n'
 
 interface SupportsPageProps {
   battlesuitCatalog: BattlesuitCatalogItem[]
@@ -15,6 +20,8 @@ const SupportsPage = ({
 
   erSupports
 }: SupportsPageProps) => {
+  const { t } = useTranslation()
+
   const battlesuitCatalogMap = useMemo(() => {
     return battlesuitCatalog.reduce((map, item) => {
       map.set(item.id, item)
@@ -22,7 +29,29 @@ const SupportsPage = ({
     }, new Map<string, BattlesuitCatalogItem>())
   }, [battlesuitCatalog])
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('elysian-realm.supports')} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
+        canonicalHref={`/honkai3rd/elysian-realm/support-battlesuits`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: '/honkai3rd/v2/er/supports',
+              label: t('elysian-realm.supports')
+            }
+          ]}
+        />
         <Heading as="h1">ER Supports</Heading>
 
         <Card mb={3}>
@@ -48,6 +77,7 @@ const SupportsPage = ({
           })}
         </Card>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -58,6 +88,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const erSupports = loadErSupports()
 
   return {
-    props: { battlesuitCatalog, erSupports }
+    props: { battlesuitCatalog, erSupports, ...(await getI18NProps(locale)) }
   }
 }

src/pages/honkai3rd/v2/stigmata-sets/[stigmataSetId].tsx

@@ -7,6 +7,11 @@ import { RootStigma, StigmataSet } from '../../../../lib/v2/data/types'
 import { Fragment } from 'react'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
 import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 
 interface StigmataSetShowPage {
   stigmataSet: StigmataSet
@@ -14,8 +19,37 @@ interface StigmataSetShowPage {
 }
 
 const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) => {
+  const { t } = useTranslation()
+  const rarity = stigmata[0].stigmata[0].maxRarity
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${stigmataSet.name} ${t('stigmata-show.stigmata-set')} - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${
+          stigmataSet.name
+        }`}
+        canonicalHref={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: {
+                pathname: `/honkai3rd/v2/stigmata-sets`
+              },
+              label: t('common.stigmata-set')
+            },
+            {
+              href: `/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`,
+              label: stigmataSet.name
+            }
+          ]}
+        />
+
         <Heading as="h1">{stigmataSet.name}</Heading>
         <Card mb={3}>
           {stigmata.map(rootStigma => {
@@ -34,7 +68,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
                           my: 1
                         }}
                       >
-                      <Link href={`/v2-pre/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
+                        <Link href={`/honkai3rd/v2/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
                       </Heading>
                     </Flex>
 
@@ -145,6 +179,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
 
         {/* <pre>{JSON.stringify(stigmataSet, null, 2)}</pre> */}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -159,7 +194,8 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   return {
     props: {
       stigmataSet,
-      stigmata
+      stigmata,
+      ...(await getI18NProps(locale))
     }
   }
 }

src/pages/honkai3rd/v2/stigmata-sets/index.tsx

@@ -1,20 +1,43 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card } from '@theme-ui/components'
+import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import { Flex, Link } from 'theme-ui'
 
 import { StigmataSetCatalogItem } from '../../../../lib/v2/data/types'
 import { loadStigmataSetCatalog } from '../../../../lib/v2/server/loadData'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 
 interface StigmataSetListPageProps {
   stigmataSetCatalog: StigmataSetCatalogItem[]
 }
 
 const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) => {
+  const { t } = useTranslation()
   return (
-    <Box>
+    <Honkai3rdLayout>
-      <h1>Stigmata (Set)</h1>
+      <Head
+        title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('stigmata-set-list.description')}
+        canonicalHref={`/honkai3rd/v2/stigmata`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/stigmata-sets', label: t('common.stigmata-set') }
+          ]}
+        />
+        <Heading as="h1">{t('stigmata-set-list.stigmata-set')}</Heading>
+
+        <Box mb={3}>
+          <Link href="/honkai3rd/v2/stigmata">{t('stigmata-set-list.show-signle-list')}</Link>
+        </Box>
+
         <Flex sx={{ flexWrap: 'wrap' }}>
           {stigmataSetCatalog
             .sort((a, b) => {
@@ -37,8 +60,8 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
             })
             .map(stigmataSet => {
               return (
-              <Box key={stigmataSet.id} m={2}>
+                <Box key={stigmataSet.id} m={1}>
-                <Link href={`/v2-pre/stigmata-sets/${stigmataSet.id}`}>
+                  <Link href={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}`}>
                     <Card p={1}>
                       <Flex sx={{ justifyContent: 'center' }}>
                         {stigmataSet.stigmataList.map(stigma => {
@@ -64,6 +87,7 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
             })}
         </Flex>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -73,6 +97,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const stigmataSetCatalog = loadStigmataSetCatalog()
 
   return {
-    props: { stigmataSetCatalog }
+    props: { stigmataSetCatalog, ...(await getI18NProps(locale)) }
   }
 }

src/pages/honkai3rd/v2/stigmata/[stigmaId].tsx

@@ -9,6 +9,11 @@ import { getStigmaTypeLabel } from '../../../../lib/v2/data/text'
 import StigmaTypeIcon from '../../../../components/v2/StigmaTypeIcon'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
 import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
+import { getI18NProps } from '../../../../server/i18n'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 
 interface StigmaShowPageProps {
   rootStigma: RootStigma
@@ -16,9 +21,37 @@ interface StigmaShowPageProps {
 }
 
 const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPageProps) => {
+  const { t } = useTranslation()
+
   const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+
+  const atk = Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))
+  const hp = Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))
+  const def = Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))
+  const crt = Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))
+
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${stigma.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata')} /
+        ${'⭐'.repeat(stigma.rarity)} / ${t(
+          `stigmata-show.${stigma.type}`
+        )} / HP : ${hp} / ATK : ${atk} / DEF : ${def} / CRT : ${crt}`}
+        canonicalHref={`/honkai3rd/stigmata/${stigma.id}`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/stigmata', label: t('common.stigmata') },
+            {
+              href: `/honkai3rd/v2/stigmata/${stigma.id}`,
+              label: stigma.name
+            }
+          ]}
+        />
+
         <Heading as="h1">{stigma.name}</Heading>
 
         <Box sx={{ display: ['none', 'none', 'block'] }}>
@@ -39,10 +72,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
             <Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
           </Flex>
           <Box sx={{ p: 1 }}>
-          HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
+            HP : {hp} / ATK : {atk} / DEF : {def} / CRT : {crt} (at Max Lv {stigma.maxLv})
-          {Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
-          {Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
-          {Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv {stigma.maxLv})
           </Box>
         </Card>
 
@@ -119,6 +149,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
         )}
         {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -148,7 +179,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   }
 
   return {
-    props: { rootStigma, stigmataSetCatalogItem }
+    props: { rootStigma, stigmataSetCatalogItem, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/stigmata/index.tsx

@@ -1,11 +1,13 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card } from '@theme-ui/components'
+import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import { Flex, Link } from 'theme-ui'
 
 import { StigmataCatalogItem } from '../../../../lib/v2/data/types'
 import { loadStigmataCatalog } from '../../../../lib/v2/server/loadData'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { getI18NProps } from '../../../../server/i18n'
 
 interface StigmataListPageProps {
   stigmataCatalog: StigmataCatalogItem[]
@@ -13,8 +15,10 @@ interface StigmataListPageProps {
 
 const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
   return (
+    <Honkai3rdLayout>
       <Box>
-      <h1>Stigmata (Single)</h1>
+        <Heading as="h1">Stigmata (Single)</Heading>
+
         <Flex sx={{ flexWrap: 'wrap' }}>
           {stigmataCatalog
             .filter(filterStigmata)
@@ -47,6 +51,7 @@ const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
             })}
         </Flex>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -56,7 +61,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const stigmataCatalog = loadStigmataCatalog()
 
   return {
-    props: { stigmataCatalog }
+    props: { stigmataCatalog, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/weapons/[weaponId].tsx

@@ -8,15 +8,42 @@ import { Fragment } from 'react'
 import { getWeaponTypeLabel } from '../../../../lib/v2/data/text'
 import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
 import WeaponIcon from '../../../../components/v2/WeaponIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 
 interface WeaponShowPageProps {
   rootWeapon: RootWeaponData
 }
 
 const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
+  const { t } = useTranslation()
   const weapon = rootWeapon.weapons[rootWeapon.weapons.length - 1]
+
+  const weaponTypeLabel = getWeaponTypeLabel(weapon.type)
+  const atk = Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))
+  const crt = Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))
+
   return (
-    <Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${weapon.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat(
+          weapon.rarity
+        )} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`}
+        canonicalHref={`/honkai3rd/v2/weapons/${weapon.id}`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/weapons', label: t('common.weapons') },
+            { href: `/honkai3rd/v2/weapons/${weapon.id}`, label: weapon.name }
+          ]}
+        />
+
         <Heading as="h1">{weapon.name}</Heading>
 
         <Box mb={3}>
@@ -30,8 +57,7 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
             <Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
           </Flex>
           <Box sx={{ p: 1 }}>
-          ATK : {Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))} / CRT :{' '}
+            ATK : {atk} / CRT : {crt} (at Max Lv {weapon.maxLv})
-          {Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))} (at Max Lv {weapon.maxLv})
           </Box>
         </Card>
 
@@ -79,6 +105,7 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
         </Card>
         {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -88,7 +115,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   const rootWeapon = loadWeaponData(params.weaponId)
 
   return {
-    props: { rootWeapon }
+    props: { rootWeapon, ...(await getI18NProps(locale)) }
   }
 }
 

src/pages/honkai3rd/v2/weapons/index.tsx

@@ -1,27 +1,45 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Link } from 'theme-ui'
+import { Flex, Heading, Link } from 'theme-ui'
 import { loadWeaponCatalog } from '../../../../lib/v2/server/loadData'
 import { WeaponCatalogItem } from '../../../../lib/v2/data/types'
 import WeaponIcon from '../../../../components/v2/WeaponIcon'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 
 interface WeaponListPageProps {
   weaponCatalog: WeaponCatalogItem[]
 }
 
 const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
+  const { t } = useTranslation()
   return (
-    <Box>
+    <Honkai3rdLayout>
-      <h1>Weapons</h1>
+      <Head
+        title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('weapons-list.description')}
+        canonicalHref={`/honkai3rd/v2/weapons`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/weapons', label: t('common.weapons') }
+          ]}
+        />
+        <Heading as="h1">{t('common.weapons')}</Heading>
         <Flex sx={{ flexWrap: 'wrap' }}>
           {weaponCatalog
             .filter(filterWeapons)
             .sort(sortWeapons)
             .map(weapon => {
               return (
-              <Box key={weapon.id} m={2}>
+                <Box key={weapon.id} m={1}>
-                <Link href={`/v2-pre/weapons/${weapon.id}`}>
+                  <Link href={`/honkai3rd/v2/weapons/${weapon.id}`}>
                     <Card p={1}>
                       <Flex sx={{ justifyContent: 'center' }}>
                         <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
@@ -46,6 +64,7 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
             })}
         </Flex>
       </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -55,7 +74,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const weaponCatalog = loadWeaponCatalog()
 
   return {
-    props: { weaponCatalog }
+    props: { weaponCatalog, ...(await getI18NProps(locale)) }
   }
 }