Merge pull request #207 from piyush97/og-image-fixes

Astro update

Author: piyush97

bun.lock

@@ -44,7 +44,7 @@
     "@upstash/redis": "^1.35.3",
     "@vercel/og": "^0.6.8",
     "@vercel/speed-insights": "^1.2.0",
-    "astro": "^5.13.3",
+    "astro": "^5.13.4",
     "ioredis": "^5.7.0",
     "node-fetch": "^3.3.2",
     "pg": "^8.16.3",

package.json

@@ -5,7 +5,7 @@
     <link>https://piyushmehta.com</link>
     <description>Articles and tutorials on React.js, web development, and software engineering by Piyush Mehta.</description>
     <language>en-us</language>
-    <lastBuildDate>Tue, 26 Aug 2025 17:21:05 GMT</lastBuildDate>
+    <lastBuildDate>Wed, 27 Aug 2025 16:34:35 GMT</lastBuildDate>
     <generator>Static RSS Generator</generator>
     <copyright>Copyright 2025 Piyush Mehta. All rights reserved.</copyright>
     <managingEditor>hello@piyushmehta.com (Piyush Mehta)</managingEditor>

pnpm-lock.yaml

@@ -9,7 +9,7 @@ generateTwitterImageUrl,
 optimizeKeywords,
 sanitizeDescription,
 validateImageForSocialSharing
-} from '../utils/seo-optimization';
+} from '../utils/og-generator';
 
 export interface Props {
   title: string;
@@ -54,20 +54,47 @@ const baseUrl = Astro.url.origin || Astro.site?.toString() || 'https://piyushmeh
 const optimizedDescription = sanitizeDescription(description);
 const canonicalUrl = canonical || generateCanonicalUrl(Astro.url.pathname, baseUrl);
 
-// Handle image metadata with full OG Protocol compliance and generated image fallback
-const imageMetadata: ImageMetadata = extractImageMetadata(
-  image,
-  baseUrl,
-  {
-    title,
-    description: optimizedDescription,
-    type,
-    publishedTime,
-    tags,
-    template: ogTemplate,
-    theme: ogTheme,
-  }
-);
+// Handle image metadata with full OG Protocol compliance
+// Prioritize existing images over generated ones for better social media compatibility
+let imageMetadata: ImageMetadata;
+
+if (image && typeof image === 'string') {
+  // Use the provided image URL directly
+  imageMetadata = {
+    url: image.startsWith('http') ? image : `${baseUrl}${image}`,
+    secureUrl: image.startsWith('http') ? image : `${baseUrl}${image}`,
+    type: 'image/jpeg',
+    width: 1200,
+    height: 630,
+    alt: `${title} - ${author}`,
+  };
+} else if (image && typeof image === 'object' && image.url) {
+  // Use the provided image object
+  const imageUrl = image.url.startsWith('http') ? image.url : `${baseUrl}${image.url}`;
+  imageMetadata = {
+    url: imageUrl,
+    secureUrl: imageUrl,
+    alt: image.alt || `${title} - ${author}`,
+    width: image.width || 1200,
+    height: image.height || 630,
+    type: image.type || 'image/jpeg',
+  };
+} else {
+  // Fallback to generated OG image only when no image is provided
+  imageMetadata = extractImageMetadata(
+    null, // No image provided
+    baseUrl,
+    {
+      title,
+      description: optimizedDescription,
+      type,
+      publishedTime,
+      tags,
+      template: ogTemplate,
+      theme: ogTheme,
+    }
+  );
+}
 
 // Generate Twitter-optimized image URL
 const twitterImageUrl = generateTwitterImageUrl({

public/blog/macos-to-arch-linux-omarchy-developer-productivity/images/omarchy-desktop-hero.png

@@ -97,7 +97,7 @@ export const BloomFilterDemo: React.FC<BloomFilterDemoProps> = () => {
         <div className="flex gap-2 mb-2">
           {filter.bits.map((bit, index) => (
             <div
-              key={`bit-${index}`}
+              key={`bit-${index}-${bit}`}
               className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-bold ${
                 bit ? 'bg-green-500' : 'bg-gray-400'
               }`}

public/blog/macos-to-arch-linux-omarchy-developer-productivity/images/omarchy-desktop-hero.svg

@@ -16,6 +16,9 @@ tags:
     'Framework',
     'Performance',
   ]
+image:
+  url: '/blog/astro-v5-9-content-security-policy/images/astro-csp-cover.jpeg'
+  alt: 'Astro 5.9 Content Security Policy implementation illustration'
 draft: false
 ---