retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize all pages

Browse Source
This commit is contained in:
Sakura Knoll
2021-12-20 17:59:56 +09:00 Unverified
parent cba32325d8
commit 7616ec7f51
8 changed files with 203 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+20
View File
@@ -814,6 +814,15 @@
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/ramda": {
"version": "0.27.60",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.60.tgz",
"integrity": "sha512-6ie74xhtl2ducVG8cC8mnYwpvIUWHBoLHbmvEsl5qPqJkqVP9ce5yZW10WgheKd2ua1yPIwd0miMWBsG19UmiQ==",
"dev": true,
"requires": {
"ts-toolbelt": "^6.15.1"
}
},
"@types/react": {
"version": "17.0.37",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
@@ -3468,6 +3477,11 @@
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true
},
"ramda": {
"version": "0.27.1",
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
"integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -3976,6 +3990,12 @@
"punycode": "^2.1.0"
}
},
"ts-toolbelt": {
"version": "6.15.5",
"resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
"integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
"dev": true
},
"tsconfig-paths": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
package.json
+2
View File
@@ -8,12 +8,14 @@
"@mdi/react": "^1.5.0",
"bootstrap": "^5.1.3",
"next": "^12.0.7",
"ramda": "^0.27.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.3",
"react-dom": "^17.0.2",
"theme-ui": "^0.12.1"
},
"devDependencies": {
"@types/ramda": "^0.27.60",
"@types/react": "^17.0.37",
"eslint": "8.5.0",
"eslint-config-next": "12.0.7",
src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+28 -16
View File
@@ -1,5 +1,6 @@
import { Box, Heading, Paragraph } from '@theme-ui/components'
import { NextPageContext } from 'next'
import Image from 'next/image'
import React from 'react'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -33,10 +34,21 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Heading as='h1'>{battlesuit.name}</Heading>
<Box className='mb-4'>
<Box>
<img
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100%',
maxWidth: '600px',
borderRadius: 4,
}}
>
<Image
alt={battlesuit.name}
src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
width={600}
height={600}
layout='responsive'
/>
</Box>
</Box>
@@ -49,7 +61,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.leader.core.description}</Paragraph>
{battlesuit.leader.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -57,7 +69,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -71,7 +83,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.passive.core.description}</Paragraph>
{battlesuit.passive.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -79,7 +91,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -93,7 +105,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.evasion.core.description}</Paragraph>
{battlesuit.evasion.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -101,7 +113,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -115,7 +127,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.special.core.description}</Paragraph>
{battlesuit.special.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -123,7 +135,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -138,7 +150,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.ultimate.core.description}</Paragraph>
{battlesuit.ultimate.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -146,7 +158,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -161,7 +173,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.basic.core.description}</Paragraph>
{battlesuit.basic.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -169,7 +181,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
@@ -185,7 +197,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
<Paragraph>{battlesuit.sp.core.description}</Paragraph>
{battlesuit.sp.subskills.map((subskill, index) => {
return (
<>
<React.Fragment key={subskill.name}>
<Heading as='h4'>
{subskill.name}
{subskill.requiredRank != null
@@ -193,7 +205,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: ''}
</Heading>
<p>{subskill.description}</p>
</>
</React.Fragment>
)
})}
</Box>
src/pages/honkai3rd/battlesuits/index.tsx
+13 -17
View File
@@ -1,5 +1,7 @@
import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import { pick } from 'ramda'
import React from 'react'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -9,7 +11,7 @@ import {
} from '../../../data/honkai3rd/battlesuits'
interface BattlesuitListPageProps {
battlesuits: BattlesuitData[]
battlesuits: Pick<BattlesuitData, 'id' | 'name'>[]
}
const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
@@ -58,29 +60,21 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
passHref={true}
>
<Link>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<div
className='rounded'
style={{
width: '140px',
height: '140px',
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '140px',
height: '140px',
borderRadius: 4,
}}
>
<img
<Image
alt={battlesuit.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='140'
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
/>
</div>
</Box>
<Box
sx={{
@@ -109,7 +103,9 @@ export default BattlesuitListPage
export async function getStaticProps() {
return {
props: {
battlesuits: listBattlesuits(),
battlesuits: listBattlesuits().map((battlesuit) =>
pick(['id', 'name'], battlesuit)
),
},
}
}
src/pages/honkai3rd/index.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { Box, Heading, Link, Image } from '@theme-ui/components'
import { Box, Heading, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import React from 'react'
import Breadcrumb from '../../components/organisms/Breadcrumb'
@@ -36,11 +37,13 @@ const Honkai3rdIndexPage = () => {
<Box p={3}>
<Breadcrumb items={[{ href: 'honkai3rd', label: 'Honkai 3rd' }]} />
<Heading as='h1'>Honkai 3rd</Heading>
<Box mb={3}>
<Box mb={3} sx={{ position: 'relative', minHeight: 300 }}>
<Image
alt='Honkai 3rd Wallpaper'
src='/assets/honkai3rd/wallpaper.png'
width='100%'
width={640}
height={360}
layout='responsive'
/>
</Box>
<Box mb={3}>
src/pages/honkai3rd/stigmata/[stigmataId].tsx
+44 -27
View File
@@ -1,7 +1,10 @@
import { NavLink, Box, Heading, Text, Paragraph } from '@theme-ui/components'
import { Box, Heading, Text, Paragraph } from '@theme-ui/components'
import { NextPageContext } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import {
StigmataData,
listStigmata,
@@ -24,23 +27,41 @@ const StigmataListPage = ({
}: StigmataShowPageProps) => {
return (
<Box>
<Box>
<Link passHref href='/honkai3rd'>
<NavLink>Honkai 3rd</NavLink>
</Link>
<Link passHref href='/honkai3rd/stigmata'>
<NavLink>Stigmata</NavLink>
</Link>
</Box>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: 'Honkai 3rd' },
{ href: '/honkai3rd/stigmata', label: 'Stigmata' },
{
href: `/honkai3rd/stigmata/${stigmataData.id}`,
label: stigmataData.name,
},
]}
/>
<Heading as='h1'>{stigmataData.name}</Heading>
<img
<Box
mb={3}
sx={{
position: 'relative',
overflow: 'hidden',
width: '100%',
maxWidth: '600px',
borderRadius: 4,
}}
>
<Image
alt={stigmataData.name}
src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
width={600}
height={600}
layout='responsive'
/>
</Box>
<Box>
<Box mb={3}>
<Heading as='h2'>Skill - {stigmataData.skill.name}</Heading>
<Paragraph>{stigmataData.skill.description}</Paragraph>
</Box>
@@ -48,7 +69,7 @@ const StigmataListPage = ({
{stigmataSet != null && (
<Box>
<Heading as='h2'>Set</Heading>
<Box>
<Box mb={3}>
{stigmataSetList.map((stigmataSetItem) => {
return (
<Link
@@ -56,34 +77,29 @@ const StigmataListPage = ({
href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}
>
<a>
<div
className='rounded'
style={{
width: '100px',
height: '100px',
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<img
<Image
alt={stigmataSetItem.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='100'
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/stigmata/icon-${stigmataSetItem.id}.png`}
/>
</div>
</Box>
<Text>{stigmataSetItem.name}</Text>
</a>
</Link>
)
})}
</Box>
<Box>
<Box mb={3}>
<Heading as='h3'>{stigmataSet.twoSetSkill.name}</Heading>
<Paragraph>{stigmataSet.twoSetSkill.description}</Paragraph>
</Box>
@@ -94,6 +110,7 @@ const StigmataListPage = ({
</Box>
)}
</Box>
</Box>
)
}
src/pages/honkai3rd/stigmata/index.tsx
+13 -17
View File
@@ -1,12 +1,14 @@
/** @jsxImportSource theme-ui */
import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import { pick } from 'ramda'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { StigmataData, listStigmata } from '../../../data/honkai3rd/stigmata'
interface StigmataListPageProps {
stigmataDataList: StigmataData[]
stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity'>[]
}
const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
@@ -55,29 +57,21 @@ const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
passHref={true}
>
<Link>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<div
className='rounded'
style={{
width: '100px',
height: '100px',
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<img
<Image
alt={stigmata.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='100'
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
/>
</div>
</Box>
<Box
sx={{
@@ -109,7 +103,9 @@ export default StigmataListPage
export async function getStaticProps() {
return {
props: {
stigmataDataList: listStigmata(),
stigmataDataList: listStigmata().map((stigmata) =>
pick(['id', 'name', 'rarity'], stigmata)
),
},
}
}
src/pages/honkai3rd/weapons/index.tsx
+13 -17
View File
@@ -1,12 +1,14 @@
/** @jsxImportSource theme-ui */
import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { listWeapons, WeaponData } from '../../../data/honkai3rd/weapons'
import { pick } from 'ramda'
interface WeaponListPageProps {
weaponDataList: WeaponData[]
weaponDataList: Pick<WeaponData, 'id' | 'name' | 'rarity'>[]
}
const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
@@ -55,29 +57,21 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
passHref={true}
>
<Link>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<div
className='rounded'
style={{
width: '100px',
height: '100px',
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<img
<Image
alt={weapon.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='100'
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
/>
</div>
</Box>
<Box
sx={{
@@ -109,7 +103,9 @@ export default WeaponListPage
export async function getStaticProps() {
return {
props: {
weaponDataList: listWeapons(),
weaponDataList: listWeapons().map((weapon) => {
return pick(['name', 'id', 'rarity'], weapon)
}),
},
}
}