basic astro docs

website/src/components/HeadSEO.astro

@@ -0,0 +1,46 @@
+---
+import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
+
+export interface Props {
+	frontmatter: Frontmatter;
+	canonicalUrl: URL;
+}
+
+const { frontmatter, canonicalUrl } = Astro.props as Props;
+const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
+const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
+const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalUrl} />
+
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} />
+<meta property="og:image" content={canonicalImageSrc} />
+<meta property="og:image:alt" content={imageAlt} />
+<meta
+	name="description"
+	property="og:description"
+	content={frontmatter.description ?? SITE.description}
+/>
+<meta property="og:site_name" content={SITE.title} />
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={frontmatter.description ?? SITE.description} />
+<meta name="twitter:image" content={canonicalImageSrc} />
+<meta name="twitter:image:alt" content={imageAlt} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->