Skip to content

Commit cf2fcb7

Browse files
TibowlTibowl
committed
Update page description/previews
1 parent 2707820 commit cf2fcb7

File tree

19 files changed

+171
-80
lines changed

19 files changed

+171
-80
lines changed

‎pages/_app.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
3434
<title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
3535
<link rel="icon" href="/favicon.ico" />
3636
<meta name="twitter:card" content="summary" />
37+
<meta property="og:title" content="Hu Tao" />
38+
<meta property="og:description" content="Genshin Impact database and tools, available as a website and Discord bot." />
3739
</Head>
3840

3941
<div className="w-full">

‎pages/artifacts/[artifact].tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Icon from "../../components/Icon"
77
import Main from "../../components/Main"
88
import { getArtifacts } from "../../utils/data-cache"
99
import { Arti, Artifact, Bonus } from "../../utils/types"
10-
import { getGuidesFor, getLinkToGuide, getStarColor, joinMulti, urlify } from "../../utils/utils"
10+
import { clean, getGuidesFor, getLinkToGuide, getStarColor, joinMulti, urlify } from "../../utils/utils"
1111

1212
interface Props {
1313
artifact: Artifact,
@@ -23,7 +23,10 @@ export default function ArtifactWebpage({ artifact, location, guides }: Props &
2323
<title>{artifact.name} | Hu Tao</title>
2424
<meta name="twitter:card" content="summary" />
2525
<meta property="og:title" content={`${artifact.name} | Hu Tao`} />
26-
<meta property="og:description" content={`View ${artifact.name} information`} />
26+
<meta property="og:description" content={`The ${artifact.name} artifact set${artifact.artis?.length ?? 0 > 0 ?
27+
` consists of ${artifact.artis?.length} pieces and is available in ${joinMulti(artifact.levels?.map(l => `${l} star`) ?? [])} variants. It also has` :
28+
" has"} ${joinMulti(artifact.bonuses?.map(b => `a ${b.count} piece set bonus: "${clean(b.desc)}"`) ?? [])}.`} />
29+
{artifact.artis?.[0]?.icon && <meta property="og:image" content={artifact.artis?.[0]?.icon} />}
2730
</Head>
2831
<h2 className="font-semibold">
2932
<FormattedLink href="/artifacts/" location={location} className="font-semibold text-lg">

‎pages/artifacts/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function Artifacts(props: Props & { location: string }) {
2424
<title>Artifacts | Hu Tao</title>
2525
<meta name="twitter:card" content="summary" />
2626
<meta property="og:title" content="Artifacts | Hu Tao" />
27-
<meta property="og:description" content="View information about different Genshin Impact artifacts!" />
27+
<meta property="og:description" content={`View set bonuses and description of the ${props.artifacts.length} different artifact sets in Genshin Impact.`} />
2828
</Head>
2929

3030
<h1 className="text-5xl font-bold pb-2">
@@ -87,7 +87,7 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
8787
props: {
8888
artifacts: Object
8989
.values(data)
90-
.sort((a, b) => Math.max(...b.levels) - Math.max(...a.levels) || Math.min(...a.levels) - Math.min(...b.levels) || a.name.localeCompare(b.name))
90+
.sort((a, b) => Math.max(...b.levels ?? [5]) - Math.max(...a.levels ?? [5]) || Math.min(...a.levels ?? [4]) - Math.min(...b.levels ?? [4]) || a.name.localeCompare(b.name))
9191
.map(w => createSmallArtifact(w))
9292
},
9393
revalidate: 60 * 60

‎pages/characters/[char].tsx‎

Lines changed: 59 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { FullAscensionCosts } from "../../components/Tables"
1313
import YouTube from "../../components/YouTube"
1414
import { CharacterCurves, CostTemplates, getCharacterCurves, getCharacters, getCostTemplates } from "../../utils/data-cache"
1515
import { Character, CharacterFull, Constellation, CostTemplate, CurveEnum, Meta, Passive, Skill, Skills, TalentTable, TalentValue } from "../../utils/types"
16-
import { elements, ElementType, getCharStatsAt, getCostsFromTemplate, getGuidesFor, getLinkToGuide, getStarColor, isFullCharacter, isValueTable, stat, urlify, weapons } from "../../utils/utils"
16+
import { clean, elements, ElementType, getCharStatsAt, getCostsFromTemplate, getGuidesFor, getLinkToGuide, getStarColor, isFullCharacter, isValueTable, joinMulti, stat, urlify, weapons } from "../../utils/utils"
1717
import styles from "../style.module.css"
1818

1919
interface Props {
@@ -34,7 +34,8 @@ export default function CharacterWebpage({ char, location, characterCurves, cost
3434
<title>{char.name} | Hu Tao</title>
3535
<meta name="twitter:card" content="summary" />
3636
<meta property="og:title" content={`${char.name} | Hu Tao`} />
37-
<meta property="og:description" content={`View ${char.name} information`} />
37+
<meta property="og:description" content={getDescription(char, charElems)} />
38+
{char.icon && <meta property="og:image" content={char.icon} />}
3839
</Head>
3940
<h2 className="font-semibold">
4041
<FormattedLink href="/characters/" location={location} className="font-semibold text-lg">
@@ -108,27 +109,51 @@ export default function CharacterWebpage({ char, location, characterCurves, cost
108109
)
109110
}
110111

112+
function getDescription(char: Character, charElems: ("Pyro" | "Electro" | "Cryo" | "Hydro" | "Anemo" | "Geo" | "Dendro")[]): string | undefined {
113+
return `${char.name} is a ${char.star ? `${char.star} star ` : ""}${joinMulti(charElems)} ${getWeaponLine()}. ${getAscensionLine()}${getTalentLine()}${clean(char.desc)}`
114+
115+
function getWeaponLine() {
116+
if (char.weaponType)
117+
return `${char.weaponType} user`
118+
return "character (unreleased)"
119+
}
120+
121+
function getTalentLine() {
122+
if (char.skills && getTalentCosts(char.skills).length > 0)
123+
return `Uses ${joinMulti(getTalentCosts(char.skills))} for talents. `
124+
return ""
125+
}
126+
127+
function getAscensionLine() {
128+
if (char.ascensionCosts)
129+
return `Uses ${joinMulti(getAscensionCosts(char.ascensionCosts))} for ascensions. `
130+
return ""
131+
}
132+
}
133+
111134
function TOC({ href, title, depth = 0 }: { href: string, title: string, depth?: number }) {
112135
const size = depth > 0 ? "sm" : "base"
113136
return <div>
114137
<FormattedLink href={href} className={`text-${size}`} style={({ marginLeft: (0.25 * depth) + "rem" })}>{title}</FormattedLink>
115138
</div>
116139
}
117-
118-
function AscensionCosts({ costs }: { costs: CostTemplate }) {
119-
const ascensionCosts = [
140+
function getAscensionCosts(costs: CostTemplate) {
141+
return [
120142
costs.mapping.Gem4,
121143
costs.mapping.BossMat,
122144
costs.mapping.Specialty,
123145
costs.mapping.EnemyDropTier3,
124146
].filter(x => x)
147+
}
148+
function AscensionCosts({ costs }: { costs: CostTemplate }) {
149+
const ascensionCosts = getAscensionCosts(costs)
125150
return <div className="flex flex-wrap items-center">
126151
<div className="text-base font-semibold pt-1 inline-block pr-1 h-9">Ascension materials:</div>
127152
{ascensionCosts.map(e => <MaterialImage key={e} name={e} />)}
128153
</div>
129154
}
130155

131-
function TalentCosts({ skills }: { skills: Skills[] }) {
156+
function getTalentCosts(skills: Skills[]): string[] {
132157
const talents = skills
133158
.flatMap(s => [...(s.talents ?? []), s.ult])
134159
.filter(x => x)
@@ -151,10 +176,13 @@ function TalentCosts({ skills }: { skills: Skills[] }) {
151176
.map(s => s?.costs?.mapping?.EnemyDropTier3)
152177
.filter((x, i, a) => x && a.indexOf(x) == i)
153178

154-
const all = [...books, ...mats, ...drops] as string[]
179+
return [...books, ...mats, ...drops] as string[]
180+
}
181+
182+
function TalentCosts({ skills }: { skills: Skills[] }) {
155183
return <div className="flex flex-wrap items-center">
156184
<div className="text-base font-semibold pt-1 inline-block pr-1 h-9">Talent materials:</div>
157-
{all.map(e => <MaterialImage key={e} name={e} />)}
185+
{getTalentCosts(skills).map(e => <MaterialImage key={e} name={e} />)}
158186
</div>
159187
}
160188

@@ -291,29 +319,29 @@ function TalentCost({ template, costTemplates }: { template: CostTemplate, costT
291319
const [expanded, setExpanded] = useState(false)
292320

293321
return <>
294-
<div className="font-bold">Talent costs:</div>
295-
<table className={`table-auto w-full ${styles.table} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={() => setExpanded(true)}>
296-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
297-
<td>Lv.</td>
298-
<td>Mora</td>
299-
<td colSpan={maxCostWidth}>Items</td>
300-
</thead>
301-
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
302-
{costs
303-
.map(({ mora, items }, ind) => <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
304-
<td>{ind + 1}&rarr;{ind + 2}</td>
305-
<td className="text-right">{mora}</td>
306-
{items.map(({ count, name }, i, arr) => <td key={name} colSpan={i == arr.length - 1 ? maxCostWidth - i : 1}>
307-
{count > 0 && <MaterialCost name={name} count={count}/> }
308-
</td>)}
309-
</tr>
310-
)
311-
.filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
312-
{!expanded && <tr className="pr-1 cursor-pointer text-blue-700 dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-400 no-underline transition-all duration-200 font-semibold">
313-
<td colSpan={maxCostWidth + 2} style={({ textAlign: "center" })}>Click to expand...</td>
314-
</tr>}
315-
</tbody>
316-
</table>
322+
<div className="font-bold">Talent costs:</div>
323+
<table className={`table-auto w-full ${styles.table} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={() => setExpanded(true)}>
324+
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
325+
<td>Lv.</td>
326+
<td>Mora</td>
327+
<td colSpan={maxCostWidth}>Items</td>
328+
</thead>
329+
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
330+
{costs
331+
.map(({ mora, items }, ind) => <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
332+
<td>{ind + 1}&rarr;{ind + 2}</td>
333+
<td className="text-right">{mora}</td>
334+
{items.map(({ count, name }, i, arr) => <td key={name} colSpan={i == arr.length - 1 ? maxCostWidth - i : 1}>
335+
{count > 0 && <MaterialCost name={name} count={count} />}
336+
</td>)}
337+
</tr>
338+
)
339+
.filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
340+
{!expanded && <tr className="pr-1 cursor-pointer text-blue-700 dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-400 no-underline transition-all duration-200 font-semibold">
341+
<td colSpan={maxCostWidth + 2} style={({ textAlign: "center" })}>Click to expand...</td>
342+
</tr>}
343+
</tbody>
344+
</table>
317345
</>
318346
}
319347

‎pages/characters/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function Characters(props: Props & { location: string }) {
3030
<title>Characters | Hu Tao</title>
3131
<meta name="twitter:card" content="summary" />
3232
<meta property="og:title" content="Characters | Hu Tao" />
33-
<meta property="og:description" content="View information about different Genshin Impact characters!" />
33+
<meta property="og:description" content={`View talent/ascension material, constellations and more of the ${props.characters.length} different characters in Genshin Impact.`} />
3434
</Head>
3535

3636
<h1 className="text-5xl font-bold pb-2">

‎pages/enemies/[enemy].tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export default function EnemyWebpage({ enemy, location, guides }: Props & { loca
2525
<title>{enemy.name} | Hu Tao</title>
2626
<meta name="twitter:card" content="summary" />
2727
<meta property="og:title" content={`${enemy.name} | Hu Tao`} />
28-
<meta property="og:description" content={`View ${enemy.name} information`} />
28+
<meta property="og:description" content={`${enemy.name}${enemy.type ? ` (${enemy.type})` : ""}${enemy.kind ? ` is a ${enemy.kind}` : " is an enemy"} in Genshin Impact.${enemy.resistance ? " Click to find out their resistances!" : ""}`} />
29+
{enemy.icon && <meta property="og:image" content={enemy.icon} />}
2930
</Head>
3031
<h2 className="font-semibold">
3132
<FormattedLink href="/enemies/" location={location} className="font-semibold text-lg">

‎pages/enemies/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function Enemies(props: Props & { location: string }) {
2929
<title>Enemies | Hu Tao</title>
3030
<meta name="twitter:card" content="summary" />
3131
<meta property="og:title" content="Enemies | Hu Tao" />
32-
<meta property="og:description" content="View information about different Genshin Impact enemies!" />
32+
<meta property="og:description" content={`View description, classification and resistances of the ${props.enemies.length} different enemies in Genshin Impact.`} />
3333
</Head>
3434

3535
<h1 className="text-5xl font-bold pb-2">

‎pages/guides/[category].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function CategoryWebpage({ guide, location }: Props & { location:
1717
<title>{guide.name} | Hu Tao</title>
1818
<meta name="twitter:card" content="summary" />
1919
<meta property="og:title" content={`${guide.name} | Hu Tao`} />
20-
<meta property="og:description" content={`View ${guide.name} guides`} />
20+
<meta property="og:description" content={`View ${guide.pages.length} ${guide.name} guides`} />
2121
</Head>
2222
<h2 className="font-semibold">
2323
<FormattedLink href="/guides/" location={location} className="font-semibold text-lg">

‎pages/guides/[category]/[guide].tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Main from "../../../components/Main"
66
import YouTube from "../../../components/YouTube"
77
import { getGuides } from "../../../utils/data-cache"
88
import { Guide } from "../../../utils/types"
9-
import { removeBrackets, urlify } from "../../../utils/utils"
9+
import { clean, removeBrackets, urlify } from "../../../utils/utils"
1010
import styles from "../../style.module.css"
1111

1212
interface Props {
@@ -23,9 +23,10 @@ export default function GuideWebpage({ guide, pageNumber, location }: Props & {
2323
<Main>
2424
<Head>
2525
<title>{page.name} | Hu Tao</title>
26-
<meta name="twitter:card" content="summary" />
26+
<meta name="twitter:card" content={page.img ? "summary_large_image" : "summary"} />
2727
<meta property="og:title" content={`${page.name} | Hu Tao`} />
28-
<meta property="og:description" content={`View ${page.name} guide`} />
28+
<meta property="og:description" content={`View ${page.name} guide by ${page.credits}${page.url && page.url.startsWith("https://youtu.be/") ? " (video available!)" : ""}. ${page.desc ? clean(page.desc) : ""}`} />
29+
{page.img && <meta property="og:image" content={page.img} />}
2930
</Head>
3031
<h2 className="font-semibold">
3132
<FormattedLink href={`/guides/${urlify(guide.name, false)}`} location={location} className="font-semibold text-lg">

‎pages/guides/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function Guides(props: Props & { location: string }) {
1616
<title>Guides | Hu Tao</title>
1717
<meta name="twitter:card" content="summary" />
1818
<meta property="og:title" content="Guides | Hu Tao" />
19-
<meta property="og:description" content="View currently available guides and routes" />
19+
<meta property="og:description" content="Click to find our currently available guides and routes for Genshin Impact." />
2020
</Head>
2121

2222
<h1 className="text-5xl font-bold pb-2">

0 commit comments

Comments
 (0)