Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { FunctionComponent, useEffect } from "react";
import { Helmet } from "react-helmet";
import { pageInfo } from "../../constants/pageInfo";
import { usePageView } from "../../contexts/Analytics";
import { useConfigValue } from "../../hooks/useConfigValue";
export interface PageProps {
pageName: keyof typeof pageInfo;
meta: {
suffix?: boolean;
title: string;
description: string;
};
}
// Should be the same as the "real" CSP, except most things come from HTTP
// instead of HTTPS (because it is protocol-relative, and the dev site is
// served over plain HTTP).
const csp = [
"default-src 'self' 'unsafe-inline' http://*.awsstatic.com;",
"connect-src 'self' https://*.shortbread.aws.dev http://*.shortbread.aws.dev http://a0.awsstatic.com/ http://amazonwebservices.d2.sc.omtrdc.net http://aws.demdex.net http://dpm.demdex.net http://cm.everesttech.net;",
"frame-src http://aws.demdex.net http://dpm.demdex.net;",
"img-src 'self' https://* http://a0.awsstatic.com/ http://amazonwebservices.d2.sc.omtrdc.net http://aws.demdex.net http://dpm.demdex.net http://cm.everesttech.net;",
"object-src 'none';",
"style-src 'self' 'unsafe-inline';",
].join(" ");
export const Page: FunctionComponent<PageProps> = ({
children,
meta,
pageName,
}) => {
const trackPageView = usePageView(pageInfo[pageName]);
useEffect(() => {
trackPageView();
}, [trackPageView]);
const feedUrls = useConfigValue("feeds") || [];
const { suffix = true, title, description } = meta;
const formattedTitle = suffix ? `${title} - Construct Hub` : title;
return (
<>
<Helmet>
{process.env.NODE_ENV === "development" && (
<meta content={csp} httpEquiv="Content-Security-Policy" />
)}
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta charSet="utf-8" />
{feedUrls.map(({ url, mimeType }) => (
<link href={url} key={url} rel="alternate" type={mimeType} />
))}
<title>{formattedTitle}</title>
<meta content={formattedTitle} property="og:title" />
<meta content={formattedTitle} name="twitter:title" />
<meta content="summary" name="twitter:card" />
<meta content={description} name="description" />
<meta content={description} property="og:description" />
<meta content={description} name="twitter:description" />
</Helmet>
{children}
</>
);
};
|