Engineering

24 Sept 2026, BST · 4 min read

Adding reading times to an Astro blog

The reading-time package and flowing the value through blog cards and post pages

How to add reading times to blog cards and post pages in Astro using the reading-time npm package, including the full component data flow from raw Markdown body to rendered label.

22 Sept 2026, BST · 15 min read

Automating Dev.to cross-posting from an Astro blog

A Node.js script that reads your frontmatter, sets the canonical URL, and publishes or updates in one command

How to cross-post Astro blog posts to Dev.to automatically: reading frontmatter from markdown files, converting mermaid diagrams and SVGs to images, normalising tags, and setting the canonical URL so search engines attribute traffic back to your site.

17 Sept 2026, BST · 14 min read

Adding emoji reactions to your Astro blog with Netlify Blobs

Serverless key-value storage, a Netlify Function API, and an optimistic UI that feels instant

How to add emoji reactions (❤️ 🔥 💡 👏) to an Astro blog using Netlify Blobs for persistent storage, a serverless function for the API, and an Astro component with optimistic updates and localStorage to prevent duplicate votes.

15 Sept 2026, BST · 11 min read

Adding search to a static Astro blog

Pagefind, a command-palette modal, and the thumbnail problem

How this blog uses Pagefind for static site search: a command-palette style header modal with keyboard navigation, autocomplete results, and cover image thumbnails. Covers the build pipeline, Pagefind's JS API, and the non-obvious problems with meta elements, display:none, and hashed asset paths.

3 Sept 2026, BST · 12 min read

Moving blog content to a private repository

Keeping the site code open while protecting unpublished work

How I split this blog's Markdown content into a private GitHub repository while keeping the Astro site code public, using a build-time clone, a fine-grained GitHub token, and a one-line change to the Netlify build command.

2 Sept 2026, BST · 7 min read

Web analytics on a static Astro blog

Picking PostHog, wiring up the snippet, and keeping it out of local dev

How I added privacy-respecting web analytics to this Astro blog using PostHog, choosing between the free options, loading the snippet only in production via import.meta.env.PROD, and keeping credentials out of source control with GitHub Actions secrets.

11 Jun 2026, BST · 6 min read

Adding a sticky table of contents to an Astro blog

Build-time heading extraction, sticky sidebar, and an IntersectionObserver active state

How I added a sticky table of contents sidebar to every blog post on this site, using Astro's built-in headings prop for build-time rendering and an IntersectionObserver to highlight the active section as you scroll.

9 Jun 2026, BST · 8 min read

Improving code blocks in Astro

Syntax highlighting, dual themes, line numbers, frames, and markers with Expressive Code

How I set up astro-expressive-code on this blog — dual themes, line numbers, editor and terminal frames, and fine-grained line and text markers, all from code fence attributes with no custom CSS or JavaScript.

28 May 2026, BST · 14 min read

Adding Mermaid diagram support to an Astro blog

Client-side rendering, a loading skeleton, theme toggle re-rendering, and a fullscreen lightbox

How I added Mermaid diagram support to this blog using a small remark plugin to bypass Expressive Code, a build-time loading skeleton, adaptive light/dark theming, and a fullscreen lightbox with no headless browser build dependency.