💬 Regrets, blocks, and quotes - Not Only Swift Weekly - Issue #17  24th December 2021

I’ve almost finished migrating my blog from Gatsby to Publish - both the landing page with the list of all blog posts, as well as the posts themselves now can be generated entirely using Publish using my own custom Publish theme 🎉

This week, I spent some time on implementing custom info boxes.

In the past, I’d been using blockquotes (using > in Markdown) to call out important sections of my posts. I’ve always been mildly disappointed with how they looked, and was always hoping I’d be able to spice them up a bit to make them look more visually pleasing.

One of the things that’s pretty cool about Publish is that you can adjust the way how it parses Markdown, thanks to it making use of Ink, [John]9)https://twitter.com/johnsundell)’s very own Markdown parser. To modify the parser behaviour, all you need to do is register a Modifier. This then allows you to inspect both the Markdown and the generated HTML and make any adjustments needed. So in order to define my own info boxes, I decided to add |{INFO} to the beginning of a Markdown blockquote, for example like this:

> |{INFO} This is an info box

The result will be rendered like the image in the intro of this section.

My plan is to support several kinds of info boxes, such as info, quote, warning, etc. This should be easy enough to implement, and will mostly require different CSS styles for the rendering.

Unfortunately, I also ran into some issues with the way blockquotes are parsed in Ink. Even the latest official version doesn’t support embedded environments, such as lists, headers or images inside of blockquotes. I guess John doesn’t use any of these on his own site. On my blog, I make liberal use of this - for example, in this article, I’ve got a side bar which explains how to unlink your Apple ID when implementing Sign in with Apple, and I included a bunch of screenshots in the blockquote. This didn’t render correctly with the official version of Ink, unfortunately.

For a brief moment I thought this was the end of my experiment to replace Gatsby with Publish. However, Rob Mecham sent a pull request adding support for most elements a while back, so all I had to do was merge this into my private fork of Ink (making sure to keep the support for Markdown tables which was added after Rob’s PR), and implementing a fix that allows me to continue a blockquote after a list (another feature I found I use quite a bit in my blog posts).

If you’re interested to see the new site in action, you can visit the preview channel - the site runs on Firebase Hosting, so it’s super easy to publish a preview without affecting the production version of your site - you should definitely check this out. Here’s a quick video that shows how it’s done.

Are you interested in learning more about how you can build a static site using Publish (and host it on Firebase)? Let me know what you’re most interested in!

peterfriese.dev