30: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; } } } } }); }31:[] 2e:{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}