fix twitter preview image & add readme

wasp-lang · Nov 27, 2024 · e467048 · e467048
1 parent 9e0bb6f
commit e467048
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 0 deletions.
diff --git a/opensaas-sh/blog/public/og-images/README.md b/opensaas-sh/blog/public/og-images/README.md
@@ -0,0 +1,10 @@
+Images stored here must follow the naming convention `<post-slug>.webp` and must always be .webp files, e.g. `2023-11-21-coverlettergpt.webp`.
+
+This is because OG Image URLs are automatically generated for each blog post based on the logic in `src/components/HeadWithOGImage.astro`:
+
+```tsx
+const ogImageUrl = new URL(
+  `/og-images/${Astro.props.id.replace(/blog\//, '').replace(/\.\w+$/, '.webp')}`,
+  Astro.site,
+)
+```
diff --git a/opensaas-sh/blog/src/components/HeadWithOGImage.astro b/opensaas-sh/blog/src/components/HeadWithOGImage.astro
@@ -14,4 +14,6 @@ const ogImageUrl = new URL(
 
 <!-- Open Graph images. -->
 <meta property="og:image" content={ogImageUrl} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
 <meta name="twitter:image" content={ogImageUrl} />
diff --git a/template/blog/astro.config.mjs b/template/blog/astro.config.mjs
@@ -42,6 +42,7 @@ export default defineConfig({
       components: {
         SiteTitle: './src/components/MyHeader.astro',
         ThemeSelect: './src/components/MyThemeSelect.astro',
+        Head: './src/components/HeadWithOGImage.astro',
       },
 
       social: {

diff --git a/template/blog/public/og-images/2023-11-21-coverlettergpt.webp b/template/blog/public/og-images/2023-11-21-coverlettergpt.webp
diff --git a/template/blog/public/og-images/README.md b/template/blog/public/og-images/README.md
@@ -0,0 +1,10 @@
+Images stored here must follow the naming convention `<post-slug>.webp` and must always be .webp files, e.g. `2023-11-21-coverlettergpt.webp`.
+
+This is because OG Image URLs are automatically generated for each blog post based on the logic in `src/components/HeadWithOGImage.astro`:
+
+```tsx
+const ogImageUrl = new URL(
+  `/og-images/${Astro.props.id.replace(/blog\//, '').replace(/\.\w+$/, '.webp')}`,
+  Astro.site,
+)
+```
diff --git a/template/blog/src/components/HeadWithOGImage.astro b/template/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')}`,
+  Astro.site,
+)
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<!-- Open Graph images. -->
+<meta property="og:image" content={ogImageUrl} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta name="twitter:image" content={ogImageUrl} />
diff --git a/template/blog/src/content/docs/blog/2023-11-21-coverlettergpt.md b/template/blog/src/content/docs/blog/2023-11-21-coverlettergpt.md
@@ -2,6 +2,9 @@
 title: How I Built & Grew CoverLetterGPT to 5,000 Users and $200 MRR
 date: 2023-11-21
 tags: ["indiehacker", "saas", "sideproject"] 
+cover:
+  image: ../../../../public/og-images/2023-11-21-coverlettergpt.webp
+  alt: CoverLetterGPT
 ---
 ## Hey, I’m Vince…