granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move <Head> to party page to render faster

Browse source
This commit is contained in:
Justin Edmund 2022-12-03 18:59:20 -08:00
parent b8130af3f6
commit 232d66b823
2 changed files with 51 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/PartyDetails/index.tsx
View file

@ -1,5 +1,4 @@
import React, { useState } from "react" import React, { useState } from "react"
import Head from "next/head"
import { useRouter } from "next/router" import { useRouter } from "next/router"
import { useSnapshot } from "valtio" import { useSnapshot } from "valtio"
import { useTranslation } from "next-i18next" import { useTranslation } from "next-i18next"
@ -300,45 +299,8 @@ const PartyDetails = (props: Props) => {
</div> </div>
) )
const generateTitle = () => {
let title = party.raid ? `[${party.raid?.name[locale]}] ` : ""
const username =
party.user != null ? `@${party.user?.username}` : t("header.anonymous")
if (party.name != null)
title += t("header.byline", { partyName: party.name, username: username })
else if (party.name == null && party.editable && router.route === "/new")
title = t("header.new_team")
else
title += t("header.untitled_team", {
username: username,
})
return title
}
return ( return (
<div> <div>
<Head>
<title>{generateTitle()}</title>
<meta property="og:title" content={generateTitle()} />
<meta
property="og:description"
content={party.description ? party.description : ""}
/>
<meta property="og:url" content="https://app.granblue.team" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={generateTitle()} />
<meta
name="twitter:description"
content={party.description ? party.description : ""}
/>
</Head>
{editable && (party.name || party.description || party.raid) {editable && (party.name || party.description || party.raid)
? readOnly ? readOnly
: emptyDetails} : emptyDetails}

53
pages/p/[party].tsx
View file

@ -1,6 +1,9 @@
import React, { useEffect } from "react" import React, { useEffect } from "react"
import Head from "next/head"
import { getCookie } from "cookies-next" import { getCookie } from "cookies-next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations" import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
import Party from "~components/Party" import Party from "~components/Party"
@ -18,6 +21,10 @@ interface Props {
} }
const PartyRoute: React.FC<Props> = (props: Props) => { const PartyRoute: React.FC<Props> = (props: Props) => {
const { t } = useTranslation("common")
const router = useRouter()
const locale = router.locale || "en"
useEffect(() => { useEffect(() => {
persistStaticData() persistStaticData()
}, [persistStaticData]) }, [persistStaticData])
@ -28,9 +35,51 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
appState.jobSkills = props.jobSkills appState.jobSkills = props.jobSkills
} }
const title = () => {
let title = props.party.raid ? `[${props.party.raid?.name[locale]}] ` : ""
const username =
props.party.user != null
? `@${props.party.user?.username}`
: t("header.anonymous")
if (props.party.name != null)
title += t("header.byline", {
partyName: props.party.name,
username: username,
})
else
title += t("header.untitled_team", {
username: username,
})
return title
}
return ( return (
<div id="Content"> <div>
<Party team={props.party} raids={props.sortedRaids} /> <Head>
<title>{title()}</title>
<meta property="og:title" content={title()} />
<meta
property="og:description"
content={props.party.description ? props.party.description : ""}
/>
<meta property="og:url" content="https://app.granblue.team" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={title()} />
<meta
name="twitter:description"
content={props.party.description ? props.party.description : ""}
/>
</Head>
<div id="Content">
<Party team={props.party} raids={props.sortedRaids} />
</div>
</div> </div>
) )
} }