{"id":29128517,"url":"https://github.com/oddbird/eleventy-plugin-slide-deck","last_synced_at":"2026-02-02T18:17:37.850Z","repository":{"id":280580252,"uuid":"891680380","full_name":"oddbird/eleventy-plugin-slide-deck","owner":"oddbird","description":"A plugin to use the slide-deck web component in eleventy projects","archived":false,"fork":false,"pushed_at":"2026-01-13T17:04:38.000Z","size":1454,"stargazers_count":9,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-13T19:19:46.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2024-11-20T19:03:36.000Z","updated_at":"2026-01-12T18:17:24.000Z","dependencies_parsed_at":"2025-03-04T07:35:20.085Z","dependency_job_id":"add9169d-5b98-4081-9248-0b48d3a2af9e","html_url":"https://github.com/oddbird/eleventy-plugin-slide-deck","commit_stats":null,"previous_names":["oddbird/eleventy-plugin-slide-deck"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/oddbird/eleventy-plugin-slide-deck","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Feleventy-plugin-slide-deck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Feleventy-plugin-slide-deck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Feleventy-plugin-slide-deck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Feleventy-plugin-slide-deck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/eleventy-plugin-slide-deck/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Feleventy-plugin-slide-deck/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29016839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T16:17:30.374Z","status":"ssl_error","status_checked_at":"2026-02-02T15:58:50.469Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-06-30T02:07:45.746Z","updated_at":"2026-02-02T18:17:37.844Z","avatar_url":"https://github.com/oddbird.png","language":"JavaScript","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":[],"sub_categories":[],"readme":"# Eleventy Slide-Deck Plugin\n\nA plugin to use the\n[`@oddbird/slide-deck`](https://github.com/oddbird/slide-deck)\nweb component in eleventy projects --\nand generate decks from data.\n\n[Demo](https://11ty-slide-deck.netlify.app/)\n\nAny page with `slides` data\nwill be added to the (configurable) `slideDeck` collection,\nand provided with a built-out `slideDeck` data property\nready for rendering.\n\n## Config\n\nWe rely on the official WebC plugin,\nbut don't install it for you.\nConfigure both plugins,\nand register the provided components:\n\n```js\n// eleventy config\nimport pluginWebc from \"@11ty/eleventy-plugin-webc\";\nimport pluginSlideDeck from \"@oddbird/eleventy-plugin-slide-deck\";\n\nexport default async function(eleventyConfig) {\n  eleventyConfig.addPlugin(pluginSlideDeck, {\n    // optional slide deck configuration\n  });\n\n  // register the slide-deck WebC components\n  eleventyConfig.addPlugin(pluginWebc, {\n    components: [\n      'npm:@oddbird/eleventy-plugin-slide-deck/**/*.webc',\n    ],\n  });\n}\n```\n\nThere are several (optional) configuration settings\nfor this slide deck plugin:\n\n- `collectionName` changes the name of the generated `slideDeck` collection,\n  including every page that has `slides` data.\n- `buildFunction` (when provided)\n  will be called on each slide during the build process,\n  after relationships have resolved, but before layout is determined.\n  Use this to set additional layout types\n  or make other slide-data alterations.\n- `markdownIt` is an option object\n  passed along to the `markdown-it` package\n- `markdownFunctions.inline` \u0026 `markdownFunctions.block` allow\n  replacing the markdown parser entirely,\n  in case you want to add plugins or use a different library.\n- `domain` is a string optionally\n  prepended to the page url on event slides,\n  to show the URL of the slide deck\n- `eventDateLocale` and `eventDateFormat` options\n  for rendering the event date with `toLocaleDateString()`\n- `imgDir` optionally prepends a path\n  to all slide image properties (such as `src` and `avatar`)\n- `known.slides` (default `knownSlides`)\n  and `known.series` (default `knownSeries`)\n  establish where to look for slide and series source data.\n\n## Usage\n\nBuild an entire slide-deck from structured data:\n\n```html\n---yaml\nslides:\n- title: My Presentation\n  venue: Cool Web Club\n  date: 2024-11-20\n  caption: '@mia@front-end.social'\n- img: './my-image.jpg'\n  alt: a very tall or short building or not a building at all\n- quote: \"This is one of the bests talks I've ever seen\"\n  cite: People who see your talk\n---\n\n\u003cbuild-deck webc:nokeep :slides=\"this.slideDeck\" id=\"if-you-want\"\u003e\u003c/build-deck\u003e\n```\n\nJavaScript for interactivity\nand loading the baseline `support` content\nare included in the default bundle.\nMake sure it's included in a template:\n\n```js\n\u003cscript webc:keep @raw=\"getBundle('js')\"\u003e\u003c/script\u003e\n```\n\nAlong with the core and (optional) theme style bundles:\n\n```html\n\u003cstyle @raw=\"getBundle('css', 'slides-layer-order')\" webc:keep\u003e\u003c/style\u003e\n\u003cstyle @raw=\"getBundle('css', 'slides-core')\" webc:keep\u003e\u003c/style\u003e\n\u003c!--- Add optional slide theme styles ---\u003e\n\u003cstyle @raw=\"getBundle('css', 'slides-theme')\" webc:keep\u003e\u003c/style\u003e\n```\n\n### Writing slides\n\nCreate your slides in any data format\nsupported by Eleventy,\n[or add your own](https://www.11ty.dev/docs/data-custom/).\nThis package adds a `*.deck` template format\nand matching `*.slides` data format to Eleventy.\nSlide notes are provided as top-level markdown,\nwith slide content as YAML in the comments:\n\n```md\n\u003c!-- @slide\ntitle: Hello World\nbackground: mediumVioletRed\nmode: dark\n--\u003e\n\nThe stuff inside the comment\nis structured YAML\nthat describes the slide itself,\nwhile this bit of _markdown_\nwill be used for speaker notes\n(the `slide.note` property described below).\n```\n\nThe `*.deck` template language allows template front-matter\nusing the same syntax as any other Eleventy template language.\nSlides are added to the data cascade,\nand the parsed markdown is returned as template content.\n\nWe provide several built-in slide layouts\nthat accept a variety of properties:\n\n- all slide layouts support…\n  - `slide.id` used for the `id` attribute\n  - `slide.caption` for a caption under the slide\n  - `slide.note` for speaker notes\n  - `slide.source`, `slide.name`, \u0026 `slide.url`\n    for providing credit (often appended to the `caption`)\n  - `slide.cite` Markdown text, often appended to the `caption`.\n    This is useful when you want to provide links to more info\n    without changing how the slide is rendered otherwise.\n  - `slide.background`, `slide.color`, \u0026 `slide.mode` CSS values\n\n- `\u003cevent-slide\u003e` -- usually the first/last slides of a deck\n  - `slide.pre`, `slide.title`, \u0026 `slide.sub` for the talk title block\n  - `slide.venue` the event title\n  - `slide.date` the date of the talk\n  - `slide.exit` optional (inline markdown) \"back\" link in the top\n  - `slide.detail` optional (block markdown) section for more detail\n\n- `\u003ctodo-slide\u003e` -- for drafting a new talk\n  - `slide.todo` markdown block\n\n- `\u003cdefault-slide\u003e` -- titles, bullets, and arbitrary content\n  - `slide.pre`, `slide.title`, and `slide.sub` create the title block\n  - `slide.md`, and `slide.webc` allow for arbitrary content\n\n- `\u003cimg-slide\u003e`\n  - `slide.src` and `slide.alt` to embed an image\n  - `slide.credit` for (inline markdown) photo credits\n  - `slide.fit`, `slide.position`, \u0026 `slide.padding` CSS values\n\n- `\u003csplit-slide\u003e` -- combo of `image-slide` and `default-slide` props\n- `\u003csource-slide\u003e` -- combo of `image-slide` and `source`/`name`/`url` data\n\n- `\u003curl-slide\u003e` -- screenshot or open-graph image slide, generated from a url\n  using the [11ty APIs](https://www.11ty.dev/docs/api-services/)\n  - `slide.url` source URL\n  - `slide.alt` optional alt text for the image\n  - `slide.size` controls the screenshot size/dimensions\n  - `slide.type` can be set to `og` to use the open-graph API instead\n  - `slide.title` will be added to the caption (and used as alt-fallback)\n  - `slide.fit`, `slide.position`, \u0026 `slide.padding` CSS values\n\n- `\u003cquote-slide\u003e`\n  - `slide.quote` the (block markdown) text of the blockquote\n  - `slide.cite` a (inline markdown) citation after the quote\n  - `slide.img` or `slide.avatar` an image next to the quote\n  - `slide.alt` optional alt text for the avatar\n\n- `\u003cembed-slide\u003e` -- `slide.embed` for the code to embed (iframe, video, etc)\n- `\u003cdemo-slide\u003e` -- embeds and iframe, with a permalink in the caption\n  - `slide.demo` any URL or Eleventy page with matching `demo` value\n- `\u003cpen-slide\u003e` -- embed editable demos from code-pen\n  - `slide.pen` URL of the CodePen\n  - `slide.title` name of the pen, added to the caption\n  - `slide.live` link a live-code version of the demo, if different\n  - `slide.preview` (boolean) set `true` for click-to-load behavior\n- `\u003ccode-slide\u003e`\n  - `slide.\u003clanguage\u003e` (for `html`, `css`, `scss`, or `js`)\n  - or `slide.code` and `slide.lang` for any other languages\n- `\u003csupport-slide\u003e`\n  - `slide.caniuse` feature id for CanIUse\n  - `slide.support` feature id for Baseline\n\nAll markdown properties also allow `WebC` content as well.\n\n### Known (reusable) slides\n\nReuse common slides across different decks\nby creating adding a `knownSlides` object\nto the Eleventy data cascade:\n\n```yaml\n# _data/knownSlides.yml\nstart-deck:\n  exit: \u003e\n    [home](/)\n  caption: |\n    \u003cimg src=\"oddbird-logo.svg\" alt=\"OddBird\" sizes=\"96w\" width=\"180\"\u003e\n    \u003ca href=\"https://front-end.social/@mia\"\u003e\n      @mia@front-end.social\n    \u003c/a\u003e\n    \u003cspan\u003e\n      (\u003ckbd\u003eCmd/Ctr-k\u003c/kbd\u003e for settings)\n    \u003c/span\u003e\nyoda:\n  img: yoda.jpg\n  alt: Yoda using the force in a swamp\n  fit: cover\n  position: top\n```\n\nThese can be referenced in a slide deck,\nusing the `slide.known` property.\nAdditional properties added here\nwill be combined with (or override)\nproperties in the known slide:\n\n```yaml\nslides:\n- known: start-deck\n  title: New Presentation\n  venue: The Best Conference\n- known: yoda\n  note: yoda, with speaker notes\n```\n\nRe-use an entire series of slides\nwith `knownSeries` data:\n\n```yaml\n# _data/knownSeries.yml\nintro:\n- known: start-deck\n  title: New Presentation\n  venue: The Best Conference\n- img: './my-image.jpg'\n  alt: Miriam smiling\n  title: Miriam Suzanne\n  sub: Web developer\n```\n\n```yaml\nslides:\n- series: intro\n- title: More slides…\n```\n\nChange the `known.slides` and `known.series` configuration options\nto store known slide \u0026 series data under a different name.\n\n### Rendering the slides\n\nUse the built-in `\u003cbuild-deck\u003e` component\nto render a slide deck\nusing the provided slide layouts:\n\n```html\n\u003cbuild-deck webc:nokeep :slides=\"this.slideDeck\"\u003e\u003c/build-deck\u003e\n\u003c!-- be sure to include js and css bundles as needed --\u003e\n```\n\nFor more flexibility\nuse the `\u003cslide-deck\u003e`,\n`\u003crender-slide\u003e` and `\u003cslide-controls\u003e` components\nto loop through your slide data --\nand optionally add custom layouts…\n\n```html\n\u003cslide-deck\n  webc:import=\"npm:@oddbird/slide-deck\"\n  :id=\"this.id || 'slides'\"\n  :@slides=\"this.slides\"\n  slide-view=\"slideshow\"\n  key-control\n  follow-active\n\u003e\n  \u003ctemplate webc:nokeep webc:for=\"slide of this.slideDeck\"\u003e\n    \u003c!-- render custom layouts --\u003e\n    \u003ccustom-slide-layout\n      webc:if=\"slide.layout === 'custom'\"\n      :@slide=\"slide\"\n    \u003e\n\n    \u003c!-- fall back to built-in layouts --\u003e\n    \u003crender-slide\n      webc:nokeep\n      webc:else\n      :@slide=\"slide\"\n    \u003e\u003c/render-slide\u003e\n  \u003c/template\u003e\n\n  \u003cslide-controls webc:nokeep\u003e\u003c/slide-controls\u003e\n\u003c/slide-deck\u003e\n```\n\n### Theme\n\nTo get started using the provided\ndefault theme, add the `slides-theme`\nbundle to your project:\n\n```html\n\u003cstyle @raw=\"getBundle('css', 'slides-theme')\" webc:keep\u003e\u003c/style\u003e\n```\n\nThe theme in this layer adds settings for colors, basic styling,\nand fonts.\n\nIn the `slides-theme` layer we list\ndefault font stacks for sans-serif\n(`--slide-os-sans-font`), serif (`--slide-os-serif-font`),\nand code (`--slide-os-code-font`) fonts.\n\nTo add a main font for each font stack type, manually\nadd self-hosted or web-based fonts to your project and then set the\nfont-family name to the respective custom property for each font.\n\nExample:\n\n```css\n--slide-web-font-sans: \"Recursive Sans Linear\";\n--slide-web-font-serif: freight-text-pro;\n```\n\nThere's more to document, but this is a start.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Feleventy-plugin-slide-deck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Feleventy-plugin-slide-deck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Feleventy-plugin-slide-deck/lists"}