Add remembrance sigils page

src/lib/honkai3rd/elysianRealm.ts

@@ -41,7 +41,7 @@ export const supportBattlesuitIds = [
   'br',
 ]
 
-export const rememberanceSigilIds = [
+export const remembranceSigilIds = [
   'the-moth-insignia',
   'home-lost',
   'false-hope',
@@ -158,3 +158,9 @@ export interface SupportBattlesuit {
   description: string
   cooldown: number
 }
+
+export interface RemembranceSigil {
+  id: string
+  name: string
+  description: string
+}

src/pages/honkai3rd/elysian-realm/index.tsx

@@ -10,15 +10,15 @@ import { getI18NProps } from '../../../server/i18n'
 import { useTranslation } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
-import {
-  erVersions,
-  rememberanceSigilIds,
-} from '../../../lib/honkai3rd/elysianRealm'
+import { erVersions } from '../../../lib/honkai3rd/elysianRealm'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import PageLink from '../../../components/atoms/PageLink'
 import SignetGroupNavigator from '../../../components/organisms/SignetGroupNavigator'
-import { getSupportBattlesuits } from '../../../server/data/honkai3rd/elysianRealm'
+import {
+  getRemembranceSigils as getRemembranceSigils,
+  getSupportBattlesuits,
+} from '../../../server/data/honkai3rd/elysianRealm'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -28,11 +28,13 @@ type BattlesuitListItemData = Pick<
 interface BattlesuitListPageProps {
   battlesuitMap: { [id: string]: BattlesuitListItemData }
   supportBattlesuits: { id: string; name: string }[]
+  remembranceSigils: { id: string; name: string }[]
 }
 
 const ElysianRealmIndexPage = ({
   battlesuitMap,
   supportBattlesuits,
+  remembranceSigils,
 }: BattlesuitListPageProps) => {
   const { t } = useTranslation()
 
@@ -118,15 +120,15 @@ const ElysianRealmIndexPage = ({
           <Heading as='h2'>{t('elysian-realm.remembrance-sigil')}</Heading>
 
           <Flex sx={{ flexWrap: 'wrap' }}>
-            {rememberanceSigilIds.map((sigilId) => {
+            {remembranceSigils.map(({ id, name }) => {
               return (
-                <Card key={sigilId} sx={{ p: 1, m: 1 }}>
+                <Card key={id} sx={{ p: 1, m: 1 }} title={name}>
                   <PageLink
-                    href={`/honkai3rd/elysian-realm/remembrance-sigils#${sigilId}`}
+                    href={`/honkai3rd/elysian-realm/remembrance-sigils#${id}`}
                   >
                     <SquareImageBox
                       size={70}
-                      src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${sigilId}.png`}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${id}.png`}
                     />
                   </PageLink>
                 </Card>
@@ -155,10 +157,18 @@ export async function getStaticProps({ locale }: NextPageContext) {
       }
     }
   )
+
+  const remembranceSigils = getRemembranceSigils(locale).map(({ id, name }) => {
+    return {
+      id,
+      name,
+    }
+  })
   return {
     props: {
       battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds),
       supportBattlesuits,
+      remembranceSigils,
       ...(await getI18NProps(locale)),
     },
   }

src/pages/honkai3rd/elysian-realm/remembrance-sigils.tsx

@@ -0,0 +1,93 @@
+/** @jsxImportSource theme-ui */
+import { Box, Heading, Flex, Card, Paragraph } from '@theme-ui/components'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+
+import { NextPageContext } from 'next'
+import { getI18NProps } from '../../../server/i18n'
+import { useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { RemembranceSigil } from '../../../lib/honkai3rd/elysianRealm'
+import SquareImageBox from '../../../components/atoms/SquareImageBox'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { getRemembranceSigils } from '../../../server/data/honkai3rd/elysianRealm'
+
+interface BattlesuitListPageProps {
+  remembranceSigils: RemembranceSigil[]
+}
+
+const ElysianRealmIndexPage = ({
+  remembranceSigils,
+}: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <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'
+        )}`}
+      />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/elysian-realm',
+              label: t('common.elysian-realm'),
+            },
+            {
+              href: '/honkai3rd/elysian-realm/remembrance-sigils',
+              label: t('elysian-realm.remembrance-sigil'),
+            },
+          ]}
+        />
+
+        <Heading as='h1' mb={3}>
+          {t('elysian-realm.remembrance-sigil')}
+        </Heading>
+
+        <Box sx={{ mb: 3 }}>
+          {remembranceSigils.map(({ id, name, description }) => {
+            return (
+              <Card key={id} sx={{ p: 2, mb: 2 }} id={id}>
+                <Flex>
+                  <SquareImageBox
+                    size={50}
+                    alt={name}
+                    src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${id}.png`}
+                    mr={2}
+                  />
+
+                  <Box>
+                    <Heading as='h3' mb={2}>
+                      {name}
+                    </Heading>
+                    <Paragraph>{description}</Paragraph>
+                  </Box>
+                </Flex>
+              </Card>
+            )
+          })}
+        </Box>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export default ElysianRealmIndexPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const remembranceSigils = getRemembranceSigils(locale)
+
+  return {
+    props: {
+      remembranceSigils,
+      ...(await getI18NProps(locale)),
+    },
+  }
+}

src/pages/honkai3rd/elysian-realm/support-battlesuits.tsx

@@ -54,7 +54,9 @@ const ElysianRealmIndexPage = ({
           ]}
         />
 
-        <Heading as='h1'>{t('elysian-realm.supports')}</Heading>
+        <Heading as='h1' mb={3}>
+          {t('elysian-realm.supports')}
+        </Heading>
 
         <Box sx={{ mb: 3 }}>
           {supportBattlesuits.map(

src/server/data/honkai3rd/elysianRealm.ts

@@ -1,6 +1,8 @@
 import { readFileSync, readJsonFileSync } from '../fs'
 import {
   PopulatedSignetGroup,
+  RemembranceSigil,
+  remembranceSigilIds,
   SignetData,
   signetGroups,
   SignetSet,
@@ -147,6 +149,25 @@ export function getSupportBattlesuits(locale?: string) {
     }
   })
 }
+export function getRemembranceSigils(locale?: string) {
+  return remembranceSigilIds.map<RemembranceSigil>((sigilId) => {
+    const rawDataPathname =
+      locale === 'ko-KR'
+        ? `honkai3rd/ko-KR/elysianRealm/remembranceSigils/${sigilId}.md`
+        : `honkai3rd/elysianRealm/remembranceSigils/${sigilId}.md`
+    const [name, ...descriptionLines] = readFileSync(rawDataPathname)
+      .toString()
+      .trim()
+      .slice(2)
+      .split('\n\n')
+
+    return {
+      id: sigilId,
+      name: name.trim(),
+      description: descriptionLines.join('\n').trim(),
+    }
+  })
+}
 
 function parseNormalSignetsRawData(setId: string, data: string) {
   const signetSections = data.replace(/\\\*/g, '*').slice(2).split('\n# ')