Add title/description to new page
This commit is contained in:
parent
3f24886b98
commit
57359333e7
5 changed files with 81 additions and 27 deletions
|
|
@ -1,10 +1,13 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import Head from 'next/head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
|
||||
import Party from '~components/Party'
|
||||
|
||||
import { appState } from '~utils/appState'
|
||||
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
|
||||
import generateTitle from '~utils/generateTitle'
|
||||
import organizeRaids from '~utils/organizeRaids'
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
import api from '~utils/api'
|
||||
|
|
@ -21,6 +24,9 @@ interface Props {
|
|||
}
|
||||
|
||||
const NewRoute: React.FC<Props> = (props: Props) => {
|
||||
// Import translations
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
function callback(path: string) {
|
||||
// This is scuffed, how do we do this natively?
|
||||
window.history.replaceState(null, `Grid Tool`, `${path}`)
|
||||
|
|
@ -37,7 +43,28 @@ const NewRoute: React.FC<Props> = (props: Props) => {
|
|||
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 () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import Head from 'next/head'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
|
||||
|
|
@ -7,15 +8,13 @@ import Party from '~components/Party'
|
|||
|
||||
import { appState } from '~utils/appState'
|
||||
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
|
||||
import generateTitle from '~utils/generateTitle'
|
||||
import organizeRaids from '~utils/organizeRaids'
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
import api from '~utils/api'
|
||||
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { raidGroups } from '~utils/raidGroups'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
interface Props {
|
||||
party: Party
|
||||
|
|
@ -47,28 +46,18 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
|
|||
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 (
|
||||
<React.Fragment>
|
||||
<Party team={props.party} raids={props.sortedRaids} />
|
||||
<Head>
|
||||
{/* HTML */}
|
||||
<title>{generateTitle()}</title>
|
||||
<title>
|
||||
{generateTitle(
|
||||
props.meta.element,
|
||||
props.party.user?.username,
|
||||
props.party.name
|
||||
)}
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={t('page.descriptions.team', {
|
||||
|
|
@ -78,7 +67,14 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
|
|||
/>
|
||||
|
||||
{/* OpenGraph */}
|
||||
<meta property="og:title" content={generateTitle()} />
|
||||
<meta
|
||||
property="og:title"
|
||||
content={generateTitle(
|
||||
props.meta.element,
|
||||
props.party.user?.username,
|
||||
props.party.name
|
||||
)}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={t('page.descriptions.team', {
|
||||
|
|
@ -95,7 +91,14 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
|
|||
{/* 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:title"
|
||||
content={generateTitle(
|
||||
props.meta.element,
|
||||
props.party.user?.username,
|
||||
props.party.name
|
||||
)}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={t('page.descriptions.team', {
|
||||
|
|
|
|||
|
|
@ -280,13 +280,15 @@
|
|||
},
|
||||
"page": {
|
||||
"titles": {
|
||||
"discover": "Discover teams",
|
||||
"discover": "Discover teams / granblue.team",
|
||||
"new": "Create a new team / granblue.team",
|
||||
"profile": "@{{username}}'s Teams / granblue.team",
|
||||
"team": "{{emoji}} {{teamName}} by {{username}} / granblue.team",
|
||||
"saved": "Your saved teams"
|
||||
"saved": "Your saved teams / granblue.team"
|
||||
},
|
||||
"descriptions": {
|
||||
"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",
|
||||
"team": "Browse this team for {{raidName}} by {{username}} and others on granblue.team"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -281,13 +281,15 @@
|
|||
},
|
||||
"page": {
|
||||
"titles": {
|
||||
"discover": "編成を見出す",
|
||||
"profile": "@{{username}}さんの作った編成",
|
||||
"discover": "編成を見出す / granblue.team",
|
||||
"new": "新しい編成 / granblue.team",
|
||||
"profile": "@{{username}}さんの作った編成 / granblue.team",
|
||||
"team": "{{emoji}} {{teamName}}、{{username}}さんから / granblue.team",
|
||||
"saved": "保存した編成"
|
||||
},
|
||||
"descriptions": {
|
||||
"discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる",
|
||||
"new": "グランブルーファンタジーの編成を作成し、騎空士とシェアできるサイトgranblue.team",
|
||||
"profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする",
|
||||
"team": "granblue.teamで{{username}}さんが作った{{raidName}}の編成を調査できる"
|
||||
}
|
||||
|
|
|
|||
20
utils/generateTitle.tsx
Normal file
20
utils/generateTitle.tsx
Normal 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
|
||||
}
|
||||
Loading…
Reference in a new issue