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

Add titles/description and translations

Browse source
This commit is contained in:
Justin Edmund 2022-12-26 05:04:27 -08:00
parent 5d4f3b1091
commit 0c76866b56
6 changed files with 159 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
pages/[username].tsx
View file

@ -246,15 +246,27 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
return ( return (
<div id="Profile"> <div id="Profile">
<Head> <Head>
<title>@{props.user?.username}&apos;s Teams</title> {/* HTML */}
<title>
{t('page.titles.profile', { username: props.user?.username })}
</title>
<meta
name="description"
content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/>
{/* OpenGraph */}
<meta <meta
property="og:title" property="og:title"
content={`@${props.user?.username}\'s Teams`} content={t('page.titles.profile', { username: props.user?.username })}
/> />
<meta <meta
property="og:description" property="og:description"
content={`Browse @${props.user?.username}\'s Teams and filter raid, element or recency`} content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/> />
<meta <meta
property="og:url" property="og:url"
@ -262,15 +274,18 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
/> />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" /> <meta property="twitter:domain" content="app.granblue.team" />
<meta <meta
name="twitter:title" name="twitter:title"
content={`@${props.user?.username}\'s Teams`} content={t('page.titles.profile', { username: props.user?.username })}
/> />
<meta <meta
name="twitter:description" name="twitter:description"
content={`Browse @${props.user?.username}\''s Teams and filter raid, element or recency`} content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/> />
</Head> </Head>
<FilterBar <FilterBar

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

@ -1,5 +1,6 @@
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { getCookie } from 'cookies-next' import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Party from '~components/Party' import Party from '~components/Party'
@ -12,6 +13,9 @@ import api from '~utils/api'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys' import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
import { useSnapshot } from 'valtio'
import { raidGroups } from '~utils/raidGroups'
import { useRouter } from 'next/router'
interface Props { interface Props {
party: Party party: Party
@ -20,9 +24,18 @@ interface Props {
raids: Raid[] raids: Raid[]
sortedRaids: Raid[][] sortedRaids: Raid[][]
weaponKeys: GroupedWeaponKeys weaponKeys: GroupedWeaponKeys
meta: { [key: string]: string }
} }
const PartyRoute: React.FC<Props> = (props: Props) => { const PartyRoute: React.FC<Props> = (props: Props) => {
// Import translations
const { t } = useTranslation('common')
// Set up router
const router = useRouter()
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
useEffect(() => { useEffect(() => {
persistStaticData() persistStaticData()
}, [persistStaticData]) }, [persistStaticData])
@ -34,7 +47,65 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
appState.weaponKeys = props.weaponKeys appState.weaponKeys = props.weaponKeys
} }
return <Party team={props.party} raids={props.sortedRaids} /> function generateTitle() {
const teamName =
props.party && props.party.name ? props.party.name : t('no_title')
const username = props.party
? `@${props.party.user.username}`
: t('no_user')
const title = t('page.titles.team', {
username: username,
teamName: teamName,
emoji: props.meta.element,
})
return title
}
return (
<React.Fragment>
<Party team={props.party} raids={props.sortedRaids} />
<Head>
{/* HTML */}
<title>{generateTitle()}</title>
<meta
name="description"
content={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid.name[locale],
})}
/>
{/* OpenGraph */}
<meta property="og:title" content={generateTitle()} />
<meta
property="og:description"
content={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid.name[locale],
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/p/${props.party.shortcode}`}
/>
<meta property="og:type" content="website" />
{/* Twitter */}
<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={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid.name[locale],
})}
/>
</Head>
</React.Fragment>
)
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -80,6 +151,31 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
console.log('No party code') console.log('No party code')
} }
function getElement() {
if (party) {
const mainhand = party.weapons.find((weapon) => weapon.mainhand)
if (mainhand && mainhand.object.element === 0) {
return mainhand.element
} else {
return mainhand?.object.element
}
} else {
return 0
}
}
function elementEmoji() {
const element = getElement()
if (element === 0) return '⚪'
if (element === 1) return '🟢'
if (element === 2) return '🔴'
if (element === 3) return '🔵'
if (element === 4) return '🟤'
if (element === 5) return '🟣'
if (element === 6) return '🟡'
}
return { return {
props: { props: {
party: party, party: party,
@ -88,6 +184,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
raids: raids, raids: raids,
sortedRaids: sortedRaids, sortedRaids: sortedRaids,
weaponKeys: weaponKeys, weaponKeys: weaponKeys,
meta: {
element: elementEmoji()
},
...(await serverSideTranslations(locale, ['common'])), ...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props // Will be passed to the page component as props
}, },

6
pages/saved.tsx
View file

@ -288,15 +288,15 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
return ( return (
<div id="Teams"> <div id="Teams">
<Head> <Head>
<title>{t('saved.title')}</title> <title>{t('page.titles.saved')}</title>
<meta property="og:title" content="Your saved Teams" /> <meta property="og:title" content={t('page.titles.saved')} />
<meta property="og:url" content="https://app.granblue.team/saved" /> <meta property="og:url" content="https://app.granblue.team/saved" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" /> <meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content="Your saved Teams" /> <meta name="twitter:title" content={t('page.titles.saved')} />
</Head> </Head>
<FilterBar <FilterBar

14
pages/teams.tsx
View file

@ -287,22 +287,26 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
return ( return (
<div id="Teams"> <div id="Teams">
<Head> <Head>
<title>{t('teams.title')}</title> {/* HTML */}
<title>{t('page.titles.discover')}</title>
<meta name="description" content={t('page.descriptions.discover')} />
<meta property="og:title" content="Discover Teams" /> {/* OpenGraph */}
<meta property="og:title" content={t('page.titles.discover')} />
<meta <meta
property="og:description" property="og:description"
content="Find different Granblue Fantasy teams by raid, element or recency" content={t('page.descriptions.discover')}
/> />
<meta property="og:url" content="https://app.granblue.team/teams" /> <meta property="og:url" content="https://app.granblue.team/teams" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" /> <meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content="Discover Teams" /> <meta name="twitter:title" content={t('page.titles.discover')} />
<meta <meta
name="twitter:description" name="twitter:description"
content="Find different Granblue Fantasy teams by raid, element or recency" content={t('page.descriptions.discover')}
/> />
</Head> </Head>

13
public/locales/en/common.json
View file

@ -278,6 +278,19 @@
"loading": "Loading teams...", "loading": "Loading teams...",
"not_found": "No teams found" "not_found": "No teams found"
}, },
"page": {
"titles": {
"discover": "Discover teams",
"profile": "@{{username}}'s Teams / granblue.team",
"team": "{{emoji}} {{teamName}} by {{username}} / granblue.team",
"saved": "Your saved teams"
},
"descriptions": {
"discover": "Save and discover teams to use in Granblue Fantasy and search by raid, element or recency",
"profile": "Browse @{{username}}'s Teams and filter by raid, element or recency",
"team": "Browse this team for {{raidName}} by {{username}} and others on granblue.team"
}
},
"job_skills": { "job_skills": {
"all": "All skills", "all": "All skills",
"buffing": "Buffing", "buffing": "Buffing",

13
public/locales/ja/common.json
View file

@ -279,6 +279,19 @@
"loading": "ロード中...", "loading": "ロード中...",
"not_found": "編成は見つかりませんでした" "not_found": "編成は見つかりませんでした"
}, },
"page": {
"titles": {
"discover": "編成を見出す",
"profile": "@{{username}}さんの作った編成",
"team": "{{emoji}} {{teamName}}、{{username}}さんから / granblue.team",
"saved": "保存した編成"
},
"descriptions": {
"discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる",
"profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする",
"team": "granblue.teamで{{username}}さんが作った{{raidName}}の編成を調査できる"
}
},
"job_skills": { "job_skills": {
"all": "全てのアビリティ", "all": "全てのアビリティ",
"buffing": "強化アビリティ", "buffing": "強化アビリティ",