Eerste artikel

Dit is het eerste artikel. Gewoon markdown: vet, cursief, links, koppen, lijstjes en codeblokken doen het allemaal.En dit is een kanttekening: op een breed scherm zweeft hij hiernaast in de kantlijn, op de telefoon valt hij netjes onder de alinea — zonder JavaScript. Naar een ander artikel link je root-relatief op de slug.

Het beeld hierboven komt uit de frontmatter (image + imageAlt); de description is het tekstje dat op de voorpagina onder de titel staat. Een kanttekening schrijf je inline met ^[…]; de nummering gaat vanzelf.Tweede noot, puur om te laten zien dat de teller doortelt.

Een tussenkop

Meer tekst. Een lijstje:

• rust
• eenvoud
• gewoon HTML

En een stukje code:

const antwoord = 42;

En een diagram met D2 — dat rendert bij de build naar een statische SVG die meekleurt met dag en nacht (zonder JavaScript):

D2 doet meer dan stroomschema’s. Containers en groepen:

Een sequence-diagram van de deployment — van push naar live:

En de runtime — hoe een bezoeker een (al bij de build gerenderde) pagina krijgt, achter Cloudflare:

Of een datamodel:

En een interactieve demo — een werkend stukje HTML, CSS en JavaScript, bij de build in elkaar gezet tot één statisch bestand en vanaf deze site geserveerd, in een kader dat pas laadt als het in beeld komt. De pagina zelf blijft gewoon JavaScript-vrij; de broncode staat eronder, ook voor feedlezers:

<p>Klik op het ruitje.</p>
<button id="ruit">◆</button>

body { display: flex; flex-direction: column; align-items: center; font-family: system-ui; }
button { font-size: 3rem; color: #5e7c9c; background: none; border: none; cursor: pointer; }

document.querySelector('#ruit').addEventListener('click', (e) => {
  e.target.style.rotate = `${Math.random() * 360}deg`;
});

Wil je een extra afbeelding mét onderschrift in de tekst, gebruik dan een figure (markdown laat gewone HTML toe):

En een citaat, want ook dat moet er rustig uitzien.