30:[{"id":"d902f241142b78cdf57eb5a97aa1b9a5408d4dbf8a0f837eeddc5a4a69665b1641613ca7fcc7fbb945b138f2103d26aa5092780fdc597d03acdc1a9672c114ff","href":"https://static.observableusercontent.com/files/d902f241142b78cdf57eb5a97aa1b9a5408d4dbf8a0f837eeddc5a4a69665b1641613ca7fcc7fbb945b138f2103d26aa5092780fdc597d03acdc1a9672c114ff","name":"Ruble.png","type":"image/png","lastModified":1732979844801.287,"size":96221},{"id":"bd6e81c1887355374c60f3effd5e58ae3afcbc7806315103e1cb099533d6c881f17ca1a7b899d6532081e057a5da92a9c0535574c75b5190e613ce916b75526c","href":"https://static.observableusercontent.com/files/bd6e81c1887355374c60f3effd5e58ae3afcbc7806315103e1cb099533d6c881f17ca1a7b899d6532081e057a5da92a9c0535574c75b5190e613ce916b75526c","name":"dos.png","type":"image/png","lastModified":1732981921867.509,"size":16001}] 2e:{"title":"Slides demo notebook","cells":[{"id":79,"value":"# Slides demo notebook","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"This is a demo notebook with examples for [`@jerryjappinen/slides`](https://observablehq.com/@jerryjappinen/slides).","pinned":false,"hidden":false,"mode":"md"},{"id":852,"value":"toc({\n closed: false,\n title: false,\n select: \"[toc]\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1308,"value":"This demo notebook has multiple slideshows. We have the slide data for all of them in `decks`, which we then use when importing from `@jerryjappinen/slides`:","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"import { slideshows, styles, currentSlides, timer, goToLast } with { decks, theme } from \"@jerryjappinen/slides\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"decks = ({\n basic, // Defined below\n generated,\n topCars,\n graphs,\n reactive,\n media,\n embeds,\n latex,\n auto,\n images,\n slideStyling,\n templates,\n customThemed,\n imageDeck,\n urlDeck,\n programmaticNavigation\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":1310,"value":"The code example below shows you what you need when you only have one slideshow in your notebook, which is the simpler and more typical use case.","pinned":false,"hidden":false,"mode":"md"},{"id":1336,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"

Basic usage

","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"You can create a **simple slideshow with markdown**:","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"viewof theme = Inputs.radio([\"light\", \"white\", \"dark\", \"auto\"], {\n label: html`theme =`,\n value: \"light\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"slideshows.basic","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"basic = [\n \"# Demo slideshow\",\n \"Slide number 2\",\n `Slide number 3\n\n- Hello\n- World\n`,\n `\n1. Hello\n1. World\n`,\n\n \"# Last slide\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"$${codeBlock(\"basic\")}","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"

Generate slides

","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"You can **compose slides programmatically**:","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"slideshows.generated","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"generated = _.range(10).map((n) => `# ${n + 1}/10`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1149,"value":"

Showcase data

","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"You can generate **slides from data** (like [this demo data from Observable](https://observablehq.com/@observablehq/sample-datasets)):","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"slideshows.topCars","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"topCars = [\n \"# Heaviest cars – Top 10\",\n _.slice(_.orderBy(cars, \"weight (lb)\", \"desc\"), 0, 10).map((car, i) => {\n return `\n ## _\\#${i + 1}_ – ${Math.round(\n car[\"weight (lb)\"] / 0.45359237\n ).toLocaleString()} kg\n \n # ${car.name}\n \n ${car[\"power (hp)\"]} horsepower\n `;\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1130,"value":"

Graphs and plots

","pinned":false,"hidden":false,"mode":"md"},{"id":1154,"value":"You can **use plots** in your slides:","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"slideshows.graphs","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"graphs = [\n Plot.plot({\n color: { legend: true, scheme: \"Viridis\" },\n height: 280,\n marks: [\n Plot.dot(cars, {\n x: \"weight (lb)\",\n y: \"year\",\n stroke: \"weight (lb)\",\n tip: true\n })\n ]\n }),\n\n `## Graphs 📊 work\n\nSee another plot in next slide 👉`,\n\n md`Plot about cars\n${Plot.plot({\n color: { legend: true },\n height: 280,\n marks: [\n Plot.barY(cars, {\n x: \"cylinders\",\n y: \"economy (mpg)\",\n tip: true\n })\n ]\n})}`,\n\n \"Last slide 👌\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"

Reactive data

","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"You can display **reactive data**:","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"slideshows.reactive","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"viewof n = Inputs.range([1, 100], {label: html`n =`, step: 1, value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"reactive = `## Drag \\`n\\`!\n\\`n = ${n}\\``","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1340,"value":"

Media

","pinned":false,"hidden":false,"mode":"md"},{"id":1565,"value":"You can always create custom HTML with `img` and `video` tags. But an image attachment will be shown as a slide if it’s part of your deck:","pinned":false,"hidden":false,"mode":"md"},{"id":1347,"value":"slideshows.media","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"media = [image, await FileAttachment(\"Ruble.png\").image(), image]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"image = FileAttachment(\"dos.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":835,"value":"

Embedded content

","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"You can **embed web content** like video players and code snippets:","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"slideshows.embeds","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"import { embed, gist, youtube } from \"@jerryjappinen/embed\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"embeds = [\n youtube(\"PZRI1IfStY0\"),\n gist(\"jerryjappinen\", \"babbdaf6041b64b66beca5c4ad92745a\"),\n md`Slideshow in your slideshow? Why not:\n${embed(\n ``\n)}`\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"

LaTeX blocks

","pinned":false,"hidden":false,"mode":"md"},{"id":298,"value":"You can use **LaTeX**:","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"slideshows.latex","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"latex = md`\n## Hello\n\n${tex`\nf(\\textcolor{red}{x}) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi \\textcolor{green}{x}}\n \\,d\\xi\n`}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"Note that you must use md\\`\\` to prerender your slide.","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"

Images

","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"You can use **images**:","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"slideshows.images","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"images = [\n `\n## Hello\n\n![](https://picsum.photos/120)![](https://picsum.photos/140)![](https://picsum.photos/160)\n`,\n `![](https://picsum.photos/300)`,\n `![](https://picsum.photos/510/240)`\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"

Slide styling

","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"Images don't naturally scale based on font size, so in fullscreen they will remain smaller. But as HTML is valid Markdown, you can do **custom styling**:","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"slideshows.slideStyling","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"slideStyling = [\n `# Hello\n\nHere is a picture\n\n`\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"

Templates

","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"To help with custom styling, you can create **templates**:","pinned":false,"hidden":false,"mode":"md"},{"id":242,"value":"slideshows.templates","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"templates = {\n function coverImage(n) {\n return ``;\n }\n\n function chapterCover(chapterNumber, chapterTitle) {\n return `\n

\n ${coverImage(chapterNumber)}\n

Chapter ${chapterNumber}

${chapterTitle}

\n `;\n }\n\n return [\n chapterCover(1, \"Intro\"),\n \"Hello world\",\n chapterCover(2, \"Deep dive\"),\n \"Hello again\",\n chapterCover(3, \"Wrap-up\")\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"Note that you can create template functions in their own cells, and also import them into other notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":1189,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1190,"value":"

Custom themes

","pinned":false,"hidden":false,"mode":"md"},{"id":1192,"value":"You can create your own **CSS themes**:","pinned":false,"hidden":false,"mode":"md"},{"id":1201,"value":"slideshows.customThemed","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"customThemed = [\n `# Slides\nWith custom CSS themes, you can complement custom templates.`,\n `Hello`,\n `world`,\n {\n theme: [\"mytheme\", \"light\"]\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":100,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":580,"value":"

Image slides

","pinned":false,"hidden":false,"mode":"md"},{"id":582,"value":"You can create a **slideshow entirely of images**:","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"slideshows.imageDeck","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"imageDeck = {\n function imageSlide(src) {\n return `

`;\n }\n\n return [\n imageSlide(\"https://picsum.photos/1921\"),\n imageSlide(\"https://picsum.photos/1922\"),\n imageSlide(\"https://picsum.photos/1923\"),\n imageSlide(\"https://picsum.photos/1924\"),\n imageSlide(\"https://picsum.photos/1925\"),\n imageSlide(\"https://picsum.photos/1926\"),\n imageSlide(\"https://picsum.photos/1927\"),\n\n // Force dark theme for this slideshow\n { theme: \"dark\" }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"This also works with images uploaded to your notebook. You can import an old PowerPoint or Keynote to Observable using this method.","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"

Persistent URLs

","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"You can link directly to a specific slide with **URL parameters**:","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"slideshows.urlDeck","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"import { urlNumbers, makeUrl } from \"@jerryjappinen/url-params\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"urlDeck = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", {\n start: (urlNumbers.slide || 1) - 1\n}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"- [Link to slide 2](?slide=2#urlDeck)\n- [Link to current slide](${makeUrl({ slide: currentSlides.urlDeck + 1 }, \"#urlDeck\")})","pinned":true,"hidden":false,"mode":"md"},{"id":332,"value":"See [@jerryjappinen/url-params](https://observablehq.com/@jerryjappinen/url-params) for docs.","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"

Timer

","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"You can **automatically advance** your slideshow:","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"slideshows.auto","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"auto = [..._.range(10).map((n) => `# ${n + 1}/10`), { loop: true }]","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"timer(\"auto\", 20) // Advance the deck \"auto\" every 20 seconds","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"

Programmatic navigation

","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"You can create **custom controls** to navigate slides:","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"slideshows.programmaticNavigation","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"programmaticNavigation = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"Inputs.button(\"Go to last slide\", {\n reduce() {\n return goToLast(\"programmaticNavigation\");\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"[Back to docs](https://observablehq.com/@jerryjappinen/slides)","pinned":false,"hidden":false,"mode":"md"},{"id":1292,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":857,"value":"import { baseStyles, toc } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"code = _.mapValues(decks, (d) => {\n return md`\\`\\`\\`js\nimport { slideshow, styles } with { deck } from \"@jerryjappinen/slides\"\n\nslideshow\n\nstyles\n\ndeck = [\n \\`${(_.isArray(d) ? d : [d]).join(\"`,\\n `\")}\\`\n]\n\\`\\`\\``;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"function codeBlock(key) {\n return md`

Full code example

\n ${code[key]}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}