MediaSlot | NookDocs

Usage

Docs get written before the product is photographed. <MediaSlot> reserves the spot — an empty frame with a note underneath saying what belongs there.

<MediaSlot kind="screenshot" id="install-plain-html">
  The install page with the "Plain HTML" tab selected, snippet rendered with a
  real site key, copy button visible. Light theme, desktop 1440px.
</MediaSlot>

screenshot coming

The install page with the "Plain HTML" tab selected, snippet rendered with a real site key, copy button visible. Light theme, desktop 1440px.

When the asset arrives, replace the slot with a <Frame> or <Video> in the same position, and the caption you already wrote becomes the caption you ship.

Why not a comment

A {/* comment */} is invisible in the rendered page, so nobody sees the gap until someone greps the repo for it. It is also an MDX expression, not a comment in the Markdown sense: the renderer evaluates what is inside the braces. A slot is visible, positioned, and cannot break the page.

Kinds

video coming

A thirty-second recording of the live view filling with traffic.

kind picks the icon and the label: screenshot (default), video, or diagram. It carries no other behaviour — a slot reserves space and says what goes in it.

Props

kind'screenshot' | 'video' | 'diagram'default: screenshot

What the finished asset will be. Sets the icon and the label.

idstring

A stable name for the asset, so a delivered file can be matched back to its slot. Emitted as data-media-id, which makes the page's outstanding slots greppable in the rendered HTML as well as the source.

ratio'16/9' | '4/3' | '1/1' | '3/4'default: 16/9

The shape to reserve. A wide screenshot and a phone capture leave very different holes in a page; matching the ratio keeps the layout honest before the image exists.

childrenReactNode

What the asset should show, written for whoever will produce it. Rendered as the caption beneath the frame.

Finding what is still missing

Every slot renders data-media-slot and, when given, data-media-id. The outstanding work on a site is one search away in the source:

grep -rn "<MediaSlot" .