{"id":18496224,"url":"https://github.com/oddbird/slide-deck","last_synced_at":"2025-04-08T22:32:07.146Z","repository":{"id":213735260,"uuid":"734792408","full_name":"oddbird/slide-deck","owner":"oddbird","description":"Web presentations, as a self-contained web component","archived":false,"fork":false,"pushed_at":"2024-05-30T16:22:43.000Z","size":181,"stargazers_count":25,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T18:48:53.536Z","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":"CONTRIBUTING.md","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},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2023-12-22T16:23:54.000Z","updated_at":"2024-10-20T22:19:08.000Z","dependencies_parsed_at":"2024-01-15T03:40:30.022Z","dependency_job_id":"fbd946ba-556e-4db4-8d21-4c74b8d57330","html_url":"https://github.com/oddbird/slide-deck","commit_stats":{"total_commits":86,"total_committers":5,"mean_commits":17.2,"dds":0.2558139534883721,"last_synced_commit":"b432da276c4b3bea8be98cfb338773a85c1aa173"},"previous_names":["oddbird/slide-deck"],"tags_count":5,"template":false,"template_full_name":"daviddarnes/component-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fslide-deck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fslide-deck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fslide-deck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fslide-deck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/slide-deck/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247935590,"owners_count":21020852,"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":[],"created_at":"2024-11-06T13:28:32.386Z","updated_at":"2025-04-08T22:32:07.109Z","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":"# `slide-deck`\n\nA Web Component for web presentations.\n\n**[Demo](https://slide-deck.netlify.app)**\n\n**⚠️ This is a pre-release**:\nBreaking changes will be allowed in minor versions\nuntil we achieve a stable v1.0 release\n\n## Examples\n\nGeneral usage example:\n\n```html\n\u003cscript type=\"module\" src=\"slide-deck.js\"\u003e\u003c/script\u003e\n\n\u003cslide-deck\u003e\n  \u003cheader\u003e\u003ch1\u003eThis is a slide show\u003c/h1\u003e\u003c/header\u003e\n  \u003cdiv\u003e\u003ch2\u003eEach child is a slide\u003c/h2\u003e\u003c/div\u003e\n  \u003cdiv\u003e\n    \u003ch2\u003eWe can add our own controls\u003c/h2\u003e\n    \u003cp\u003eBased on event handlers\u003c/p\u003e\n    \u003cbutton slide-event\u003eprevious\u003c/button\u003e\n    \u003cbutton slide-event\u003enext\u003c/button\u003e\n    \u003cp\u003eOr specifically for changing views\u003c/p\u003e\n    \u003cbutton set-view\u003egrid\u003c/button\u003e\n    \u003cbutton set-view\u003elist\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/slide-deck\u003e\n```\n\nDefine a simple fallback view:\n\n```html\n\u003cstyle\u003e\n  slide-deck:not(:defined) {\n    display: grid;\n\n    \u003e * {\n      border-block-end: thin solid;\n    }\n  }\n\u003c/style\u003e\n```\n\nSet initial state with attributes,\nor define your own view:\n\n```html\n\u003cscript type=\"module\" src=\"slide-deck.js\"\u003e\u003c/script\u003e\n\n\u003cslide-deck key-control slide-view=\"fancy\"\u003e\n  \u003cheader\u003e\u003ch1\u003eListening for arrow keys\u003c/h1\u003e\u003c/header\u003e\n  \u003cdiv\u003e\u003ch2\u003eAnd using a fancy view\u003c/h2\u003e\u003c/div\u003e\n\u003c/slide-deck\u003e\n\u003cstyle\u003e\n  slide-deck[slide-view=\"fancy\"] {\n    outline: 1px solid red;\n  }\n\u003c/style\u003e\n```\n\n## Features\n\nThis Web Component allows you to:\n\n- Create web-based slides\n- Switch between different slide views\n- Control presentations with a remote, or a keyboard\n- Follow along in a second tab (speaker view)\n- Toggle full-screen mode\n\n## Keyboard Shortcuts\n\nAlways available:\n\n- `command-k`: Toggle control panel\n- `command-shift-enter`: Start presentation (from first slide)\n- `command-enter`: Resume presentation (from active slide)\n- `alt-enter`: Join presentation in speaker view (from active slide)\n\n*Windows and Linux users can use Ctrl instead of Command.*\n\nWhen presenting (`key-control` is active):\n\n- `N`/`rightArrow`/`downArrow`/`pageDown`: Next slide\n- `P`/`leftArrow`/`upArrow`/`pageUp`: Previous slide\n- `home`: First slide\n- `end`: Last slide\n- `W`/`,`: Toggle white screen\n- `B`/`.`: Toggle black screen\n- `escape`: Blur focused element or close control panel\n\nThese are based on\nthe [PowerPoint shortcuts](https://support.microsoft.com/en-us/office/use-keyboard-shortcuts-to-deliver-powerpoint-presentations-1524ffce-bd2a-45f4-9a7f-f18b992b93a0#bkmk_frequent_macos).\n\n## Installation\n\nYou have a few options (choose one of these):\n\n1. Install via [npm](https://www.npmjs.com/package/@oddbird/slide-deck): `npm install @oddbird/slide-deck`\n1. [Download the source manually from GitHub](https://github.com/oddbird/slide-deck/releases) into your project.\n1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)\n\n### Usage\n\nMake sure you include the `\u003cscript\u003e` in your project (choose one of these):\n\n```html\n\u003c!-- Host yourself --\u003e\n\u003clink rel=\"stylesheet\" href=\"slide-deck.css\"\u003e\n\u003cscript type=\"module\" src=\"slide-deck.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- 3rd party CDN, not recommended for production use --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://www.unpkg.com/@oddbird/slide-deck/slide-deck.css\"\u003e\n\u003cscript\n  type=\"module\"\n  src=\"https://www.unpkg.com/@oddbird/slide-deck/slide-deck.js\"\n\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- 3rd party CDN, not recommended for production use --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://esm.sh/@oddbird/slide-deck/slide-deck.css\"\u003e\n\u003cscript\n  type=\"module\"\n  src=\"https://esm.sh/@oddbird/slide-deck\"\n\u003e\u003c/script\u003e\n```\n\n## Credit\n\nWith thanks to the following people:\n\n- [David Darnes](https://darn.es/) for the\n  [Web Component repo template](https://github.com/daviddarnes/component-template)\n\n## Support\n\nAt OddBird,\nwe enjoy collaborating and contributing\nas part of an open web community.\nBut those contributions take time and effort.\nIf you're interested in supporting our\nopen-source work,\nconsider becoming a\n[GitHub sponsor](https://github.com/sponsors/oddbird),\nor contributing to our\n[Open Collective](https://opencollective.com/oddbird-open-source).\n\n❤️ Thanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fslide-deck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Fslide-deck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fslide-deck/lists"}