Most of this page is plain, pre-rendered HTML — there’s no JavaScript framework booting up to show you these words. That’s what makes it fast.

But sometimes a page wants a piece that’s genuinely interactive. Astro handles this with islands: small components that hydrate into live JavaScript on their own, while everything around them stays static.

Here’s a real one. Click it — the counts persist across reloads (they’re saved in your browser):

👍0🤯0🔥0🤔0

That widget is a Preact component. The client:visible directive tells Astro to ship its JavaScript and hydrate it only when it scrolls into view — so it costs nothing until you actually reach it.

Why this matters here

This is the whole reason the blog runs on Astro instead of a plain Markdown generator. Articles can embed live demos, small tools, visualizations, or game prototypes inline — without turning the entire site into a heavyweight single-page app. Static by default, interactive exactly where it needs to be.

To add one to a post, it’s two lines in an .mdx file:

import ReactionBar from '../../components/islands/ReactionBar.tsx';

<ReactionBar client:visible storageKey="my-post" />

The component itself lives in src/components/islands/. Add more there and drop them into any article.