stafford williams

blog: Build blocks absolute self-links, trailing-slash post links

Wed, 17 Jun 2026 00:00:00 GMT

Absolute links back to the site are now caught at build time, and the existing ones were cleaned up.

Added

Build fails on absolute links to the site itself

Fixed

Existing absolute self-links
post: and link: references with a trailing slash

blog: Per-post model in the series panel

Sun, 14 Jun 2026 00:00:00 GMT

The series panel stopped hardcoding the code-assist model and now shows the one each post was written with.

Added

Optional model frontmatter on posts

Changed

Series footer names each post's own model
Build fails when a series post lacks its model

blog: Mermaid diagrams, netlify-cli postinstall

Mon, 06 Apr 2026 00:00:00 GMT

Posts can now embed Mermaid diagrams, and a fresh install sets up deployment tooling.

Added

Mermaid diagrams in posts

Changed

postinstall installs netlify-cli if missing

blog: Root RSS feed, trimmed excerpts, devlog cards

Fri, 13 Mar 2026 00:00:00 GMT

Feeds got a site-wide entry point with cleaner excerpts, and devlogs got social cards and links from project info.

Added

Social card images per devlog tag
Devlog link in project info
Site-wide feed.xml

Changed

Feeds use short excerpts instead of full posts

blog: LinkedIn links on posts

Sun, 08 Mar 2026 00:00:00 GMT

Posts can now link through to their LinkedIn share.

Added

LinkedIn icon linking to each post's share
Backfilled LinkedIn URLs on existing posts

blog: Shiki syntax highlighting, warning blocks

Sun, 22 Feb 2026 00:00:00 GMT

Syntax highlighting moved to Astro's built-in Shiki, and posts gained warning callouts.

Added

:::warning callout blocks

Changed

Shiki replaces highlight.js
Code block styling reworked for Shiki
Deprecation warnings on the refactoring post

blog: Series directive fixes

Tue, 10 Feb 2026 00:00:00 GMT

A fix to the series plugin so it works with parsed directives and keeps the content that follows them.

Changed

remark-series reads directive nodes instead of regex

Fixed

Content after a series directive being swallowed

blog: Secure Base64 parody tool

Tue, 03 Feb 2026 00:00:00 GMT

<h2 id="v4-8"><time datetime="2026-02-03">Feb 3</time> Secure Base64 parody tool <span>v4.8</span></h2>

Added secure-base64.

blog: Heading anchor links, AI prompt toggle, remark plugin split

Sun, 01 Feb 2026 00:00:00 GMT

The remark plugins were broken into focused pieces, and posts gained linkable headings.

Added

Anchor links on post headings
Show/hide prompt toggle on AI content blocks
Remark plugins README

Changed

Jekyll includes plugin split into single-purpose plugins

Fixed

Sass darken() deprecation warning

blog: AI content blocks, drafts collection, link submission

Sun, 18 Jan 2026 00:00:00 GMT

AI-written sections can now be marked up in posts, and drafts became previewable locally.

Added

:::ai blocks badge AI-written sections
Dev-only drafts preview pages
Link submission page for authenticated users

Changed

Drafts moved into a content collection
Shared AutoResizeIframe component
Local dev runs through netlify dev

blog: Slippery Boxes fullscreen mode, subdomain move, devlog backfill

Wed, 07 Jan 2026 00:00:00 GMT

The Slippery Boxes page got a fullscreen mode and its original development history was backfilled.

Added

Linkable fullscreen mode for Slippery Boxes
local param to point the game at a dev server
Backfilled Slippery Boxes devlogs

Changed

Slippery Boxes served from its own subdomain
Refreshed page description and screenshot

blog: Project info on devlogs, link: shorthand, post filtering

Sun, 04 Jan 2026 00:00:00 GMT

Devlog pages gained per-project metadata, and older projects had their devlogs backfilled.

Added

Project info panel on devlog pages
link: shorthand for external links
Post filtering on the blog index
Backfilled spacetraders-v1 and bags devlogs

blog: Series navigation directive

Sun, 28 Dec 2025 00:00:00 GMT

Posts can now declare a series and get navigation to the other posts generated for them.

Added

:::series directive renders series navigation

Changed

Steering the Vibe posts use the series directive

blog: Jekyll removed, post: link syntax, per-project devlog feeds

Sun, 21 Dec 2025 00:00:00 GMT

The Astro migration was finished and Jekyll removed, with a new validated shorthand for linking between posts.

Added

post: link syntax validated at build time
VS Code launch config for the dev server
Remark plugin for Jekyll include tags
Card-game, bubble-bobble, bookmarklet builder and categories pages
Per-project devlog RSS feeds
Open Graph cards on main pages

Changed

Internal links converted to post: syntax
Jekyll removed entirely
Assets moved to public/assets/
netlify-cli dropped from dependencies
Jekyll post_url tags replaced with real URLs

Fixed

Inline code styling
Clearfix for floated images
Devlog aggregate page layout and toggle button
Code blocks broken by the conversion

blog: Jekyll to Astro migration, RSS feeds, restored pages

Fri, 12 Dec 2025 00:00:00 GMT

The blog moved from Jekyll to Astro, followed by a round of polish to restore missing pages and feeds.

Added

RSS feeds for blog and devlog
Bookmarklet builder, bubble bobble, slippery boxes, spacetraders, talks and privacy pages
Migration verification script

Changed

Verification script catches more cases, with an ignore list
Better link cards and social images
Site migrated from Jekyll to Astro
HTML posts converted to markdown
Devlogs and links as content collections

Fixed

Share buttons
Formatting left over from the Jekyll conversion

blog: Jekyll 4 upgrade, info callouts, gem caching

Sun, 07 Dec 2025 00:00:00 GMT

The Jekyll side of the site moved to version 4, with a few small additions along the way.

Added

Info callout component
Redirects for old asteroid-logistics URLs

Changed

Jekyll 3 to 4 with a pinned Gemfile
SCSS variables extracted to a partial
Ruby gems cached in CI

blog: og:image for notes

Sun, 09 Nov 2025 00:00:00 GMT

<h2 id="v3-2"><time datetime="2025-11-09">Nov 9</time> og:image for notes <span>v3.2</span></h2>

A while back I added og:image generation for posts and pages and later extended it to support devlogs. I did not however add it to notes for two reasons:

- My github action that deploys the blog generates all the images on every push - adding notes would more than double deploy time - I didn't want to solve the above issue by commiting the images to source

Today I solved this via two key changes:

1. The generator will now skip existing images by default and; 2. The generated images are cached via actions/cache.

The relative section from the github workflow looks like this:

```yml - uses: actions/cache@v4 name: Restore cached images with: path: _site/assets/cards key: cards-${{ github.sha }} restore-keys: | cards-

- run: ./scripts/generate-images.sh ${GITHUB_WORKSPACE} name: Generate images ```

The restore key matching on cards- means the last run always matches, returning all previously generated images. The result is now each notes page has a unique og:image:

!notes on ravendb image

blog: Square og:image

Sun, 10 Mar 2024 00:00:00 GMT

<h2 id="v3-1"><time datetime="2024-03-10">Mar 10</time> square og:image <span>v3.1</span></h2>

I implemented the findings from here specific to adding a square image. [image-generator](https://github.com/staff0rd/image-generator) is updated to .NET 8 and now outputs a square image as well as a rectangular image. It's not clear which will be chosen considering a bunch of the og:image checking sites only load either the rectangular image or the square image.

In fact, the output can be seen on this very page under _View source > head_:

html <meta name="twitter:image" property="og:image" content="https://staffordwilliams.com/assets/cards/2024-03-10-blog-square-image.png"> <meta property="og:image" content="https://staffordwilliams.com/assets/cards/2024-03-10-blog-square-image.png"> <meta property="og:image:width" content="4000"> <meta property="og:image:height" content="2000"> <meta property="og:image" content="https://staffordwilliams.com/assets/cards/2024-03-10-blog-square-image-square.png"> <meta property="og:image:width" content="2000"> <meta property="og:image:height" content="2000">

There's a good chance the first image should be of the form factor 1200x630, but I'll see in the coming weeks how different sites and apps render it.

### Update 2024-03-12

This was promptly reverted once I posted to discord and saw this:

!discord showing both og:image

I'll have to test on a dev site what this looks likes across platforms.

blog: Dropping micro.blog

Wed, 01 Sep 2021 00:00:00 GMT

<h2 id="v3-0"><time datetime="2021-09-01">Sep 1</time> Dropping micro.blog <span>v3.0</span></h2>

After a year of integrating with micro.blog to host my devlog entries I've decided it's more hassle than it's worth. The benefits of micro blog was the ability to post outside my git environment and have posts auto-tweeted.

Integrating proved difficult due to issues with CORS. Recently a Micro.blog server upgrade conflicted with my Cloudflare proxy meaning I would need to disable the rpoxy for Micro.blog to reestablish an HTTPS certificate (this would also break the CORs issue), and then re-enable it.

I decided to reduce the dependency on Micro.blog and have migrated the devlog into a collection within my own jekyll-generated site. This gives me the opportunity to have further control over the content and structure, for example the devlog permalinks which are a Jekyll plugin i've written in ruby:

ruby Jekyll::Hooks.register :devlog, :pre_render do |page| permalink = "devlog/#{page.data["tags"].first}/#{page.data["version"]}/" page.data["permalink"] = permalink end

blog: Devlog

Thu, 27 Aug 2020 00:00:00 GMT

<h2 id="v2-40"><time datetime="2020-08-27">Aug 27</time> Devlog <span>v2.40</span></h2>

After posting some updates on garage I realised that I often have content that sits somewhere between blogging and note taking but I don't end up writing it because it sits in neither. The result of this is that I've integrated micro.blog into my site via a _devlog_ section on the homepage.

Micro.blog takes care of twitter cross-posting and I've edited its theme to look similar to staffordwilliams.com. As the rest of my site is static generated, I pull the content into the homepage via RSSParser. You can see the code in the source for index.html.