The guide shows the where-commands-run, columns and search clips in place of their TODOs

#clip takes `wide: true` for a recording that needs the page's full
width; the columns clip (80 columns split three ways) uses it, the
others keep the 640 px inline width. An inline video takes its own
shape from its poster rather than a fixed ratio. where-commands-run's
caption is trimmed to eleven words.

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

2 files changed, 8 insertions, 6 deletions

diff --git a/docs/typ/guide.typ b/docs/typ/guide.typ
index 9b881050..6a11e816 100644
--- a/docs/typ/guide.typ
+++ b/docs/typ/guide.typ
@@ -109,7 +109,7 @@ in a pane's tag quits too.
 #btn("B2") on `make` runs it with the #word("Shell") setting's `-c`.
 Where it runs depends on where you clicked:
 
-// TODO(clip: where-commands-run)
+#clip("where-commands-run")
 
 #pairs(
   [a terminal's text or tag, at a prompt with nothing typed], [typed into that shell, in its current directory],
@@ -142,7 +142,7 @@ lands in the old column. #word("Placement") `pardes` picks other rules
 
 To open beside: #word("Newcol"), then #word("Look") a file name typed in
 its tag opens it there; #key("Alt-c") moves a pane into a new column.
-// TODO(clip: columns)
+#clip("columns", wide: true)
 
 Closing a column's last pane leaves it empty; #word("Delcol") and
 #word("Joincol") take columns away. Closing the session's last pane quits
@@ -168,7 +168,7 @@ recent first.
   [#word("Find") `conf`], [a `+Search` of the files below the pane's directory with `conf` in their names],
   [#word("Grep") `TODO`], [a `+Search` of the lines holding `TODO`, literally, under every pane's directory],
 )
-// TODO(clip: search)
+#clip("search")
 
 = Unsaved panes <unsaved-panes>
 
diff --git a/docs/typ/style.typ b/docs/typ/style.typ
index f651878f..77c58fed 100644
--- a/docs/typ/style.typ
+++ b/docs/typ/style.typ
@@ -592,12 +592,14 @@
 /// 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) = {
+/// `wide: true` lets it take the page's full width (a recording of many
+/// narrow columns).
+#let clip(name, wide: false) = {
   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("figure", attrs: (class: "clip inline" + if wide { " wide" } else { "" }, 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"))
@@ -606,7 +608,7 @@
       html.elem("figcaption", said)
     })
   } else {
-    figure(image("/docs/site/media/" + c.name + ".png", width: 7cm, alt: c.caption),
+    figure(image("/docs/site/media/" + c.name + ".png", width: if wide { 11cm } else { 7cm }, alt: c.caption),
       caption: text(size: 0.9em, said), numbering: none, kind: "clip", supplement: none)
   }
 }