Kevin Gelpes

Most posts here are plain text and ship no JavaScript. A post that needs a live demo opts in, and only that post pays for it.

−

0

+

The whole thing is two lines in the MDX file:

import Counter from '../../components/demos/Counter.tsx';

<Counter client:visible />

Picking a client directive

client:visible is the default choice for a demo — the browser loads the component only when the reader scrolls it into view.

Directive	Loads when
client:load	immediately on page load
client:idle	the browser finishes its work
client:visible	the element enters the viewport
client:only	client side only, never prerendered

Without a directive the component renders to static HTML and stays inert.

Where demos live

Put them in src/components/demos/. Wrap them in Demo.astro for the framed box, or drop them straight into the page if the demo brings its own chrome.

First entry. The site is one page: a bio, then every entry below it, newest first. No archive, no post pages, no pagination.

Each entry gets an anchor, so a single one is still shareable — gelpes.dev/#hello-world.

To add an entry, drop a .md or .mdx file into src/content/posts/. The filename becomes the anchor. Frontmatter needs a title and a pubDate; description and draft are optional. The date orders the page; it is never shown.

pnpm dev

Set draft: true to keep an entry visible in dev and out of the build.