docs: one tag for every picture on a page

[gustavosbarreto]

A page had three ways to show the product, and they had drifted apart. A <Shot> for a screenshot the capture pipeline produces. A markdown image for a file somebody made by hand. A <Clip> for a recorded interaction. Each carried its own frame, its own sizing and its own behaviour on click — the markdown one needed a script in the layout to become reachable by keyboard at all, and the clip did not enlarge.

<Shot> takes all three now, and the source says which kind it is:

<Shot id="device-list" route="/devices" />    captured from a running instance
<Shot src="/img/manual/mfa-setup.png" />      a file that already exists
<Shot clip="mfa-enable" />                    a recorded interaction, played as video

Only the first declares anything to the capture pipeline; the other two are files. All three get one frame, one ceiling on size, and enlarge on click, so the special-casing in the layout script and the stylesheet is gone along with the <Clip> component.

The frame now follows the picture rather than the column, so a narrow one no longer sits in a wide box of empty surface. The ceiling differs by kind, because the pictures do: a capture is a whole window, its interface is already small, and it earns the column; a file made by hand is usually a crop of a single dialog, and at column width the interface inside it renders larger than the text around it — the MFA recovery dialog went from 696x473 to 542x368, while the device list still fills the column.

[github-actions]

Claude finished @gustavosbarreto's task in 1m 19s —— View job

---

Code Review Complete

Reviewed 13 files across code quality, security, testing, language patterns, and architecture — no new issues found. The code looks good as-is.

A few observations (informational, not blocking):

• Shot.astro cleanly unifies the three media kinds. The [id, src, clip].filter(Boolean).length !== 1 guard plus the route-required check for captures are good build-time safeguards, and recordShot/warnMissingShotImageInDev now fire only for the captured id case — correct.
• Accessibility improves: manual images are now real <button> elements with data-shot-zoom, so the keyboard-shim removed from DocsLayout.astro is genuinely no longer needed. Clips render as a non-interactive <div> (no zoom), which is consistent with them being autoplaying muted video.
• No dangling Clip imports remain, and every migrated page (accepting, session-recording, mfa, firewall-rules, public-keys, quickstart, …) imports Shot.
• Note that firewall-rules.mdx and public-keys.mdx also drop the prose describing regex full-match semantics for usernames — that's a content change beyond the media unification. Flagging only in case it wasn't intended to ship in this PR.

---

To request another review round, comment /review.
· docs/unify-media

[github-actions]

Documentation preview: https://845fe3e7.shellhub-docs.pages.dev