├── .circleci └── config.yml ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── MIGRATION.md ├── README.md ├── babel.config.js ├── cypress.json ├── cypress ├── integration │ └── hello.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── docs ├── Counter.js ├── ace.png ├── api.md ├── card.png ├── components.md ├── demo.mdx ├── exporting.md ├── gatsby.md ├── images │ ├── big.png │ ├── book.png │ ├── code.png │ ├── comic.png │ ├── condensed.png │ ├── dark.png │ ├── default.png │ ├── future.png │ ├── hack.png │ ├── lobster.png │ ├── notes.png │ ├── overview-mode.png │ ├── presenter-mode.png │ ├── rye.png │ ├── script.png │ ├── swiss.png │ └── yellow.png ├── layouts.md ├── package.json ├── presenting.md ├── themes.md └── theming.md ├── examples ├── README.md ├── aspect-ratio │ ├── deck.mdx │ └── package.json ├── basic │ ├── deck.mdx │ └── package.json ├── gatsby │ ├── decks │ │ ├── beep.mdx │ │ └── hello.mdx │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── pages │ │ └── index.mdx ├── head │ ├── deck.mdx │ └── package.json ├── header-footer │ ├── deck.mdx │ └── package.json ├── images │ ├── deck.mdx │ └── package.json ├── layouts │ ├── deck.mdx │ └── package.json ├── multiple │ ├── deck.js │ ├── one.mdx │ ├── package.json │ └── two.mdx ├── prism │ ├── deck.mdx │ └── package.json ├── provider │ ├── deck.mdx │ ├── package.json │ └── theme.js ├── steps │ ├── deck.mdx │ └── package.json ├── syntax-highlighting │ ├── deck.mdx │ └── package.json └── themes │ ├── deck.mdx │ ├── package.json │ └── theme.js ├── lerna.json ├── netlify.toml ├── package.json ├── packages ├── create-deck │ ├── README.md │ ├── cli.js │ └── package.json ├── gatsby-plugin │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── gatsby-ssr.js │ ├── index.js │ ├── package.json │ ├── src │ │ ├── clock.js │ │ ├── components.js │ │ ├── container.js │ │ ├── context.js │ │ ├── deck.js │ │ ├── footer.js │ │ ├── header.js │ │ ├── index.js │ │ ├── keyboard.js │ │ ├── modes.js │ │ ├── slide.js │ │ ├── split-slides.js │ │ ├── storage.js │ │ ├── theme.js │ │ ├── timer.js │ │ └── use-steps.js │ └── test │ │ ├── __snapshots__ │ │ └── components.js.snap │ │ ├── clock.js │ │ ├── components.js │ │ └── deck.js ├── gatsby-theme │ ├── .gitignore │ ├── README.md │ ├── decks │ │ ├── beep.mdx │ │ └── hello.mdx │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── gatsby-ssr.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── app.js │ │ ├── appear.js │ │ ├── clock.js │ │ ├── deck.js │ │ ├── decks.js │ │ ├── embed.js │ │ ├── full-screen-code.js │ │ ├── grid.js │ │ ├── head.js │ │ ├── horizontal.js │ │ ├── image.js │ │ ├── invert.js │ │ ├── notes.js │ │ ├── overview.js │ │ ├── presenter-footer.js │ │ ├── presenter.js │ │ ├── slide-list.js │ │ ├── slide.js │ │ ├── split-right.js │ │ ├── split.js │ │ ├── timer.js │ │ ├── wrapper.js │ │ └── zoom.js │ │ ├── constants.js │ │ ├── context.js │ │ ├── convert-legacy-theme.js │ │ ├── gatsby-plugin-theme-ui │ │ ├── components.js │ │ └── index.js │ │ ├── hooks │ │ ├── use-deck.js │ │ ├── use-keyboard.js │ │ ├── use-steps.js │ │ ├── use-storage.js │ │ └── use-swipe.js │ │ ├── index.js │ │ ├── navigate.js │ │ ├── split-slides.js │ │ └── templates │ │ ├── deck.js │ │ └── decks.js ├── mdx-deck │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── cli.js │ ├── gatsby-config.js │ ├── hello.mdx │ ├── index.js │ └── package.json ├── starter │ ├── decks │ │ └── .gitkeep │ ├── gatsby-config.js │ └── package.json ├── themes │ ├── README.md │ ├── base.js │ ├── big.js │ ├── book.js │ ├── code.js │ ├── comic.js │ ├── condensed.js │ ├── dark.js │ ├── future.js │ ├── index.js │ ├── lobster.js │ ├── notes.js │ ├── package.json │ ├── poppins.js │ ├── script.js │ ├── swiss.js │ ├── syntax-highlighter-prism.js │ ├── syntax-highlighter.js │ └── yellow.js └── website-pdf │ ├── .gitignore │ ├── README.md │ ├── cli.js │ ├── index.js │ └── package.json ├── templates └── basic │ ├── .gitignore │ ├── README.md │ ├── deck.mdx │ ├── package.json │ └── theme.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | # - image: circleci/node:10 11 | - image: cypress/base:10 12 | 13 | # Specify service dependencies here if necessary 14 | # CircleCI maintains a library of pre-built images 15 | # documented at https://circleci.com/docs/2.0/circleci-images/ 16 | # - image: circleci/mongo:3.4.4 17 | 18 | working_directory: ~/repo 19 | 20 | steps: 21 | - checkout 22 | 23 | # Download and cache dependencies 24 | - restore_cache: 25 | keys: 26 | - v1-dependencies-{{ checksum "package.json" }} 27 | # fallback to using the latest cache if no exact match is found 28 | - v1-dependencies- 29 | 30 | - run: yarn 31 | 32 | - save_cache: 33 | paths: 34 | - node_modules 35 | key: v1-dependencies-{{ checksum "package.json" }} 36 | 37 | # run tests! 38 | - run: yarn test 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | public 3 | coverage 4 | node_modules 5 | package-lock.json 6 | public 7 | .cache 8 | cypress/videos 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5", 5 | "jsxBracketSameLine": true 6 | } 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Unreleased 4 | 5 | - Add missing dependency 6 | 7 | ## v4.1.0 8 | 9 | - Update colors on notes theme 10 | - Add support for static asset directory 11 | 12 | ## v4.0.0 13 | 14 | - Refactored implementation for `mdx-deck` CLI 15 | - New `Header` and `Footer` components for adding persistent header and footer content 16 | - **Deprecated:** CLI `eject` command 17 | - **Deprecated:** Swipe gestures - to be replaced with new UI 18 | - **Deprecated:** Title is no longer inferred from first heading 19 | - **Deprecated:** `export const themes` has been removed - merge themes in a separate module if needed 20 | - **Deprecated:** Functional themes are no longer supported, merge themes in a separate module if needed 21 | - **Deprecated:** `theme.Provider` - use `Header` and `Footer` components instead 22 | - **Deprecated:** Fixed aspect ratio has been removed 23 | - Bug fixes 24 | - Update dependencies 25 | - **Deprecated:** `gatsby-theme-mdx-deck`: no longer resolves title from first heading 26 | 27 | ## v3.1.0 2020-02-01 28 | 29 | - Update dependencies 30 | - Adjust schema customization in Gatsby theme 31 | 32 | ## v3.0.13 2019-09-23 33 | 34 | - Adjust Gatsby content digest 35 | 36 | ## v3.0.12 2019-09-23 37 | 38 | - Update dependencies 39 | 40 | ## v3.0.11 2019-09-10 41 | 42 | - Add support for up and down keys #467 43 | - Fix for double slash in print route #473 44 | 45 | ## v3.0.10 2019-09-05 46 | 47 | - Add remark-import-code #457 48 | - Fix pathname in windows #465 49 | 50 | ## v3.0.9 2019-08-05 51 | 52 | - Fix for remounting component #428 53 | 54 | ## v3.0.8 2019-07-28 55 | 56 | - Add support for Gatsby `pathPrefix` option 57 | 58 | ## v3.0.0 2019-07-16 59 | 60 | - Refactored to leverage Gatsby 61 | - Rewritten CLI based on Gatsby 62 | - Updated Gatsby theme to allow for component shadowing 63 | - Gatsby theme has been renamed to `gatsby-theme-mdx-deck` 64 | - Now uses [Theme UI](https:/theme-ui.com) for theming 65 | - Improved touchscreen and mobile views 66 | - Deprecated: 67 | - `@mdx-deck/components` 68 | - `@mdx-deck/layouts` 69 | - `@mdx-deck/loader` 70 | - `@mdx-deck/mdx-plugin` 71 | - `@mdx-deck/webpack-html-plugin` 72 | 73 | See the [Migration](MIGRATION.md) docs for more 74 | 75 | ## v2.5.1 2019-07-16 76 | 77 | - Fix loader #357 78 | 79 | ## v2.5.0 2019-07-07 80 | 81 | - Update Gatsby theme to official API #389 #387 #385 82 | - Update docs #382 83 | 84 | ## v2.4.0 2019-06-19 85 | 86 | - Add `useTheme` hook to API #359 87 | - Makes presenter mode themeable #366 88 | - Add support for `--webpack` flag #369 89 | 90 | ## v2.3.2 2019-04-21 91 | 92 | - Fixed issue when Head only had one element #345 93 | 94 | ## v2.3.1 2019-04-21 95 | 96 | - Add experimental support for fluid aspect ratios #342 97 | 98 | ## v2.3.0 2019-04-20 99 | 100 | - Refactor localStorage to use hooks #334 101 | - Refactor keyboard shortcuts #335 102 | - Refactor query string to use hooks #336 103 | - Refactor to use hooks #337 104 | - Adds `MDXDeckState` provider component 105 | - Fixes an issue with rerenders in Gatsby theme 106 | - Adjusts styles in grid mode 107 | - Refactors `useSteps` to use effect hook 108 | 109 | ## v2.2.3 2019-04-20 110 | 111 | - Refactor Head component #329 112 | 113 | ## v2.2.2 2019-04-20 114 | 115 | - Fix typos #333 116 | - Refactor themes for better bundle sizes #328 117 | 118 | ## v2.2.1 2019-04-15 119 | 120 | - Add support for page up/down keys #319 121 | - Fix: remove global styles from Embed component #331 122 | 123 | ## v2.2.0 2019-04-13 124 | 125 | - Add Embed component #323 126 | - Adjust context passed to Slide component 127 | - Add default props to Slide to show all Appear steps 128 | - Adds header and footer components for shadowing in Gatsby theme 129 | - Refactor and clean up code 130 | 131 | ## v2.1.4 2019-04-12 132 | 133 | - Add `mdx` option to Gatsby theme #325 134 | 135 | ## v2.1.3 2019-04-12 136 | 137 | - Update docs for Gatsby theme #324 138 | 139 | ## v2.1.2 2019-04-12 140 | 141 | - Bump dependencies to MDX 1.0.0 #322 142 | 143 | ## v2.1.1 2019-04-11 144 | 145 | - Add support for single deck mode in Gatsby theme #320 146 | 147 | ## v2.1.0 2019-04-11 148 | 149 | - Added Gatsby theme #318 150 | 151 | ## v2.0.9 2019-04-05 152 | 153 | - Rename internal const #312 154 | 155 | ## v2.0.8 2019-04-05 156 | 157 | - Update MDX #311 158 | 159 | ## v2.0.7 2019-04-05 160 | 161 | - Add `--no-html` flag back #295 162 | 163 | ## v2.0.6 2019-03-28 164 | 165 | - Pin alpha version of MDX #302 166 | 167 | ## v2.0.5 2019-03-23 168 | 169 | - Update remark-unwrap-images #289 170 | - Update webpack config merging #290 171 | 172 | ## v2.0.4 2019-03-23 173 | 174 | - Fix for css-loader #288 175 | 176 | ## v2.0.3 2019-03-23 177 | 178 | - Fix for building decks with Google Fonts #287 179 | 180 | ## v2.0.2 2019-03-23 181 | 182 | - Fix syntax error in theme #286 183 | 184 | ## v2.0.1 2019-03-23 185 | 186 | - Add language support to syntax highlighter themes #278 187 | 188 | ## v2.0.0 2019-03-16 189 | 190 | - Simplified custom mdx loader, removing unused front-matter support 191 | - Simplified theming and default styles 192 | - Removes default Provider component with dot indicator 193 | - Uses Reach Router - resolves issues with focus trapping 194 | - Removed PDF export and screenshots from core CLI - now available with the `@mdx-deck/export` package 195 | - Removed built-in syntax highlighting 196 | - Removed `notes` language attribute for fenced code blocks 197 | - Refactored dev server 198 | 199 | ## v1.10.2 2019-03-10 200 | 201 | - Fix bad release 202 | 203 | ## v1.10.1 2019-03-10 204 | 205 | - Prevent Appear children from disappearing during slide transition #253 206 | 207 | ## v1.10.0 2019-02-18 208 | 209 | - Update to Babel 7 210 | 211 | ## v1.9.0 2019-02-18 212 | 213 | - Fix for font size in nested lists #204 214 | - Add `--hot-port` option to CLI #206 215 | - Add support for `.jsx` file extensions #239 216 | - Fix typos in syntax highlighting component #250 217 | - Add context to grid view #187 218 | - Add `--no-sandbox` option to CLI #200 219 | - Surface compilation errors from webpack #252 220 | 221 | ## v1.8.2 2018-12-04 222 | 223 | - Bugfix for window check 224 | 225 | ## v1.8.1 2018-11-27 226 | 227 | - Show Appear children in PDF export 228 | 229 | ## v1.8.0 2018-11-27 230 | 231 | - Adds button to open new window for presenting in presenter mode 232 | 233 | ## v1.7.14 2018-11-18 234 | 235 | - Fix typo in SlideDeck 236 | 237 | ## v1.7.13 2018-11-18 238 | 239 | - Add overflow auto to FullScreenCode 240 | 241 | ## v1.7.12 2018-11-18 242 | 243 | - Keep styles intact for Appear children 244 | - Fix prop types for Appear component 245 | - Add missing CLI option to docs 246 | 247 | ## v1.7.11 2018-11-18 248 | 249 | - Update remark-unwrap-images 250 | 251 | ## v1.7.10 2018-11-12 252 | 253 | - Update dependencies 254 | 255 | ## v1.7.9 2018-11-12 256 | 257 | - Update dependencies 258 | 259 | ## v1.7.8 2018-11-12 260 | 261 | - Fix typo in Root prop types 262 | - Edit docs 263 | 264 | ## v1.7.7 2018-09-22 265 | 266 | - Remove overflow hidden styles from body 267 | - Adds prettier 268 | 269 | ## v1.7.6 2018-09-22 270 | 271 | - Changes styles to use `translate3d` 272 | - Add support for page up and page down keys 273 | 274 | ## v1.7.5 2018-09-22 275 | 276 | - Add `Horizontal` layout component 277 | 278 | ## v1.7.4 2018-09-15 279 | 280 | - Add `--host` option 281 | 282 | ## v1.7.3 2018-09-05 283 | 284 | - Fix swipe direction on touchscreens 285 | 286 | ## v1.7.1 2018-08-30 287 | 288 | - Fix for localStorage updater 289 | 290 | ## v1.7.0 2018-08-29 291 | 292 | - Adds support for stepping through Appear component with left and right arrows #144 293 | - Refactor internal context 294 | 295 | ## v1.6.9 2018-08-27 296 | 297 | - Adds support for custom webpack configs #136 298 | 299 | ## v1.6.8 2018-08-27 300 | 301 | - Fixes `build` when using Notes or Appear components #138 302 | - Fixes slide number in presenter mode #142 303 | 304 | ## v1.6.7 2018-08-25 305 | 306 | - Use `mkdirp` for build and export 307 | - Adds ability to change slide transition timing function and duration via themes 308 | 309 | ## v1.6.6 2018-08-25 310 | 311 | - Left align text in code blocks #130 312 | - Extract static CSS on build #129 313 | - Adds `--no-html` option for client-side only builds 314 | 315 | ## v1.6.5 2018-08-25 316 | 317 | - Adjust slide number in overview mode #122 318 | 319 | ## v1.6.4 2018-08-18 320 | 321 | - Add respository field to package.json #117 322 | - Remove trailing comma in function arguments #115 323 | 324 | ## v1.6.3 2018-08-16 325 | 326 | - Disable swiping with mouse #113 327 | 328 | ## v1.6.2 2018-08-15 329 | 330 | - Adjust import/export parsing in loader #110 331 | 332 | ## v1.6.1 2018-08-15 333 | 334 | - Add missing `babel-core` dependency 335 | 336 | ## v1.6.0 2018-08-14 337 | 338 | - Adds `Head` component for setting document head 339 | - Adds screenshot command to create a screenshot of the first slide 340 | - Removes the `--title` option in favor of using the `Head` component 341 | 342 | ## v1.5.15 2018-08-11 343 | 344 | - Adds swipe gesture support for touchscreen devices 345 | - Fixes URL bug when initializing mode 346 | - Fixes bug previous/next buttons are not rendered 347 | - Prevents last slide from cycling back to the beginning 348 | 349 | ## v1.5.14 2018-08-10 350 | 351 | - Adds `size` prop to Image component 352 | 353 | ## v1.5.13 2018-08-10 354 | 355 | - Fixes an issue where speaker notes would incorrectly show on the wrong slide 356 | 357 | ## v1.5.12 2018-08-10 358 | 359 | - Add FullScreenCode layout component 360 | 361 | ## v1.5.11 2018-08-10 362 | 363 | - Adjust querystring updater to fix mode showing as undefined 364 | 365 | ## v1.5.10 2018-08-05 366 | 367 | - Update overview mode styles 368 | - Add grid view mode 369 | - Update docs 370 | 371 | ## v1.5.9 2018-08-05 372 | 373 | - Update docs 374 | 375 | ## v1.5.8 2018-08-05 376 | 377 | - Add support for `components` and `Provider` in themes 378 | 379 | ## v1.5.7 2018-08-05 380 | 381 | - Add more built-in themes 382 | 383 | ## v1.5.6 2018-08-05 384 | 385 | - Add invisible buttons to left and right for use on mobile devices 386 | 387 | ## v1.5.5 2018-08-05 388 | 389 | - Update docs 390 | 391 | ## v1.5.4 2018-08-04 392 | 393 | - Add docs for syntax highlighting 394 | 395 | ## v1.5.3 2018-08-04 396 | 397 | - Add overview mode to see multiple slides at once 398 | - Add default layouts for inverting colors and creating a split layout slide 399 | 400 | ## v1.5.2 2018-08-04 401 | 402 | - Add default styles for tables 403 | 404 | ## v1.5.1 2018-08-04 405 | 406 | - Use remark-unwrap-images plugin 407 | 408 | ## v1.5.0 2018-08-04 409 | 410 | - Add syntax highlighting option for fenced code blocks 411 | 412 | ## v1.4.4 2018-08-04 413 | 414 | - Fix for how Appear children display on slide change 415 | 416 | ## v1.4.3 2018-08-04 417 | 418 | - Update build setup for smaller package 419 | - Adjust keyboard shortcuts 420 | 421 | ## v1.4.2 2018-08-03 422 | 423 | - Update ok-cli for better HTML output 424 | 425 | ## v1.4.1 2018-08-03 426 | 427 | - Update docs 428 | - Add `yellow` theme 429 | 430 | ## v1.4.0 2018-08-03 431 | 432 | - Adds Appear component 433 | - Adds propTypes to components 434 | - Update README 435 | 436 | ## v1.3.2 2018-08-02 437 | 438 | - Remove default `target="_blank"` from links 439 | - Move custom Provider component into app 440 | 441 | ## v1.3.1 2018-08-02 442 | 443 | - Add speaker notes markdown syntax and component 444 | 445 | ## v1.3.0 2018-08-02 446 | 447 | - Add presenter mode with preview of next slide and timer 448 | 449 | ## v1.2.3 2018-08-01 450 | 451 | - Fix `history.pushState` hash 452 | 453 | ## v1.2.2 2018-07-31 454 | 455 | - Update dev server for static file server 456 | 457 | ## v1.2.1 2018-07-31 458 | 459 | - Merge custom components with defaults 460 | 461 | ## v1.2.0 2018-07-31 462 | 463 | - Add PDF export to CLI 464 | 465 | ## v1.1.3 2018-07-31 466 | 467 | - Add emoji support 468 | - Update `.npmignore` 469 | 470 | ## v1.1.2 2018-07-31 471 | 472 | - Fix `--no-open` option 473 | - Add ability to ignore key events 474 | - Normalize newlines for cross-platform compatibility 475 | 476 | ## v1.1.1 2018-07-31 477 | 478 | - Fix for supporting markdown tables 479 | 480 | ## v1.1.0 2018-07-30 481 | 482 | - Updated styles and theming 483 | - Updated docs 484 | 485 | ## v1.0.3 2018-07-29 486 | 487 | - Updated docs 488 | 489 | ## v1.0.2 2018-07-29 490 | 491 | - Add hashchange listeners 492 | 493 | ## v1.0.1 2018-07-29 494 | 495 | - Fix for `--out-dir` CLI flag 496 | 497 | ## v1.0.0 2018-07-29 498 | 499 | Initial release 500 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for contributing! 4 | 5 | Please take a look at the issues and PRs to see if there's already some discussion around any contribution you'd like to make. 6 | If you'd like to make a significant change to the code base, please open an issue for discussion first, 7 | otherwise we'd love to have your help! 8 | 9 | ## Development 10 | 11 | This project is set up as a monorepo using Yarn Workspaces. 12 | 13 | 1. Clone the repo 14 | 2. Install dependencies with `yarn` 15 | 3. Run `yarn start` to see the demo `docs/demo.mdx` 16 | 17 | ### Watch mode 18 | 19 | To watch files for changes during development, run `npm run watch` 20 | 21 | ## Testing 22 | 23 | Tests are located in each package. 24 | 25 | Run `yarn test` 26 | 27 | - Watch Mode: `yarn test --watch` 28 | - Coverage: `yarn test --coverage` 29 | 30 | --- 31 | 32 | # Contributor Covenant Code of Conduct 33 | 34 | ## Our Pledge 35 | 36 | In the interest of fostering an open and welcoming environment, we as 37 | contributors and maintainers pledge to making participation in our project and 38 | our community a harassment-free experience for everyone, regardless of age, body 39 | size, disability, ethnicity, sex characteristics, gender identity and expression, 40 | level of experience, education, socio-economic status, nationality, personal 41 | appearance, race, religion, or sexual identity and orientation. 42 | 43 | ## Our Standards 44 | 45 | Examples of behavior that contributes to creating a positive environment 46 | include: 47 | 48 | - Using welcoming and inclusive language 49 | - Being respectful of differing viewpoints and experiences 50 | - Gracefully accepting constructive criticism 51 | - Focusing on what is best for the community 52 | - Showing empathy towards other community members 53 | 54 | Examples of unacceptable behavior by participants include: 55 | 56 | - The use of sexualized language or imagery and unwelcome sexual attention or 57 | - advances 58 | - Trolling, insulting/derogatory comments, and personal or political attacks 59 | - Public or private harassment 60 | - Publishing others' private information, such as a physical or electronic 61 | - address, without explicit permission 62 | - Other conduct which could reasonably be considered inappropriate in a 63 | professional setting 64 | 65 | ## Our Responsibilities 66 | 67 | Project maintainers are responsible for clarifying the standards of acceptable 68 | behavior and are expected to take appropriate and fair corrective action in 69 | response to any instances of unacceptable behavior. 70 | 71 | Project maintainers have the right and responsibility to remove, edit, or 72 | reject comments, commits, code, wiki edits, issues, and other contributions 73 | that are not aligned to this Code of Conduct, or to ban temporarily or 74 | permanently any contributor for other behaviors that they deem inappropriate, 75 | threatening, offensive, or harmful. 76 | 77 | ## Scope 78 | 79 | This Code of Conduct applies both within project spaces and in public spaces 80 | when an individual is representing the project or its community. Examples of 81 | representing a project or community include using an official project e-mail 82 | address, posting via an official social media account, or acting as an appointed 83 | representative at an online or offline event. Representation of a project may be 84 | further defined and clarified by project maintainers. 85 | 86 | ## Enforcement 87 | 88 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 89 | reported by contacting the project team at jxnblk@gmail.com. All 90 | complaints will be reviewed and investigated and will result in a response that 91 | is deemed necessary and appropriate to the circumstances. The project team is 92 | obligated to maintain confidentiality with regard to the reporter of an incident. 93 | Further details of specific enforcement policies may be posted separately. 94 | 95 | Project maintainers who do not follow or enforce the Code of Conduct in good 96 | faith may face temporary or permanent repercussions as determined by other 97 | members of the project's leadership. 98 | 99 | ## Attribution 100 | 101 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 102 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 103 | 104 | [homepage]: https://www.contributor-covenant.org 105 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | Copyright (c) 2018 Brent Jackson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | -------------------------------------------------------------------------------- /MIGRATION.md: -------------------------------------------------------------------------------- 1 | # Migration 2 | 3 | ## Upgrading to MDX Deck v4 4 | 5 | For simple decks, upgrading to v4 should not require any major changes and should help resolve an issue when making changes to a file while the development server is running. 6 | 7 | - If you are using a custom `Provider` component, replace this component with the new `Header` and `Footer` components 8 | - Note that some functionality previously available in the Provider component is no longer possible 9 | - Replace any instance of the `Appear` component with the new `Steps` component. This should be a 1:1 change. 10 | - The document title is no longer inferred from the first heading. Use the `Head` component with a `` element instead. 11 | - Merging multiple themes using `export const themes` is no longer supported. Merge themes in a separate file, if necessary. 12 | - Functional themes are no longer supported. 13 | - Fixed aspect ratio is no longer supported. 14 | - Swipe gestures have been removed; these will be reintroduced in a later version. 15 | - If you are using `gatsby-theme-mdx-deck` directly, no major changes have been made to this package. 16 | 17 | ## Upgrading to MDX Deck v3 18 | 19 | - The `export default` syntax for slide layouts is no longer supported. Replace this syntax with the layout component wrapped around the slide content instead. 20 | - The following packages have been deprecated. Import components directly from the `mdx-deck` package instead. 21 | - `@mdx-deck/components` 22 | - `@mdx-deck/layouts` 23 | - `@mdx-deck/mdx-plugin` 24 | - `@mdx-deck/loader` 25 | - `@mdx-deck/webpack-html-plugin` 26 | - The Gatsby theme package as been renamed: `gatsby-theme-mdx-deck` 27 | - Theming now uses [Theme UI][], and the theme format has changed. 28 | - See the [theming docs](/docs/theming.md) for information on creating custom themes. 29 | - **Or** use the `convertLegacyTheme` utility to shim themes written in the v2 format 30 | - The standalone CLI has been rewritten with Gatsby, and the following CLI flags are no longer supported: 31 | - `--webpack` - use the Gatsby theme directly to customize webpack features 32 | - `--out-dir` - decks are now built in the `public/` directory 33 | - `--no-html` - individual slides are rendered client side, but the first slide is always rendered as static HTML using Gatsby 34 | - Custom `Presenter` components can no longer be added to a theme. Use the component shadowing API with the Gatsby theme instead. 35 | - Multiple MDX files can no longer be combined into a single presentation 36 | 37 | [theme ui]: https://theme-ui.com 38 | 39 | ## Upgrading to MDX Deck v2 40 | 41 | With a few exceptions, decks created with v1 should be compatible with v2. The following is a list of steps to ensure your slide deck will work with v2. 42 | 43 | ### Slide separator spacing 44 | 45 | With v2, MDX Deck now splits slides based on the Remark AST's `thematicBreak` node. This means that the `---` (`<hr>`) used for splitting slides **must** have empty newlines surrounding it due to markdown syntax. 46 | 47 | For example, the following **will not** be split into a new slide, but instead will be treated as a Setext-style heading: 48 | 49 | ```md 50 | Hello 51 | --- 52 | Not another slide 53 | ``` 54 | 55 | To fix this, be sure all slides are separated with empty newlines around the `---`: 56 | 57 | ```md 58 | Hello 59 | 60 | --- 61 | 62 | Another slide 63 | ``` 64 | 65 | ### Syntax Highlighting 66 | 67 | In v1, `react-syntax-highligher` was bundled with the `mdx-deck` package. This not only led to larger install sizes for people who were not using syntax highlighting, but also limited the API available and prevented the ability to update the syntax highlighting package separately from MDX Deck. 68 | 69 | To enable syntax highlighting in v2, it's recommended to create a syntax highlighting theme that consists of one custom `code` component and use [composable themes][] to enable syntax highlighting with other themes. 70 | 71 | [composable themes]: docs/theming.md#composing-themes 72 | 73 | ### Custom Layouts 74 | 75 | If you've built custom layout components for your deck, the `children` prop should now be a flatter array of direct child elements from the slide. 76 | 77 | For example, if you previously parsed children in your layout component, you should make the following change: 78 | 79 | ```jsx 80 | // v1 81 | const children = React.Children.toArray(props.children.props.children) 82 | ``` 83 | 84 | ```jsx 85 | // updated for v2 86 | const children = React.Children.toArray(props.children) 87 | ``` 88 | 89 | ### Theming 90 | 91 | If you've built a custom theme, some of the theming API has changed. 92 | Please refer to the [theming docs](docs/theming.md) for more info, and note that MDX Deck now uses [Emotion][] for theming. 93 | 94 | ### Third-Party Components 95 | 96 | Some third-party components that rely on MDX Deck internal APIs _may_ not work with v2 yet. Please be patient and give library authors time to release new versions that are compatible with v2. 97 | 98 | If you absolutely must use one of these libraries, you can continue to use v1 for the time being. 99 | 100 | ### Library Authors 101 | 102 | If you've built a library or component that is meant for use with MDX Deck and relied on its internal state, you can try leveraging the new `useSteps` React hook available in the `@mdx-deck/components` package. 103 | 104 | Feel free to reach out by opening an issue for any assistance in upgrading your library to work with this library's internal APIs. 105 | 106 | [emotion]: https://emotion.sh 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/mdx-deck/README.md -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | '@babel/preset-react', 5 | ], 6 | } 7 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:8000/" 3 | } 4 | -------------------------------------------------------------------------------- /cypress/integration/hello.js: -------------------------------------------------------------------------------- 1 | context('MDX Deck', () => { 2 | beforeEach(() => { 3 | cy.visit('http://localhost:8000') 4 | }) 5 | 6 | it('opens', () => { 7 | cy.visit('http://localhost:8000') 8 | }) 9 | 10 | it('contains the title', () => { 11 | cy.contains('MDX Deck') 12 | }) 13 | 14 | /* doesn't work?? */ 15 | it('goes to the next slide', () => { 16 | cy.get('body') 17 | .trigger('keydown', { 18 | keyCode: 39, 19 | }) 20 | .contains('Presentation') 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /docs/Counter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from '@emotion/styled' 3 | import { space, color } from 'styled-system' 4 | 5 | const Root = styled.div({ 6 | display: 'flex', 7 | alignItems: 'center', 8 | }) 9 | 10 | const Button = styled.button( 11 | { 12 | appearance: 'none', 13 | fontFamily: 'inherit', 14 | fontSize: 'inherit', 15 | fontWeight: 'bold', 16 | borderRadius: '4px', 17 | border: 'none', 18 | width: '2em', 19 | '&:focus': { 20 | outline: 'none', 21 | boxShadow: '0 0 0 2px magenta', 22 | }, 23 | }, 24 | space, 25 | color 26 | ) 27 | Button.defaultProps = { 28 | m: 0, 29 | px: 3, 30 | py: 2, 31 | color: 'background', 32 | bg: 'text', 33 | } 34 | 35 | const Samp = styled.samp(space) 36 | 37 | export default class Counter extends React.Component { 38 | state = { 39 | count: 0, 40 | } 41 | 42 | inc = () => { 43 | this.setState(state => ({ count: state.count + 1 })) 44 | } 45 | 46 | dec = () => { 47 | this.setState(state => ({ count: state.count - 1 })) 48 | } 49 | 50 | render() { 51 | return ( 52 | <Root> 53 | <Button ml="auto" onClick={this.dec}> 54 | - 55 | </Button> 56 | <Samp mx={3}>{this.state.count}</Samp> 57 | <Button mr="auto" onClick={this.inc}> 58 | + 59 | </Button> 60 | </Root> 61 | ) 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /docs/ace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/ace.png -------------------------------------------------------------------------------- /docs/api.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | ## Components 4 | 5 | - `Head`: Adds elements to the document `<head>` 6 | - `Notes`: Adds speaker notes to a slide 7 | - `Steps`: Steps through child elements one-by-one 8 | 9 | 10 | ## `useSteps` 11 | 12 | The `useSteps` hook can be used to register custom components that rely on multiple "steps" within a single slide, 13 | similar to the Appear component. 14 | The hook takes one argument for the total `length` of steps and returns the current `step` state. 15 | 16 | ```jsx 17 | // example 18 | import React from 'react' 19 | import { useSteps } from 'mdx-deck' 20 | 21 | export default props => { 22 | const length = 4 23 | const step = useSteps(length) 24 | 25 | return ( 26 | <h2> 27 | The current step is {step}/{length} 28 | </h2> 29 | ) 30 | } 31 | ``` 32 | 33 | ## `useDeck` 34 | 35 | The `useDeck` hook returns the MDX Deck state. 36 | 37 | -------------------------------------------------------------------------------- /docs/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/card.png -------------------------------------------------------------------------------- /docs/components.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | MDX Deck includes components to help with creating presentations. 4 | These components are provided with MDX's *shortcodes* functionality, so they do not need to be imported. 5 | 6 | ## Head 7 | 8 | Use the `Head` component to set content in the document head. 9 | 10 | ```mdx 11 | // example for twitter cards 12 | 13 | <Head> 14 | <title>My Presentation 15 | 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | ## Notes 24 | 25 | Speaker notes that only show in presenter mode can be added to any slide with the `Notes` component. 26 | 27 | ```mdx 28 | # Slide Content 29 | 30 | 31 | 32 | - Only visible in presenter mode 33 | - Markdown syntax can be used with empty lines around the content 34 | 35 | 36 | ``` 37 | 38 | ## Header 39 | 40 | Use the `Header` component to render a persistent header (at the top of the screen) across the entire presentation. 41 | 42 | ```mdx 43 |
44 | 45 | Put a logo, handle, or something else here... 46 | 47 |
48 | 49 | # My Presentation 50 | 51 | ``` 52 | 53 | ## Footer 54 | 55 | The `Footer` component renders a persistent footer (at the bottom of the screen) across the entire presentation. 56 | 57 | ```mdx 58 | 63 | 64 | # My Presentation 65 | 66 | ``` 67 | 68 | ## Steps 69 | 70 | Use the `Steps` (formerly `Appear`) component to make child elements appear one at a time within a single slide. 71 | Use the left and right arrow keys to step through each element. 72 | 73 | ```mdx 74 | 75 | 76 | 77 | - One 78 | - Two 79 | - Three 80 | - Four 81 | 82 | 83 | ``` 84 | 85 | Internally, the `Steps` component uses the `useSteps` hook, which can be used to build custom components with similar behavior. 86 | 87 | 88 | 134 | -------------------------------------------------------------------------------- /docs/demo.mdx: -------------------------------------------------------------------------------- 1 | import Counter from './Counter' 2 | 3 | 4 | MDX Deck 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | # MDX Deck 13 | 14 | MDX-based presentation decks 15 | 16 | --- 17 | 18 | # Presentation decks 19 | 20 | --- 21 | 22 | # Built with [MDX][] 23 | [MDX]: https://github.com/mdx-js/mdx 24 | 25 | --- 26 | 27 | ### Import and Use React Components 28 | 29 | 30 | 31 | --- 32 | 33 | - Make bulleted lists 34 | - To help make your point 35 | 36 | --- 37 | 38 | ## Getting Started 39 | 40 | 1. `npm i -D mdx-deck` 41 | 2. Write in markdown and JSX 42 | 3. Present 43 | 44 | --- 45 | 46 | ## Features 47 | 48 | - Presenter Mode 49 | - Speaker Notes 50 | - Theming 51 | 52 | --- 53 | 54 | ```jsx 55 | 56 | ``` 57 | 58 | 59 | 60 | - These are speaker notes 61 | - And they won't be rendered in your slide 62 | 63 | 64 | 65 | --- 66 | 67 | ```jsx 68 | class extends React.Component { 69 | render () { 70 | return ( 71 | 72 |

Indented code

73 | 74 | ) 75 | } 76 | } 77 | ``` 78 | 79 | --- 80 | 81 | > “Blockquotes are essential to any good presentation” 82 | 83 | – Anonymous 84 | 85 | 86 | 90 | 91 | 92 | --- 93 | 94 | ### Steps Component 95 | 96 | 97 | 98 | - One 99 | - Two 100 | - Three 101 | - Four 102 | 103 | 104 | 105 | --- 106 | 107 | 108 | 109 | 110 | Testing object fit 111 | 112 | 113 | --- 114 | 115 | 116 | 117 | --- 118 | 119 | ![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&h=1024&q=20&fit=crop) 120 | 121 | Inline image 122 | 123 | --- 124 | 125 | Prop | Type | Description 126 | ---|---|--- 127 | `width` | number, string, or array | sets element width 128 | `color` | string | sets foreground color 129 | `bg` | string | sets background color 130 | 131 | --- 132 | 133 | 134 | 135 | # Get started :sunglasses: 136 | 137 | [GitHub](https://github.com/jxnblk/mdx-deck) 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /docs/exporting.md: -------------------------------------------------------------------------------- 1 | # Exporting 2 | 3 | ## Static Build 4 | 5 | To export your deck as a static HTML page with JS bundle, 6 | add a `build` script to your `package.json` file. 7 | 8 | ```json 9 | "scripts": { 10 | "build": "mdx-deck build deck.mdx" 11 | } 12 | ``` 13 | 14 | ## PDF 15 | 16 | To export a deck as PDF, use the [`website-pdf`](https://www.npmjs.com/package/website-pdf) CLI. 17 | Start the MDX Deck dev server, 18 | then run the following command to create a PDF: 19 | 20 | ```sh 21 | npx website-pdf http://localhost:8000/print -o deck.pdf 22 | ``` 23 | 24 | ## PNG 25 | 26 | To export a PNG image, use the [`capture-website-cli`](https://github.com/sindresorhus/capture-website-cli) CLI. 27 | Start the dev server, then run the following: 28 | 29 | ```sh 30 | npx capture-website-cli http://localhost:8000 deck.png 31 | ``` 32 | 33 | ## Open Graph Image 34 | 35 | To add an open graph image, use the [Head](components.md#Head) component to add a meta tag. 36 | Note that the meta tag should point to a full URL, including schema and domain name. 37 | 38 | ```mdx 39 | import { Head } from 'mdx-deck' 40 | 41 | 42 | 43 | 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/gatsby.md: -------------------------------------------------------------------------------- 1 | 2 | # Usage with Gatsby 3 | 4 | MDX Deck includes a Gatsby theme, which can be used in any existing Gatsby site. 5 | This means you can install MDX Deck as a theme within an existing Gatsby site to include presentations along with other content, such as a landing page or blog. 6 | The theme also supports adding multiple presentations to a single site. 7 | 8 | Install the theme in your Gatsby site. 9 | 10 | ```sh 11 | npm i gatsby-theme-mdx-deck 12 | ``` 13 | 14 | Add the theme to the `plugins` array in your configuration. 15 | 16 | ```js 17 | // gatsby-config.js 18 | module.exports = { 19 | plugins: [ 20 | 'gatsby-theme-mdx-deck', 21 | ] 22 | } 23 | ``` 24 | 25 | Create a directory to store your presentations. 26 | 27 | ```sh 28 | mkdir decks 29 | ``` 30 | 31 | Add MDX Deck presentations to this directory. 32 | Each deck will create a new page using the filename as its route. 33 | 34 | ```mdx 35 | 36 | 37 | # Hello 38 | 39 | --- 40 | 41 | This is my presentation 42 | ``` 43 | 44 | After running `gatsby develop`, this presentation should be viewable at `http://localhost:8000/hello` . 45 | 46 | ## Component Shadowing 47 | 48 | Because MDX Deck is built as a Gatsby theme, you can leverage the component shadowing API to override any part of the interface 49 | and create child themes based on MDX Deck that provide custom behavior. 50 | 51 | See the [gatsby-theme-mdx-deck](../packages/gatsby-theme) docs for more documentation and options. 52 | -------------------------------------------------------------------------------- /docs/images/big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/big.png -------------------------------------------------------------------------------- /docs/images/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/book.png -------------------------------------------------------------------------------- /docs/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/code.png -------------------------------------------------------------------------------- /docs/images/comic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/comic.png -------------------------------------------------------------------------------- /docs/images/condensed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/condensed.png -------------------------------------------------------------------------------- /docs/images/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/dark.png -------------------------------------------------------------------------------- /docs/images/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/default.png -------------------------------------------------------------------------------- /docs/images/future.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/future.png -------------------------------------------------------------------------------- /docs/images/hack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/hack.png -------------------------------------------------------------------------------- /docs/images/lobster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/lobster.png -------------------------------------------------------------------------------- /docs/images/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/notes.png -------------------------------------------------------------------------------- /docs/images/overview-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/overview-mode.png -------------------------------------------------------------------------------- /docs/images/presenter-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/presenter-mode.png -------------------------------------------------------------------------------- /docs/images/rye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/rye.png -------------------------------------------------------------------------------- /docs/images/script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/script.png -------------------------------------------------------------------------------- /docs/images/swiss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/swiss.png -------------------------------------------------------------------------------- /docs/images/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/mdx-deck/a4779fc0555e26bc241afd8176661d41fd6981ac/docs/images/yellow.png -------------------------------------------------------------------------------- /docs/layouts.md: -------------------------------------------------------------------------------- 1 | # Layouts 2 | 3 | Each slide can include a custom layout around its content. 4 | This is a way to provide *templates* for certain slides. 5 | 6 | ```js 7 | // example Layout.js 8 | import React from 'react' 9 | 10 | export default ({ children }) => ( 11 |
18 | {children} 19 |
20 | ) 21 | ``` 22 | 23 | ```mdx 24 | import Layout from './Layout' 25 | 26 | # No Layout 27 | 28 | --- 29 | 30 | 31 | 32 | # Custom Layout 33 | 34 | 35 | ``` 36 | 37 | The layout component will wrap the MDX elements within that slide, 38 | which means you can use a nested ThemeProvider or target elements with CSS-in-JS. 39 | 40 | **NOTE:** The newlines around child content in the layout component is **required** to use markdown syntax in a layout. Otherwise the content will be parsed as raw text. 41 | 42 | ## Built-in Layouts 43 | 44 | MDX Deck includes a few built-in layouts for common slide variations. 45 | 46 | ### Invert 47 | 48 | Inverts the foreground and background colors from the theme. 49 | 50 | ```mdx 51 | import { Invert } from 'mdx-deck' 52 | 53 | # Normal 54 | 55 | --- 56 | 57 | 58 | 59 | # Inverted 60 | 61 | 62 | ``` 63 | 64 | ### Split 65 | 66 | Creates a horizontal layout with the first child on the left and all other children on the right. 67 | 68 | ```mdx 69 | import { Split } from 'mdx-deck' 70 | 71 | 72 | 73 | ![](kitten.png) 74 | 75 | ## Meow 76 | 77 | 78 | ``` 79 | 80 | ### SplitRight 81 | 82 | Same as the Split component, but renders the first child on the right. 83 | 84 | ```mdx 85 | import { SplitRight } from 'mdx-deck' 86 | 87 | 88 | 89 | ![](kitten.png) 90 | 91 | ## Meow 92 | 93 | 94 | ``` 95 | 96 | ### Horizontal 97 | 98 | Similar to the Split components, but renders all children side-by-side 99 | 100 | ### FullScreenCode 101 | 102 | Renders code blocks fullscreen. 103 | 104 | ````mdx 105 | import { FullScreenCode } from 'mdx-deck' 106 | 107 | 108 | 109 | ```jsx 110 | 111 | ``` 112 | 113 | 114 | ```` 115 | 116 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "@mdx-deck/docs", 4 | "version": "4.1.1", 5 | "main": "index.js", 6 | "author": "Brent Jackson ", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "mdx-deck demo.mdx", 10 | "build": "mdx-deck build demo.mdx" 11 | }, 12 | "dependencies": { 13 | "@emotion/core": "^10.0.7", 14 | "@emotion/styled": "^10.0.7", 15 | "mdx-deck": "^4.1.1", 16 | "styled-system": "^5.0.15" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/presenting.md: -------------------------------------------------------------------------------- 1 | 2 | # Presenting 3 | 4 | 1. Enter presenter mode by pressing `Opt + P` 5 | 2. Click the link at the bottom to open the presentation in another tab 6 | 3. Move the new tab to its own window in the screen or projector that the audience sees 7 | 4. Control the presentation from the original window 8 | 5. Be sure to hide your mouse cursor so that it's not visible to the audience 9 | 10 | ## Speaker Notes 11 | 12 | Notes that only show in presenter mode can be added to any slide 13 | by using the `` component. 14 | 15 | ```mdx 16 | import { Notes } from 'mdx-deck' 17 | 18 | # Slide Content 19 | 20 | 21 | Only visible in presenter mode 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/themes.md: -------------------------------------------------------------------------------- 1 | # Themes 2 | 3 | ![Default theme](images/default.png) 4 | 5 | --- 6 | 7 | ![Big theme](images/big.png) 8 | 9 | ```js 10 | import { big } from 'mdx-deck/themes' 11 | ``` 12 | 13 | --- 14 | 15 | ![Book theme](images/book.png) 16 | 17 | ```js 18 | import { book } from 'mdx-deck/themes' 19 | ``` 20 | 21 | --- 22 | 23 | ![Code theme](images/code.png) 24 | 25 | ```js 26 | import { code } from 'mdx-deck/themes' 27 | ``` 28 | 29 | --- 30 | 31 | ![Comic theme](images/comic.png) 32 | 33 | ```js 34 | import { comic } from 'mdx-deck/themes' 35 | ``` 36 | 37 | --- 38 | 39 | ![Condensed theme](images/condensed.png) 40 | 41 | ```js 42 | import { condensed } from 'mdx-deck/themes' 43 | ``` 44 | 45 | --- 46 | 47 | ![Dark theme](images/dark.png) 48 | 49 | ```js 50 | import { dark } from 'mdx-deck/themes' 51 | ``` 52 | 53 | --- 54 | 55 | ![Future theme](images/future.png) 56 | 57 | ```js 58 | import { future } from 'mdx-deck/themes' 59 | ``` 60 | 61 | --- 62 | 63 | ![Hack theme](images/hack.png) 64 | 65 | ```js 66 | import { hack } from 'mdx-deck/themes' 67 | ``` 68 | 69 | --- 70 | 71 | ![Notes theme](images/notes.png) 72 | 73 | ```js 74 | import { notes } from 'mdx-deck/themes' 75 | ``` 76 | 77 | --- 78 | 79 | ![Script theme](images/script.png) 80 | 81 | ```js 82 | import { script } from 'mdx-deck/themes' 83 | ``` 84 | 85 | --- 86 | 87 | ![Swiss theme](images/swiss.png) 88 | 89 | ```js 90 | import { swiss } from 'mdx-deck/themes' 91 | ``` 92 | 93 | --- 94 | 95 | ![Yellow theme](images/yellow.png) 96 | 97 | ```js 98 | import { yellow } from 'mdx-deck/themes' 99 | ``` 100 | 101 | --- 102 | 103 | Poppins 104 | 105 | ```js 106 | import { poppins } from 'mdx-deck/themes' 107 | ``` 108 | 109 | -------------------------------------------------------------------------------- /docs/theming.md: -------------------------------------------------------------------------------- 1 | # Theming 2 | 3 | MDX Deck uses [Theme UI][] and [Emotion][] for styling, making practically any part of the presentation themeable. 4 | 5 | ## Built-in Themes 6 | 7 | MDX Deck includes several built-in themes to change the look and feel of the presentation. 8 | Export `theme` from your MDX file to enable a theme. 9 | 10 | ```mdx 11 | import { themes } from 'mdx-deck' 12 | 13 | export const theme = themes.dark 14 | 15 | # Dark Theme 16 | ``` 17 | 18 | View the [Themes](themes.md) docs to see all available themes. 19 | 20 | ## Custom Themes 21 | 22 | A custom theme can be provided by exporting `theme` from the MDX file. 23 | 24 | ```mdx 25 | import myTheme from './theme' 26 | 27 | export const theme = myTheme 28 | 29 | # Hello 30 | ``` 31 | 32 | Themes are based on [Theme UI][] and support customizing typography, color, layout, and other element styles. 33 | 34 | ```js 35 | // Example theme.js 36 | export default { 37 | fonts: { 38 | body: 'Roboto, sans-serif', 39 | monospace: '"Roboto Mono", monospace', 40 | }, 41 | colors: { 42 | text: 'white', 43 | background: 'black', 44 | primary: 'blue', 45 | }, 46 | } 47 | ``` 48 | 49 | ## Composing Themes 50 | 51 | To compose multiple themes together, merge the objects together into a single theme and export that theme from your deck. 52 | 53 | ## Google Fonts 54 | 55 | Themes can specify a `googleFont` field to automatically add a `` tag to the document head. 56 | Alternatively, use the `` component to add a custom `` tag. 57 | 58 | ## Syntax Highlighting 59 | 60 | By default fenced code blocks do not include any syntax highlighting. 61 | Themes can provide a set of custom MDX components, including a replacement for the default `code` component that can add syntax highlighting with libraries like [react-syntax-highlighter][]. 62 | 63 | MDX Deck includes two themes for adding syntax highlighting with [react-syntax-highlighter][]: `highlight` and `prism`. 64 | 65 | ```mdx 66 | import { themes } from 'mdx-deck' 67 | 68 | export const theme = { 69 | ...themes.prism 70 | } 71 | ``` 72 | 73 | Since MDX supports using React components inline, you can also import a syntax highlighting component directly, if you prefer. 74 | 75 | ```mdx 76 | import Highlighter from 'react-syntax-highlighter' 77 | 78 | 79 | {`export const hello = 'hi'`} 80 | 81 | ``` 82 | 83 | ## Styling Elements 84 | 85 | Add a `theme.styles` object to style specific markdown elements. 86 | 87 | ```js 88 | // example theme 89 | export default { 90 | styles: { 91 | h1: { 92 | textTransform: 'uppercase', 93 | letterSpacing: '0.1em', 94 | }, 95 | blockquote: { 96 | fontStyle: 'italic', 97 | }, 98 | } 99 | } 100 | ``` 101 | 102 | ## Reference 103 | 104 | - `colors`: object of colors used for MDX components 105 | - `text`: root foreground color 106 | - `background`: root background color 107 | - `primary`: primary color 108 | - `fonts.body`: base font family 109 | - `fonts.heading`: heading font family 110 | - `fonts.monospace`: font family for `
` and ``
111 | - `text.heading`: styles for all headings
112 | - `styles`: Theme UI styles for MDX elements
113 | - `styles.Slide`: styles for the wrapping Slide component
114 | - `styles.Header`: styles for the Header component
115 | - `styles.Footer`: styles for the Footer component
116 | - `components`: object of MDX components
117 | - `googleFont`: Stylesheet URL for adding a Google Font
118 | 
119 | [emotion]: https://emotion.sh
120 | [theme ui]: https://theme-ui.com
121 | [mdx]: https://github.com/mdx-js/mdx
122 | [react-syntax-highlighter]: https://github.com/conorhastings/react-syntax-highlighter
123 | 


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Examples
 3 | 
 4 | - [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
 5 | - [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
 6 | - [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
 7 | - [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
 8 | - [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
 9 | - [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
10 | - [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
11 | - [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
12 | - [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
13 | - [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
14 | - [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)
15 | 
16 | 
20 | 


--------------------------------------------------------------------------------
/examples/aspect-ratio/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { future, aspect } from 'mdx-deck/themes'
 2 | 
 3 | export const themes = [
 4 |   future,
 5 |   aspect,
 6 | ]
 7 | 
 8 | # Hello!
 9 | 
10 | ---
11 | 
12 | This deck is fluid to a 16:9 aspect ratio
13 | 
14 | ---
15 | 
16 | Images will still render full bleed at other aspect ratios
17 | 
18 | 


--------------------------------------------------------------------------------
/examples/aspect-ratio/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/aspect-ratio-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/basic/deck.mdx:
--------------------------------------------------------------------------------
1 | 
2 | # Hello!
3 | 
4 | ---
5 | 
6 | This is MDX Deck
7 | 


--------------------------------------------------------------------------------
/examples/basic/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/basic-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/gatsby/decks/beep.mdx:
--------------------------------------------------------------------------------
 1 | 
 2 | # Beep
 3 | 
 4 | ---
 5 | 
 6 | ## Boop
 7 | 
 8 | ---
 9 | 
10 | Bop
11 | 


--------------------------------------------------------------------------------
/examples/gatsby/decks/hello.mdx:
--------------------------------------------------------------------------------
1 | 
2 | # Hello
3 | 
4 | ---
5 | 
6 | This is built with gatsby-theme-mdx-deck
7 | 


--------------------------------------------------------------------------------
/examples/gatsby/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   pathPrefix: '/mdx-deck',
 3 |   plugins: [
 4 |     'gatsby-plugin-catch-links',
 5 |     {
 6 |       resolve: 'gatsby-theme-mdx-deck',
 7 |       options: {
 8 |         basePath: '/slides',
 9 |       },
10 |     },
11 |   ],
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/gatsby/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/gatsby-example",
 4 |   "version": "4.1.0",
 5 |   "main": "index.js",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "start": "gatsby develop",
 9 |     "clean": "gatsby clean",
10 |     "build": "gatsby build --prefix-paths",
11 |     "serve": "gatsby serve --prefix-paths",
12 |     "gh-pages": "npx gh-pages -d public"
13 |   },
14 |   "dependencies": {
15 |     "gatsby": "*",
16 |     "gatsby-plugin-catch-links": "^2.1.2",
17 |     "gatsby-theme-mdx-deck": "^4.1.0",
18 |     "react": "^16.8.6",
19 |     "react-dom": "^16.8.6"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/gatsby/src/pages/index.mdx:
--------------------------------------------------------------------------------
1 | 
2 | # MDX Deck Gatsby Example
3 | 
4 | - [Deck](/slides)
5 | 


--------------------------------------------------------------------------------
/examples/head/deck.mdx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   Hello
 4 | 
 5 | 
 6 | # Hello!
 7 | 
 8 | ---
 9 | 
10 | This deck has a custom title
11 | 
12 | 


--------------------------------------------------------------------------------
/examples/head/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/head-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/header-footer/deck.mdx:
--------------------------------------------------------------------------------
 1 | 
 2 | 

 3 | 
 4 | # Header
 5 | 
 6 | 

 7 | 
 8 | 

 9 | 
10 | [@jxnblk](https://twitter.com/jxnblk)
11 | 
12 | 

13 | 
14 | # Hello!
15 | 
16 | ---
17 | 
18 | This deck has a header and footer
19 | 
20 | 


--------------------------------------------------------------------------------
/examples/header-footer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/header-footer-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/images/deck.mdx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Image,
 3 | } from 'mdx-deck'
 4 | 
 5 | # Hello!
 6 | 
 7 | ---
 8 | 
 9 | 
18 | 
19 | ## Background Image
20 | 
21 | 
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/examples/images/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/images-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/layouts/deck.mdx:
--------------------------------------------------------------------------------
 1 | 
 2 | # Hello!
 3 | 
 4 | ---
 5 | 
 6 | 
 7 | 
 8 | ## Invert Layout
 9 | 
10 | 
11 | 
12 | ---
13 | 
14 | 
15 | 
16 | ![](https://source.unsplash.com/random/768x2048?brooklyn)
17 | 
18 | ## Split Layout
19 | 
20 | 
21 | 
22 | ---
23 | 
24 | 
25 | 
26 | ![](https://source.unsplash.com/random/768x2048?brooklyn)
27 | 
28 | ## SplitRight Layout
29 | 
30 | 
31 | 
32 | ---
33 | 
34 | 
35 | 
36 | ## Horizontal Layout
37 | 
38 | ![](https://source.unsplash.com/random/768x2048?brooklyn)
39 | 
40 | ![](https://source.unsplash.com/random/768x2048?brooklyn)
41 | 
42 | 
43 | 
44 | ---
45 | 
46 | 
47 | 
48 | ```jsx
49 | 
50 | ```
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/examples/layouts/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/layouts-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/multiple/deck.js:
--------------------------------------------------------------------------------
1 | import { slides as one } from './one.mdx'
2 | import { slides as two } from './two.mdx'
3 | 
4 | export const slides = [...one, ...two]
5 | 


--------------------------------------------------------------------------------
/examples/multiple/one.mdx:
--------------------------------------------------------------------------------
1 | 
2 | # Hello!
3 | 
4 | ---
5 | 
6 | This is MDX Deck #1
7 | 


--------------------------------------------------------------------------------
/examples/multiple/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/multiple-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.js",
 7 |     "build": "mdx-deck build deck.js",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/multiple/two.mdx:
--------------------------------------------------------------------------------
1 | 
2 | # This is Deck # 2
3 | 
4 | ---
5 | 
6 | :sunglasses:
7 | 


--------------------------------------------------------------------------------
/examples/prism/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { future, prism } from 'mdx-deck/themes'
 2 | 
 3 | export const themes = [
 4 |   future,
 5 |   prism
 6 | ]
 7 | 
 8 | # Hello!
 9 | 
10 | ---
11 | 
12 | ```jsx
13 | import React from 'react'
14 | 
15 | export default props =>
16 |   
Highlighting

17 | ```
18 | 


--------------------------------------------------------------------------------
/examples/prism/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/prism-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/provider/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { comic } from 'mdx-deck/themes'
 2 | import theme from './theme'
 3 | 
 4 | export const themes = [
 5 |   comic,
 6 |   theme,
 7 | ]
 8 | 
 9 | # Hello!
10 | 
11 | ---
12 | 
13 | This deck has a custom Provider component
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/provider/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/provider-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/provider/theme.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Provider = props => (
 4 |   

 5 |     {props.children}
 6 |     

14 |       Put your name here
15 |     

16 |   

17 | )
18 | 
19 | export default {
20 |   Provider,
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/steps/deck.mdx:
--------------------------------------------------------------------------------
 1 | 
 2 | # Hello!
 3 | 
 4 | ---
 5 | 
 6 | 
    
 7 |   
  • One
    • 
 8 |   
 9 |     
  • Two
    • 
10 |     
  • Three
    • 
11 |     
  • Four
    • 
12 |       
13 | 

14 | 
15 | ---
16 | 
17 | ## One
18 | 
19 | 
20 | 
21 | ## Two
22 | ## Three
23 | 
24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/examples/steps/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/appear-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/syntax-highlighting/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { future, highlight } from '@mdx-deck/themes'
 2 | 
 3 | export const theme = {
 4 |   ...future,
 5 |   ...highlight
 6 | }
 7 | 
 8 | # Hello!
 9 | 
10 | ---
11 | 
12 | ```jsx
13 | import React from 'react'
14 | 
15 | export default props =>
16 |   
Highlighting

17 | ```
18 | 


--------------------------------------------------------------------------------
/examples/syntax-highlighting/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/syntax-highlighting-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/themes/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { ThemeName } from './theme'
 2 | 
 3 | export { theme } from './theme'
 4 | 
 5 | # Hello !
 6 | 
 7 | ---
 8 | 
 9 | This deck has a custom Provider component
10 | that lets you switch between all the different themes.
11 | 
12 | ---
13 | 
14 | ```jsx
15 | import React from 'react'
16 | 
17 | export default ({ children }) => {
18 |   return (
19 |     <>
20 |       {children}
21 |     
22 |   )
23 | }
24 | ```
25 | 


--------------------------------------------------------------------------------
/examples/themes/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "@mdx-deck/themes-example",
 4 |   "version": "4.1.1",
 5 |   "scripts": {
 6 |     "start": "mdx-deck deck.mdx",
 7 |     "build": "mdx-deck build deck.mdx",
 8 |     "help": "mdx-deck"
 9 |   },
10 |   "devDependencies": {
11 |     "mdx-deck": "^4.1.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/themes/theme.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext } from 'react'
 2 | import { ThemeProvider } from 'emotion-theming'
 3 | import { MDXProvider } from '@mdx-js/react'
 4 | import * as themes from 'mdx-deck/themes'
 5 | 
 6 | const names = Object.keys(themes)
 7 | 
 8 | const DefaultProvider = props => <>{props.children}
 9 | 
10 | const Context = React.createContext()
11 | 
12 | const Provider = props => {
13 |   const [name, setTheme] = useState(names[0])
14 |   const cycle = e => {
15 |     const i = (names.indexOf(name) + 1) % names.length
16 |     setTheme(names[i])
17 |   }
18 | 
19 |   const baseTheme = themes[name]
20 |   const theme = typeof baseTheme === 'function' ? baseTheme({}) : baseTheme
21 |   const Root = theme.Provider || DefaultProvider
22 | 
23 |   return (
24 |     

25 |       
26 |         
27 |           
28 |             {props.children}
29 |           
30 |         
31 |       
32 |       

39 |         
52 |       

53 |     

54 |   )
55 | }
56 | 
57 | export const ThemeName = props => {
58 |   const context = useContext(Context)
59 | 
60 |   return <>{context}
61 | }
62 | 
63 | export const theme = {
64 |   Provider,
65 | }
66 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "packages/*"
4 |   ],
5 |   "npmClient": "yarn",
6 |   "useWorkspaces": true,
7 |   "version": "4.1.1"
8 | }
9 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm i yarn@latest && yarn && yarn build"
3 |   publish = "docs/public"
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "workspaces": [
 4 |     "packages/*",
 5 |     "templates/*",
 6 |     "examples/*",
 7 |     "docs"
 8 |   ],
 9 |   "scripts": {
10 |     "start": "yarn workspace @mdx-deck/docs start",
11 |     "build": "yarn workspace @mdx-deck/docs build",
12 |     "export": "./packages/export/cli.js http://localhost:8000/print -o docs/public/deck.pdf",
13 |     "cypress:open": "cypress open",
14 |     "cypress:run": "cypress run",
15 |     "test:dev": "start-server-and-test start http://localhost:8000 cypress:open",
16 |     "jest": "jest",
17 |     "test": "jest && start-server-and-test start http://localhost:8000 cypress:run"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.8.4",
21 |     "@babel/preset-env": "^7.8.4",
22 |     "@babel/preset-react": "^7.8.3",
23 |     "@testing-library/react": "^10.0.2",
24 |     "cypress": "^4.3.0",
25 |     "husky": "^4.2.1",
26 |     "jest": "^25.1.0",
27 |     "jest-emotion": "^10.0.27",
28 |     "lerna": "^3.13.1",
29 |     "lint-staged": "^10.0.4",
30 |     "prettier": "^1.16.4",
31 |     "react-test-renderer": "^16.12.0",
32 |     "start-server-and-test": "^1.9.1"
33 |   },
34 |   "jest": {
35 |     "testMatch": [
36 |       "**/packages/**/test/*.js"
37 |     ],
38 |     "testPathIgnorePatterns": [
39 |       "/node_modules/",
40 |       "/.cache/",
41 |       "/public/"
42 |     ],
43 |     "coverageReporters": [
44 |       "lcov",
45 |       "text",
46 |       "html"
47 |     ],
48 |     "collectCoverageFrom": [
49 |       "packages/**/src/**/*.js"
50 |     ],
51 |     "coverageThreshold": {
52 |       "global": {
53 |         "branches": 80,
54 |         "functions": 80,
55 |         "lines": 80,
56 |         "statements": 80
57 |       }
58 |     },
59 |     "snapshotSerializers": [
60 |       "jest-emotion"
61 |     ]
62 |   },
63 |   "husky": {
64 |     "hooks": {
65 |       "pre-commit": "lint-staged"
66 |     }
67 |   },
68 |   "lint-staged": {
69 |     "*.{js,json}": [
70 |       "prettier --write",
71 |       "git add"
72 |     ]
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/packages/create-deck/README.md:
--------------------------------------------------------------------------------
1 | # npm init deck
2 | 
3 | Create mdx-deck presentations
4 | 
5 | ```sh
6 | npm init deck my-presentation
7 | ```
8 | 


--------------------------------------------------------------------------------
/packages/create-deck/cli.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | const fs = require('fs')
 3 | const path = require('path')
 4 | const meow = require('meow')
 5 | const chalk = require('chalk')
 6 | const initit = require('initit')
 7 | 
 8 | const logo = chalk.magenta('[mdx-deck]')
 9 | const log = (...args) => {
10 |   console.log(logo, ...args)
11 | }
12 | log.error = (...args) => {
13 |   console.log(chalk.red('[ERROR]'), ...args)
14 | }
15 | 
16 | const template = 'jxnblk/mdx-deck/templates/basic'
17 | 
18 | const cli = meow(
19 |   `
20 |   Usage
21 | 
22 |     $ npm init deck my-presentation
23 | 
24 |     $ npx create-deck my-presentation
25 | 
26 | `,
27 |   {
28 |     booleanDefault: undefined,
29 |     flags: {
30 |       help: {
31 |         type: 'boolean',
32 |         alias: 'h',
33 |       },
34 |       version: {
35 |         type: 'boolean',
36 |         alias: 'v',
37 |       },
38 |     },
39 |   }
40 | )
41 | 
42 | const [name] = cli.input
43 | 
44 | if (!name) {
45 |   cli.showHelp(0)
46 | }
47 | 
48 | // todo: ensure directory doesn't exist
49 | initit({ name, template })
50 |   .then(res => {
51 |     log('created mdx-deck')
52 |     process.exit(0)
53 |   })
54 |   .catch(err => {
55 |     log.error('failed to create mdx-deck')
56 |     log.error(err)
57 |     process.exit(1)
58 |   })
59 | 


--------------------------------------------------------------------------------
/packages/create-deck/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-deck",
 3 |   "version": "4.0.0",
 4 |   "description": "Create mdx-deck presentations",
 5 |   "bin": {
 6 |     "create-deck": "cli.js"
 7 |   },
 8 |   "author": "Brent Jackson",
 9 |   "license": "MIT",
10 |   "dependencies": {
11 |     "chalk": "^3.0.0",
12 |     "initit": "^1.0.0-2",
13 |     "meow": "^6.0.0"
14 |   },
15 |   "gitHead": "13d00b47780424cc3b52d38ad6f19e99d007c06a"
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | coverage
2 | .cache
3 | public
4 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/.npmignore:
--------------------------------------------------------------------------------
1 | .cache
2 | coverage
3 | public
4 | test
5 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # @mdx-deck/gatsby-plugin
3 | 
4 | Plugin used internally by mdx-deck core package -- **not intended for standalone usage**
5 | 
6 | See [`gatsby-theme-mdx-deck`](https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme) for custom usage with Gatsby
7 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | export { wrapPageElement } from './src'
2 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     'gatsby-plugin-react-helmet',
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const { createPath, validatePath } = require('gatsby-page-utils')
 4 | const remarkPlugins = [
 5 |   require('remark-images'),
 6 |   require('remark-unwrap-images'),
 7 |   require('remark-emoji'),
 8 | ]
 9 | 
10 | exports.onPreBootstrap = ({}, opts = {}) => {
11 |   opts.dirname = opts.dirname || __dirname
12 |   const staticSourceDir = path.join(opts.dirname, 'static')
13 |   const hasStaticDir = fs.existsSync(staticSourceDir)
14 | 
15 |   if (fs.existsSync('./static')) {
16 |     // remove temp directory
17 |     fs.unlinkSync('./static')
18 |   }
19 | 
20 |   if (hasStaticDir) {
21 |     // link to source static directory
22 |     fs.symlinkSync(staticSourceDir, './static')
23 |   }
24 | }
25 | 
26 | exports.onCreateWebpackConfig = ({
27 |   stage,
28 |   rules,
29 |   loaders,
30 |   plugins,
31 |   actions,
32 | }) => {
33 |   actions.setWebpackConfig({
34 |     module: {
35 |       rules: [
36 |         {
37 |           test: /\.mdx$/,
38 |           use: [
39 |             loaders.js(),
40 |             {
41 |               loader: '@mdx-js/loader',
42 |               options: {
43 |                 remarkPlugins,
44 |               }
45 |             },
46 |           ]
47 |         }
48 |       ]
49 |     }
50 |   })
51 | }
52 | 
53 | exports.resolvableExtensions = () => ['.mdx']
54 | 
55 | exports.createPages = ({
56 |   actions,
57 | }, {
58 |   path: source,
59 | } = {}) => {
60 |   if (!source) return
61 | 
62 |   actions.createPage({
63 |     path: '/',
64 |     matchPath: '/*',
65 |     component: source,
66 |   })
67 | }
68 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | export { wrapPageElement } from './src'
2 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/index.js:
--------------------------------------------------------------------------------
1 | // noop
2 | export * from './src'
3 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@mdx-deck/gatsby-plugin",
 3 |   "version": "4.1.1",
 4 |   "main": "index.js",
 5 |   "author": "Brent Jackson",
 6 |   "license": "MIT",
 7 |   "repository": "github:jxnblk/mdx-deck",
 8 |   "scripts": {
 9 |     "start": "gatsby develop --open"
10 |   },
11 |   "peerDependencies": {
12 |     "gatsby": "^2.14.0",
13 |     "react": "^16.10.0",
14 |     "react-dom": "^16.10.0"
15 |   },
16 |   "devDependencies": {
17 |     "gatsby": "^2.14.0",
18 |     "react": "^16.10.0",
19 |     "react-dom": "^16.10.0"
20 |   },
21 |   "dependencies": {
22 |     "@mdx-js/loader": "^1.5.3",
23 |     "@mdx-js/mdx": "^1.5.3",
24 |     "gatsby-page-utils": "^0.0.39",
25 |     "gatsby-plugin-react-helmet": "^3.1.18",
26 |     "hhmmss": "^1.0.0",
27 |     "react-helmet": "^5.2.1",
28 |     "remark-emoji": "^2.0.2",
29 |     "remark-images": "^2.0.0",
30 |     "remark-unwrap-images": "^2.0.0",
31 |     "theme-ui": "^0.3.0-alpha.6"
32 |   },
33 |   "gitHead": "13d00b47780424cc3b52d38ad6f19e99d007c06a",
34 |   "publishConfig": {
35 |     "access": "public"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/clock.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default props => {
 4 |   const [time, setTime] = React.useState(new Date().toLocaleTimeString())
 5 | 
 6 |   React.useEffect(() => {
 7 |     const timer = setInterval(() => {
 8 |       const now = new Date()
 9 |       setTime(now.toLocaleTimeString())
10 |     }, 1000)
11 |     return () => {
12 |       clearInterval(timer)
13 |     }
14 |   }, [])
15 | 
16 |   return time
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/components.js:
--------------------------------------------------------------------------------
  1 | /** @jsx jsx */
  2 | import { jsx } from 'theme-ui'
  3 | import React from 'react'
  4 | import useSteps from './use-steps'
  5 | 
  6 | const createComponent = key => {
  7 |   const Component = () => false
  8 |   Component.__mdxDeck = true
  9 |   Component[`__mdxDeck_${key}`] = true
 10 |   return Component
 11 | }
 12 | 
 13 | export const Notes = createComponent('notes')
 14 | export const Head = createComponent('head')
 15 | export const Header = createComponent('header')
 16 | export const Footer = createComponent('footer')
 17 | 
 18 | export const Color = ({
 19 |   color,
 20 |   bg,
 21 |   ...props
 22 | }) =>
 23 |   

 39 | 
 40 | export const Invert = props =>
 41 |   
 46 | 
 47 | export const StepList = props => {
 48 |   const list = React.Children.toArray(props.children)
 49 |     .find(child => /^(ul|ol)$/.test(child.props.originalType))
 50 | 
 51 |   // ensure this works
 52 |   const items = React.Children.toArray(list && list.props.children)
 53 | 
 54 |   const step = useSteps(items.length)
 55 | 
 56 |   const children = items.map((item, i) => React.cloneElement(item, {
 57 |     style: {
 58 |       visibility: i < step ? 'visible' : 'hidden'
 59 |     }
 60 |   }))
 61 | 
 62 |   return React.cloneElement(list, { children })
 63 | }
 64 | 
 65 | export const Appear = props => {
 66 |   const children = React.Children.toArray(props.children)
 67 |   const step = useSteps(children.length)
 68 |   const styled = children.map((child, i) =>
 69 |     React.cloneElement(child, {
 70 |       style: {
 71 |         visibility: i < step ? 'visible' : 'hidden',
 72 |       }
 73 |     })
 74 |   )
 75 |   return {styled}
 76 | }
 77 | 
 78 | export const Steps = props => {
 79 |   const list = React.Children.toArray(props.children)
 80 |     .find(child => /^(ul|ol)$/.test(child.props.originalType))
 81 | 
 82 |   if (!list) return 
 83 |   return 
 84 | }
 85 | 
 86 | export const Image = ({
 87 |   src,
 88 |   width = '100%',
 89 |   height = '100%',
 90 |   size = 'cover',
 91 |   ...props
 92 | }) =>
 93 |   

104 | 
105 | export const Horizontal = ({
106 |   ...props
107 | }) => {
108 |   const children = React.Children.toArray(props.children)
109 |   return (
110 |     

118 |       {children.map((child, i) => (
119 |         

127 |           {child}
128 |         

129 |       ))}
130 |     

131 |   )
132 | }
133 | 
134 | const Half = props => 

140 | 
141 | export const Split = ({ reverse, ...props }) => {
142 |   const [first, ...rest] = React.Children.toArray(props.children)
143 |   const children = reverse
144 |     ? [ {rest}, {first} ]
145 |     : [ {first}, {rest} ]
146 | 
147 |   return (
148 |     

156 |       {children}
157 |     

158 |   )
159 | }
160 | 
161 | export const SplitRight = props =>
162 |   
166 | 
167 | export const FullScreenCode = ({ ...props }) => (
168 |   

182 | )
183 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/container.js:
--------------------------------------------------------------------------------
  1 | /** @jsx jsx */
  2 | import { jsx, Box, Flex } from 'theme-ui'
  3 | import React from 'react'
  4 | import { Context, useDeck } from './context'
  5 | import modes from './modes'
  6 | import Header from './header'
  7 | import Footer from './footer'
  8 | import Slide from './slide'
  9 | import Clock from './clock'
 10 | import Timer from './timer'
 11 | 
 12 | const Main = ({
 13 |   width = '100vw',
 14 |   height = '100vh',
 15 |   preview = false,
 16 |   ...props
 17 | }) => {
 18 |   const outer = useDeck()
 19 |   const context = {
 20 |     ...outer,
 21 |     main: !preview,
 22 |   }
 23 | 
 24 |   return (
 25 |     
 26 |       

 33 |         {props.header && (
 34 |           

 35 |             {props.header}
 36 |           

 37 |         )}
 38 |         {props.children}
 39 |         {props.footer && (
 40 |           

 41 |             {props.footer}
 42 |           

 43 |         )}
 44 |       

 45 |     
 46 |   )
 47 | }
 48 | 
 49 | const Presenter = props => {
 50 |   const next = props.slides[props.index + 1]
 51 | 
 52 |   return (
 53 |     

 60 |       

 66 |         

 70 |           
 71 |             {props.slide}
 72 |           
 73 |         

 74 |       

 75 |       
 84 |         
 90 |           {next}
 91 |         
 92 |         

 97 |           {props.notes}
 98 |         

 99 |         
104 |           
105 |             {props.index} / {props.slides.length - 1}
106 |           
107 |           
117 |             ⬈
118 |           
119 |           
120 |           
121 |             
122 |             {' '}
123 |             
124 |           
125 |         
126 |       
127 |     

128 |   )
129 | }
130 | 
131 | const Overview = props => {
132 |   const ref = React.useRef(null)
133 | 
134 |   React.useEffect(() => {
135 |     if (!ref.current) return
136 |     if (typeof ref.current.scrollIntoViewIfNeeded !== 'function') return
137 |     ref.current.scrollIntoViewIfNeeded()
138 |   }, [ref.current])
139 | 
140 |   return (
141 |     

148 |       

155 |         {props.slides.map((slide, i) => (
156 |           
 {
162 |               props.setIndex(i)
163 |               props.setStep(0)
164 |               props.setSteps(0)
165 |             }}
166 |             sx={{
167 |               p: 2,
168 |               height: '30%'
169 |             }}>
170 |             
175 |               {slide}
176 |             
177 |           

178 |         ))}
179 |       

180 |       

187 |         

191 |           
192 |             {props.slide}
193 |           
194 |         

195 |       

196 |     

197 |   )
198 | }
199 | 
200 | const Grid = props => {
201 |   const ref = React.useRef(null)
202 | 
203 |   React.useEffect(() => {
204 |     if (!ref.current) return
205 |     if (typeof ref.current.scrollIntoViewIfNeeded !== 'function') return
206 |     ref.current.scrollIntoViewIfNeeded()
207 |   }, [ref.current])
208 | 
209 |   return (
210 |     

216 |       

222 |         {props.slides.map((slide, i) => (
223 |           
 {
229 |               props.setIndex(i)
230 |               props.setStep(0)
231 |               props.setSteps(0)
232 |               props.setMode(modes.default)
233 |             }}
234 |             sx={{
235 |               p: 2,
236 |               width: '25%',
237 |               height: '23vh',
238 |             }}>
239 |             
244 |               {slide}
245 |             
246 |           

247 |         ))}
248 |       

249 |     

250 |   )
251 | }
252 | 
253 | const Print = props => {
254 |   return (
255 |     
256 |       {props.slides.map((slide, i) => (
257 |         

258 |           
259 |             {slide}
260 |           
261 |         

262 |       ))}
263 |     
264 |   )
265 | }
266 | 
267 | export default props => {
268 |   const context = useDeck()
269 | 
270 |   switch (context.mode) {
271 |     case modes.presenter:
272 |       return 
273 |     case modes.overview:
274 |       return 
275 |     case modes.grid:
276 |       return 
277 |     case modes.print:
278 |       return 
279 |     case modes.default:
280 |     default:
281 |       return 

282 |   }
283 | }
284 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export const Context = React.createContext({})
4 | 
5 | export const useDeck = () => React.useContext(Context)
6 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/deck.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Helmet } from 'react-helmet'
  3 | import { ThemeProvider, merge } from 'theme-ui'
  4 | import split from './split-slides'
  5 | import { Context } from './context'
  6 | import Keyboard from './keyboard'
  7 | import modes from './modes'
  8 | import Storage from './storage'
  9 | import Container from './container'
 10 | import Slide from './slide'
 11 | import baseTheme from './theme'
 12 | 
 13 | const getIndex = props => {
 14 |   if (!props.location) return 0
 15 |   const n = Number(props.location.hash.replace(/^#/, ''))
 16 |   return n
 17 | }
 18 | 
 19 | export default props => {
 20 |   const slides = split(props)
 21 |   const [index, setIndex] = React.useState(getIndex(props))
 22 |   const { slug } = props.pageContext || {}
 23 |   const slide = slides[index]
 24 | 
 25 |   const [mode, setMode] = React.useState(modes.default)
 26 |   const toggleMode = next => setMode(current =>
 27 |     current === next ? modes.default : next
 28 |   )
 29 | 
 30 |   const [step, setStep] = React.useState(0)
 31 |   const [steps, setSteps] = React.useState(0)
 32 | 
 33 |   const lastIndex = React.useRef(0)
 34 |   const direction = index - lastIndex.current
 35 | 
 36 |   React.useEffect(() => {
 37 |     lastIndex.current = index
 38 |   }, [index])
 39 | 
 40 |   React.useEffect(() => {
 41 |     if (props.location.pathname === '/print') return
 42 |     props.navigate('/#' + index, {
 43 |       replace: true,
 44 |     })
 45 |   }, [index])
 46 | 
 47 |   React.useEffect(() => {
 48 |     if (props.location.pathname === '/print') {
 49 |       setMode(modes.print)
 50 |     }
 51 |     if (!slide) {
 52 |       props.navigate('/')
 53 |       setIndex(0)
 54 |     }
 55 |   }, [])
 56 | 
 57 |   if (!slide) return false
 58 | 
 59 |   const context = {
 60 |     slides,
 61 |     slug,
 62 |     index,
 63 |     setIndex,
 64 |     direction,
 65 |     length: slides.length,
 66 |     slide,
 67 |     mode,
 68 |     setMode,
 69 |     toggleMode,
 70 |     notes: slide.notes,
 71 |     header: slides.header,
 72 |     footer: slides.footer,
 73 |     step,
 74 |     setStep,
 75 |     steps,
 76 |     setSteps,
 77 |   }
 78 | 
 79 |   context.previous = () => {
 80 |     if (steps && step > 0) {
 81 |       setStep(n => n - 1)
 82 |     } else {
 83 |       setIndex(n => n > 0 ? n - 1 : n)
 84 |       setStep(0)
 85 |       setSteps(0)
 86 |     }
 87 |   }
 88 | 
 89 |   context.next = () => {
 90 |     if (step < steps) {
 91 |       setStep(n => n + 1)
 92 |     } else {
 93 |       setIndex(n => n < slides.length - 1 ? n + 1 : n)
 94 |       setStep(0)
 95 |       setSteps(0)
 96 |     }
 97 |   }
 98 | 
 99 |   const theme = merge(baseTheme, props.theme || {})
100 | 
101 |   return (
102 |     
103 |       
104 |       
105 |       
106 |         {slides.head.children}
107 |         {theme.googleFont && }
108 |       
109 |       
112 |         
113 |           
114 |             {slide}
115 |           
116 |         
117 |       
118 |     
119 |   )
120 | }
121 | 


--------------------------------------------------------------------------------
/packages/gatsby-plugin/src/footer.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | 
 4 | export default props =>
 5 |