fix og:images on blog

opensaas-sh/blog/astro.config.mjs

@@ -50,6 +50,7 @@ export default defineConfig({
       components: {
         SiteTitle: './src/components/MyHeader.astro',
         ThemeSelect: './src/components/MyThemeSelect.astro',
+        Head: './src/components/HeadWithOGImage.astro',
       },
       social: {
         github: 'https://github.com/wasp-lang/open-saas',

opensaas-sh/blog/src/components/HeadWithOGImage.astro

@@ -0,0 +1,19 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/Head.astro'
+
+// Get the URL of the generated image for the current page using its
+// ID and replace the file extension with `.png`.
+const ogImageUrl = new URL(
+  `/og-images/${Astro.props.id.replace(/blog\//, '').replace(/\.\w+$/, '.webp')}`,
+  'https://docs.opensaas.sh',
+)
+console.log(Astro.props)
+---
+
+<!-- Render the default <Head/> component. -->
+<Default {...Astro.props}><slot /></Default>
+
+<!-- Render the <meta/> tags for the Open Graph images. -->
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />

opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.md

@@ -2,6 +2,8 @@
 title: 🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬
 date: 2024-10-10
 tags: ["cookie consent", "saas", "sideproject", "hackathon"] 
+cover:
+  alt: Annoying Cookie Banner Contest
   image: "/cookie-consent/annoying-cookie-banners.jpg"
 ---
 <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">

opensaas-sh/blog/src/content/docs/blog/2024-11-22-best-annoying-cookie-consent-banners.mdx

@@ -2,6 +2,8 @@
 title: We Made the Most Annoying Cookie Banners Ever
 date: 2024-11-26
 tags: ["cookie consent", "saas", "sideproject", "hackathon"] 
+cover:
+  alt: the Most Annoying Cookie Banners
   image: "/cookie-consent/annoying-cookie-banners.jpg"
 ---
 import VideoPlayer from '../../../components/VideoPlayer.astro';