1 files changed, 22 insertions, 0 deletions
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)
+  }
+}