Move current version data to index page

public/locales/en-US/common.json

@@ -91,6 +91,7 @@
     "version": "Version",
     "list-page-description": "Version info list of Honkai 3rd",
     "all-versions": "All Versions",
+    "versions": "Versions",
     "previous": "Previous Version",
     "next": "Next Version",
     "current": "Current Version",

public/locales/ko-KR/common.json

@@ -81,6 +81,7 @@
     "version": "업데이트",
     "list-page-description": "붕괴 3rd 업데이트 정보 목록",
     "all-versions": "모든 업데이트",
+    "versions": "업데이트",
     "previous": "이전 버전",
     "next": "다음 버전",
     "current": "현재 버전",

src/pages/honkai3rd/index.tsx

@@ -1,96 +1,223 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Text, Flex, Link } from '@theme-ui/components'
+import { Box, Flex, Heading, Link, Text, Paragraph } from '@theme-ui/components'
-import { useCallback, useEffect, useState } from 'react'
+import NextLink from 'next/link'
-import Breadcrumb from '../../components/organisms/Breadcrumb'
-import { NextPageContext } from 'next'
-import { getI18NProps } from '../../server/i18n'
-import { useTranslation } from '../../lib/i18n'
-import PageLink from '../../components/atoms/PageLink'
 import SquareImageBox from '../../components/atoms/SquareImageBox'
-import { mdiGithub } from '@mdi/js'
+import Breadcrumb from '../../components/organisms/Breadcrumb'
-import { Icon } from '@mdi/react'
+import GanttChart from '../../components/organisms/GanttChart'
+import { getBattlesuitById } from '../../server/data/honkai3rd/battlesuits'
+import {
+  getCurrentVersion,
+  listVersionData,
+} from '../../server/data/honkai3rd/versions'
+import { getWeaponById } from '../../server/data/honkai3rd/weapons'
+import { addDateToDateString, getDateString } from '../../lib/string'
+import ScrollContainer from 'react-indiana-drag-scroll'
+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'
+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 { assetsBucketBaseUrl } from '../../lib/consts'
 import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
+import WeaponCard from '../../components/molecules/WeaponCard'
+import BattlesuitCard from '../../components/molecules/BattlesuitCard'
+import { useEffect, useState } from 'react'
+import BossTable from '../../components/organisms/BossTable'
+import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../lib/honkai3rd/stigmata'
+import StigmataSetCard from '../../components/molecules/StigmataSetCard'
 
-const bannerValkyries = [
+interface VersionIndexPageProps {
-  'kiana',
+  versionDataList: VersionData[]
-  'mei',
+  currentVersionData: VersionData
-  'bronya',
+  currentVersionNewBattlesuits: BattlesuitData[]
-  'theresa',
+  currentVersionNewWeapons: WeaponData[]
-  'fuhua',
+  currentVersionNewStigmataSets: StigmataSet[]
-  'bianka',
+}
-  'rita',
-  'carole',
-]
 
-const Honkai3rdIndexPage = () => {
+const VersionIndexPage = ({
+  currentVersionData,
+  currentVersionNewBattlesuits,
+  versionDataList,
+  currentVersionNewWeapons,
+  currentVersionNewStigmataSets,
+}: VersionIndexPageProps) => {
   const { t } = useTranslation()
-  const [bannerIndex, setBannerIndex] = useState(0)
+  const [today, setToday] = useState<Date | null>(null)
-
-  const switchBanner = useCallback(() => {
-    setBannerIndex((previousBannerIndex) => {
-      return (previousBannerIndex + 1) % bannerValkyries.length
-    })
-  }, [])
-
   useEffect(() => {
-    const timer = setTimeout(() => {
+    setToday(new Date(getDateString(new Date())))
-      switchBanner()
+  }, [])
-    }, 5000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [bannerIndex, switchBanner])
 
   return (
     <Honkai3rdLayout>
       <Head
-        title={`${t('common.honkai-3rd')}: Home - ${t('common.abyss-lab')}`}
+        title={`${t('common.versions')} - ${t('common.honkai-3rd')} - ${t(
-        description={t('index.description')}
+          'common.abyss-lab'
+        )}`}
+        description={t('versions.list-page-description')}
       />
 
       <Box p={3}>
         <Breadcrumb
-          items={[{ href: 'honkai3rd', label: t('common.honkai-3rd') }]}
+          items={[{ href: '/honkai3rd', label: t('common.honkai-3rd') }]}
         />
-        <Heading as='h1'>{t('common.honkai-3rd')} </Heading>
+        <Box mb={4}>
-
+          <Box mb={2}>
-        <Box
+            {currentVersionData.previousVersion != null && (
-          sx={{ position: 'relative', mb: 3, width: 280, height: 280 }}
+              <PageLink
-          onClick={switchBanner}
+                href={`/honkai3rd/versions/${currentVersionData.previousVersion}`}
+                mr={2}
               >
-          {bannerValkyries.map((valkyrie, index) => (
+                {t('versions.previous')} (v
-            <BannerItem
+                {currentVersionData.previousVersion})
-              key={valkyrie}
+              </PageLink>
-              valkyrie={valkyrie}
+            )}
-              active={bannerIndex === index}
+            {currentVersionData.nextVersion != null && (
-            />
+              <PageLink
-          ))}
+                href={`/honkai3rd/versions/${currentVersionData.nextVersion}`}
+              >
+                {t('versions.next')} (v{currentVersionData.nextVersion})
+              </PageLink>
+            )}
           </Box>
 
-        <Box mb={3}>
+          <Heading as='h1'>
-          <NavItem target='versions' />
+            v{currentVersionData.version} : {currentVersionData.name}{' '}
-          <NavItem target='battlesuits' />
+            <small>({t('versions.current')})</small>
-          <NavItem target='weapons' />
+          </Heading>
-          <NavItem target='stigmata' />
+          <Box mb={4}>
-          <NavItem target='elfs' />
+            {formatDate(new Date(currentVersionData.duration[0]), 'PP')} -{' '}
-          <NavItem target='elysian-realm' />
+            {currentVersionData.duration[1] != null
-          <NavItem target='media' />
+              ? formatDate(new Date(currentVersionData.duration[1]), 'PP')
+              : ''}
           </Box>
 
           <Box>
-          <Link
+            <Heading as='h3' mb={2}>
-            href='https://github.com/sakura-knoll/abyss-lab'
+              {t('versions.new-battlesuits')}
-            target='_blank'
+            </Heading>
-            rel='noopener noreferrer'
+            <Box mb={2} sx={{ display: 'inline-block' }}>
-            sx={{ display: 'flex', alignItems: 'center' }}
+              {currentVersionNewBattlesuits.map((battlesuit) => {
-          >
+                return (
-            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
+                  <BattlesuitCard
-              <Icon path={mdiGithub} size='1rem' />
+                    key={battlesuit.id}
+                    battlesuit={battlesuit}
+                    size='sm'
+                  />
+                )
+              })}
             </Box>
-            <Text>Source Code</Text>
+
+            <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>
+
+          <Heading as='h3' mb={2}>
+            {t('versions.weekly-bosses')}
+          </Heading>
+
+          <Box sx={{ mb: 3 }}>
+            <BossTable versionData={currentVersionData} today={today} />
+          </Box>
+
+          <Heading as='h3' mb={2}>
+            {t('versions.supply-events')}
+          </Heading>
+          <Box mb={2}>
+            <ScrollContainer vertical={false}>
+              <GanttChart
+                items={currentVersionData.supplyEvents.map(
+                  (supplyEventData) => {
+                    const imgSrc = getIconSrcFromItem(
+                      supplyEventData.featured[0]
+                    )
+                    return {
+                      id: `${supplyEventData.duration[0]}/${supplyEventData.duration[1]}/${supplyEventData.name}`,
+                      label: (
+                        <Flex sx={{ alignItems: 'center' }}>
+                          {!supplyEventData.verified && (
+                            <Text sx={{ flexShrink: 0 }}>❓</Text>
+                          )}
+                          {imgSrc != null && (
+                            <SquareImageBox
+                              size={20}
+                              src={imgSrc}
+                              alt={supplyEventData.featured[0].id}
+                              mr={1}
+                            />
+                          )}
+                          <Text>{supplyEventData.name}</Text>
+                        </Flex>
+                      ),
+                      duration: supplyEventData.duration,
+                      row: supplyEventData.track,
+                    }
+                  }
+                )}
+                today={today}
+                startDate={currentVersionData.duration[0]}
+                endDate={
+                  currentVersionData.duration[1] != null
+                    ? currentVersionData.duration[1]
+                    : addDateToDateString(currentVersionData.duration[0], {
+                        weeks: 6,
+                      })
+                }
+              />
+            </ScrollContainer>
+          </Box>
+          <Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</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>
@@ -98,77 +225,51 @@ const Honkai3rdIndexPage = () => {
 }
 
 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,
+      currentVersionNewBattlesuits,
+      currentVersionNewWeapons,
+      currentVersionNewStigmataSets,
+      versionDataList: listVersionData(locale),
       ...(await getI18NProps(locale)),
     },
   }
 }
 
-export default Honkai3rdIndexPage
+export default VersionIndexPage
 
-interface NavItemProps {
+function getIconSrcFromItem(item: { type: string; id: string }): string | null {
-  target:
+  switch (item.type) {
-    | 'versions'
+    case 'battlesuit':
-    | 'battlesuits'
+      return `${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${item.id}.png`
-    | 'stigmata'
+    case 'weapon':
-    | 'weapons'
+      return `${assetsBucketBaseUrl}/honkai3rd/weapons/${item.id}.png`
-    | 'elfs'
+    case 'stigmata':
-    | 'elysian-realm'
+      return `${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${item.id}.png`
-    | 'media'
+    case 'elf':
-}
+      return `${assetsBucketBaseUrl}/honkai3rd/elfs/icon-${item.id}.png`
-
+    case 'outfit':
-const NavItem = ({ target }: NavItemProps) => {
+      return `${assetsBucketBaseUrl}/honkai3rd/outfits/portrait-${item.id}.webp`
-  const { t } = useTranslation()
-  return (
-    <Box mb={2}>
-      <PageLink href={`/honkai3rd/${target}`}>
-        <Box sx={{ display: 'inline-block' }}>
-          <Flex sx={{ alignItems: 'center' }}>
-            <SquareImageBox size={40} mr={1} src={getIconByTarget(target)} />
-            <Text sx={{ fontSize: 3 }}>{t(`common.${target}`)}</Text>
-          </Flex>
-        </Box>
-      </PageLink>
-    </Box>
-  )
-}
-
-interface BannerItemProps {
-  valkyrie: string
-  active: boolean
-}
-
-const BannerItem = ({ valkyrie, active }: BannerItemProps) => {
-  return (
-    <Box
-      className={active ? 'active' : ''}
-      sx={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: 280,
-        height: 280,
-        opacity: 0,
-        transition: 'opacity 500ms ease-in-out',
-        '&.active': { opacity: 1 },
-      }}
-    >
-      <SquareImageBox
-        size={280}
-        src={`${assetsBucketBaseUrl}/honkai3rd/banner-${valkyrie}.png`}
-      />
-    </Box>
-  )
-}
-
-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`
   }
+  return null
 }

src/pages/honkai3rd/versions/index.tsx

@@ -1,17 +1,8 @@
 /** @jsxImportSource theme-ui */
-import { Box, Flex, Heading, Link, Text, Paragraph } from '@theme-ui/components'
+import { Box, Heading, Link } from '@theme-ui/components'
 import NextLink from 'next/link'
-import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import GanttChart from '../../../components/organisms/GanttChart'
+import { listVersionData } from '../../../server/data/honkai3rd/versions'
-import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
-import {
-  getCurrentVersion,
-  listVersionData,
-} from '../../../server/data/honkai3rd/versions'
-import { getWeaponById } from '../../../server/data/honkai3rd/weapons'
-import { addDateToDateString, getDateString } from '../../../lib/string'
-import ScrollContainer from 'react-indiana-drag-scroll'
 import { format as formatDate } from 'date-fns'
 import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
@@ -20,16 +11,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 { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
-import WeaponCard from '../../../components/molecules/WeaponCard'
-import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
-import { useEffect, useState } from 'react'
-import BossTable from '../../../components/organisms/BossTable'
-import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
 import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
-import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -39,18 +22,8 @@ interface VersionIndexPageProps {
   currentVersionNewStigmataSets: StigmataSet[]
 }
 
-const VersionIndexPage = ({
+const VersionIndexPage = ({ versionDataList }: VersionIndexPageProps) => {
-  currentVersionData,
-  currentVersionNewBattlesuits,
-  versionDataList,
-  currentVersionNewWeapons,
-  currentVersionNewStigmataSets,
-}: VersionIndexPageProps) => {
   const { t } = useTranslation()
-  const [today, setToday] = useState<Date | null>(null)
-  useEffect(() => {
-    setToday(new Date(getDateString(new Date())))
-  }, [])
 
   return (
     <Honkai3rdLayout>
@@ -68,137 +41,9 @@ const VersionIndexPage = ({
             { href: '/honkai3rd/versions', label: t('common.versions') },
           ]}
         />
-        <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'>
+        <Heading as='h1' mb={3}>
-            v{currentVersionData.version} : {currentVersionData.name}{' '}
+          {t('versions.versions')}
-            <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>
-
-          <Heading as='h3' mb={2}>
-            {t('versions.weekly-bosses')}
-          </Heading>
-
-          <Box sx={{ mb: 3 }}>
-            <BossTable versionData={currentVersionData} today={today} />
-          </Box>
-
-          <Heading as='h3' mb={2}>
-            {t('versions.supply-events')}
-          </Heading>
-          <Box mb={2}>
-            <ScrollContainer vertical={false}>
-              <GanttChart
-                items={currentVersionData.supplyEvents.map(
-                  (supplyEventData) => {
-                    const imgSrc = getIconSrcFromItem(
-                      supplyEventData.featured[0]
-                    )
-                    return {
-                      id: `${supplyEventData.duration[0]}/${supplyEventData.duration[1]}/${supplyEventData.name}`,
-                      label: (
-                        <Flex sx={{ alignItems: 'center' }}>
-                          {!supplyEventData.verified && (
-                            <Text sx={{ flexShrink: 0 }}>❓</Text>
-                          )}
-                          {imgSrc != null && (
-                            <SquareImageBox
-                              size={20}
-                              src={imgSrc}
-                              alt={supplyEventData.featured[0].id}
-                              mr={1}
-                            />
-                          )}
-                          <Text>{supplyEventData.name}</Text>
-                        </Flex>
-                      ),
-                      duration: supplyEventData.duration,
-                      row: supplyEventData.track,
-                    }
-                  }
-                )}
-                today={today}
-                startDate={currentVersionData.duration[0]}
-                endDate={
-                  currentVersionData.duration[1] != null
-                    ? currentVersionData.duration[1]
-                    : addDateToDateString(currentVersionData.duration[0], {
-                        weeks: 6,
-                      })
-                }
-              />
-            </ScrollContainer>
-          </Box>
-          <Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
-        </Box>
-
-        <Heading as='h2' mb={3}>
-          {t('versions.all-versions')}
         </Heading>
         <Box>
           {versionDataList.map((versionData) => {
@@ -229,31 +74,8 @@ const VersionIndexPage = ({
 }
 
 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,
-      currentVersionNewBattlesuits,
-      currentVersionNewWeapons,
-      currentVersionNewStigmataSets,
       versionDataList: listVersionData(locale),
       ...(await getI18NProps(locale)),
     },
@@ -261,19 +83,3 @@ export async function getStaticProps({ locale }: NextPageContext) {
 }
 
 export default VersionIndexPage
-
-function getIconSrcFromItem(item: { type: string; id: string }): string | null {
-  switch (item.type) {
-    case 'battlesuit':
-      return `${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${item.id}.png`
-    case 'weapon':
-      return `${assetsBucketBaseUrl}/honkai3rd/weapons/${item.id}.png`
-    case 'stigmata':
-      return `${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${item.id}.png`
-    case 'elf':
-      return `${assetsBucketBaseUrl}/honkai3rd/elfs/icon-${item.id}.png`
-    case 'outfit':
-      return `${assetsBucketBaseUrl}/honkai3rd/outfits/portrait-${item.id}.webp`
-  }
-  return null
-}