Keeganhasa
.Website

Component Showcase

3 min read

A living reference of every content component the site supports. Copy any block straight into a page fragment — the styling comes from the shell, so it follows both the cool and warm themes automatically.

Typography

Body copy is set in Josefin Sans. You can mix emphasis, strong text, internal links (hover for a preview), external links, inline code, and highlighted text in a single paragraph.

Heading levels

This is a heading 4

Headings h2–h4 with id attributes are picked up automatically by the Table of Contents on the right.

“Simplicity is the ultimate sophistication.” Blockquotes get a tinted card with a left accent rail.

Callouts

Authored as <blockquote class="callout" data-callout="…"> — just a title row and content. The icon and colour are injected by CSS.

Note

The default callout. Use it for general asides and side-notes.

Info

Neutral, informational context the reader may want but doesn’t strictly need.

Tip

Press Ctrl/⌘ + K anywhere to open search.

Success

The build finished with zero leftover placeholders. 🎉

Question

Want this content authored in Markdown instead of HTML? The pipeline can be extended.

Warning

Never hand-edit files in public/ — they are regenerated by build.py.

Danger

build.py --clean wipes public/ (it keeps public/media/).

Example

Callouts can contain anything — lists, code, even other blocks:

  • Item one
  • Item two
Quote

“Ad-Free since 2023.”

Code

Inline const x = 42 and fenced blocks both use JetBrains Mono:

// Add a page, then build
python3 build.py

function greet(name) {
  return `Hello, ${name}!`;
}

Lists

Unordered & ordered

  • Aurora-gradient background
  • Skeuomorphic glow shadows
    • Nested items work too
  • Two dark themes
  1. Edit a fragment under src/content/
  2. Register it in site.json
  3. Run the build

Task list

Tables

FrameSidebarsUse for
defaultLeft + rightNormal pages
full-widthNoneWide tools / canvases
minimalNone + no chromeEmbeds, landing

Buttons, badges & keys

Vanilla Zero-dep Static

Keyboard hints render with kbd elements: Esc to close, ↑ ↓ to navigate.

Accordion

How does injection work?

At build time, build.py drops each content fragment into the shell template and writes a complete standalone page. Scripts run natively — no client-side router.

Is anything loaded from a CDN?

No. Fonts are self-hosted and there are no runtime dependencies.

Cards

Applications Browse the in-browser tools. Internet Radio FM + SomaFM streams with a live visualizer. Home Back to the start.