Rendering Remote Markdown the Astro Way!

After the initial launch of Quiet Archive I noticed my blog post did not render formatted.

Instead of headings, lists, and normal Markdown formatting, the page outputs the raw Markdown text to the browser. So, time to fix that!

Fixing it

The old AstroWind setup relied on content collections. That made sense when posts lived as local Markdown files, which I no longer use since my posts are now stored in Supabase.

Looking into possible fixes, I found two options.

The quick-fix option would be to use a Markdown parser and translate the Markdown to HTML myself. That would work, but I do not really want to bring in another dependency for something Astro can already do. Even if it would save me some time initially.

Let’s fix it the “right” way instead!

Astro supports remote Markdown if it is loaded through a content collection loader. The loader API has LoaderContext.renderMarkdown(), which is specifically made for rendering Markdown strings to HTML using Astro’s Markdown pipeline. That also gives access to render() and <Content /> later.

const rendered = await context.renderMarkdown(post.markdown);

Step one: create a Supabase post loader.

Step two: use the loader when fetching posts.

Step three: rewrite pages for content collections…again!

Takeaway

This new pattern for loading data feels much cleaner. It separates the concerns better:

• Supabase stores the posts.
• The loader fetches the posts.
• Astro handles the content collection.
• Astro renders the Markdown.

And now the Markdown content renders.

The hiccup

Oh no!

Now my post lists do not show anything, and I have lost the images and some other post fields!

There were still a lot of small formatting issues to clean up after moving back to collection types. A lot of moving post.field to post.data.field. Looking back, I might have been able to do something more clever to avoid some of this reformatting. In the end I powered through, and fingers crossed, now it all works!

Overall I believe the codebase ended up in a better place than it started, and I totally count that as a win.

Cover photo by Daniil Komov on Unsplash.