Merge pull request #46 from HiDeoo/hd-fix-rss-images

docs/src/content/docs/blog/mihi-terrae-somnia.md

@@ -19,6 +19,10 @@ Tu pontus claro, Neptune hac: ac ubi rogata. Classemque _erigitur_, tabe _aemula
 - Antistite omnia desine habet nequeunt neque
 - Pretium illa nos dolosas si illi longis
 
+![Coffee beans](../../../assets/example-coffee.jpg)
+
+> Photo by [Mike Kenneally](https://unsplash.com/@asthetik?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/coffee-bean-lot-TD4DBagg2wE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+
 ## Stetit dominari revertebar pascat latrantibus Paris Hippotadaeque
 
 _Laevum_ me meditata cumque, ambae cogit? Orbi supremaque, timetur. Dei Iovem vult _sub_! Nec non callidus silentum corpore noxque: solebat inde.

packages/starlight-blog/libs/markdown.ts

@@ -1,17 +1,33 @@
 import { Marked } from 'marked'
 import markedPlaintify from 'marked-plaintify'
-import { transform } from 'ultrahtml'
+import { html, transform } from 'ultrahtml'
 import sanitize from 'ultrahtml/transformers/sanitize'
+import swap from 'ultrahtml/transformers/swap'
 
 const markedMd = new Marked({ gfm: true })
 const markedText = new Marked({ gfm: true }, markedPlaintify())
 
+const imagePlaceholder =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjUwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI1MCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNTAiIGZpbGw9IiNCM0IwQjBGRiI+PC9yZWN0PgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI1cHgiIGZpbGw9IiMyNjI2MjZGRiI+SW1hZ2U8L3RleHQ+ICAgCjwvc3ZnPg=='
+
 export async function stripMarkdown(markdown: string) {
   return await markedText.parse(markdown)
 }
 
-export async function renderMarkdownToHTML(markdown: string) {
+export async function renderMarkdownToHTML(markdown: string, link: URL) {
   const content = await markedMd.parse(markdown)
 
-  return transform(content, [sanitize()])
+  return transform(content, [
+    swap({
+      // Strip images from the content and replace them with a placeholder.
+      // Re-evaluate this when the Container API is available in Astro.
+      img: (props) =>
+        html`<a href="${link}">
+            <div><img src="${imagePlaceholder}" alt="${props['alt']}" /></div>
+            <blockquote><em>Original image available in the blog post.</em></blockquote>
+          </a>
+          <br />`,
+    }),
+    sanitize(),
+  ])
 }

packages/starlight-blog/libs/rss.ts

@@ -14,20 +14,24 @@ export async function getRSSOptions(site: URL | undefined) {
   const entries = await getBlogEntries()
   entries.splice(20)
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- The route is only injected if `site` is defined in the user Astro config.
+  const feedSite = site!
+
   const options: RSSOptions = {
     title: getRSSTitle(),
     description: context.description ?? '',
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- The route is only injected if `site` is defined in the user Astro config.
-    site: site!,
+    site: feedSite,
     items: await Promise.all(
       entries.map(async (entry) => {
+        const link = getPathWithBase(`/${entry.slug}`)
+
         return {
           title: entry.data.title,
-          link: getPathWithBase(`/${entry.slug}`),
+          link,
           pubDate: entry.data.date,
           categories: entry.data.tags,
           description: await getRSSDescription(entry),
-          content: await getRSSContent(entry),
+          content: await getRSSContent(entry, new URL(link, feedSite)),
         }
       }),
     ),
@@ -59,6 +63,6 @@ function getRSSDescription(entry: StarlightBlogEntry): Promise<string> | undefin
   return stripMarkdown(entry.data.excerpt)
 }
 
-function getRSSContent(entry: StarlightBlogEntry): Promise<string> {
-  return renderMarkdownToHTML(entry.body)
+function getRSSContent(entry: StarlightBlogEntry, link: URL): Promise<string> {
+  return renderMarkdownToHTML(entry.body, link)
 }