2c:null 2d:["$","title",null,{"children":"Observable Slide | Bairui Su | Observable"}] 32:T66b,function present(slides, {display, invalidation}) { if (!slides.length) return; const n = slides.length; const button = html``; document.addEventListener("fullscreenchange", () => !document.fullscreenElement && onexit()); display(button); let container; let content; let index = -1; setTimeout(() => { container = button.parentNode; content = html`

`; container.append(content); }); function onenter () { if (!n) return; document.addEventListener("keydown", onkeydown); button.style.display = "none"; next(); if (container.requestFullscreen) container.requestFullscreen(); else if (container.webkitRequestFullscreen) container.webkitRequestFullscreen(); }; function onexit() { document.removeEventListener("keydown", onkeydown); button.style.display = "block"; content.innerHTML = ""; index = -1; } function onkeydown(event) { event.preventDefault(); event.stopPropagation(); switch (event.key) { case "ArrowLeft": case "ArrowUp": prev(); break; case "ArrowRight": case "ArrowDown": // case " ": // This will lose focus. I don't know how to fix it. next(); break; } } function onkeyup(event) { event.preventDefault(); event.stopPropagation(); } function next() { if (index === n - 1) return; content.innerHTML = ""; content.append(render(slides[++index], invalidation)); } function prev() { if (index === 0) return; content.innerHTML = ""; content.append(render(slides[--index], invalidation)); } }33:[] 30:{"id":"937640cccf5b1df7","slug":"slide","title":"Observable Slide","thumbnail":"b081b03c10a1162ca93eca1d4c449f554c87bf2232c624fbe12ceaf4f6d50a22","access_level":"public","create_time":"$D2026-09-21T18:11:00.741Z","update_time":"$D2026-09-22T13:21:43.348Z","view_time":null,"first_public_time":"$D2026-09-21T23:02:43.068Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","bio":"Creative technologist and researcher building tools for creative coding, data visualization, and HCI. Creator of Recho; previously led AntV G2 5.0."},"version":491,"publish_version":491,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"bio":"Creative technologist and researcher building tools for creative coding, data visualization, and HCI. Creator of Recho; previously led AntV G2 5.0."}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"}],"comments":[{"id":"8b281b8b207b0b58","reply_to_id":null,"content":"Discussion thread: https://talk.observablehq.com/t/slideshow-presentation-for-observable/10866","create_time":"$D2026-09-22T10:33:06.860Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Observable Slide","cells":[{"id":41,"value":"# Observable Slide\n\nClick **Present button** to present and press **arrow keys** to navigate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"present(\n [helloSlide, whatIsTt, whyIsIt, credits, getStarted, laTex, charts, animation, limitations, thanks],\n {display, invalidation}\n)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"const helloSlide = preview(() => md`\n# Hello Slide!\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const whatIsTt = preview(() => md`\n**What is it**?\n\nThis is a tiny slide library for the new Observable 2.0.\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"const whyIsIt = preview(() => md`\n**Why is it**?\n\nTry to explore an Observable-style way to author and present interactive slides.\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const credits = preview(() => md`\n It's inspired by:\n\n - Jo Wood - [Slideshows](https://observablehq.com/@jwolondon/observable-embedded-slideshow)\n - Mike Bostock - [Slide](https://old.observablehq.com/@mbostock/slide)\n - Fil - [Fullscreen](https://old.observablehq.com/@fil/fullscreen)\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"const getStarted = preview(() => md`\n**Get started**\n\n\\`\\`\\`js\n// Import the preview and present function:\nimport {preview, present} from \"@pearmini/slide\";\n\n// Create and preview a slide:\nconst slide1 = preview(() => md\\`Hello, *world*!\\`, {display});\n\n// Here is another one:\nconst slide2 = preview(() => Plot.plot({...}), {display});\n\n// Present slides:\npresent([slide1, slide2], {display});\n\\`\\`\\`\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// from https://old.observablehq.com/@mbostock/slide\nconst laTex = preview(() => md`\nYou can embed almost anything you create in Notebooks into your slides, such as LaTeX:\n\n${tex.block`\nf(\\textcolor{hotpink}{x}) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi \\textcolor{hotpink}{x}}\n \\,d\\xi\n`}`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"const charts = preview(() => md`\nAlso, interacive charts!\n\n${Plot.plot({\n width: 800,\n marks: [\n Plot.dot(penguins, {\n x: \"body_mass_g\",\n y: \"flipper_length_mm\",\n fill: \"species\",\n tip: true,\n })\n ]\n})}\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"const animation = preview(({invalidation}) => {\n const node = html`

`;\n const tick = () => {node.innerHTML = \"\"; node.append(md`# ${new Date().toLocaleString()}`);};\n const timer = setInterval(tick, 1000);\n tick();\n invalidation.then(() => clearInterval(timer));\n return md`Of course, animation!\n\n ${node}`}, {display, invalidation});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"const limitations = preview(() => md`\n**Limitations & Future Work**\n\n - No reactivity.\n - No space navigation.\n - Improve styling and customization.\n - Support starting from any slide.\n\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"const thanks = preview(() => md`\n# Thanks!\n\n[Bairui SU](https://bairui.dev/)\n`, {display});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Implmentation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"function preview(define, {display, invalidation}) {\n const node = render(define, invalidation, true);\n display(node);\n return define;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function render(define, invalidation, preview=false) {\n const node = define({invalidation});\n const t = window.outerWidth / window.outerHeight;\n const scale = preview ? width / window.outerWidth : 1;\n return html`

${node}

`;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"