build: Add Head component and meta tags for social sharing.

2devs-team · Jul 23, 2024 · f5be7ca · f5be7ca
1 parent e88c622
commit f5be7ca
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 137 deletions.
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
@@ -31,6 +31,7 @@ export default defineConfig({
         themes: [myTheme],
       },
       components: {
+        Head: "./src/components/Head.astro",
         SocialIcons: "./src/components/SocialIcons.astro",
         Search: "./src/components/Search.astro",
         SiteTitle: "./src/components/SiteTitle.astro",

diff --git a/website/public/favicon.svg b/website/public/favicon.svg
diff --git a/website/public/logo.svg b/website/public/logo.svg
diff --git a/website/public/opengraph.png b/website/public/opengraph.png
diff --git a/website/src/components/Head.astro b/website/src/components/Head.astro
@@ -0,0 +1,14 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import Default from "@astrojs/starlight/components/Head.astro";
+
+const canonical = Astro.site
+  ? new URL(Astro.url.pathname, Astro.site)
+  : undefined;
+---
+
+<!-- Render the default <Head/> component. -->
+<Default {...Astro.props}><slot /></Default>
+
+<meta property="og:image" content={`${canonical?.href}opengraph.png`} />
+<meta property="twitter:image" content={`${canonical?.href}opengraph.png`} />