Every feature, running on this page

Islands and hydration

A component marked "use client" is rendered to HTML at build time and then hydrated in the browser. Its registry row says when: load hydrates as soon as the page's script runs, idle waits until the browser has nothing else to do, and visible waits until the component scrolls into view.

Each box shows when it hydrated, counted from the moment the page opened. The last box is the same component without "use client". It gets no island marker and no script, so its text never changes.

Fold strategy: how hydration modes are tuned

Search

At build time, @pagedeck/search indexes the text of every page on this site into a few small static files. The box is an island that hydrates on idle and fetches nothing until you focus it.

Try "island", "budget" or "consent".

Site search

Consent-gated embeds

A third-party embed is declared as a script with the facade strategy and a consent category. The page ships a button in its place. Pressing the button loads the script, and only if the category is granted.

Here the embed is a small script on this site's own origin, standing in for a vendor's, so the demo contacts nobody. The panel is the reference consent banner. Press the button first to see the gate refuse, then accept and press it again.

Third-party scripts: facades and consent

Responsive images

imageAttributes turns one source into a srcset, a sizes value and loading hints, through the site's own URL template. The browser picks the candidate.

Each file below has its width drawn on it, so the picture shows which one your browser chose. Widen or narrow the window and reload to see it choose another.

Images

Subset fonts

build.fonts hands each declared face to a subsetting adapter and writes its @font-face rule, with a metric-adjusted fallback so the swap does not move the text.

This site's own type is system fonts, so this face is loaded for the specimen and nothing else. It is scoped to this page with pages, so this page links its stylesheet and preloads it, and the other pages here do neither.

Fonts

Social cards

build.socialImages draws a card for a page at build time, and the page's <head> names it as og:image, with the width and height the renderer measured. This page has one; the other pages of this site do not.

The build draws cards before it renders pages, so a component can show its own page's card. The image below is this page's card, read with useSocialCard: the same file the og:image tag names.

Page head: cards the build draws

Locales

This site publishes one locale. pagedeck can publish several from one build, and each version of a page then carries a canonical link and hreflang links to the others.

Canonicals and hreflang