BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dynamic head at layout level for SEO

Browse source
This commit is contained in:
3zachm 2023-01-26 02:20:07 -08:00
commit ffdf91baf6
9 changed files with 184 additions and 128 deletions

58
layouts/DashLayout.tsx
View file

@ -11,11 +11,24 @@ import NavBar from "../components/dashboard/NavBar";
interface DashLayoutProps {
children: React.ReactNode;
metaTags: {
title?: string;
ogTitle?: string;
description?: string;
ogDescription?: string;
content?: string;
imageUrl?: string;
themeColor?: string;
misc?: {
[key: string]: string;
};
};
}
function DashLayout(props: DashLayoutProps) {
// get the current route for animation purposes
const router = useRouter();
const title = props.metaTags.title ?? "Dashboard - toffee";
return (
<m.div
className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
@ -26,18 +39,49 @@ function DashLayout(props: DashLayoutProps) {
>
<Head>
<meta name="viewport" content="initial-scale=0.8" />
<title>Dashboard - toffee</title>
<meta name="description" content="Dashboard statistics for toffee" />
<title>{title}</title>
<meta
name="description"
content={
props.metaTags.description ?? "Dashboard statistics for toffee"
}
/>
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" />
<meta property="og:title" content="toffee" />
<meta
name="theme-color"
content={props.metaTags.themeColor ?? "#c084fc"}
/>
<meta
property="og:title"
content={props.metaTags.ogTitle ?? props.metaTags.title ?? "toffee"}
/>
<meta
property="og:description"
content="Serving anny's community est. 2022"
content={
props.metaTags.ogDescription ??
props.metaTags.description ??
"Dashboard statistics for toffee"
}
/>
<meta
property="og:image"
content={props.metaTags.imageUrl ?? "/img/logo.webp"}
/>
<meta
property="og:type"
content={props.metaTags.content ?? "website"}
/>
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="toffee" />
{props.metaTags.misc &&
Object.keys(props.metaTags.misc).map((key) => {
return (
<meta
key={key}
property={key}
content={props.metaTags.misc ? props.metaTags.misc[key] : ""}
/>
);
})}
</Head>
<div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">