basalt

Announcing basalt

2026-04-22T00:00:00+00:00

I've been quietly carving a theme out of my dev blog for a while. Today it lives in its own repo as basalt. This is the announcement.

</a></li>
</a></li>
</a></li></ul>

now 2026-04-22T00:00:00+00:00 basalt 2026-04-22T00:00:00+00:00 The theme behind this site. Two-column reading layout, lazy comments from Mastodon and Bluesky, a command palette behind /</code>, asciinema and KaTeX shortcodes, page-level background images, light and dark themes that follow browser preference. Pages stay under 512kb.club</a> thresholds without tuning. The bundles use Rollup manualChunks</code> so heavy dependencies (Fuse, KaTeX, asciinema-player, DOMPurify) only download when a page actually needs them. basalt</a></h3> </div> </div> </a> Architecture in a sentence</h2> Zola compiles content + Tera templates into HTML, SCSS partials compile into a single stylesheet, and Vite + Rollup compile TypeScript into committed bundles in static/dist/</code> that consumer sites use verbatim. No pnpm install</code> required at the consumer. </a> Two real sites consume this</h2> auxdev.net</a> — informal dev blog. Vim hotkeys, hero status strip, no comments.</li> timsiggins.com</a> — editorial portfolio. Glassmorphic sidebar, no hotkeys, no search.</li> </ul> Both override only what diverges. Most of the difference is a few SCSS files and one or two template overrides; the rest comes from basalt. </a> Get started</h2> cd your-zola-site git submodule add https://codeberg.org/ttsigg/basalt themes/basalt</code></pre> Set the minimum config: theme = "basalt" build_search_index = true [search] index_format = "fuse_json" [extra] author = "Your Name" author_display = "You" tag = "yoursite.com" default_theme = "light"</code></pre> That builds. The full schema lives in basalt/config.toml</code> (this repo's own demo) and the options reference</a> covers every key. </a> Source</h2> codeberg.org/ttsigg/basalt</a>. MIT licence. README and roadmap live there. Contributions welcome, especially against the open roadmap items. Comments, loaded from Mastodon 2026-04-20T00:00:00+00:00 This is a live demo of the Mastodon comment renderer that ships with zola-mono</a>. Scroll to the bottom and the thread populates from the instance's public API. If you turn JavaScript off, nothing loads but the link still works. </a> How the renderer behaves</h2> Opt-in per post via front matter: +++ [extra] comments = { url = "https://your.server/@handle/123456789", pageSize = 10 } +++</code></pre> The template at templates/partials/comments.html</a> checks page.extra.comments</code>, emits an empty <section id="comments"></code> with a data-url</code> attribute, and stops there. No API call fires during page render. The small src/comments/loader.ts</a> sets up an IntersectionObserver</code> on #comments</code>. When the section scrolls into view it dynamically imports the platform-specific renderer, either src/comments/mastodon.ts</a> or src/comments/bsky.ts</a>. Nothing else runs until the reader actually gets there. The Mastodon renderer pulls the post's GET /api/v1/statuses/:id/context</code> endpoint, reads the descendants</code> array, and renders a nested tree in the same monospace type as the rest of the site. HTML content is sanitized with DOMPurify</a>, which loads on first use and caches thereafter. </a> What you pay for</h2> Nothing, until you scroll. On pages without an extra.comments</code> block, none of the comment scripts ship. On pages that do, the loader is about 300 bytes and the renderer is about 4kb, plus DOMPurify at about 22kb on first use. DOMPurify is the biggest single cost, and I'm open to suggestions for a smaller sanitiser. There are no tracking pixels, no cookies, no third-party iframes, and no consent banner. The embedded thread is a plain DOM tree the reader's browser drew from a public API response. </a> Alternative flavours</h2> Prefer Bluesky? There is a sister demo post</a> that shows the exact same flow against app.bsky.feed.getPostThread</code>. The loader picks the renderer by the data-platform</code> attribute on #comments</code>, so swapping platforms is a one-line front-matter change. Scroll down. The fediverse should do its thing in a moment. Comments, loaded from Bluesky 2026-04-19T00:00:00+00:00 This is a live demo of the Bluesky comment renderer that ships with zola-mono</a>. Scroll to the bottom and the thread populates from the AT Protocol's public appview. If you turn JavaScript off, the link at the top of the comment section still points at the canonical post. </a> How it works</h2> Opt-in per post via front matter: +++ [extra] comments = { url = "https://bsky.app/profile/handle/post/id", pageSize = 10 } +++</code></pre> At build time the template writes an empty <section id="comments"></code> with the post URL on data-url</code> and the page size on data-page-size</code>. Platform is inferred from the URL by the loader (bsky.app or at://</code> → bluesky; everything else → mastodon). Nothing talks to the network until the reader scrolls the section into view. When it does, src/comments/loader.ts</a> dynamically imports src/comments/bsky.ts</a>, which does a two-call dance: com.atproto.identity.resolveHandle</code> to turn the handle into a DID. Cached in localStorage</code> keyed by handle, so repeat visits to posts from the same author skip this step.</li> app.bsky.feed.getPostThread</code> to pull the post, its replies, and the replies-to-replies. Rendered as a nested tree.</li> </ol> The endpoints are the official public.api.bsky.app</code> appview. No PDS auth required. If you rate-limit yourself by sitting on the post for an hour, hit refresh. </a> What gets rendered</h2> Reply text, author display name and handle, like and repost counts, and a relative timestamp. Links inside replies are rewritten via rel="external nofollow"</code>. Avatars load from cdn.bsky.app</code> with loading="lazy"</code>. Text content does not run through a sanitiser because the AT Protocol returns the reply as plain text, not HTML, which is one of several small design decisions the Bluesky team got right. </a> Cost</h2> The loader is about 300 bytes. The renderer is about 3kb. No extra sanitiser is needed. Avatars are the heaviest element, and they lazy-load. On a post with ten replies, the total cost of enabling comments is well under 10kb, and arrives only after the reader has shown interest. </a> Sister post</h2> The Mastodon comments demo</a> shows the same flow against the Mastodon public API. The two renderers share the loader and the DOM shape, so the CSS applies to both. Scroll down. The Bluesky thread should appear momentarily. lorem-ingest 2026-03-14T00:00:00+00:00 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed dolor at lectus pharetra rhoncus. Integer porttitor finibus magna, in pellentesque turpis vehicula vitae. Nullam consectetur enim id ligula auctor, in pharetra leo dapibus. This page demonstrates the Codeberg variant of the project</code> shortcode. basalt's host detector spots codeberg.org</code> and dispatches to the Gitea REST API at build time. The card below shows whatever metadata the upstream repo declares. basalt</a></h3> </div> </div> </a> What lorem-ingest would do, in theory</h2> Phasellus a feugiat eros. Sed sit amet sem nec massa rhoncus interdum non eu lectus. Curabitur sodales eros eget tortor placerat, et bibendum sapien tincidunt. Suspendisse euismod ipsum a nibh aliquet, ut sodales mauris pellentesque. Ingest log lines from stdin</li> Filter by Lorem expression</li> Emit Ipsum-formatted JSON to stdout</li> </ul> fn main() { let mut buf = String::new(); while io::stdin().read_line(&mut buf).is_ok() { if let Some(parsed) = lorem::parse(&buf) { println!("{}", parsed.to_ipsum_json()); } buf.clear(); } }</code></pre> </a> Screenshots</h2> Drop screenshots into content/projects/dummy-one/screenshots/</code> and reference them with the image</code> shortcode below. </a> What you'd actually run</h2> $ lorem-ingest < access.log | jq .severity "high" "medium" "high"</code></pre> Vivamus tincidunt, magna sit amet pretium fermentum, augue felis aliquet nisl, ut commodo lectus risus eget urna. Cras sed orci nec ipsum facilisis volutpat. ipsum-mesh 2026-02-08T00:00:00+00:00 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula nibh nec ipsum tincidunt feugiat. Nulla blandit, mauris non sodales aliquam, lectus arcu pulvinar lectus, sit amet rhoncus ligula massa nec leo. This page demonstrates the GitHub variant of the project</code> shortcode. basalt's host detector spots github.com</code> and dispatches to the GitHub REST API. The card below pulls the upstream getzola/zola</code> repo as a stand-in for what your real metadata would look like. zola</a></h3> </div> </div> </a> A worked example</h2> Sed lacinia, magna eget feugiat fermentum, ipsum sapien tincidunt purus, in fermentum quam tortor sed ipsum. Suspendisse potenti. Phasellus eu eros nibh. type Mesh struct { Nodes []Node Edges map[NodeID][]NodeID } func (m *Mesh) Lorem(target NodeID) (Path, error) { if _, ok := m.Edges[target]; !ok { return nil, ErrNoSuchNode } return m.bfs(m.Nodes[0].ID, target), nil }</code></pre> </a> Why it matters</h2> Aliquam erat volutpat. Sed in eros lacus. Praesent rhoncus orci a quam interdum, eu efficitur magna mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Metric</th> Lorem</th> Ipsum</th></tr></thead> Throughput</td> 10k req/s</td> 12k req/s</td></tr> Latency p99</td> 4ms</td> 3ms</td></tr> CPU load</td> 35%</td> 38%</td></tr> Memory</td> 120MB</td> 140MB</td></tr> </tbody></table> The shape of the project shortcode is the same regardless of host. Pass link=</code> and the right fetcher is picked automatically. dolor-pipeline 2026-01-21T00:00:00+00:00 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, libero eget feugiat fermentum, lectus enim posuere ligula, sed pulvinar lacus libero non augue. This page demonstrates the GitLab variant of the project</code> shortcode. basalt's host detector spots gitlab.com</code> and dispatches to the GitLab Projects REST API. The card below pulls the upstream gitlab-org/gitlab</code> repo as a stand-in for what your real metadata would look like. gitlab</a></h3> </div> </div> </a> Pipeline shape</h2> Curabitur tristique mauris vel velit cursus, vel placerat lectus efficitur. Suspendisse potenti. Nulla facilisi. def transform(rec): if rec.lorem in IPSUM_BLOCKLIST: return None return Record( id=rec.id, body=rec.body.lower(), ts=rec.ts, ) stream = ( Source.from_kafka("topic.lorem") .filter(lambda r: r.lang == "en") .map(transform) .filter(bool) ) stream.sink(Sink.to_postgres("schema.ipsum"))</code></pre> </a> Why this is paused</h2> In hac habitasse platea dictumst. Nullam non est at lectus dignissim ultrices. Nullam tincidunt nibh nec lectus dignissim, sed faucibus enim luctus. The blocker: the upstream Lorem schema flipped to v2 and the migration window is bigger than expected. Stage</th> Status</th> Note</th></tr></thead> Schema mapping</td> done</td> v2 type table written</td></tr> Backfill</td> wip</td> 18% of historical data migrated</td></tr> Cutover</td> blocked</td> needs a downtime slot</td></tr> Decommission</td> future</td> once cutover lands</td></tr> </tbody></table> Pipeline lives at the upstream. The card above shows topics, language, license, and recent activity. Anything else you can pull from the GitLab API can be added by extending templates/_project/gitlab.html</code>.

</a> Where to next</h2>
The home page</a> has the design notes; /options/</a> is the full reference; demo posts exercise each feature; source is on GitHub</a>.</p>

`</a> Source</h2> codeberg.org/ttsigg/basalt</a>. MIT licence. README and roadmap live there. Contributions welcome, especially against the open roadmap items.</p>`

</a> Sister post</h2>
The Mastodon comments demo</a> shows the same flow against the Mastodon public API. The two renderers share the loader and the DOM shape, so the CSS applies to both.</p>
Scroll down. The Bluesky thread should appear momentarily.</p>

dolor-pipeline

basalt

Announcing basalt

now

basalt

Comments, loaded from Mastodon

Comments, loaded from Bluesky

lorem-ingest

ipsum-mesh