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 React from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { Trans, useTranslation } from 'next-i18next'
|
import { Trans, useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
import ShareIcon from '~public/icons/Share.svg'
|
import ShareIcon from '~public/icons/Share.svg'
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||||
import { AboutTabs } from '~utils/enums'
|
import { AboutTabs } from '~utils/enums'
|
||||||
import { setHeaders } from '~utils/userToken'
|
import { setHeaders } from '~utils/userToken'
|
||||||
|
|
||||||
|
import AboutHead from '~components/AboutHead'
|
||||||
import AboutPage from '~components/AboutPage'
|
import AboutPage from '~components/AboutPage'
|
||||||
import UpdatesPage from '~components/UpdatesPage'
|
import UpdatesPage from '~components/UpdatesPage'
|
||||||
import RoadmapPage from '~components/RoadmapPage'
|
import RoadmapPage from '~components/RoadmapPage'
|
||||||
|
|
@ -16,7 +17,9 @@ import Segment from '~components/Segment'
|
||||||
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||||
|
|
||||||
interface Props {}
|
interface Props {
|
||||||
|
page?: string
|
||||||
|
}
|
||||||
|
|
||||||
const AboutRoute: React.FC<Props> = (props: Props) => {
|
const AboutRoute: React.FC<Props> = (props: Props) => {
|
||||||
// Set up router
|
// Set up router
|
||||||
|
|
@ -48,6 +51,12 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
|
||||||
}
|
}
|
||||||
}, [router.asPath])
|
}, [router.asPath])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.page && ['about', 'updates', 'roadmap'].includes(props.page)) {
|
||||||
|
setCurrentPage(props.page)
|
||||||
|
}
|
||||||
|
}, [props.page])
|
||||||
|
|
||||||
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
|
||||||
const parts = router.asPath.split('/')
|
const parts = router.asPath.split('/')
|
||||||
const path = `/${event.target.value}`
|
const path = `/${event.target.value}`
|
||||||
|
|
@ -84,40 +93,13 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function pageHead() {
|
||||||
|
return <AboutHead page={currentPage} />
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="About">
|
<div id="About">
|
||||||
<Head>
|
{pageHead()}
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<SegmentedControl>
|
<SegmentedControl>
|
||||||
<Segment
|
<Segment
|
||||||
|
|
@ -163,9 +145,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
||||||
// Set headers for server-side requests
|
// Set headers for server-side requests
|
||||||
setHeaders(req, res)
|
setHeaders(req, res)
|
||||||
|
|
||||||
// Fetch and organize raids
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
|
page: req.url?.slice(1),
|
||||||
...(await serverSideTranslations(locale, ['common', 'about', 'updates'])),
|
...(await serverSideTranslations(locale, ['common', 'about', 'updates'])),
|
||||||
// Will be passed to the page component as props
|
// Will be passed to the page component as props
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue