UI Components

CommandPalette

The global command palette — a native modal <dialog> built on the WAI-ARIA combobox pattern. It offers baked-in commands and navigation, plus live full-text search across the site (Pagefind). It's dropped into every layout (a separate concern from the header nav), so it's already on this page: press ⌘K / Ctrl K, or use the button below. It takes no props — the commands and navigation are defined in the component itself.

The dialog exposes a stable id of command-palette, so any element can open it with zero JavaScript via the Invoker Commands API:

<button type="button" command="show-modal" commandfor="command-palette">
  Search…
</button>

PersonalLogo

The PersonalLogo is the little accent dot and name used in the header and footer. It takes no props.

<PersonalLogo />

Pill

Small label badges for tags, categories, status indicators and the like. By default a Pill is a subtle outline but you can pass a color and it fills, deriving a readable text colour from the background with color-mix().

Default

<Pill text="Default" />

Custom colour

<Pill text="Coral" color="var(--color-coral)" />
<Pill text="Blue" color="var(--color-blue)" />
<Pill text="Green" color="var(--color-green)" />
<Pill text="Purple" color="var(--color-purple)" />
<Pill text="Orange" color="var(--color-orange)" />
<Pill text="Custom Text" color="var(--color-charcoal)" textColor="var(--color-coral)" />

Icon & tooltip

Pass an icon (any astro-icon name) for a leading glyph, and a title for a native hover tooltip (the cursor becomes help). Both drive the status pills on /making.

<Pill text="Finished" icon="heroicons:check-circle-20-solid" title="Done, but not necessarily kept up to date." />
<Pill text="In active development" color="var(--color-blue)" icon="heroicons:code-bracket-20-solid" title="I'm working on this right now." />

Spinner

An animated loading indicator drawn in the accent colour. The size prop accepts any CSS length.

<Spinner size="1.5rem" />
<Spinner size="2.5rem" />
<Spinner size="4rem" />

SocialLinks

The row of social icons used in the footer. It takes no props — the profiles are read from the site config (those flagged showInFooter).

<SocialLinks />

ThemeToggle

A three-option segmented control (light / auto / dark) with a sliding thumb. CSS handles all the visuals via :has(); the script only tracks state and talks to the global theme API. An optional class prop is forwarded to the wrapper.

<ThemeToggle />

MarkdownContentActions

The copy / view / share links shown below content for grabbing the page as markdown. The share link only appears on devices that support the Web Share API.

<MarkdownContentActions markdownUrl="/example.md" />

FormattedDate

Renders a Date as a machine-readable <time> element with a human-friendly label (e.g. Jun 12, 2025). Used for publication dates across the site.

<FormattedDate date={new Date('2025-06-12')} />

Homepage

These two components are used only on the homepage (/) and aren't meant to be reused elsewhere.

HomeLinkList

The homepage's primary list of site and social links (carrying the h-card microformats). It shrinks to the width of its longest item, so give it a .ui-style context for the link reset. Takes no props.

<HomeLinkList />

HomepageLatestArticles

The homepage "Recent writing" list — it fetches the latest articles itself and renders them as a compact list with series and reading-time meta. Must sit inside a container-query context (a .cq ancestor); the meta hides below 30rem. Takes no props.

<HomepageLatestArticles />

Footer

The site footer. It uses fixed .dark-surface styling regardless of theme and pulls together the PersonalLogo, navigation links, RSS feeds and SocialLinks. It takes no props.

<Footer />