Fixed rss images

src/components/BaseHead.astro

@@ -40,11 +40,11 @@ const { title, description, image = '/logo.png' } = Astro.props;
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<meta property="og:image" content={canonicalURL.origin + image} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta property="twitter:image" content={canonicalURL.origin + image} />

src/content/attachments/computer-graphics_plenoptic_function.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162.532" height="129.678" viewBox="0 0 162.532 129.678">
+<svg style="background: white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162.532" height="129.678" viewBox="0 0 162.532 129.678">
 <defs>
 <g>
 <g id="glyph-0-0">

src/content/blog/tikz-svg.mdx

@@ -2,6 +2,7 @@
 title: TikZ
 pubDate: 2025-02-06T19:00:00Z
 description: Converting TikZ graphics into svg graphics.
+heroImage: ../attachments/computer-graphics_plenoptic_function.svg
 ---
 At some point a man has to realize that they went down a rabbit-hole without any way to escape it. TikZ is one such rabbit-hole and, yes, I am that man.
 

src/pages/blog/rss.xml.js

@@ -9,9 +9,21 @@ export async function GET(context) {
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
     site: context.site,
-    items: posts.map((post) => ({
-      ...post.data,
-      link: `/blog/${post.id}/`,
-    })),
+    items: posts.map((post) => {
+      let item = {
+        ...post.data,
+        link: `/blog/${post.id}/`,
+      };
+
+      if (post.data.heroImage) {
+        item.enclosure = {
+          url: post.data.heroImage.src,
+          length: post.data.heroImage.width * post.data.heroImage.height,
+          type: `image/${post.data.heroImage.format}`
+        }
+      }
+
+      return item;
+    })
   });
 }

src/pages/projects/rss.xml.js

@@ -9,9 +9,21 @@ export async function GET(context) {
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
     site: context.site,
-    items: posts.map((post) => ({
-      ...post.data,
-      link: `/projects/${post.id}/`,
-    })),
+    items: posts.map((project) => {
+      let item = {
+        ...project.data,
+        link: `/projects/${project.id}/`,
+      };
+
+      if (project.data.heroImage) {
+        item.enclosure = {
+          url: project.data.heroImage.src,
+          length: project.data.heroImage.width * project.data.heroImage.height,
+          type: `image/${project.data.heroImage.format}`
+        }
+      }
+
+      return item;
+    }),
   });
 }

src/pages/rss.xml.js

@@ -6,13 +6,37 @@ export async function GET(context) {
   const posts = await getCollection('blog');
   const projects = await getCollection('projects');
 
-  let unifiedItems = posts.map((post) => ({
-    ...post.data,
-    link: `/blog/${post.id}/`,
-  })).concat(projects.map((project) => ({
-    ...project.data,
-    link: `/projects/${project.id}/`
-  })));
+  let unifiedItems = posts.map((post) => {
+    let item = {
+      ...post.data,
+      link: `/blog/${post.id}/`,
+    };
+
+    if (post.data.heroImage) {
+      item.enclosure = {
+        url: post.data.heroImage.src,
+        length: post.data.heroImage.width * post.data.heroImage.height,
+        type: `image/${post.data.heroImage.format}`
+      }
+    }
+
+    return item;
+  }).concat(projects.map((project) => {
+    let item = {
+      ...project.data,
+      link: `/projects/${project.id}/`,
+    };
+
+    if (project.data.heroImage) {
+      item.enclosure = {
+        url: project.data.heroImage.src,
+        length: project.data.heroImage.width * project.data.heroImage.height,
+        type: `image/${project.data.heroImage.format}`
+      }
+    }
+
+    return item;
+  }));
   unifiedItems = unifiedItems.sort((a, b) => b.pubDate - a.pubDate);
 
   return rss({