3f:null 40:["$","title",null,{"children":"Slides Template | Kyle Holzinger | Observable"}] 46:T596,html``47:T658,keypresscontrol= { document.cells = document.getElementsByClassName("observablehq"); document.current=2; document.stopnumber = document.cells.length- 5 //keymap document.onkeyup = function(e) { console.log(e) ; if (e.which === 83){console.log('re -s- tart'); document.current=2 var elmnt = document.cells[document.current] elmnt.scrollIntoView(); } if (e.which === 32| e.which === 39| e.which === 40){console.log('space'); document.current+=1 if (document.current < (document.stopnumber)){ var elmnt=document.cells[document.current]; if (elmnt.innerHTML != '

'){ elmnt.scrollIntoView(); } else { document.stopnumber = document.current; } }else{document.current = document.stopnumber } } if (e.which === 38 | e.which === 37){console.log('back'); document.current-=1 if (document.current <2){document.current = 2} var elmnt = document.cells[document.current] elmnt.scrollIntoView(); } } }48:T8a4,slide = { function slide() { const container = document.createElement("div"); container.className = "slide"; container.appendChild(md.apply(this, arguments)); return container; } function end() { const container = document.createElement("div"); container.className = "end"; return container; } slide.end = end; function iframe(strings) { const container = document.createElement("div"); container.innerHTML="" container.className = "slide"; return container; } slide.iframe=iframe; function html(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; return container; } slide.html = html; function htmldark(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html dark"; return container; } slide.htmldark = htmldark; function code(strings) { const container = document.createElement("div"); const pre = container.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); container.className = "slide slide--code"; return container; } slide.code = code; slide.js = function() { const container = code.apply(this, arguments); const content = container.firstChild.firstChild; content.className = "js hljs javascript"; hl.highlightBlock(content); return container; }; slide.img = function(strings) { const img = new Image; let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; img.src = string.trim(); img.className = "slide slide--img"; return img; }; return slide; }49:T467,slide_style = html``4a:[] 44:{"id":"3d3f58a6f0489141","slug":"slides-template","title":"Slides Template","thumbnail":"e66e68e2c502a16948f681687055d3e0cc9d347b951be4c3dc239182848c17dd","access_level":"public","create_time":"$D2019-10-29T21:44:27.128Z","update_time":"$D2019-10-29T21:44:42.037Z","view_time":null,"first_public_time":"$D2019-10-29T21:56:25.233Z","has_unpublished_edits":null,"fork":{"id":"547180e11449cb03","slug":"a-presentation-framework-built-on-a-observablehq-notebook","title":"A simple presentation medium built on a observablehq notebook","owner":{"id":"5ac3a182adb31463","login":"wolfiex","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"b1f02191b8f425d8","login":"kyleholzinger","name":"Kyle Holzinger","avatar_url":"https://avatars-next.observableusercontent.com/4b8a2f4be85cb4c4e68c1bc28c7443dd01dc14d37dfd019751d4bfb84f4d065a","tier":"starter_2024","bio":"I like to make stuff","following":false},"version":450,"publish_version":450,"role":null,"authored":false,"authors":[{"type":"individual","id":"390640180670b057","login":"kyleholzinger","name":"Kyle Holzinger","avatar_url":"https://avatars-next.observableusercontent.com/4b8a2f4be85cb4c4e68c1bc28c7443dd01dc14d37dfd019751d4bfb84f4d065a","tier":null,"bio":"I like to make stuff","following":false}],"members":[{"type":"individual","id":"390640180670b057","login":"kyleholzinger","name":"Kyle Holzinger","avatar_url":"https://avatars-next.observableusercontent.com/4b8a2f4be85cb4c4e68c1bc28c7443dd01dc14d37dfd019751d4bfb84f4d065a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Slides Template","cells":[{"id":0,"value":"md`\n# Slides Template\n##### [A few changes to make it feel more like a slideshow presentation framework.]\n\nClick fullscreen and then use the arrows / space bar to navigate\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"slide.html`

A new Presentation style.

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"slide`Let’s give a presentation using an Observable notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"slide.js`\n// Import the slide function and styles:\nimport {slide, slide_style} from \"@mbostock/slide\"\n\n// Load the styles:\nslide_style\n\n// Create a slide:\nslide\\`Hello, *world*!\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"slide`Hello, *world*!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"slide`Use \\`slide\\` for Markdown, \\`slide.js\\` or \\`slide.code\\` for code, and \\`slide.img\\` for an image,\n\n\\`slide.html\\` or \\`slide.htmldark\\` for for HTML and \\`slide.iframe\\` for iframes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"slide.js`\n// This is a JavaScript code snippet.\nfunction foo() {\n return 42;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"slide.img`https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"slide`You can use LaTeX, too: ${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`} \n\n And you can reference using cite `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"slide`And it’s reactive!\n\n${new Date(now).toLocaleString()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"slide.iframe`https://www-users.york.ac.uk/~dp626/`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"slide` To end, use *slide.end()*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"slide.end('this ends the presentation')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"