2c:null 2d:["$","title",null,{"children":"Slides | Visnu Pitiyanuvath | 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":"873e1774ae843e74","slug":"slides","title":"Slides","thumbnail":"dabc0046bc74c278f528a8c125e05facf76529b421a06063479e2e197f45de20","access_level":"public","create_time":"$D2019-12-10T07:43:21.729Z","update_time":"$D2023-10-23T21:39:31.864Z","view_time":null,"first_public_time":"$D2019-12-10T20:03:48.575Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026"},"version":370,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}],"members":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"role":"editor"}],"comments":[{"id":"00e166e132aaff7d","reply_to_id":null,"content":"(For anyone who comes across this…) Note that “View in fullscreen” is currently only available in the “Classic” notebook editor; add “?ui=classic” to the URL or click the notebook menu and choose “Switch to Classic”.","create_time":"$D2021-05-09T15:47:43.824Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}},{"id":"d47a33a7e05cbdde","reply_to_id":"00e166e132aaff7d","content":"There’s currently a bug with jumping between slides with the arrow keys on Safari 14.","create_time":"$D2021-05-22T16:41:31.585Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":{"id":"cc5bf0e91ef74e09","slug":"talks","title":"Talks","owner":{"id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath"}},"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"