Rendering Blog Posts with Markdown and Tailwind Typography

Now that our CosmosDB is hooked up, we can finally update how we display blog post content.

I have to be honest—while writing this post, I got sidetracked fixing an issue I wasn’t even supposed to work on. If you navigated to a URL directly (instead of clicking a link on the home page), the app wouldn’t load anything, even if the route was valid. After some research, I discovered that in Azure Static Web Apps, you need to declare your routes in a staticwebapps.config.json file.

I added the necessary routes, and it worked… but with an unintended side effect. Now, any random URL, like www.site/asfjheifhhe, would be treated as valid and return a 200 instead of a 404. I spent a lot of time trying to fix this behavior.

Eventually, the best solution was to let Vue Router handle it. I added this route:

Then, I created NotFoundView.vue as a simple component displaying a 404 error message. The key part is :catchAll(.*), which ensures any unknown URL redirects to the 404 page. Beautiful. Except… I wasted three hours on this and still hadn’t started displaying blog posts.

Rendering Blog Posts with Markdown

Since my blog posts are stored in CosmosDB, I needed a way to display them properly. Markdown seemed like the best option. I tried using markdown-it, an npm package that converts Markdown to HTML. However, when I tested it with a README file, the formatting looked completely off.

After some research, I found Tailwind Typography (GitHub link), a plugin that helps style raw HTML content beautifully. The difference was night and day.

Here’s how my blog posts looked before Tailwind Typography:

[Insert "before" screenshot]

And here’s how they looked after applying Tailwind Typography:

[Insert "after" screenshot]

Much better. One step closer to a polished final product.

Final Thoughts

Shoutout to this CodePen example for helping me convert my Markdown into a single string for easy CosmosDB storage.

Remember:

“

Always finish your coding projects! No use starting something and never getting back to it. Now go and finish that thing you've been putting off!

”