Simpilify home page

src/components/atoms/NavItem.tsx

@@ -0,0 +1,66 @@
+/** @jsxImportSource theme-ui */
+import { NavLink, Text } from '@theme-ui/components'
+import NextLink from 'next/link'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { useTranslation } from '../../lib/i18n'
+import SquareImageBox from '../atoms/SquareImageBox'
+
+type NavItemTarget = 'battlesuits' | 'stigmata' | 'weapons' | 'elfs' | 'elysian-realm' | 'media'
+interface NavItemProps {
+  target: NavItemTarget
+}
+
+const NavItem = ({ target }: NavItemProps) => {
+  const { t } = useTranslation()
+  return (
+    <NextLink href={getHref(target)} passHref>
+      <NavLink
+        sx={{
+          fontFamily: 'monospace',
+          display: 'flex',
+          alignItems: 'center',
+          overflow: 'hidden',
+          p: 1
+        }}
+      >
+        <SquareImageBox size={30} mr={1} src={getIconByTarget(target)} />
+        <Text
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {t(`common.${target}`)}
+        </Text>
+      </NavLink>
+    </NextLink>
+  )
+}
+
+export default NavItem
+
+function getIconByTarget(target: string) {
+  switch (target) {
+    case 'versions':
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/versions.webp`
+    case 'media':
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/grand-instructor.webp`
+    default:
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`
+  }
+}
+
+function getHref(target: NavItemTarget) {
+  switch (target) {
+    case 'battlesuits':
+    case 'weapons':
+    case 'elfs':
+      return `/honkai3rd/${target}`
+    case 'stigmata':
+      return '/honkai3rd/stigmata-sets'
+    case 'elysian-realm':
+      return '/honkai3rd/er'
+  }
+  return `/honkai3rd/${target}`
+}

src/components/organisms/Honkai3rdNavigator.tsx

@@ -5,12 +5,11 @@ import { NavLink, Heading, Text, Box, Flex, IconButton, Switch, Label } from '@t
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useColorMode } from 'theme-ui'
-import { assetsBucketBaseUrl } from '../../lib/consts'
 import { useTranslation } from '../../lib/i18n'
-import SquareImageBox from '../atoms/SquareImageBox'
+import NavItem from '../atoms/NavItem'
 
 interface Honkai3rdNavigatorProps {
-  close: () => void
+  close?: () => void
 }
 
 const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
@@ -24,20 +23,23 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
         p: 2
       }}
     >
-      <Flex
+      {close != null && (
-        sx={{
+        <Flex
-          position: 'sticky',
+          sx={{
-          display: ['block', 'none'],
+            position: 'sticky',
-          top: 0,
+            display: ['block', 'none'],
-          height: 50,
+            top: 0,
-          ml: -2,
+            height: 50,
-          mt: -2
+            ml: -2,
-        }}
+            mt: -2
-      >
+          }}
-        <IconButton sx={{ width: 50, height: 50 }} onClick={close}>
+        >
-          <Icon path={mdiClose} size={1} />
+          <IconButton sx={{ width: 50, height: 50 }} onClick={close}>
-        </IconButton>
+            <Icon path={mdiClose} size={1} />
-      </Flex>
+          </IconButton>
+        </Flex>
+      )}
+
       <NextLink href="/" passHref>
         <NavLink mb={2}>Abyss Lab</NavLink>
       </NextLink>
@@ -106,61 +108,3 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
 }
 
 export default Honkai3rdNavigator
-
-type NavItemTarget = 'battlesuits' | 'stigmata' | 'weapons' | 'elfs' | 'elysian-realm' | 'media'
-interface NavItemProps {
-  target: NavItemTarget
-}
-
-const NavItem = ({ target }: NavItemProps) => {
-  const { t } = useTranslation()
-  return (
-    <NextLink href={getHref(target)} passHref>
-      <NavLink
-        sx={{
-          fontFamily: 'monospace',
-          display: 'flex',
-          alignItems: 'center',
-          overflow: 'hidden',
-          p: 1
-        }}
-      >
-        <SquareImageBox size={30} mr={1} src={getIconByTarget(target)} />
-        <Text
-          sx={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}
-        >
-          {t(`common.${target}`)}
-        </Text>
-      </NavLink>
-    </NextLink>
-  )
-}
-
-function getIconByTarget(target: string) {
-  switch (target) {
-    case 'versions':
-      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/versions.webp`
-    case 'media':
-      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/grand-instructor.webp`
-    default:
-      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`
-  }
-}
-
-function getHref(target: NavItemTarget) {
-  switch (target) {
-    case 'battlesuits':
-    case 'weapons':
-    case 'elfs':
-      return `/honkai3rd/${target}`
-    case 'stigmata':
-      return '/honkai3rd/stigmata-sets'
-    case 'elysian-realm':
-      return '/honkai3rd/er'
-  }
-  return `/honkai3rd/${target}`
-}

src/pages/honkai3rd/index.tsx

@@ -1,14 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link, Paragraph } from '@theme-ui/components'
+import { Box } from '@theme-ui/components'
-import NextLink from 'next/link'
-import Breadcrumb from '../../components/organisms/Breadcrumb'
-import { getBattlesuitById } from '../../server/data/honkai3rd/battlesuits'
-import {
-  getCurrentVersion,
-  listVersionData,
-} from '../../server/data/honkai3rd/versions'
-import { getWeaponById } from '../../server/data/honkai3rd/weapons'
-import { format as formatDate } from 'date-fns'
 import { BattlesuitData } from '../../lib/honkai3rd/battlesuits'
 import { WeaponData } from '../../lib/honkai3rd/weapons'
 import { VersionData } from '../../lib/honkai3rd/versions'
@@ -16,13 +7,8 @@ import { getI18NProps } from '../../server/i18n'
 import { NextPageContext } from 'next'
 import { useTranslation } from '../../lib/i18n'
 import Head from '../../components/atoms/Head'
-import PageLink from '../../components/atoms/PageLink'
-import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
-import WeaponCard from '../../components/molecules/WeaponCard'
-import BattlesuitCard from '../../components/molecules/BattlesuitCard'
-import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata'
 import { StigmataSet } from '../../lib/honkai3rd/stigmata'
-import StigmataSetCard from '../../components/molecules/StigmataSetCard'
+import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -32,168 +18,28 @@ interface VersionIndexPageProps {
   currentVersionNewStigmataSets: StigmataSet[]
 }
 
-const VersionIndexPage = ({
+const HomePage = ({}: VersionIndexPageProps) => {
-  currentVersionData,
-  currentVersionNewBattlesuits,
-  versionDataList,
-  currentVersionNewWeapons,
-  currentVersionNewStigmataSets,
-}: VersionIndexPageProps) => {
   const { t } = useTranslation()
 
   return (
-    <Honkai3rdLayout>
+    <Box>
-      <Head
+      <Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} />
-        title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
-        canonicalHref={`/honkai3rd`}
-      />
 
-      <Box p={3}>
+      <Box p={2}>
-        <Breadcrumb
+        <Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} />
-          items={[{ href: '/honkai3rd', label: t('common.honkai-3rd') }]}
-        />
-        <Box mb={4}>
-          <Box mb={2}>
-            {currentVersionData.previousVersion != null && (
-              <PageLink
-                href={`/honkai3rd/versions/${currentVersionData.previousVersion}`}
-                mr={2}
-              >
-                {t('versions.previous')} (v
-                {currentVersionData.previousVersion})
-              </PageLink>
-            )}
-            {currentVersionData.nextVersion != null && (
-              <PageLink
-                href={`/honkai3rd/versions/${currentVersionData.nextVersion}`}
-              >
-                {t('versions.next')} (v{currentVersionData.nextVersion})
-              </PageLink>
-            )}
-          </Box>
 
-          <Heading as='h1'>
+        <Honkai3rdNavigator />
-            v{currentVersionData.version} : {currentVersionData.name}{' '}
-            <small>({t('versions.current')})</small>
-          </Heading>
-          <Box mb={4}>
-            {formatDate(new Date(currentVersionData.duration[0]), 'PP')} -{' '}
-            {currentVersionData.duration[1] != null
-              ? formatDate(new Date(currentVersionData.duration[1]), 'PP')
-              : ''}
-          </Box>
-
-          <Box>
-            <Heading as='h3' mb={2}>
-              {t('versions.new-battlesuits')}
-            </Heading>
-            <Box mb={2} sx={{ display: 'inline-block' }}>
-              {currentVersionNewBattlesuits.map((battlesuit) => {
-                return (
-                  <BattlesuitCard
-                    key={battlesuit.id}
-                    battlesuit={battlesuit}
-                    size='sm'
-                  />
-                )
-              })}
-            </Box>
-
-            <Heading as='h3' mb={2}>
-              {t('versions.new-weapons')}
-            </Heading>
-            <Box mb={2} sx={{ display: 'inline-block' }}>
-              {currentVersionNewWeapons.map((weapon) => {
-                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
-              })}
-            </Box>
-
-            <Heading as='h3' mb={2}>
-              {t('versions.new-stigmata-sets')}
-            </Heading>
-            <Box mb={2} sx={{ display: 'inline-block' }}>
-              {currentVersionNewStigmataSets.map((stigmataSet) => {
-                return (
-                  <StigmataSetCard
-                    key={stigmataSet.id}
-                    stigmataSet={stigmataSet}
-                    size='sm'
-                  />
-                )
-              })}
-            </Box>
-          </Box>
-
-          <Paragraph>
-            We&apos;ve decided to stop providing weekly bossses and supply
-            events since v6.2. But you can still find it from{' '}
-            <a href='https://www.arustats.com/en-us/hi3/timeline'>
-              CAPTAIN ALPACA&apos;s Website
-            </a>
-            .
-          </Paragraph>
-        </Box>
-        <Heading as='h2' mb={3}>
-          {t('versions.all-versions')}
-        </Heading>
-        <Box>
-          {versionDataList.map((versionData) => {
-            return (
-              <Box key={versionData.version} mb={2}>
-                <Heading as='h3'>
-                  <NextLink
-                    href={`/honkai3rd/versions/${versionData.version}`}
-                    passHref
-                  >
-                    <Link>
-                      {versionData.version} : {versionData.name} (
-                      {formatDate(new Date(versionData.duration[0]), 'PP')} -{' '}
-                      {versionData.duration[1] != null
-                        ? formatDate(new Date(versionData.duration[1]), 'PP')
-                        : ''}
-                      )
-                    </Link>
-                  </NextLink>
-                </Heading>
-              </Box>
-            )
-          })}
-        </Box>
       </Box>
-    </Honkai3rdLayout>
+    </Box>
   )
 }
 
 export async function getStaticProps({ locale }: NextPageContext) {
-  const currentVersionData = getCurrentVersion(locale)!
-
-  const currentVersionNewBattlesuits = currentVersionData.newBattlesuits.map(
-    (battlesuitId) => {
-      return getBattlesuitById(battlesuitId, locale)
-    }
-  )
-  const currentVersionNewWeapons = currentVersionData.newWeapons.map(
-    (weaponId) => {
-      return getWeaponById(weaponId, locale)
-    }
-  )
-
-  const currentVersionNewStigmataSets = currentVersionData.newStigmataSets.map(
-    (stigmataSetId) => {
-      return getStigmataSetBySetId(stigmataSetId, locale)
-    }
-  )
-
   return {
     props: {
-      currentVersionData,
+      ...(await getI18NProps(locale))
-      currentVersionNewBattlesuits,
+    }
-      currentVersionNewWeapons,
-      currentVersionNewStigmataSets,
-      versionDataList: listVersionData(locale),
-      ...(await getI18NProps(locale)),
-    },
   }
 }
 
-export default VersionIndexPage
+export default HomePage