2 files changed, 94 insertions, 48 deletions
diff --git a/apps/website/src/components/shared/BaseHead.astro b/apps/website/src/components/shared/BaseHead.astro
index bfe8f78..39e98a7 100644
--- a/apps/website/src/components/shared/BaseHead.astro
+++ b/apps/website/src/components/shared/BaseHead.astro
@@ -1,12 +1,57 @@
 ---
+import smartypants from 'smartypants';
+import siteInfo from '../../data/site-info';
+import SEO from './SEO.astro';
+import Favicon from '/media/polyfrost/minimal_bg.svg?url';
+
 export type Props = {
-	siteName: string;
 	title?: string;
-	description: string;
-	image: { src: string; alt: string };
+	description?: string;
+	image?: { src: string; alt: string };
 	canonicalURL?: URL | null;
 	pageType?: 'website' | 'article';
 };
 
 const twitterHandle = 'polyfrost';
+
+const {
+	description = siteInfo.description,
+	image = siteInfo.image,
+	canonicalURL = new URL(Astro.request.url, Astro.site),
+	pageType = 'website',
+} = Astro.props;
+
+const title = [Astro.props.title, siteInfo.name].filter(Boolean).join(' | ');
+const resolvedImage = {
+	src: new URL(image.src, Astro.site).toString(),
+	alt: image.alt,
+};
 ---
+
+<!-- High Priority Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<title set:html={smartypants(title, 1)} />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Font Preloads -->
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/>
+
+<!-- Low Priority Global Metadata -->
+<link rel="icon" type="image/svg+xml" href={Favicon}/>
+<link rel="sitemap" href="/sitemap-index.xml" />
+<link rel="mask-icon" href="/media/polyfrost/minimal_bg.svg" />
+<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
+
+<SEO
+	name={siteInfo.name}
+	title={title}
+	description={description}
+	image={resolvedImage}
+	twitter={{ handle: twitterHandle }}
+	og={{ type: pageType }}
+	canonicalURL={canonicalURL}
+/>
diff --git a/apps/website/src/components/shared/SEO.astro b/apps/website/src/components/shared/SEO.astro
index c3b8c52..cd44da4 100644
--- a/apps/website/src/components/shared/SEO.astro
+++ b/apps/website/src/components/shared/SEO.astro
@@ -1,20 +1,23 @@
 ---
-import smartypants from 'smartypants';
+export type Image = {
+	src: string;
+	alt: string;
+};
 
-type SEOMetadata = {
-	name?: string;
+export type SEOMetadata = {
+	name: string;
 	title: string;
 	description: string;
-	image?: { src: string; alt: string };
-	canonicalURL?: URL | null;
+	image: Image;
+	canonicalURL?: URL | string | null;
 	locale?: string;
 };
 
-type OpenGraph = Partial<SEOMetadata> & {
+export type OpenGraph = Partial<SEOMetadata> & {
 	type?: string;
 };
 
-type Twitter = Partial<SEOMetadata> & {
+export type Twitter = Partial<SEOMetadata> & {
 	handle?: string;
 	card?: 'summary' | 'summary_large_image';
 };
@@ -26,64 +29,62 @@ export type Props = SEOMetadata & {
 
 const {
 	name,
+	title,
 	description,
 	image,
 	locale = 'en',
 	canonicalURL = new URL(Astro.url.pathname, Astro.site),
-	og: _og = {},
-	twitter: _twitter = {},
 } = Astro.props;
 
-const title = [Astro.props.title, name].filter(Boolean).join(' | ');
-const og: OpenGraph = { name, title, description, canonicalURL, image, locale, type: 'website', ..._og };
-const twitter: Twitter = { name, title, description, canonicalURL, image, locale, card: 'summary_large_image', ..._twitter };
-const ensureSlash = (url: string | URL) => `${url.toString().replace(/\/$/, '')}/`;
----
+const og = {
+	name,
+	title,
+	description,
+	canonicalURL,
+	image,
+	locale,
+	type: 'website',
+	...Astro.props.og,
+} satisfies OpenGraph;
 
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="generator" content={Astro.generator} />
-<meta name="viewport" content="width=device-width" />
-<meta name="theme-color" content="#d2e1f9" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="mask-icon" href="/favicon.svg" color="#d2e1f9" />
-<link rel="sitemap" href="/sitemap-index.xml" />
-<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
+const twitter = {
+	name,
+	title,
+	description,
+	canonicalURL,
+	image,
+	locale,
+	card: 'summary_large_image',
+	...Astro.props.twitter,
+} satisfies Twitter;
 
-<title set:html={smartypants(title, 1)} />
+function formatCanonicalURL(url: string | URL) {
+	const path = url.toString();
+	const hasQueryParams = path.includes('?');
+	if (hasQueryParams)
+		path.replace(/\/?$/, '');
+	return path.replace(/\/?$/, hasQueryParams ? '' : '');
+}
+---
 
 <!-- Page Metadata -->
-<meta name="generator" content={Astro.generator} />
-{canonicalURL && <link rel="canonical" href={ensureSlash(canonicalURL)} />}
-<title>{title}</title>
+{canonicalURL && <link rel="canonical" href={formatCanonicalURL(canonicalURL)} />}
 <meta name="description" content={description} />
 
 <!-- OpenGraph Tags -->
 <meta property="og:title" content={og.title} />
 <meta property="og:type" content={og.type} />
-{og.canonicalURL && <meta property="og:url" content={ensureSlash(og.canonicalURL)} />}
+{og.canonicalURL && <meta property="og:url" content={formatCanonicalURL(og.canonicalURL)} />}
 <meta property="og:locale" content={og.locale} />
 <meta property="og:description" content={og.description} />
 <meta property="og:site_name" content={og.name} />
-{
-	og.image && (
-		<>
-			<meta property="og:image" content={og.image.src} />
-			<meta property="og:image:alt" content={og.image.alt} />
-		</>
-	)
-}
+{og.image && <meta property="og:image" content={og.image.src} />}
+{og.image && <meta property="og:image:alt" content={og.image.alt} />}
 
 <!-- Twitter Tags -->
 {twitter.card && <meta name="twitter:card" content={twitter.card} />}
-{twitter.handle && <meta name="twitter:site" content={twitter.handle} />}
+{twitter.handle && <meta name="twitte:site" content={twitter.handle} />}
 <meta name="twitter:title" content={twitter.title} />
 <meta name="twitter:description" content={twitter.description} />
-{
-	twitter.image && (
-		<>
-			<meta name="twitter:image" content={twitter.image.src} />
-			<meta name="twitter:image:alt" content={twitter.image.alt} />
-		</>
-	)
-}
+{twitter.image && <meta name="twitter:image" content={twitter.image.src} />}
+{twitter.image && <meta name="twitter:image:alt" content={twitter.image.alt} />}