2c:null 2d:["$","title",null,{"children":"Slides | Oscar Alberto Hernández's Workspace | Observable"}] 32:T52d,keyBindings = { let currentSlide = -1; let showNotes = () => {}; function keyUp(event) { const slides = document.querySelectorAll('.observablehq .slide'); switch (event.key) { case 'ArrowUp': case 'ArrowLeft': currentSlide = Math.max(currentSlide - 1, 0); slides[currentSlide].scrollIntoView(); showNotes(slides[currentSlide]); break; case 'ArrowDown': case 'ArrowRight': currentSlide = Math.min(currentSlide + 1, slides.length - 1); slides[currentSlide].scrollIntoView(); showNotes(slides[currentSlide]); break; } } document.addEventListener('keyup', keyUp); invalidation.then(() => document.removeEventListener('keyup', keyUp)); return Object.assign( html``, { onclick() { const notes = open("about:blank", "notes", "width=600,height=400").document.body; showNotes = slide => { notes.innerHTML = ""; const cell = slide.parentNode; const siblings = Array.from(document.querySelectorAll('.observablehq')); for (const sibling of siblings.slice(siblings.indexOf(cell))) { if (sibling.querySelector('.notes')) { notes.innerHTML = sibling.innerHTML; break; } } } } }); }33:[] 30:{"id":"9638ae9746b8a527","slug":null,"title":"Slides","thumbnail":"b19535653378554245966a1847bc172635fd9dd7ce90173cc3d8b059d6d8f9e7","access_level":"public","create_time":"$D2024-01-19T11:58:09.919Z","update_time":"$D2024-01-19T11:58:09.919Z","view_time":null,"first_public_time":"$D2024-01-19T11:58:09.919Z","has_unpublished_edits":null,"fork":{"id":"873e1774ae843e74","slug":"slides","title":"Slides","owner":{"id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f4e150a1735130dc","login":"oscar-alberto-hernandez-ws","name":"Oscar Alberto Hernández's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6b89b1554c82dcfee95eeca70c38c2293f8dfe30595915563ab4dfa046133f4a","tier":"starter_2024"},"version":370,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4b462b7a0d004a0","login":"oscar-alberto-hernandez","name":"Oscar Alberto Hernández","avatar_url":"https://avatars-next.observableusercontent.com/8e9bcf67dc2445f3b0e2212776275cad6122a022292d6660ea82eff37107deea","tier":null}],"members":[{"type":"individual","id":"d4b462b7a0d004a0","login":"oscar-alberto-hernandez","name":"Oscar Alberto Hernández","avatar_url":"https://avatars-next.observableusercontent.com/8e9bcf67dc2445f3b0e2212776275cad6122a022292d6660ea82eff37107deea","tier":null,"role":"editor"},{"type":"team","id":"f4e150a1735130dc","login":"oscar-alberto-hernandez-ws","name":"Oscar Alberto Hernández's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6b89b1554c82dcfee95eeca70c38c2293f8dfe30595915563ab4dfa046133f4a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Slides","cells":[{"id":0,"value":"# Slides\n\nFor when you want some hybrid of **slides + blog post + explorable explanation**. Used for [my talk at JSConf Hawai‘i 2019](/@visnup/cheat) and [Observable + Vega-Lite crash course](https://www.youtube.com/watch?v=ZV_Yjcs5WtM).\n\nInspired by [@mbostock/slide](/@mbostock/slide), but with:\n\n- A more complicated \\`slide.html\\` template literal for more complicated slides\n- Keyboard shortcuts (up, down or left, right) to advance or rewind slides (broken in Safari?)\n- \\`notes\\` helper for interstitial speaker notes / blog post content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"---\n\n## Usage\n\n```js\nimport { slide, notes, style, keyBindings } from '@visnup/slides'\n```\n\n👉🏼 See [@visnup/slides-usage](slides-usage) for a forkable example.\n\n⚠️ Be sure to reference `style` and `keyBindings` from two new cells in your\nnotebook for styling and arrow keys to work. Further, before arrow keys really\nwork, you’ll need to click a slide’s content to give it keyboard focus.\n\n🎥 To begin the presentation, click the ... menu in the top right and choose\nView > View in fullscreen.\n\nIf you want to customize your slides’ style (e.g., add background colors or\nchange fonts), add additional `","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"style","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"