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

Add title/description to new page

Browse source
This commit is contained in:
Justin Edmund 2022-12-26 05:55:19 -08:00
parent 3f24886b98
commit 57359333e7
5 changed files with 81 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
pages/new/index.tsx
View file

@ -1,10 +1,13 @@
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
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'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { groupWeaponKeys } from '~utils/groupWeaponKeys' import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import generateTitle from '~utils/generateTitle'
import organizeRaids from '~utils/organizeRaids' import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken' import setUserToken from '~utils/setUserToken'
import api from '~utils/api' import api from '~utils/api'
@ -21,6 +24,9 @@ interface Props {
} }
const NewRoute: React.FC<Props> = (props: Props) => { const NewRoute: React.FC<Props> = (props: Props) => {
// Import translations
const { t } = useTranslation('common')
function callback(path: string) { function callback(path: string) {
// This is scuffed, how do we do this natively? // This is scuffed, how do we do this natively?
window.history.replaceState(null, `Grid Tool`, `${path}`) window.history.replaceState(null, `Grid Tool`, `${path}`)
@ -37,7 +43,28 @@ const NewRoute: React.FC<Props> = (props: Props) => {
appState.weaponKeys = props.weaponKeys appState.weaponKeys = props.weaponKeys
} }
return <Party new={true} raids={props.sortedRaids} pushHistory={callback} /> return (
<React.Fragment>
<Head>
{/* HTML */}
<title>{t('page.titles.new')}</title>
<meta name="description" content={t('page.descriptions.new')} />
{/* OpenGraph */}
<meta property="og:title" content={t('page.titles.new')} />
<meta property="og:description" content={t('page.descriptions.new')} />
<meta property="og:url" content={`https://app.granblue.team/`} />
<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={t('page.titles.new')} />
<meta name="twitter:description" content={t('page.descriptions.new')} />
</Head>
<Party new={true} raids={props.sortedRaids} pushHistory={callback} />
</React.Fragment>
)
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {

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

@ -1,5 +1,6 @@
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import Head from 'next/head' import Head from 'next/head'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@ -7,15 +8,13 @@ import Party from '~components/Party'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { groupWeaponKeys } from '~utils/groupWeaponKeys' import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import generateTitle from '~utils/generateTitle'
import organizeRaids from '~utils/organizeRaids' import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken' import setUserToken from '~utils/setUserToken'
import api from '~utils/api' 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
@ -47,28 +46,18 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
appState.weaponKeys = props.weaponKeys appState.weaponKeys = props.weaponKeys
} }
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 ( return (
<React.Fragment> <React.Fragment>
<Party team={props.party} raids={props.sortedRaids} /> <Party team={props.party} raids={props.sortedRaids} />
<Head> <Head>
{/* HTML */} {/* HTML */}
<title>{generateTitle()}</title> <title>
{generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
</title>
<meta <meta
name="description" name="description"
content={t('page.descriptions.team', { content={t('page.descriptions.team', {
@ -78,7 +67,14 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
/> />
{/* OpenGraph */} {/* OpenGraph */}
<meta property="og:title" content={generateTitle()} /> <meta
property="og:title"
content={generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
/>
<meta <meta
property="og:description" property="og:description"
content={t('page.descriptions.team', { content={t('page.descriptions.team', {
@ -95,7 +91,14 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
{/* Twitter */} {/* 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={generateTitle()} /> <meta
name="twitter:title"
content={generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
/>
<meta <meta
name="twitter:description" name="twitter:description"
content={t('page.descriptions.team', { content={t('page.descriptions.team', {

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

@ -280,13 +280,15 @@
}, },
"page": { "page": {
"titles": { "titles": {
"discover": "Discover teams", "discover": "Discover teams / granblue.team",
"new": "Create a new team / granblue.team",
"profile": "@{{username}}'s Teams / granblue.team", "profile": "@{{username}}'s Teams / granblue.team",
"team": "{{emoji}} {{teamName}} by {{username}} / granblue.team", "team": "{{emoji}} {{teamName}} by {{username}} / granblue.team",
"saved": "Your saved teams" "saved": "Your saved teams / granblue.team"
}, },
"descriptions": { "descriptions": {
"discover": "Save and discover teams to use in Granblue Fantasy and search by raid, element or recency", "discover": "Save and discover teams to use in Granblue Fantasy and search by raid, element or recency",
"new": "Create and theorycraft teams to use in Granblue Fantasy and share with the community",
"profile": "Browse @{{username}}'s Teams and filter 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" "team": "Browse this team for {{raidName}} by {{username}} and others on granblue.team"
} }

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

@ -281,13 +281,15 @@
}, },
"page": { "page": {
"titles": { "titles": {
"discover": "編成を見出す", "discover": "編成を見出す / granblue.team",
"profile": "@{{username}}さんの作った編成", "new": "新しい編成 / granblue.team",
"profile": "@{{username}}さんの作った編成 / granblue.team",
"team": "{{emoji}} {{teamName}}、{{username}}さんから / granblue.team", "team": "{{emoji}} {{teamName}}、{{username}}さんから / granblue.team",
"saved": "保存した編成" "saved": "保存した編成"
}, },
"descriptions": { "descriptions": {
"discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる", "discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる",
"new": "グランブルーファンタジーの編成を作成し、騎空士とシェアできるサイトgranblue.team",
"profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする", "profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする",
"team": "granblue.teamで{{username}}さんが作った{{raidName}}の編成を調査できる" "team": "granblue.teamで{{username}}さんが作った{{raidName}}の編成を調査できる"
} }

20
utils/generateTitle.tsx Normal file
View file

@ -0,0 +1,20 @@
import { useTranslation } from 'next-i18next'
export default function generateTitle(
element: string,
username?: string,
name?: string
) {
const { t } = useTranslation('common')
const teamName = name ? name : t('no_title')
const userName = username ? `@${username}` : t('no_user')
const title = t('page.titles.team', {
username: userName,
teamName: teamName,
emoji: element,
})
return title
}