{"id":15376719,"url":"https://github.com/bennypowers/eleventy-plugin-slide-decks","last_synced_at":"2025-04-15T16:38:04.746Z","repository":{"id":64108678,"uuid":"573396015","full_name":"bennypowers/eleventy-plugin-slide-decks","owner":"bennypowers","description":"🎼 It makes an itsy-bitsy, teeny-weeny, web-component slide deck prezzy 🎵  🎚️ Write slide decks with 11ty and share them over the  web. 🎴","archived":false,"fork":false,"pushed_at":"2024-07-08T08:49:43.000Z","size":1075,"stargazers_count":22,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T22:24:38.442Z","etag":null,"topics":["11ty","eleventy","eleventy-plugin","html","presentation","slides","web","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bennypowers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-02T11:12:37.000Z","updated_at":"2024-11-08T16:31:53.000Z","dependencies_parsed_at":"2025-03-03T04:40:54.599Z","dependency_job_id":null,"html_url":"https://github.com/bennypowers/eleventy-plugin-slide-decks","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Feleventy-plugin-slide-decks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Feleventy-plugin-slide-decks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Feleventy-plugin-slide-decks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Feleventy-plugin-slide-decks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bennypowers","download_url":"https://codeload.github.com/bennypowers/eleventy-plugin-slide-decks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249109647,"owners_count":21214185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","eleventy","eleventy-plugin","html","presentation","slides","web","web-components"],"created_at":"2024-10-01T14:08:47.299Z","updated_at":"2025-04-15T16:38:04.728Z","avatar_url":"https://github.com/bennypowers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Am Yisrael Chai - עם ישראל חי](https://bennypowers.dev/assets/flag.am.yisrael.chai.png)\n\n# eleventy-plugin-slide-decks\n\n🎼 It makes an *itsy-bitsy*, *teeny-weeny*, *web-component* slide deck prezzy, \nwhich is basically a small SPA. 🎵\n\n🎚️ Write slide decks with [eleventy](https://11ty.dev) and share them over the \nweb. 🎴\n\nUses [`\u003cslidem-deck\u003e`](https://github.com/ruphin/slidem) to do most of the work \nfor you.\n\n## Installation and Setup\n\n```\nnpm i eleventy-plugin-slide-decks\necho \"_includes/deck.html\" \u003e\u003e .gitignore\n```\n\nThen in your 11ty config:\n\n```js\nconst DecksPlugin = require('eleventy-plugin-slide-decks');\neleventyConfig.addPlugin(DecksPlugin);\n```\n\n## Writing Decks\n\nCreate a `decks` directory in your 11ty source root (or use `decksDir` option).\nEach slide deck is a single dir under the `decksDir`. Add an 11ty data file for \neach deck or for all decks.\nYou must add a single template to each deck's root dir, containing frontmatter \nfor that deck. At minimum, that file should have `layout: deck.html` and  `deck: \ndeckdir`. For example, if you have a deck in `decks/prezzo`, you must at very\nleast create `decks/prezzo/prezzo.md` with this content:\n\n```md\n---\nlayout: deck.html\ndeck: prezzo\n---\n```\n\nOptional frontmatter keys:\n```yaml\ntitle: Slide deck title\nauthor: slide deck author (used in open graph tags)\ndescription: meta description (and og)\nlang: en # default\ndir: ltr # default\ndate: 2022-12-02\nlocale: en-US # default\norigin: https://bennypowers.dev # slide deck origin (used in og:url)\ncoverImage: prezzo.png # used in open graph tags\nicons:\n  - rel: icon # required\n    href: /assets/images/favicon.ico?v=2 # required\n  - rel: shortcut icon\n    href: /assets/icon.svg\n  - rel: apple-touch-icon\n    sizes: 72x72\n    href: /assets/images/manifest/icon-72x72.png\npreconnect:\n  - https://fonts.googleapis.com\nstylesheets:\n  - href: /optional/urls/to/stylesheets.css\n    async: true # optional\n    media: 'screen and (prefers-color-scheme: dark)' # optional\nscripts:\n  - src: prezzo.js\n    type: module\n```\n\nYou can also provide an `importMap` as data, and it will print in the `\u003chead\u003e`.\n\nAll urls are passed through the `url` filter for you.\n\nIt's possible to put content in this file, but you should expect that content to \nbe invisible, for example, you can put an SVG sprite sheet in there:\n\n```html\n\u003csvg id=\"icons\"\u003e\n  \u003cdefs\u003e{% for icon in collections.icon %}\n    \u003cg id=\"{{ icon.fileSlug }}-icon\" aria-label=\"{{ icon.data.title }}\"\u003e{{ icon.templateContent | safe }}\u003c/g\u003e{% endfor %}\n  \u003c/defs\u003e\n\u003c/svg\u003e\n```\n\n### WebC Decks\n\nIf you want to go buck wild, let loose; if you're so excited and you just can't \nhide it, you can also (deep breaths) use the \n[WebC](https://www.11ty.dev/docs/languages/webc/) deck component:\n\n```html\n---\neleventyImport:\n  collections:\n    - webbyprezzy\n---\n\u003cslide-deck webc:nokeep\n            webc:import=\"npm:eleventy-plugin-slide-decks\"\n            @title=\"Super Webby Prezzy\"\n            @date=\"2048-02-04\"\n            @tag=\"webbyprezzy\"\u003e\u003c/slide-deck\u003e\n\u003cscript src=\"more-page-scripts.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"load-me-last.js\"\n        webc:bucket=\"after\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"webby-prezzy.css\"\u003e\n```\n\nDon't leave out the eleventyImport or or the `webc:nokeep`, or else things will\nbreak in hilarious ways.\n\n### Writing Slides\n\nEach decks slides are located in it's `slides` directory, and ordered by name. \nIt's recommended to name the slide files `00-first-slide.md`, \n`10-second-slide.md`, etc. You should also add an 11ty data file for the slides \ndirectory containing `permalink: false`, in order to prevent 11ty from rendering \nindividual HTML pages for each slide, which would only duplicate the slide \ncontent.\n\nSo for example:\n\n```\ndecks\n├── decks.json\n└── prezzo\n    ├── img.png\n    ├── prezo.css\n    ├── prezzo.md\n    └── slides\n        ├── 00-first-slide.md\n        ├── 10-second-slide.md\n        ├── 99-last-slide.md\n        └── slides.json\n```\n\n#### Stepping Through Slide Content\n\nIf you want certain elements of a slide to reveal one by one, specify a CSS \nselector in the `reveal` frontmatter key. Take for example this slide:\n\n~~~md\n---\nreveal: li, img\n---\n## Using Slidem\n\n- HTML wins\n- JavaScript is p. cool too\n\n![a satisfied and productive slide author](img.png)\n~~~\n\nWhen switching to this slide, on step 1 only the heading will be visible, on \nstep 2 the first list item (\"HTML wins\") will appear, on step 3, the next list \nitem, and on step 4, the image.\n\n#### Styling Slides\n\nYou can set the classname for the slide with the `class` frontmatter key:\n\n```md\n---\nclass: dark\n---\n```\n```html\n\u003cslidem-slide class=\"dark\"\u003e\u003c/slidem-slide\u003e\n```\n\nSlides get the `name` attribute based on their filename, so `00-first-slide.md` \nwould render as `\u003cslide-slide name=\"first-slide\"\u003e`. You can then style that \nslide with good-old CSS. Each slide exposes `container` and `content` [CSS \nShadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):\n\n```css\n[name=first-slide] {\n  background: hotpink;\n}\n\n[name=first-slide]::part(content) {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1em;\n}\n```\n\n##### `style` frontmatter\n\nAlthough using CSS is encouraged, you can also set styles on the slide element \nwith the `style` frontmatter key. If the value is a string, it will be dumped \ninto the `style` attribute:\n\n```md\n---\nstyle: 'color:hotpink'\n---\n...\n```\n```html\n\u003cslidem-slide style=\"color:hotpink\"\u003e\n\u003cp\u003e...\u003c/p\u003e\n\u003c/slidem-slide\u003e\n```\n\nBut if you pass a YAML dictionary or a JSON object, it will be collapsed into a \nstyle string for you:\n\n```md\n---\nstyle:\n  color: hotpink\n  font-size: 200%\n  animation: jazz-hands\n---\n...\n```\n```html\n\u003cslidem-slide style=\"color:hotpink;font-size:200%;animation:jazz-hands\"\u003e\n\u003cp\u003e...\u003c/p\u003e\n\u003c/slidem-slide\u003e\n```\n\n#### Extending `SlidemSlide`\nYou might want to create your own custom slide types by extending `SlidemSlide`. \nOne case in which this is useful is in providing custom slots to a slide, like a \nslide which presents a `\u003cblockquote\u003e` in a `\u003cfigure\u003e` with the author in the \n`\u003cfigcaption\u003e`. In that case, you can specify the tag name to use for the slide \nwith the `is` frontmatter key:\n\n```md\n---\nis: slidem-quote\n---\n\u003cp slot=\"quote\"\u003e\n  All our work, our whole life is a matter of semantics, because words are the \n  tools with which we work... Everything depends on our understanding of \n  them.\n\u003c/p\u003e\n\n\u003cspan slot=\"author\"\u003eFelix Frankfurter\u003c/span\u003e\n\n\u003cimg slot=\"portrait\" alt=\"felix at the window\" src=\"felix.jpg\"\u003e\n```\n```html\n\u003cslidem-quote\u003e\u003c!-- etc --\u003e\u003c/slidem-quote\u003e\n```\n\n\n## Options\n\n| option             | type     | default                  | description                                             |\n| ------------------ | -------- | ------------------------ | ------------------------------------------------------- |\n| `decksDir`         | string   | 'decks'                  | directory off the 11ty input dir which contains slides  |\n| `assetsExtensions` | string[] | see below                | file extensions to pass-through copy from the decks dir |\n| `target`           | boolean  | [esbuild target][target] | esbuild target to use when bundling slide dependencies  |\n| `polyfills`        | object   | see below                | polyfills to load on the decks page                     |\n\nBy default, files matching `decks/**/*.{css|jpeg|jpg|js|mp4|png|svg|webp}` will \npassthrough copy to the output dir.\n\nThe `polyfills object` defaults to the following:\n\n```json\n{\n  \"constructibleStyleSheets\": true,\n  \"webcomponents\": false,\n  \"esmoduleShims\": false,\n}\n```\n\n[target]: https://esbuild.github.io/api/#target\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Feleventy-plugin-slide-decks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbennypowers%2Feleventy-plugin-slide-decks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Feleventy-plugin-slide-decks/lists"}