Fix titles
This is highly insufficient, since at first load the static pages will always show "About" first, but it's good enough for now.
This commit is contained in:
parent
cdf3b8afb6
commit
31b75af7f8
3 changed files with 69 additions and 36 deletions
53
components/AboutHead/index.tsx
Normal file
53
components/AboutHead/index.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
interface Props {
|
||||
page: string
|
||||
}
|
||||
|
||||
const AboutHead = ({ page }: Props) => {
|
||||
// Import translations
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
// State
|
||||
const [currentPage, setCurrentPage] = useState('about')
|
||||
|
||||
// Hooks
|
||||
useEffect(() => {
|
||||
setCurrentPage(page)
|
||||
}, [page])
|
||||
|
||||
return (
|
||||
<Head>
|
||||
{/* HTML */}
|
||||
<title>{t(`page.titles.${currentPage}`)}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={t(`page.descriptions.${currentPage}`)}
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />
|
||||
|
||||
{/* OpenGraph */}
|
||||
<meta property="og:title" content={t(`page.titles.${currentPage}`)} />
|
||||
<meta property="og:description" content={t('page.descriptions.about')} />
|
||||
<meta
|
||||
property="og:url"
|
||||
content={`https://app.granblue.team/${currentPage}`}
|
||||
/>
|
||||
<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.${currentPage}`)} />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={t(`page.descriptions.${currentPage}`)}
|
||||
/>
|
||||
</Head>
|
||||
)
|
||||
}
|
||||
|
||||
export default AboutHead
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { useRouter } from 'next/router'
|
||||
import { Trans, useTranslation } from 'next-i18next'
|
||||
|
||||
import ShareIcon from '~public/icons/Share.svg'
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|||
import { AboutTabs } from '~utils/enums'
|
||||
import { setHeaders } from '~utils/userToken'
|
||||
|
||||
import AboutHead from '~components/AboutHead'
|
||||
import AboutPage from '~components/AboutPage'
|
||||
import UpdatesPage from '~components/UpdatesPage'
|
||||
import RoadmapPage from '~components/RoadmapPage'
|
||||
|
|
@ -16,7 +17,9 @@ import Segment from '~components/Segment'
|
|||
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
interface Props {}
|
||||
interface Props {
|
||||
page?: string
|
||||
}
|
||||
|
||||
const AboutRoute: React.FC<Props> = (props: Props) => {
|
||||
// Set up router
|
||||
|
|
@ -48,6 +51,12 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
|
|||
}
|
||||
}, [router.asPath])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.page && ['about', 'updates', 'roadmap'].includes(props.page)) {
|
||||
setCurrentPage(props.page)
|
||||
}
|
||||
}, [props.page])
|
||||
|
||||
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const parts = router.asPath.split('/')
|
||||
const path = `/${event.target.value}`
|
||||
|
|
@ -84,40 +93,13 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
function pageHead() {
|
||||
return <AboutHead page={currentPage} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="About">
|
||||
<Head>
|
||||
{/* HTML */}
|
||||
<title>{t(`page.titles.${currentPage}`)}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={t(`page.descriptions.${currentPage}`)}
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />
|
||||
|
||||
{/* OpenGraph */}
|
||||
<meta property="og:title" content={t(`page.titles.${currentPage}`)} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={t('page.descriptions.about')}
|
||||
/>
|
||||
<meta
|
||||
property="og:url"
|
||||
content={`https://app.granblue.team/${currentPage}`}
|
||||
/>
|
||||
<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.${currentPage}`)} />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={t(`page.descriptions.${currentPage}`)}
|
||||
/>
|
||||
</Head>
|
||||
|
||||
{pageHead()}
|
||||
<section>
|
||||
<SegmentedControl>
|
||||
<Segment
|
||||
|
|
@ -163,9 +145,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
// Set headers for server-side requests
|
||||
setHeaders(req, res)
|
||||
|
||||
// Fetch and organize raids
|
||||
return {
|
||||
props: {
|
||||
page: req.url?.slice(1),
|
||||
...(await serverSideTranslations(locale, ['common', 'about', 'updates'])),
|
||||
// Will be passed to the page component as props
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue