2023-01-26 18:12:20 +00:00
|
|
|
import React from "react";
|
2022-11-24 13:48:18 +00:00
|
|
|
// next
|
2022-11-19 14:21:26 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import { useRouter } from "next/router";
|
2022-11-24 13:48:18 +00:00
|
|
|
// constants
|
2022-11-19 14:21:26 +00:00
|
|
|
import {
|
|
|
|
|
SITE_NAME,
|
|
|
|
|
SITE_DESCRIPTION,
|
|
|
|
|
SITE_URL,
|
|
|
|
|
TWITTER_USER_NAME,
|
|
|
|
|
SITE_KEYWORDS,
|
|
|
|
|
SITE_TITLE,
|
2023-01-26 18:12:20 +00:00
|
|
|
} from "constants/seo-variables";
|
2022-11-19 14:21:26 +00:00
|
|
|
|
2023-02-08 04:45:18 +00:00
|
|
|
type Meta = {
|
|
|
|
|
title?: string | null;
|
|
|
|
|
description?: string | null;
|
|
|
|
|
image?: string | null;
|
|
|
|
|
url?: string | null;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
meta?: Meta;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
noPadding?: boolean;
|
|
|
|
|
bg?: "primary" | "secondary";
|
|
|
|
|
noHeader?: boolean;
|
|
|
|
|
breadcrumbs?: JSX.Element;
|
|
|
|
|
left?: JSX.Element;
|
|
|
|
|
right?: JSX.Element;
|
|
|
|
|
};
|
|
|
|
|
|
2022-11-19 14:21:26 +00:00
|
|
|
const Container = ({ meta, children }: Props) => {
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const image = meta?.image || "/site-image.png";
|
|
|
|
|
const title = meta?.title || SITE_TITLE;
|
|
|
|
|
const url = meta?.url || `${SITE_URL}${router.asPath}`;
|
|
|
|
|
const description = meta?.description || SITE_DESCRIPTION;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{title}</title>
|
|
|
|
|
<meta property="og:site_name" content={SITE_NAME} />
|
|
|
|
|
<meta property="og:title" content={title} />
|
|
|
|
|
<meta property="og:url" content={url} />
|
|
|
|
|
<meta name="description" content={description} />
|
|
|
|
|
<meta property="og:description" content={description} />
|
|
|
|
|
<meta name="keywords" content={SITE_KEYWORDS} />
|
|
|
|
|
<meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
|
2022-11-24 13:48:18 +00:00
|
|
|
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
|
2022-11-19 14:21:26 +00:00
|
|
|
<link rel="manifest" href="/site.webmanifest.json" />
|
|
|
|
|
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
|
|
|
|
{image && (
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
2022-11-24 13:48:18 +00:00
|
|
|
content={image.startsWith("https://") ? image : `${SITE_URL}${image}`}
|
2022-11-19 14:21:26 +00:00
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</Head>
|
|
|
|
|
{children}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Container;
|
