2021-02-10 09:38:27 +01:00
|
|
|
// [slug].js
|
|
|
|
|
import Head from 'next/head';
|
|
|
|
|
import React, { useEffect } from 'react';
|
|
|
|
|
import { useDispatch } from 'react-redux';
|
2021-02-11 02:54:53 +01:00
|
|
|
import { Contained } from '../components/Contained';
|
|
|
|
|
import { RichBody } from '../components/RichBody';
|
2021-05-17 08:47:35 +02:00
|
|
|
import { NAVIGATION } from '../constants';
|
2021-02-11 01:38:40 +01:00
|
|
|
import { CmsApi, unslugify } from '../services/cms';
|
|
|
|
|
import { PageType, setPageType, SideMenuItem } from '../state/navigation';
|
2021-02-10 09:38:27 +01:00
|
|
|
import { ISplitPage } from '../types/cms';
|
2021-05-03 10:22:48 +02:00
|
|
|
import { generateTitle, generateURL } from '../utils/metadata';
|
2021-02-10 09:38:27 +01:00
|
|
|
|
|
|
|
|
interface IPath {
|
2021-05-18 04:54:45 +02:00
|
|
|
params: { page: string };
|
2021-02-10 09:38:27 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getStaticPaths() {
|
|
|
|
|
// Get paths to all pages
|
2021-02-11 01:38:40 +01:00
|
|
|
// Hardcoded in navigation constants.
|
|
|
|
|
// Contentful can edit entries but cannot add/remove
|
|
|
|
|
// without touching code.
|
|
|
|
|
const paths: IPath[] = Object.values(NAVIGATION.SIDE_MENU_ITEMS).map(
|
|
|
|
|
item => ({
|
|
|
|
|
params: { page: item.href },
|
|
|
|
|
}),
|
|
|
|
|
);
|
2021-02-10 09:38:27 +01:00
|
|
|
|
2021-02-11 02:54:53 +01:00
|
|
|
return { paths, fallback: true };
|
2021-02-10 09:38:27 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps({ params }) {
|
2021-05-03 10:22:48 +02:00
|
|
|
const href = params?.page ?? '';
|
|
|
|
|
const id = unslugify(String(href));
|
2021-04-29 09:35:49 +02:00
|
|
|
|
2021-05-21 06:37:55 +02:00
|
|
|
const cms = new CmsApi();
|
|
|
|
|
const page = await cms.fetchPageById(SideMenuItem[id] ?? '');
|
|
|
|
|
|
|
|
|
|
if (!page) {
|
|
|
|
|
return { notFound: true };
|
|
|
|
|
}
|
|
|
|
|
|
2021-02-10 09:38:27 +01:00
|
|
|
return {
|
|
|
|
|
props: {
|
2021-02-11 01:38:40 +01:00
|
|
|
page,
|
2021-05-03 10:22:48 +02:00
|
|
|
href: `/${href}`,
|
2021-02-10 09:38:27 +01:00
|
|
|
},
|
|
|
|
|
revalidate: 60,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-17 08:47:35 +02:00
|
|
|
function Page({ page, href }: { page: ISplitPage | null; href: string }) {
|
2021-02-18 04:07:53 +01:00
|
|
|
const dispatch = useDispatch();
|
2021-02-10 09:38:27 +01:00
|
|
|
useEffect(() => {
|
|
|
|
|
dispatch(setPageType(PageType.NORMAL));
|
|
|
|
|
}, []);
|
2021-05-17 10:08:30 +02:00
|
|
|
|
2021-05-17 08:47:35 +02:00
|
|
|
const pageTitle = generateTitle(page?.label);
|
|
|
|
|
const pageDescription = page?.title;
|
|
|
|
|
const pageURL = generateURL(href);
|
2021-02-10 09:38:27 +01:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
2021-05-03 10:22:48 +02:00
|
|
|
<title>{pageTitle}</title>
|
|
|
|
|
<meta name="description" content={pageDescription}></meta>
|
|
|
|
|
<meta property="og:title" content={pageTitle} key="ogtitle" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:description"
|
|
|
|
|
content={pageDescription}
|
|
|
|
|
key="ogdesc"
|
|
|
|
|
/>
|
|
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
|
|
|
|
content={page?.hero?.imageUrl}
|
|
|
|
|
key="ogimage"
|
|
|
|
|
/>
|
|
|
|
|
<meta property="og:url" content={pageURL} />
|
|
|
|
|
|
|
|
|
|
<link rel="canonical" href={pageURL}></link>
|
2021-05-04 06:50:43 +02:00
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta name="twitter:title" content={pageTitle} />
|
|
|
|
|
<meta name="twitter:description" content={pageDescription} />
|
|
|
|
|
<meta name="twitter:image" content={page?.hero?.imageUrl} />
|
2021-02-10 09:38:27 +01:00
|
|
|
</Head>
|
|
|
|
|
|
2021-02-12 04:14:34 +01:00
|
|
|
<div className="bg-alt">
|
2021-03-02 06:02:21 +01:00
|
|
|
<div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
|
2021-02-18 04:07:53 +01:00
|
|
|
<img
|
2021-03-02 06:02:21 +01:00
|
|
|
style={{ maxHeight: '33vh' }}
|
|
|
|
|
src={page?.hero?.imageUrl}
|
|
|
|
|
className="object-contain w-full"
|
2021-05-07 06:08:37 +02:00
|
|
|
alt={page?.hero?.description ?? pageTitle}
|
2021-02-18 04:07:53 +01:00
|
|
|
/>
|
|
|
|
|
</div>
|
2021-02-11 02:54:53 +01:00
|
|
|
|
2021-03-02 06:02:21 +01:00
|
|
|
<Contained>
|
|
|
|
|
<h1 className="mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
|
|
|
|
|
{page?.title}
|
|
|
|
|
</h1>
|
2021-02-19 05:05:29 +01:00
|
|
|
|
2021-03-02 06:02:21 +01:00
|
|
|
<div className="mb-10">
|
|
|
|
|
<RichBody body={page?.body} />
|
|
|
|
|
</div>
|
|
|
|
|
</Contained>
|
2021-02-11 01:38:40 +01:00
|
|
|
</div>
|
2021-02-10 09:38:27 +01:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Page;
|
