From 308056eac58c86628ee32ddba1fb0ca30f37cb41 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sat, 15 Jul 2023 01:36:12 +0900
Subject: [PATCH] Add breadcrumbs

---
 .../organisms/Honkai3rdNavigator.tsx          |   6 +-
 src/pages/honkai3rd/battlesuits/index.tsx     |   4 +-
 src/pages/honkai3rd/elfs/[elfId].tsx          | 154 +++++++++++-------
 src/pages/honkai3rd/elfs/index.tsx            |  93 +++++++----
 .../er/battlesuits/[battlesuitId].tsx         |   6 +-
 src/pages/honkai3rd/er/index.tsx              |  21 +--
 src/pages/honkai3rd/er/sigils.tsx             |   6 +-
 src/pages/honkai3rd/er/signets/[groupId].tsx  |   4 +-
 src/pages/honkai3rd/er/supports.tsx           |   4 +-
 .../stigmata-sets/[stigmataSetId].tsx         |  11 +-
 src/pages/honkai3rd/stigmata-sets/index.tsx   |  14 +-
 src/pages/honkai3rd/stigmata/[stigmaId].tsx   |  11 +-
 src/pages/honkai3rd/stigmata/index.tsx        |  22 ++-
 src/pages/honkai3rd/weapons/[weaponId].tsx    |   6 +-
 src/pages/honkai3rd/weapons/index.tsx         |  11 +-
 15 files changed, 221 insertions(+), 152 deletions(-)

diff --git a/src/components/organisms/Honkai3rdNavigator.tsx b/src/components/organisms/Honkai3rdNavigator.tsx
index 7685163a..68c313c1 100644
--- a/src/components/organisms/Honkai3rdNavigator.tsx
+++ b/src/components/organisms/Honkai3rdNavigator.tsx
@@ -156,11 +156,11 @@ function getHref(target: NavItemTarget) {
     case 'battlesuits':
     case 'weapons':
     case 'elfs':
-      return `/honkai3rd/v2/${target}`
+      return `/honkai3rd/${target}`
     case 'stigmata':
-      return '/honkai3rd/v2/stigmata-sets'
+      return '/honkai3rd/stigmata-sets'
     case 'elysian-realm':
-      return '/honkai3rd/v2/er'
+      return '/honkai3rd/er'
   }
   return `/honkai3rd/${target}`
 }
diff --git a/src/pages/honkai3rd/battlesuits/index.tsx b/src/pages/honkai3rd/battlesuits/index.tsx
index f938332c..cf31bad1 100644
--- a/src/pages/honkai3rd/battlesuits/index.tsx
+++ b/src/pages/honkai3rd/battlesuits/index.tsx
@@ -29,7 +29,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/battlesuits',
+              href: '/honkai3rd/battlesuits',
               label: t('common.battlesuits')
             }
           ]}
@@ -39,7 +39,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
           {battlesuitCatalog.map(battlesuit => {
             return (
               <Box key={battlesuit.id}>
-                <Link href={`/honkai3rd/v2/battlesuits/${battlesuit.id}`}>
+                <Link href={`/honkai3rd/battlesuits/${battlesuit.id}`}>
                   <BattlesuitCatalogItemCard battlesuit={battlesuit} />
                 </Link>
               </Box>
diff --git a/src/pages/honkai3rd/elfs/[elfId].tsx b/src/pages/honkai3rd/elfs/[elfId].tsx
index c2c97b6b..208a3f46 100644
--- a/src/pages/honkai3rd/elfs/[elfId].tsx
+++ b/src/pages/honkai3rd/elfs/[elfId].tsx
@@ -9,12 +9,19 @@ import { assetsBucketBaseUrl } from '../../../lib/consts'
 import { ListMap } from '../../../lib/utils'
 import FormattedText from '../../../components/v2/FormattedText'
 import { formatSubSkillInfo } from '../../../lib/v2/data/formatText'
+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 ElfShowPageProps {
   elf: Elf
 }
 
 const ElfShowPage = ({ elf }: ElfShowPageProps) => {
+  const { t } = useTranslation()
+
   const skillRows = useMemo(() => {
     const rowSkillListMap = elf.skills.reduce<ListMap<string, ElfSkill>>((map, skill) => {
       map.set(skill.row.toString(), skill)
@@ -23,73 +30,98 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
 
     return [...rowSkillListMap.values()]
   }, [elf.skills])
+
   return (
-    <Box>
-      <Heading as="h1">{elf.fullName}</Heading>
-      <SquareImage
-        src={`${assetsBucketBaseUrl}/raw/elfcardfigures/${elf.figureImage}.png`}
-        originalSize={720}
-        size={480}
+    <Honkai3rdLayout>
+      <Head
+        title={`${elf.fullName} - ${t('common.elfs')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('weapons-list.description')}
+        canonicalHref={`/honkai3rd/elfs/${elf.id}`}
       />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: {
+                pathname: `/honkai3rd/elfs`
+              },
+              label: t('common.elfs')
+            },
+            {
+              href: `/honkai3rd/elfs/${elf.id}`,
+              label: elf.fullName
+            }
+          ]}
+        />
 
-      <Card mb={3}>
-        <Box sx={{ p: 1, borderBottom: 'default' }}>
-          <Flex>
-            {elf.tags.map(tag => {
-              return (
-                <Box key={tag.type} mr={1}>
-                  <TagIcon type={tag.type} />
-                </Box>
-              )
-            })}
-          </Flex>
-        </Box>
-        <Box p={1}>
-          Ult CD: {elf.ultSkillCd} / Ult SP Cost: {elf.ultSkillCost}
-        </Box>
-      </Card>
+        <Heading as="h1">{elf.fullName}</Heading>
 
-      <Heading as="h2">Skills</Heading>
+        <SquareImage
+          src={`${assetsBucketBaseUrl}/raw/elfcardfigures/${elf.figureImage}.png`}
+          originalSize={720}
+          size={480}
+        />
 
-      {skillRows.map((row, index) => {
-        return (
-          <Card key={index} mb={2}>
-            {row.map(skill => {
-              return (
-                <Box
-                  key={skill.id}
-                  sx={{
-                    borderBottom: 'default',
-                    '&:last-child': {
-                      borderBottom: 'none'
-                    }
-                  }}
-                >
-                  <Box sx={{ borderBottom: 'default', p: 1 }}>
-                    <Flex sx={{ alignItems: 'center' }}>
-                      <Box sx={{ flexShrink: 0 }}>
-                        <SquareImage
-                          src={`${assetsBucketBaseUrl}/raw/elf_skill_icon/${skill.icon}.png`}
-                          originalSize={40}
-                        />
-                      </Box>
-                      <Heading as={'h3'} sx={{ my: 0, ml: 1 }}>
-                        <FormattedText>{skill.name}</FormattedText>
-                      </Heading>
-                      {/* {skill.id} */}
-                      <Box sx={{ color: 'textMuted', ml: 1 }}>({skill.skillType})</Box>
-                    </Flex>
+        <Card mb={3}>
+          <Box sx={{ p: 1, borderBottom: 'default' }}>
+            <Flex>
+              {elf.tags.map(tag => {
+                return (
+                  <Box key={tag.type} mr={1}>
+                    <TagIcon type={tag.type} />
                   </Box>
-                  <Box sx={{ p: 1 }}>
-                    <FormattedText>{formatSubSkillInfo(skill)}</FormattedText>
+                )
+              })}
+            </Flex>
+          </Box>
+          <Box p={1}>
+            Ult CD: {elf.ultSkillCd} / Ult SP Cost: {elf.ultSkillCost}
+          </Box>
+        </Card>
+
+        <Heading as="h2">Skills</Heading>
+
+        {skillRows.map((row, index) => {
+          return (
+            <Card key={index} mb={2}>
+              {row.map(skill => {
+                return (
+                  <Box
+                    key={skill.id}
+                    sx={{
+                      borderBottom: 'default',
+                      '&:last-child': {
+                        borderBottom: 'none'
+                      }
+                    }}
+                  >
+                    <Box sx={{ borderBottom: 'default', p: 1 }}>
+                      <Flex sx={{ alignItems: 'center' }}>
+                        <Box sx={{ flexShrink: 0 }}>
+                          <SquareImage
+                            src={`${assetsBucketBaseUrl}/raw/elf_skill_icon/${skill.icon}.png`}
+                            originalSize={40}
+                          />
+                        </Box>
+                        <Heading as={'h3'} sx={{ my: 0, ml: 1 }}>
+                          <FormattedText>{skill.name}</FormattedText>
+                        </Heading>
+                        {/* {skill.id} */}
+                        <Box sx={{ color: 'textMuted', ml: 1 }}>({skill.skillType})</Box>
+                      </Flex>
+                    </Box>
+                    <Box sx={{ p: 1 }}>
+                      <FormattedText>{formatSubSkillInfo(skill)}</FormattedText>
+                    </Box>
                   </Box>
-                </Box>
-              )
-            })}
-          </Card>
-        )
-      })}
-    </Box>
+                )
+              })}
+            </Card>
+          )
+        })}
+      </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -99,7 +131,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
   const elf = loadElfData(params.elfId)
 
   return {
-    props: { elf }
+    props: { elf, ...(await getI18NProps(locale)) }
   }
 }
 
diff --git a/src/pages/honkai3rd/elfs/index.tsx b/src/pages/honkai3rd/elfs/index.tsx
index 16362034..34399e4d 100644
--- a/src/pages/honkai3rd/elfs/index.tsx
+++ b/src/pages/honkai3rd/elfs/index.tsx
@@ -1,52 +1,73 @@
 /** @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 { ElfCatalogItem } from '../../../lib/v2/data/types'
 import { loadElfCatalog } from '../../../lib/v2/server/loadData'
 import RarityBar from '../../../components/v2/RarityBar'
 import ElfIcon from '../../../components/v2/ElfIcon'
+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 ElfListPageProps {
   elfs: ElfCatalogItem[]
 }
 
 const ElfListPage = ({ elfs }: ElfListPageProps) => {
-  return (
-    <Box>
-      <h1>Elfs</h1>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {elfs
-          .sort((a, b) => {
-            const aId = getId(a.id)
-            const bId = getId(b.id)
-            return bId - aId
+  const { t } = useTranslation()
 
-            function getId(id: string): number {
-              return parseInt(id)
-            }
-          })
-          .map(elf => {
-            return (
-              <Box key={elf.id} m={2}>
-                <Link href={`/v2-pre/elfs/${elf.id}`}>
-                  <Card p={1}>
-                    <Box>
-                      <ElfIcon icon={elf.cardIcon} />
-                      <RarityBar rarity={elf.rarity} />
-                    </Box>
-                    <Box
-                      sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-                    >
-                      {elf.fullName}
-                    </Box>
-                  </Card>
-                </Link>
-              </Box>
-            )
-          })}
-      </Flex>
-    </Box>
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.elfs')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('weapons-list.description')}
+        canonicalHref={`/honkai3rd/elfs`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/elfs', label: t('common.elfs') }
+          ]}
+        />
+        <Heading as="h1">Elfs</Heading>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {elfs
+            .sort((a, b) => {
+              const aId = getId(a.id)
+              const bId = getId(b.id)
+              return bId - aId
+
+              function getId(id: string): number {
+                return parseInt(id)
+              }
+            })
+            .map(elf => {
+              return (
+                <Box key={elf.id} m={2}>
+                  <Link href={`/honkai3rd/elfs/${elf.id}`}>
+                    <Card p={1}>
+                      <Box>
+                        <ElfIcon icon={elf.cardIcon} />
+                        <RarityBar rarity={elf.rarity} />
+                      </Box>
+                      <Box
+                        sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                      >
+                        {elf.fullName}
+                      </Box>
+                    </Card>
+                  </Link>
+                </Box>
+              )
+            })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
   )
 }
 
@@ -56,6 +77,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
   const elfs = loadElfCatalog()
 
   return {
-    props: { elfs }
+    props: { elfs, ...(await getI18NProps(locale)) }
   }
 }
diff --git a/src/pages/honkai3rd/er/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/er/battlesuits/[battlesuitId].tsx
index 0557f972..6186b489 100644
--- a/src/pages/honkai3rd/er/battlesuits/[battlesuitId].tsx
+++ b/src/pages/honkai3rd/er/battlesuits/[battlesuitId].tsx
@@ -50,7 +50,7 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
           'common.abyss-lab'
         )}`}
         description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`}
-        canonicalHref={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}
+        canonicalHref={`/honkai3rd/er/battlesuits/${battlesuit.id}`}
       />
 
       <Box p={2}>
@@ -58,11 +58,11 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/er',
+              href: '/honkai3rd/er',
               label: t('common.elysian-realm')
             },
             {
-              href: `/honkai3rd/v2/er/battlesuits/${battlesuit.id}`,
+              href: `/honkai3rd/er/battlesuits/${battlesuit.id}`,
               label: battlesuit.fullName
             }
           ]}
diff --git a/src/pages/honkai3rd/er/index.tsx b/src/pages/honkai3rd/er/index.tsx
index f07c3a56..22236858 100644
--- a/src/pages/honkai3rd/er/index.tsx
+++ b/src/pages/honkai3rd/er/index.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Flex, Link, Card } from '@theme-ui/components'
+import { Box, Heading, Flex, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import {
   loadBattlesuitCatalog,
@@ -20,6 +20,7 @@ import Head from '../../../components/atoms/Head'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import { useTranslation } from 'next-i18next'
 import { getI18NProps } from '../../../server/i18n'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface ErPageProps {
   erBattlesuitCatalog: ErBattlesuitCatalogItem[]
@@ -51,7 +52,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/er',
+              href: '/honkai3rd/er',
               label: t('common.elysian-realm')
             }
           ]}
@@ -62,7 +63,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
         <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
           {signetGroups.map(signetGroup => {
             return (
-              <Link href={`/honkai3rd/v2/er/signets/${signetGroup.id}`} key={signetGroup.id}>
+              <PageLink href={`/honkai3rd/er/signets/${signetGroup.id}`} key={signetGroup.id}>
                 <Card p={1} m={1}>
                   <Flex sx={{ alignItems: 'center' }}>
                     <SquareImage
@@ -73,7 +74,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
                     <Box p={1}>{signetGroup.name}</Box>
                   </Flex>
                 </Card>
-              </Link>
+              </PageLink>
             )
           })}
         </Flex>
@@ -84,9 +85,9 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
             const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
             return (
               <Box key={battlesuit.id}>
-                <Link href={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}>
+                <PageLink href={`/honkai3rd/er/battlesuits/${battlesuit.id}`}>
                   <BattlesuitCatalogItemCard battlesuit={battlesuit} />
-                </Link>
+                </PageLink>
               </Box>
             )
           })}
@@ -99,7 +100,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
             const battlesuit = battlesuitCatalogMap.get(support)!
             return (
               <Box key={support}>
-                <Link href={`/honkai3rd/v2/er/supports#${support}`}>
+                <PageLink href={`/honkai3rd/er/supports#${support}`}>
                   <Box sx={{ p: 1, m: 1, width: 110 }}>
                     <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
                     <Box
@@ -109,7 +110,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
                     </Box>
                   </Box>
                   {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
-                </Link>
+                </PageLink>
               </Box>
             )
           })}
@@ -121,9 +122,9 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
           {erSigils.map(sigil => {
             return (
               <Card key={sigil.id} p={1} m={1}>
-                <Link href={`/honkai3rd/v2/er/sigils#${sigil.id}`}>
+                <PageLink href={`/honkai3rd/er/sigils#${sigil.id}`}>
                   <MaterialIcon materialId={sigil.id} />
-                </Link>
+                </PageLink>
               </Card>
             )
           })}
diff --git a/src/pages/honkai3rd/er/sigils.tsx b/src/pages/honkai3rd/er/sigils.tsx
index f8bf4b82..6ca381ba 100644
--- a/src/pages/honkai3rd/er/sigils.tsx
+++ b/src/pages/honkai3rd/er/sigils.tsx
@@ -23,7 +23,7 @@ const SigilsPage = ({ erSigils }: SigilsPageProps) => {
           'common.honkai-3rd'
         )} - ${t('common.abyss-lab')}`}
         description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
-        canonicalHref={`/honkai3rd/v2/er/sigils`}
+        canonicalHref={`/honkai3rd/er/sigils`}
       />
 
       <Box p={2}>
@@ -31,11 +31,11 @@ const SigilsPage = ({ erSigils }: SigilsPageProps) => {
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/er',
+              href: '/honkai3rd/er',
               label: t('common.elysian-realm')
             },
             {
-              href: '/honkai3rd/v2/er/sigils',
+              href: '/honkai3rd/er/sigils',
               label: t('elysian-realm.remembrance-sigil')
             }
           ]}
diff --git a/src/pages/honkai3rd/er/signets/[groupId].tsx b/src/pages/honkai3rd/er/signets/[groupId].tsx
index 912f70b3..68bd14ce 100644
--- a/src/pages/honkai3rd/er/signets/[groupId].tsx
+++ b/src/pages/honkai3rd/er/signets/[groupId].tsx
@@ -51,11 +51,11 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/er',
+              href: '/honkai3rd/er',
               label: t('common.elysian-realm')
             },
             {
-              href: `/honkai3rd/v2/er/signets/${group.id}`,
+              href: `/honkai3rd/er/signets/${group.id}`,
               label: group.name
             }
           ]}
diff --git a/src/pages/honkai3rd/er/supports.tsx b/src/pages/honkai3rd/er/supports.tsx
index b548cb7f..e4e7ccd6 100644
--- a/src/pages/honkai3rd/er/supports.tsx
+++ b/src/pages/honkai3rd/er/supports.tsx
@@ -43,11 +43,11 @@ const SupportsPage = ({
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
-              href: '/honkai3rd/v2/er',
+              href: '/honkai3rd/er',
               label: t('common.elysian-realm')
             },
             {
-              href: '/honkai3rd/v2/er/supports',
+              href: '/honkai3rd/er/supports',
               label: t('elysian-realm.supports')
             }
           ]}
diff --git a/src/pages/honkai3rd/stigmata-sets/[stigmataSetId].tsx b/src/pages/honkai3rd/stigmata-sets/[stigmataSetId].tsx
index f9227c7d..21a9734d 100644
--- a/src/pages/honkai3rd/stigmata-sets/[stigmataSetId].tsx
+++ b/src/pages/honkai3rd/stigmata-sets/[stigmataSetId].tsx
@@ -1,5 +1,5 @@
 import { NextPageContext } from 'next'
-import { Box, Card, Flex, Heading, Link } from 'theme-ui'
+import { Box, Card, Flex, Heading } from 'theme-ui'
 import FormattedText from '../../../components/v2/FormattedText'
 import { formatSubSkillInfo } from '../../../lib/v2/data/formatText'
 import { loadStigmaData, loadStigmataSetCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData'
@@ -12,6 +12,7 @@ import Head from '../../../components/atoms/Head'
 import { useTranslation } from 'next-i18next'
 import { getI18NProps } from '../../../server/i18n'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface StigmataSetShowPage {
   stigmataSet: StigmataSet
@@ -30,7 +31,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
         description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${
           stigmataSet.name
         }`}
-        canonicalHref={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`}
+        canonicalHref={`/honkai3rd/stigmata-sets/${stigmataSet.id}-set`}
       />
 
       <Box p={2}>
@@ -39,12 +40,12 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
             {
               href: {
-                pathname: `/honkai3rd/v2/stigmata-sets`
+                pathname: `/honkai3rd/stigmata-sets`
               },
               label: t('common.stigmata-set')
             },
             {
-              href: `/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`,
+              href: `/honkai3rd/stigmata-sets/${stigmataSet.id}`,
               label: stigmataSet.name
             }
           ]}
@@ -68,7 +69,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
                           my: 1
                         }}
                       >
-                        <Link href={`/honkai3rd/v2/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
+                        <PageLink href={`/honkai3rd/stigmata/${rootStigma.id}`}>{stigma.name}</PageLink>
                       </Heading>
                     </Flex>
 
diff --git a/src/pages/honkai3rd/stigmata-sets/index.tsx b/src/pages/honkai3rd/stigmata-sets/index.tsx
index a6f5192f..d48ff700 100644
--- a/src/pages/honkai3rd/stigmata-sets/index.tsx
+++ b/src/pages/honkai3rd/stigmata-sets/index.tsx
@@ -1,8 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Link } from 'theme-ui'
-
+import { Flex } from 'theme-ui'
 import { StigmataSetCatalogItem } from '../../../lib/v2/data/types'
 import { loadStigmataSetCatalog } from '../../../lib/v2/server/loadData'
 import StigmaIcon from '../../../components/v2/StigmaIcon'
@@ -11,6 +10,7 @@ import Head from '../../../components/atoms/Head'
 import { useTranslation } from 'next-i18next'
 import { getI18NProps } from '../../../server/i18n'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface StigmataSetListPageProps {
   stigmataSetCatalog: StigmataSetCatalogItem[]
@@ -23,19 +23,19 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
       <Head
         title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
         description={t('stigmata-set-list.description')}
-        canonicalHref={`/honkai3rd/v2/stigmata`}
+        canonicalHref={`/honkai3rd/stigmata`}
       />
       <Box p={2}>
         <Breadcrumb
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
-            { href: '/honkai3rd/v2/stigmata-sets', label: t('common.stigmata-set') }
+            { href: '/honkai3rd/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>
+          <PageLink href="/honkai3rd/stigmata">{t('stigmata-set-list.show-signle-list')}</PageLink>
         </Box>
 
         <Flex sx={{ flexWrap: 'wrap' }}>
@@ -61,7 +61,7 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
             .map(stigmataSet => {
               return (
                 <Box key={stigmataSet.id} m={1}>
-                  <Link href={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}`}>
+                  <PageLink href={`/honkai3rd/stigmata-sets/${stigmataSet.id}`}>
                     <Card p={1}>
                       <Flex sx={{ justifyContent: 'center' }}>
                         {stigmataSet.stigmataList.map(stigma => {
@@ -81,7 +81,7 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
                       </Box>
                       {/* {stigma.id} */}
                     </Card>
-                  </Link>
+                  </PageLink>
                 </Box>
               )
             })}
diff --git a/src/pages/honkai3rd/stigmata/[stigmaId].tsx b/src/pages/honkai3rd/stigmata/[stigmaId].tsx
index 12c40246..2f015130 100644
--- a/src/pages/honkai3rd/stigmata/[stigmaId].tsx
+++ b/src/pages/honkai3rd/stigmata/[stigmaId].tsx
@@ -1,5 +1,5 @@
 import { NextPageContext } from 'next'
-import { Box, Card, Flex, Heading, Link } from 'theme-ui'
+import { Box, Card, Flex, Heading } from 'theme-ui'
 import FormattedText from '../../../components/v2/FormattedText'
 import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2/data/formatText'
 import { loadStigmaData, loadStigmataCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData'
@@ -14,6 +14,7 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import Head from '../../../components/atoms/Head'
 import { useTranslation } from 'next-i18next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface StigmaShowPageProps {
   rootStigma: RootStigma
@@ -44,9 +45,9 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
         <Breadcrumb
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
-            { href: '/honkai3rd/v2/stigmata', label: t('common.stigmata') },
+            { href: '/honkai3rd/stigmata', label: t('common.stigmata') },
             {
-              href: `/honkai3rd/v2/stigmata/${stigma.id}`,
+              href: `/honkai3rd/stigmata/${stigma.id}`,
               label: stigma.name
             }
           ]}
@@ -123,7 +124,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
           <>
             <Heading as="h2">Set</Heading>
             <Flex key={stigmataSetCatalogItem.id}>
-              <Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
+              <PageLink href={`/honkai3rd/stigmata-sets/${stigmataSetCatalogItem.id}`}>
                 <Card p={1}>
                   <Flex sx={{ justifyContent: 'center' }}>
                     {stigmataSetCatalogItem.stigmataList.map(stigma => {
@@ -143,7 +144,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
                   </Box>
                   {/* {stigma.id} */}
                 </Card>
-              </Link>
+              </PageLink>
             </Flex>
           </>
         )}
diff --git a/src/pages/honkai3rd/stigmata/index.tsx b/src/pages/honkai3rd/stigmata/index.tsx
index 0003682f..8211cb7d 100644
--- a/src/pages/honkai3rd/stigmata/index.tsx
+++ b/src/pages/honkai3rd/stigmata/index.tsx
@@ -1,24 +1,36 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Link } from 'theme-ui'
-
+import { Flex } 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'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface StigmataListPageProps {
   stigmataCatalog: StigmataCatalogItem[]
 }
 
 const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
+  const { t } = useTranslation()
   return (
     <Honkai3rdLayout>
-      <Box>
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/stigmata', label: t('common.stigmata') }
+          ]}
+        />
         <Heading as="h1">Stigmata (Single)</Heading>
 
+        <Box mb={3}>
+          <PageLink href="/honkai3rd/stigmata-sets">{t('stigmata-list.show-set-list')}</PageLink>
+        </Box>
         <Flex sx={{ flexWrap: 'wrap' }}>
           {stigmataCatalog
             .filter(filterStigmata)
@@ -26,7 +38,7 @@ const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
             .map(stigma => {
               return (
                 <Box key={stigma.id} m={2}>
-                  <Link href={`/v2-pre/stigmata/${stigma.id}`}>
+                  <PageLink href={`/honkai3rd/stigmata/${stigma.id}`}>
                     <Card p={1}>
                       <Flex sx={{ justifyContent: 'center' }}>
                         <StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
@@ -45,7 +57,7 @@ const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
                       </Box>
                       {/* {stigma.id} */}
                     </Card>
-                  </Link>
+                  </PageLink>
                 </Box>
               )
             })}
diff --git a/src/pages/honkai3rd/weapons/[weaponId].tsx b/src/pages/honkai3rd/weapons/[weaponId].tsx
index 19f7d356..f687287a 100644
--- a/src/pages/honkai3rd/weapons/[weaponId].tsx
+++ b/src/pages/honkai3rd/weapons/[weaponId].tsx
@@ -33,14 +33,14 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
         description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat(
           weapon.rarity
         )} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`}
-        canonicalHref={`/honkai3rd/v2/weapons/${weapon.id}`}
+        canonicalHref={`/honkai3rd/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 }
+            { href: '/honkai3rd/weapons', label: t('common.weapons') },
+            { href: `/honkai3rd/weapons/${weapon.id}`, label: weapon.name }
           ]}
         />
 
diff --git a/src/pages/honkai3rd/weapons/index.tsx b/src/pages/honkai3rd/weapons/index.tsx
index 168cb62e..0d1d0ec2 100644
--- a/src/pages/honkai3rd/weapons/index.tsx
+++ b/src/pages/honkai3rd/weapons/index.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Heading, Link } from 'theme-ui'
+import { Flex, Heading } from 'theme-ui'
 import { loadWeaponCatalog } from '../../../lib/v2/server/loadData'
 import { WeaponCatalogItem } from '../../../lib/v2/data/types'
 import WeaponIcon from '../../../components/v2/WeaponIcon'
@@ -10,6 +10,7 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import { useTranslation } from 'next-i18next'
 import { getI18NProps } from '../../../server/i18n'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import PageLink from '../../../components/atoms/PageLink'
 
 interface WeaponListPageProps {
   weaponCatalog: WeaponCatalogItem[]
@@ -22,13 +23,13 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
       <Head
         title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
         description={t('weapons-list.description')}
-        canonicalHref={`/honkai3rd/v2/weapons`}
+        canonicalHref={`/honkai3rd/weapons`}
       />
       <Box p={2}>
         <Breadcrumb
           items={[
             { href: '/honkai3rd', label: t('common.honkai-3rd') },
-            { href: '/honkai3rd/v2/weapons', label: t('common.weapons') }
+            { href: '/honkai3rd/weapons', label: t('common.weapons') }
           ]}
         />
         <Heading as="h1">{t('common.weapons')}</Heading>
@@ -39,7 +40,7 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
             .map(weapon => {
               return (
                 <Box key={weapon.id} m={1}>
-                  <Link href={`/honkai3rd/v2/weapons/${weapon.id}`}>
+                  <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
                     <Card p={1}>
                       <Flex sx={{ justifyContent: 'center' }}>
                         <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
@@ -58,7 +59,7 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
                       </Box>
                       {/* {weapon.id} */}
                     </Card>
-                  </Link>
+                  </PageLink>
                 </Box>
               )
             })}