A chapter can show a recording: #clip(name), used once for the chords in the guide's mouse section

#clip reads docs/site/media/clips.toml. On the site it is the landing's
video (poster, autoplay muted loop playsinline, controls) with its
caption, and the in-view script that plays it now runs on every page;
in the book it is the poster at 7 cm with the caption. The guide shows
the chords clip under its mouse table, in place of the TODO.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2 files changed, 24 insertions, 3 deletions

diff --git a/docs/typ/guide.typ b/docs/typ/guide.typ
index 9149969a..cf1e758c 100644
--- a/docs/typ/guide.typ
+++ b/docs/typ/guide.typ
@@ -1,7 +1,7 @@
 // The guide: pardes day to day, the path a newcomer reads once. Edge cases
 // live in the reference, the pager and the language servers in setup, the
 // keys on the cheatsheet.
-#import "style.typ": key, keys, btn, chord, word, tag, addr, file, cmd, doc, pairs, glossary, annotated
+#import "style.typ": key, keys, btn, chord, word, tag, addr, file, cmd, doc, pairs, glossary, annotated, clip
 
 Two clicks carry pardes: #word("Look") (right-click) opens `src/bar.c:12`, and #word("Exec") (middle-click) runs `make`.
 
@@ -73,8 +73,7 @@ before #key("Ctrl-w") or #key("Alt-n").
   [Super-click (Cmd)], [#btn("B3"); not in a terminal, which never passes Super],
   [Ctrl-click], [the language server's definition],
 )
-// TODO: embed the `chords` clip here on the site once it lands (needs a
-// clip hook in style.typ).
+#clip("chords")
 
 A program that takes the mouse gets the plain click.
 
diff --git a/docs/typ/style.typ b/docs/typ/style.typ
index 23bdab3c..9753eedf 100644
--- a/docs/typ/style.typ
+++ b/docs/typ/style.typ
@@ -584,3 +584,25 @@
         fill: if unsaved { white } else { palette.ink }, mark)))
   }
 }
+
+/// A recording from docs/site/media/clips.toml, by name. On the site the
+/// same video as the landing's (poster, autoplay muted loop, played while
+/// in view) and its caption; in print its poster, small, and the caption.
+#let clip(name) = {
+  let c = toml("../site/media/clips.toml").clip.find(c => c.name == name)
+  assert(c != none, message: "no clip named " + name + " in clips.toml")
+  let said = if c.caption.contains("#") { eval(c.caption, mode: "markup") } else { c.caption }
+  context if html-out() {
+    html.elem("figure", attrs: (class: "clip inline", id: "rec-" + c.name), {
+      html.elem("video", attrs: (poster: "media/" + c.name + ".png", autoplay: "", muted: "", loop: "",
+        playsinline: "", controls: ""), {
+        html.elem("source", attrs: (src: "media/" + c.name + ".webm", type: "video/webm"))
+        html.elem("source", attrs: (src: "media/" + c.name + ".mp4", type: "video/mp4"))
+      })
+      html.elem("figcaption", said)
+    })
+  } else {
+    figure(image("/docs/site/media/" + c.name + ".png", width: 7cm, alt: c.caption),
+      caption: text(size: 0.9em, said), numbering: none, kind: "clip", supplement: none)
+  }
+}