Repository: jxnblk/mdx-deck Branch: master Commit: a4779fc0555e Files: 181 Total size: 149.6 KB Directory structure: gitextract_d6xf2xq3/ ├── .circleci/ │ └── config.yml ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── MIGRATION.md ├── babel.config.js ├── cypress/ │ ├── integration/ │ │ └── hello.js │ ├── plugins/ │ │ └── index.js │ └── support/ │ ├── commands.js │ └── index.js ├── cypress.json ├── docs/ │ ├── Counter.js │ ├── api.md │ ├── components.md │ ├── demo.mdx │ ├── exporting.md │ ├── gatsby.md │ ├── 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 ================================================ FILE CONTENTS ================================================ ================================================ FILE: .circleci/config.yml ================================================ # Javascript Node CircleCI 2.0 configuration file # # Check https://circleci.com/docs/2.0/language-javascript/ for more details # version: 2 jobs: build: docker: # specify the version you desire here # - image: circleci/node:10 - image: cypress/base:10 # Specify service dependencies here if necessary # CircleCI maintains a library of pre-built images # documented at https://circleci.com/docs/2.0/circleci-images/ # - image: circleci/mongo:3.4.4 working_directory: ~/repo steps: - checkout # Download and cache dependencies - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }} # fallback to using the latest cache if no exact match is found - v1-dependencies- - run: yarn - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package.json" }} # run tests! - run: yarn test ================================================ FILE: .gitignore ================================================ dist public coverage node_modules package-lock.json public .cache cypress/videos ================================================ FILE: .prettierrc ================================================ { "semi": false, "singleQuote": true, "trailingComma": "es5", "jsxBracketSameLine": true } ================================================ FILE: CHANGELOG.md ================================================ # Changelog ## Unreleased - Add missing dependency ## v4.1.0 - Update colors on notes theme - Add support for static asset directory ## v4.0.0 - Refactored implementation for `mdx-deck` CLI - New `Header` and `Footer` components for adding persistent header and footer content - **Deprecated:** CLI `eject` command - **Deprecated:** Swipe gestures - to be replaced with new UI - **Deprecated:** Title is no longer inferred from first heading - **Deprecated:** `export const themes` has been removed - merge themes in a separate module if needed - **Deprecated:** Functional themes are no longer supported, merge themes in a separate module if needed - **Deprecated:** `theme.Provider` - use `Header` and `Footer` components instead - **Deprecated:** Fixed aspect ratio has been removed - Bug fixes - Update dependencies - **Deprecated:** `gatsby-theme-mdx-deck`: no longer resolves title from first heading ## v3.1.0 2020-02-01 - Update dependencies - Adjust schema customization in Gatsby theme ## v3.0.13 2019-09-23 - Adjust Gatsby content digest ## v3.0.12 2019-09-23 - Update dependencies ## v3.0.11 2019-09-10 - Add support for up and down keys #467 - Fix for double slash in print route #473 ## v3.0.10 2019-09-05 - Add remark-import-code #457 - Fix pathname in windows #465 ## v3.0.9 2019-08-05 - Fix for remounting component #428 ## v3.0.8 2019-07-28 - Add support for Gatsby `pathPrefix` option ## v3.0.0 2019-07-16 - Refactored to leverage Gatsby - Rewritten CLI based on Gatsby - Updated Gatsby theme to allow for component shadowing - Gatsby theme has been renamed to `gatsby-theme-mdx-deck` - Now uses [Theme UI](https:/theme-ui.com) for theming - Improved touchscreen and mobile views - Deprecated: - `@mdx-deck/components` - `@mdx-deck/layouts` - `@mdx-deck/loader` - `@mdx-deck/mdx-plugin` - `@mdx-deck/webpack-html-plugin` See the [Migration](MIGRATION.md) docs for more ## v2.5.1 2019-07-16 - Fix loader #357 ## v2.5.0 2019-07-07 - Update Gatsby theme to official API #389 #387 #385 - Update docs #382 ## v2.4.0 2019-06-19 - Add `useTheme` hook to API #359 - Makes presenter mode themeable #366 - Add support for `--webpack` flag #369 ## v2.3.2 2019-04-21 - Fixed issue when Head only had one element #345 ## v2.3.1 2019-04-21 - Add experimental support for fluid aspect ratios #342 ## v2.3.0 2019-04-20 - Refactor localStorage to use hooks #334 - Refactor keyboard shortcuts #335 - Refactor query string to use hooks #336 - Refactor to use hooks #337 - Adds `MDXDeckState` provider component - Fixes an issue with rerenders in Gatsby theme - Adjusts styles in grid mode - Refactors `useSteps` to use effect hook ## v2.2.3 2019-04-20 - Refactor Head component #329 ## v2.2.2 2019-04-20 - Fix typos #333 - Refactor themes for better bundle sizes #328 ## v2.2.1 2019-04-15 - Add support for page up/down keys #319 - Fix: remove global styles from Embed component #331 ## v2.2.0 2019-04-13 - Add Embed component #323 - Adjust context passed to Slide component - Add default props to Slide to show all Appear steps - Adds header and footer components for shadowing in Gatsby theme - Refactor and clean up code ## v2.1.4 2019-04-12 - Add `mdx` option to Gatsby theme #325 ## v2.1.3 2019-04-12 - Update docs for Gatsby theme #324 ## v2.1.2 2019-04-12 - Bump dependencies to MDX 1.0.0 #322 ## v2.1.1 2019-04-11 - Add support for single deck mode in Gatsby theme #320 ## v2.1.0 2019-04-11 - Added Gatsby theme #318 ## v2.0.9 2019-04-05 - Rename internal const #312 ## v2.0.8 2019-04-05 - Update MDX #311 ## v2.0.7 2019-04-05 - Add `--no-html` flag back #295 ## v2.0.6 2019-03-28 - Pin alpha version of MDX #302 ## v2.0.5 2019-03-23 - Update remark-unwrap-images #289 - Update webpack config merging #290 ## v2.0.4 2019-03-23 - Fix for css-loader #288 ## v2.0.3 2019-03-23 - Fix for building decks with Google Fonts #287 ## v2.0.2 2019-03-23 - Fix syntax error in theme #286 ## v2.0.1 2019-03-23 - Add language support to syntax highlighter themes #278 ## v2.0.0 2019-03-16 - Simplified custom mdx loader, removing unused front-matter support - Simplified theming and default styles - Removes default Provider component with dot indicator - Uses Reach Router - resolves issues with focus trapping - Removed PDF export and screenshots from core CLI - now available with the `@mdx-deck/export` package - Removed built-in syntax highlighting - Removed `notes` language attribute for fenced code blocks - Refactored dev server ## v1.10.2 2019-03-10 - Fix bad release ## v1.10.1 2019-03-10 - Prevent Appear children from disappearing during slide transition #253 ## v1.10.0 2019-02-18 - Update to Babel 7 ## v1.9.0 2019-02-18 - Fix for font size in nested lists #204 - Add `--hot-port` option to CLI #206 - Add support for `.jsx` file extensions #239 - Fix typos in syntax highlighting component #250 - Add context to grid view #187 - Add `--no-sandbox` option to CLI #200 - Surface compilation errors from webpack #252 ## v1.8.2 2018-12-04 - Bugfix for window check ## v1.8.1 2018-11-27 - Show Appear children in PDF export ## v1.8.0 2018-11-27 - Adds button to open new window for presenting in presenter mode ## v1.7.14 2018-11-18 - Fix typo in SlideDeck ## v1.7.13 2018-11-18 - Add overflow auto to FullScreenCode ## v1.7.12 2018-11-18 - Keep styles intact for Appear children - Fix prop types for Appear component - Add missing CLI option to docs ## v1.7.11 2018-11-18 - Update remark-unwrap-images ## v1.7.10 2018-11-12 - Update dependencies ## v1.7.9 2018-11-12 - Update dependencies ## v1.7.8 2018-11-12 - Fix typo in Root prop types - Edit docs ## v1.7.7 2018-09-22 - Remove overflow hidden styles from body - Adds prettier ## v1.7.6 2018-09-22 - Changes styles to use `translate3d` - Add support for page up and page down keys ## v1.7.5 2018-09-22 - Add `Horizontal` layout component ## v1.7.4 2018-09-15 - Add `--host` option ## v1.7.3 2018-09-05 - Fix swipe direction on touchscreens ## v1.7.1 2018-08-30 - Fix for localStorage updater ## v1.7.0 2018-08-29 - Adds support for stepping through Appear component with left and right arrows #144 - Refactor internal context ## v1.6.9 2018-08-27 - Adds support for custom webpack configs #136 ## v1.6.8 2018-08-27 - Fixes `build` when using Notes or Appear components #138 - Fixes slide number in presenter mode #142 ## v1.6.7 2018-08-25 - Use `mkdirp` for build and export - Adds ability to change slide transition timing function and duration via themes ## v1.6.6 2018-08-25 - Left align text in code blocks #130 - Extract static CSS on build #129 - Adds `--no-html` option for client-side only builds ## v1.6.5 2018-08-25 - Adjust slide number in overview mode #122 ## v1.6.4 2018-08-18 - Add respository field to package.json #117 - Remove trailing comma in function arguments #115 ## v1.6.3 2018-08-16 - Disable swiping with mouse #113 ## v1.6.2 2018-08-15 - Adjust import/export parsing in loader #110 ## v1.6.1 2018-08-15 - Add missing `babel-core` dependency ## v1.6.0 2018-08-14 - Adds `Head` component for setting document head - Adds screenshot command to create a screenshot of the first slide - Removes the `--title` option in favor of using the `Head` component ## v1.5.15 2018-08-11 - Adds swipe gesture support for touchscreen devices - Fixes URL bug when initializing mode - Fixes bug previous/next buttons are not rendered - Prevents last slide from cycling back to the beginning ## v1.5.14 2018-08-10 - Adds `size` prop to Image component ## v1.5.13 2018-08-10 - Fixes an issue where speaker notes would incorrectly show on the wrong slide ## v1.5.12 2018-08-10 - Add FullScreenCode layout component ## v1.5.11 2018-08-10 - Adjust querystring updater to fix mode showing as undefined ## v1.5.10 2018-08-05 - Update overview mode styles - Add grid view mode - Update docs ## v1.5.9 2018-08-05 - Update docs ## v1.5.8 2018-08-05 - Add support for `components` and `Provider` in themes ## v1.5.7 2018-08-05 - Add more built-in themes ## v1.5.6 2018-08-05 - Add invisible buttons to left and right for use on mobile devices ## v1.5.5 2018-08-05 - Update docs ## v1.5.4 2018-08-04 - Add docs for syntax highlighting ## v1.5.3 2018-08-04 - Add overview mode to see multiple slides at once - Add default layouts for inverting colors and creating a split layout slide ## v1.5.2 2018-08-04 - Add default styles for tables ## v1.5.1 2018-08-04 - Use remark-unwrap-images plugin ## v1.5.0 2018-08-04 - Add syntax highlighting option for fenced code blocks ## v1.4.4 2018-08-04 - Fix for how Appear children display on slide change ## v1.4.3 2018-08-04 - Update build setup for smaller package - Adjust keyboard shortcuts ## v1.4.2 2018-08-03 - Update ok-cli for better HTML output ## v1.4.1 2018-08-03 - Update docs - Add `yellow` theme ## v1.4.0 2018-08-03 - Adds Appear component - Adds propTypes to components - Update README ## v1.3.2 2018-08-02 - Remove default `target="_blank"` from links - Move custom Provider component into app ## v1.3.1 2018-08-02 - Add speaker notes markdown syntax and component ## v1.3.0 2018-08-02 - Add presenter mode with preview of next slide and timer ## v1.2.3 2018-08-01 - Fix `history.pushState` hash ## v1.2.2 2018-07-31 - Update dev server for static file server ## v1.2.1 2018-07-31 - Merge custom components with defaults ## v1.2.0 2018-07-31 - Add PDF export to CLI ## v1.1.3 2018-07-31 - Add emoji support - Update `.npmignore` ## v1.1.2 2018-07-31 - Fix `--no-open` option - Add ability to ignore key events - Normalize newlines for cross-platform compatibility ## v1.1.1 2018-07-31 - Fix for supporting markdown tables ## v1.1.0 2018-07-30 - Updated styles and theming - Updated docs ## v1.0.3 2018-07-29 - Updated docs ## v1.0.2 2018-07-29 - Add hashchange listeners ## v1.0.1 2018-07-29 - Fix for `--out-dir` CLI flag ## v1.0.0 2018-07-29 Initial release ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing Thanks for contributing! 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. If you'd like to make a significant change to the code base, please open an issue for discussion first, otherwise we'd love to have your help! ## Development This project is set up as a monorepo using Yarn Workspaces. 1. Clone the repo 2. Install dependencies with `yarn` 3. Run `yarn start` to see the demo `docs/demo.mdx` ### Watch mode To watch files for changes during development, run `npm run watch` ## Testing Tests are located in each package. Run `yarn test` - Watch Mode: `yarn test --watch` - Coverage: `yarn test --coverage` --- # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or - advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic - address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jxnblk@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org ================================================ FILE: LICENSE.md ================================================ # The MIT License (MIT) Copyright (c) 2018 Brent Jackson 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: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 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. ================================================ FILE: MIGRATION.md ================================================ # Migration ## Upgrading to MDX Deck v4 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. - If you are using a custom `Provider` component, replace this component with the new `Header` and `Footer` components - Note that some functionality previously available in the Provider component is no longer possible - Replace any instance of the `Appear` component with the new `Steps` component. This should be a 1:1 change. - The document title is no longer inferred from the first heading. Use the `Head` component with a `` element instead. - Merging multiple themes using `export const themes` is no longer supported. Merge themes in a separate file, if necessary. - Functional themes are no longer supported. - Fixed aspect ratio is no longer supported. - Swipe gestures have been removed; these will be reintroduced in a later version. - If you are using `gatsby-theme-mdx-deck` directly, no major changes have been made to this package. ## Upgrading to MDX Deck v3 - The `export default` syntax for slide layouts is no longer supported. Replace this syntax with the layout component wrapped around the slide content instead. - The following packages have been deprecated. Import components directly from the `mdx-deck` package instead. - `@mdx-deck/components` - `@mdx-deck/layouts` - `@mdx-deck/mdx-plugin` - `@mdx-deck/loader` - `@mdx-deck/webpack-html-plugin` - The Gatsby theme package as been renamed: `gatsby-theme-mdx-deck` - Theming now uses [Theme UI][], and the theme format has changed. - See the [theming docs](/docs/theming.md) for information on creating custom themes. - **Or** use the `convertLegacyTheme` utility to shim themes written in the v2 format - The standalone CLI has been rewritten with Gatsby, and the following CLI flags are no longer supported: - `--webpack` - use the Gatsby theme directly to customize webpack features - `--out-dir` - decks are now built in the `public/` directory - `--no-html` - individual slides are rendered client side, but the first slide is always rendered as static HTML using Gatsby - Custom `Presenter` components can no longer be added to a theme. Use the component shadowing API with the Gatsby theme instead. - Multiple MDX files can no longer be combined into a single presentation [theme ui]: https://theme-ui.com ## Upgrading to MDX Deck v2 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. ### Slide separator spacing 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. For example, the following **will not** be split into a new slide, but instead will be treated as a Setext-style heading: ```md Hello --- Not another slide ``` To fix this, be sure all slides are separated with empty newlines around the `---`: ```md Hello --- Another slide ``` ### Syntax Highlighting 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. 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. [composable themes]: docs/theming.md#composing-themes ### Custom Layouts 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. For example, if you previously parsed children in your layout component, you should make the following change: ```jsx // v1 const children = React.Children.toArray(props.children.props.children) ``` ```jsx // updated for v2 const children = React.Children.toArray(props.children) ``` ### Theming If you've built a custom theme, some of the theming API has changed. Please refer to the [theming docs](docs/theming.md) for more info, and note that MDX Deck now uses [Emotion][] for theming. ### Third-Party Components 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. If you absolutely must use one of these libraries, you can continue to use v1 for the time being. ### Library Authors 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. Feel free to reach out by opening an issue for any assistance in upgrading your library to work with this library's internal APIs. [emotion]: https://emotion.sh ================================================ FILE: babel.config.js ================================================ module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react', ], } ================================================ FILE: cypress/integration/hello.js ================================================ context('MDX Deck', () => { beforeEach(() => { cy.visit('http://localhost:8000') }) it('opens', () => { cy.visit('http://localhost:8000') }) it('contains the title', () => { cy.contains('MDX Deck') }) /* doesn't work?? */ it('goes to the next slide', () => { cy.get('body') .trigger('keydown', { keyCode: 39, }) .contains('Presentation') }) }) ================================================ FILE: cypress/plugins/index.js ================================================ // *********************************************************** // This example plugins/index.js can be used to load plugins // // You can change the location of this file or turn off loading // the plugins file with the 'pluginsFile' configuration option. // // You can read more here: // https://on.cypress.io/plugins-guide // *********************************************************** // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config } ================================================ FILE: cypress/support/commands.js ================================================ // *********************************************** // This example commands.js shows you how to // create various custom commands and overwrite // existing commands. // // For more comprehensive examples of custom // commands please read more here: // https://on.cypress.io/custom-commands // *********************************************** // // // -- This is a parent command -- // Cypress.Commands.add("login", (email, password) => { ... }) // // // -- This is a child command -- // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) // // // -- This is a dual command -- // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) // // // -- This is will overwrite an existing command -- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) ================================================ FILE: cypress/support/index.js ================================================ // *********************************************************** // This example support/index.js is processed and // loaded automatically before your test files. // // This is a great place to put global configuration and // behavior that modifies Cypress. // // You can change the location of this file or turn off // automatically serving support files with the // 'supportFile' configuration option. // // You can read more here: // https://on.cypress.io/configuration // *********************************************************** // Import commands.js using ES2015 syntax: import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') ================================================ FILE: cypress.json ================================================ { "baseUrl": "http://localhost:8000/" } ================================================ FILE: docs/Counter.js ================================================ import React from 'react' import styled from '@emotion/styled' import { space, color } from 'styled-system' const Root = styled.div({ display: 'flex', alignItems: 'center', }) const Button = styled.button( { appearance: 'none', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'bold', borderRadius: '4px', border: 'none', width: '2em', '&:focus': { outline: 'none', boxShadow: '0 0 0 2px magenta', }, }, space, color ) Button.defaultProps = { m: 0, px: 3, py: 2, color: 'background', bg: 'text', } const Samp = styled.samp(space) export default class Counter extends React.Component { state = { count: 0, } inc = () => { this.setState(state => ({ count: state.count + 1 })) } dec = () => { this.setState(state => ({ count: state.count - 1 })) } render() { return ( <Root> <Button ml="auto" onClick={this.dec}> - </Button> <Samp mx={3}>{this.state.count}</Samp> <Button mr="auto" onClick={this.inc}> + </Button> </Root> ) } } ================================================ FILE: docs/api.md ================================================ # API ## Components - `Head`: Adds elements to the document `<head>` - `Notes`: Adds speaker notes to a slide - `Steps`: Steps through child elements one-by-one ## `useSteps` The `useSteps` hook can be used to register custom components that rely on multiple "steps" within a single slide, similar to the Appear component. The hook takes one argument for the total `length` of steps and returns the current `step` state. ```jsx // example import React from 'react' import { useSteps } from 'mdx-deck' export default props => { const length = 4 const step = useSteps(length) return ( <h2> The current step is {step}/{length} </h2> ) } ``` ## `useDeck` The `useDeck` hook returns the MDX Deck state. ================================================ FILE: docs/components.md ================================================ # Components MDX Deck includes components to help with creating presentations. These components are provided with MDX's *shortcodes* functionality, so they do not need to be imported. ## Head Use the `Head` component to set content in the document head. ```mdx // example for twitter cards <Head> <title>My Presentation ``` ## Notes Speaker notes that only show in presenter mode can be added to any slide with the `Notes` component. ```mdx # Slide Content - Only visible in presenter mode - Markdown syntax can be used with empty lines around the content ``` ## Header Use the `Header` component to render a persistent header (at the top of the screen) across the entire presentation. ```mdx
Put a logo, handle, or something else here...
# My Presentation ``` ## Footer The `Footer` component renders a persistent footer (at the bottom of the screen) across the entire presentation. ```mdx # My Presentation ``` ## Steps Use the `Steps` (formerly `Appear`) component to make child elements appear one at a time within a single slide. Use the left and right arrow keys to step through each element. ```mdx - One - Two - Three - Four ``` Internally, the `Steps` component uses the `useSteps` hook, which can be used to build custom components with similar behavior. ================================================ FILE: docs/demo.mdx ================================================ import Counter from './Counter' MDX Deck # MDX Deck MDX-based presentation decks --- # Presentation decks --- # Built with [MDX][] [MDX]: https://github.com/mdx-js/mdx --- ### Import and Use React Components --- - Make bulleted lists - To help make your point --- ## Getting Started 1. `npm i -D mdx-deck` 2. Write in markdown and JSX 3. Present --- ## Features - Presenter Mode - Speaker Notes - Theming --- ```jsx ``` - These are speaker notes - And they won't be rendered in your slide --- ```jsx class extends React.Component { render () { return (

Indented code

 ) } } ``` --- > “Blockquotes are essential to any good presentation” – Anonymous --- ### Steps Component - One - Two - Three - Four --- Testing object fit --- --- ![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&h=1024&q=20&fit=crop) Inline image --- Prop | Type | Description ---|---|--- `width` | number, string, or array | sets element width `color` | string | sets foreground color `bg` | string | sets background color --- # Get started :sunglasses: [GitHub](https://github.com/jxnblk/mdx-deck) ================================================ FILE: docs/exporting.md ================================================ # Exporting ## Static Build To export your deck as a static HTML page with JS bundle, add a `build` script to your `package.json` file. ```json "scripts": { "build": "mdx-deck build deck.mdx" } ``` ## PDF To export a deck as PDF, use the [`website-pdf`](https://www.npmjs.com/package/website-pdf) CLI. Start the MDX Deck dev server, then run the following command to create a PDF: ```sh npx website-pdf http://localhost:8000/print -o deck.pdf ``` ## PNG To export a PNG image, use the [`capture-website-cli`](https://github.com/sindresorhus/capture-website-cli) CLI. Start the dev server, then run the following: ```sh npx capture-website-cli http://localhost:8000 deck.png ``` ## Open Graph Image To add an open graph image, use the [Head](components.md#Head) component to add a meta tag. Note that the meta tag should point to a full URL, including schema and domain name. ```mdx import { Head } from 'mdx-deck' ``` ================================================ FILE: docs/gatsby.md ================================================ # Usage with Gatsby MDX Deck includes a Gatsby theme, which can be used in any existing Gatsby site. 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. The theme also supports adding multiple presentations to a single site. Install the theme in your Gatsby site. ```sh npm i gatsby-theme-mdx-deck ``` Add the theme to the `plugins` array in your configuration. ```js // gatsby-config.js module.exports = { plugins: [ 'gatsby-theme-mdx-deck', ] } ``` Create a directory to store your presentations. ```sh mkdir decks ``` Add MDX Deck presentations to this directory. Each deck will create a new page using the filename as its route. ```mdx # Hello --- This is my presentation ``` After running `gatsby develop`, this presentation should be viewable at `http://localhost:8000/hello` . ## Component Shadowing Because MDX Deck is built as a Gatsby theme, you can leverage the component shadowing API to override any part of the interface and create child themes based on MDX Deck that provide custom behavior. See the [gatsby-theme-mdx-deck](../packages/gatsby-theme) docs for more documentation and options. ================================================ FILE: docs/layouts.md ================================================ # Layouts Each slide can include a custom layout around its content. This is a way to provide *templates* for certain slides. ```js // example Layout.js import React from 'react' export default ({ children }) => (
{children}
) ``` ```mdx import Layout from './Layout' # No Layout --- # Custom Layout ``` The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS. **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. ## Built-in Layouts MDX Deck includes a few built-in layouts for common slide variations. ### Invert Inverts the foreground and background colors from the theme. ```mdx import { Invert } from 'mdx-deck' # Normal --- # Inverted ``` ### Split Creates a horizontal layout with the first child on the left and all other children on the right. ```mdx import { Split } from 'mdx-deck' ![](kitten.png) ## Meow ``` ### SplitRight Same as the Split component, but renders the first child on the right. ```mdx import { SplitRight } from 'mdx-deck' ![](kitten.png) ## Meow ``` ### Horizontal Similar to the Split components, but renders all children side-by-side ### FullScreenCode Renders code blocks fullscreen. ````mdx import { FullScreenCode } from 'mdx-deck' ```jsx ``` ```` ================================================ FILE: docs/package.json ================================================ { "private": true, "name": "@mdx-deck/docs", "version": "4.1.1", "main": "index.js", "author": "Brent Jackson ", "license": "MIT", "scripts": { "start": "mdx-deck demo.mdx", "build": "mdx-deck build demo.mdx" }, "dependencies": { "@emotion/core": "^10.0.7", "@emotion/styled": "^10.0.7", "mdx-deck": "^4.1.1", "styled-system": "^5.0.15" } } ================================================ FILE: docs/presenting.md ================================================ # Presenting 1. Enter presenter mode by pressing `Opt + P` 2. Click the link at the bottom to open the presentation in another tab 3. Move the new tab to its own window in the screen or projector that the audience sees 4. Control the presentation from the original window 5. Be sure to hide your mouse cursor so that it's not visible to the audience ## Speaker Notes Notes that only show in presenter mode can be added to any slide by using the `` component. ```mdx import { Notes } from 'mdx-deck' # Slide Content Only visible in presenter mode ``` ================================================ FILE: docs/themes.md ================================================ # Themes ![Default theme](images/default.png) --- ![Big theme](images/big.png) ```js import { big } from 'mdx-deck/themes' ``` --- ![Book theme](images/book.png) ```js import { book } from 'mdx-deck/themes' ``` --- ![Code theme](images/code.png) ```js import { code } from 'mdx-deck/themes' ``` --- ![Comic theme](images/comic.png) ```js import { comic } from 'mdx-deck/themes' ``` --- ![Condensed theme](images/condensed.png) ```js import { condensed } from 'mdx-deck/themes' ``` --- ![Dark theme](images/dark.png) ```js import { dark } from 'mdx-deck/themes' ``` --- ![Future theme](images/future.png) ```js import { future } from 'mdx-deck/themes' ``` --- ![Hack theme](images/hack.png) ```js import { hack } from 'mdx-deck/themes' ``` --- ![Notes theme](images/notes.png) ```js import { notes } from 'mdx-deck/themes' ``` --- ![Script theme](images/script.png) ```js import { script } from 'mdx-deck/themes' ``` --- ![Swiss theme](images/swiss.png) ```js import { swiss } from 'mdx-deck/themes' ``` --- ![Yellow theme](images/yellow.png) ```js import { yellow } from 'mdx-deck/themes' ``` --- Poppins ```js import { poppins } from 'mdx-deck/themes' ``` ================================================ FILE: docs/theming.md ================================================ # Theming MDX Deck uses [Theme UI][] and [Emotion][] for styling, making practically any part of the presentation themeable. ## Built-in Themes MDX Deck includes several built-in themes to change the look and feel of the presentation. Export `theme` from your MDX file to enable a theme. ```mdx import { themes } from 'mdx-deck' export const theme = themes.dark # Dark Theme ``` View the [Themes](themes.md) docs to see all available themes. ## Custom Themes A custom theme can be provided by exporting `theme` from the MDX file. ```mdx import myTheme from './theme' export const theme = myTheme # Hello ``` Themes are based on [Theme UI][] and support customizing typography, color, layout, and other element styles. ```js // Example theme.js export default { fonts: { body: 'Roboto, sans-serif', monospace: '"Roboto Mono", monospace', }, colors: { text: 'white', background: 'black', primary: 'blue', }, } ``` ## Composing Themes To compose multiple themes together, merge the objects together into a single theme and export that theme from your deck. ## Google Fonts Themes can specify a `googleFont` field to automatically add a `` tag to the document head. Alternatively, use the `` component to add a custom `` tag. ## Syntax Highlighting By default fenced code blocks do not include any syntax highlighting. 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][]. MDX Deck includes two themes for adding syntax highlighting with [react-syntax-highlighter][]: `highlight` and `prism`. ```mdx import { themes } from 'mdx-deck' export const theme = { ...themes.prism } ``` Since MDX supports using React components inline, you can also import a syntax highlighting component directly, if you prefer. ```mdx import Highlighter from 'react-syntax-highlighter' {`export const hello = 'hi'`} ``` ## Styling Elements Add a `theme.styles` object to style specific markdown elements. ```js // example theme export default { styles: { h1: { textTransform: 'uppercase', letterSpacing: '0.1em', }, blockquote: { fontStyle: 'italic', }, } } ``` ## Reference - `colors`: object of colors used for MDX components - `text`: root foreground color - `background`: root background color - `primary`: primary color - `fonts.body`: base font family - `fonts.heading`: heading font family - `fonts.monospace`: font family for `
` and ``
- `text.heading`: styles for all headings
- `styles`: Theme UI styles for MDX elements
- `styles.Slide`: styles for the wrapping Slide component
- `styles.Header`: styles for the Header component
- `styles.Footer`: styles for the Footer component
- `components`: object of MDX components
- `googleFont`: Stylesheet URL for adding a Google Font

[emotion]: https://emotion.sh
[theme ui]: https://theme-ui.com
[mdx]: https://github.com/mdx-js/mdx
[react-syntax-highlighter]: https://github.com/conorhastings/react-syntax-highlighter


================================================
FILE: examples/README.md
================================================

# Examples

- [Basic Example](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/basic)
- [Multiple Decks](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/multiple)
- [Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/syntax-highlighting)
- [Prism Syntax Highlighting](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/prism)
- [Aspect Ratio](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/aspect-ratio)
- [Layouts](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/layouts)
- [Images](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/images)
- [Appear](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/appear)
- [Head](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/head)
- [Provider](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/provider)
- [Themes](https://codesandbox.io/s/github/jxnblk/mdx-deck/tree/master/examples/themes)




================================================
FILE: examples/aspect-ratio/deck.mdx
================================================
import { future, aspect } from 'mdx-deck/themes'

export const themes = [
  future,
  aspect,
]

# Hello!

---

This deck is fluid to a 16:9 aspect ratio

---

Images will still render full bleed at other aspect ratios



================================================
FILE: examples/aspect-ratio/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/aspect-ratio-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/basic/deck.mdx
================================================

# Hello!

---

This is MDX Deck


================================================
FILE: examples/basic/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/basic-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/gatsby/decks/beep.mdx
================================================

# Beep

---

## Boop

---

Bop


================================================
FILE: examples/gatsby/decks/hello.mdx
================================================

# Hello

---

This is built with gatsby-theme-mdx-deck


================================================
FILE: examples/gatsby/gatsby-config.js
================================================
module.exports = {
  pathPrefix: '/mdx-deck',
  plugins: [
    'gatsby-plugin-catch-links',
    {
      resolve: 'gatsby-theme-mdx-deck',
      options: {
        basePath: '/slides',
      },
    },
  ],
}


================================================
FILE: examples/gatsby/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/gatsby-example",
  "version": "4.1.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "gatsby develop",
    "clean": "gatsby clean",
    "build": "gatsby build --prefix-paths",
    "serve": "gatsby serve --prefix-paths",
    "gh-pages": "npx gh-pages -d public"
  },
  "dependencies": {
    "gatsby": "*",
    "gatsby-plugin-catch-links": "^2.1.2",
    "gatsby-theme-mdx-deck": "^4.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}


================================================
FILE: examples/gatsby/src/pages/index.mdx
================================================

# MDX Deck Gatsby Example

- [Deck](/slides)


================================================
FILE: examples/head/deck.mdx
================================================


  Hello


# Hello!

---

This deck has a custom title



================================================
FILE: examples/head/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/head-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/header-footer/deck.mdx
================================================




# Header







[@jxnblk](https://twitter.com/jxnblk)




# Hello!

---

This deck has a header and footer



================================================
FILE: examples/header-footer/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/header-footer-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/images/deck.mdx
================================================
import {
  Image,
} from 'mdx-deck'

# Hello!

---



## Background Image






================================================
FILE: examples/images/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/images-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/layouts/deck.mdx
================================================

# Hello!

---



## Invert Layout



---



![](https://source.unsplash.com/random/768x2048?brooklyn)

## Split Layout



---



![](https://source.unsplash.com/random/768x2048?brooklyn)

## SplitRight Layout



---



## Horizontal Layout

![](https://source.unsplash.com/random/768x2048?brooklyn)

![](https://source.unsplash.com/random/768x2048?brooklyn)



---



```jsx

```




================================================
FILE: examples/layouts/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/layouts-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/multiple/deck.js
================================================
import { slides as one } from './one.mdx'
import { slides as two } from './two.mdx'

export const slides = [...one, ...two]


================================================
FILE: examples/multiple/one.mdx
================================================

# Hello!

---

This is MDX Deck #1


================================================
FILE: examples/multiple/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/multiple-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.js",
    "build": "mdx-deck build deck.js",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/multiple/two.mdx
================================================

# This is Deck # 2

---

:sunglasses:


================================================
FILE: examples/prism/deck.mdx
================================================
import { future, prism } from 'mdx-deck/themes'

export const themes = [
  future,
  prism
]

# Hello!

---

```jsx
import React from 'react'

export default props =>
  
Highlighting

```


================================================
FILE: examples/prism/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/prism-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/provider/deck.mdx
================================================
import { comic } from 'mdx-deck/themes'
import theme from './theme'

export const themes = [
  comic,
  theme,
]

# Hello!

---

This deck has a custom Provider component



================================================
FILE: examples/provider/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/provider-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/provider/theme.js
================================================
import React from 'react'

const Provider = props => (
  

    {props.children}
    

      Put your name here
    

  

)

export default {
  Provider,
}


================================================
FILE: examples/steps/deck.mdx
================================================

# Hello!

---


    
  
  • One
    • 
  
    
  • Two
    • 
    
  • Three
    • 
    
  • Four
    • 
      



---

## One



## Two
## Three





================================================
FILE: examples/steps/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/appear-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/syntax-highlighting/deck.mdx
================================================
import { future, highlight } from '@mdx-deck/themes'

export const theme = {
  ...future,
  ...highlight
}

# Hello!

---

```jsx
import React from 'react'

export default props =>
  
Highlighting

```


================================================
FILE: examples/syntax-highlighting/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/syntax-highlighting-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/themes/deck.mdx
================================================
import { ThemeName } from './theme'

export { theme } from './theme'

# Hello !

---

This deck has a custom Provider component
that lets you switch between all the different themes.

---

```jsx
import React from 'react'

export default ({ children }) => {
  return (
    <>
      {children}
    
  )
}
```


================================================
FILE: examples/themes/package.json
================================================
{
  "private": true,
  "name": "@mdx-deck/themes-example",
  "version": "4.1.1",
  "scripts": {
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx",
    "help": "mdx-deck"
  },
  "devDependencies": {
    "mdx-deck": "^4.1.1"
  }
}


================================================
FILE: examples/themes/theme.js
================================================
import React, { useState, useContext } from 'react'
import { ThemeProvider } from 'emotion-theming'
import { MDXProvider } from '@mdx-js/react'
import * as themes from 'mdx-deck/themes'

const names = Object.keys(themes)

const DefaultProvider = props => <>{props.children}

const Context = React.createContext()

const Provider = props => {
  const [name, setTheme] = useState(names[0])
  const cycle = e => {
    const i = (names.indexOf(name) + 1) % names.length
    setTheme(names[i])
  }

  const baseTheme = themes[name]
  const theme = typeof baseTheme === 'function' ? baseTheme({}) : baseTheme
  const Root = theme.Provider || DefaultProvider

  return (
    

      
        
          
            {props.children}
          
        
      
      

        
      

    

  )
}

export const ThemeName = props => {
  const context = useContext(Context)

  return <>{context}
}

export const theme = {
  Provider,
}


================================================
FILE: lerna.json
================================================
{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "4.1.1"
}


================================================
FILE: netlify.toml
================================================
[build]
  command = "npm i yarn@latest && yarn && yarn build"
  publish = "docs/public"


================================================
FILE: package.json
================================================
{
  "private": true,
  "workspaces": [
    "packages/*",
    "templates/*",
    "examples/*",
    "docs"
  ],
  "scripts": {
    "start": "yarn workspace @mdx-deck/docs start",
    "build": "yarn workspace @mdx-deck/docs build",
    "export": "./packages/export/cli.js http://localhost:8000/print -o docs/public/deck.pdf",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "test:dev": "start-server-and-test start http://localhost:8000 cypress:open",
    "jest": "jest",
    "test": "jest && start-server-and-test start http://localhost:8000 cypress:run"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "@testing-library/react": "^10.0.2",
    "cypress": "^4.3.0",
    "husky": "^4.2.1",
    "jest": "^25.1.0",
    "jest-emotion": "^10.0.27",
    "lerna": "^3.13.1",
    "lint-staged": "^10.0.4",
    "prettier": "^1.16.4",
    "react-test-renderer": "^16.12.0",
    "start-server-and-test": "^1.9.1"
  },
  "jest": {
    "testMatch": [
      "**/packages/**/test/*.js"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/.cache/",
      "/public/"
    ],
    "coverageReporters": [
      "lcov",
      "text",
      "html"
    ],
    "collectCoverageFrom": [
      "packages/**/src/**/*.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    },
    "snapshotSerializers": [
      "jest-emotion"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json}": [
      "prettier --write",
      "git add"
    ]
  }
}


================================================
FILE: packages/create-deck/README.md
================================================
# npm init deck

Create mdx-deck presentations

```sh
npm init deck my-presentation
```


================================================
FILE: packages/create-deck/cli.js
================================================
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const meow = require('meow')
const chalk = require('chalk')
const initit = require('initit')

const logo = chalk.magenta('[mdx-deck]')
const log = (...args) => {
  console.log(logo, ...args)
}
log.error = (...args) => {
  console.log(chalk.red('[ERROR]'), ...args)
}

const template = 'jxnblk/mdx-deck/templates/basic'

const cli = meow(
  `
  Usage

    $ npm init deck my-presentation

    $ npx create-deck my-presentation

`,
  {
    booleanDefault: undefined,
    flags: {
      help: {
        type: 'boolean',
        alias: 'h',
      },
      version: {
        type: 'boolean',
        alias: 'v',
      },
    },
  }
)

const [name] = cli.input

if (!name) {
  cli.showHelp(0)
}

// todo: ensure directory doesn't exist
initit({ name, template })
  .then(res => {
    log('created mdx-deck')
    process.exit(0)
  })
  .catch(err => {
    log.error('failed to create mdx-deck')
    log.error(err)
    process.exit(1)
  })


================================================
FILE: packages/create-deck/package.json
================================================
{
  "name": "create-deck",
  "version": "4.0.0",
  "description": "Create mdx-deck presentations",
  "bin": {
    "create-deck": "cli.js"
  },
  "author": "Brent Jackson",
  "license": "MIT",
  "dependencies": {
    "chalk": "^3.0.0",
    "initit": "^1.0.0-2",
    "meow": "^6.0.0"
  },
  "gitHead": "13d00b47780424cc3b52d38ad6f19e99d007c06a"
}


================================================
FILE: packages/gatsby-plugin/.gitignore
================================================
coverage
.cache
public


================================================
FILE: packages/gatsby-plugin/.npmignore
================================================
.cache
coverage
public
test


================================================
FILE: packages/gatsby-plugin/README.md
================================================

# @mdx-deck/gatsby-plugin

Plugin used internally by mdx-deck core package -- **not intended for standalone usage**

See [`gatsby-theme-mdx-deck`](https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme) for custom usage with Gatsby


================================================
FILE: packages/gatsby-plugin/gatsby-browser.js
================================================
export { wrapPageElement } from './src'


================================================
FILE: packages/gatsby-plugin/gatsby-config.js
================================================
module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
  ],
}


================================================
FILE: packages/gatsby-plugin/gatsby-node.js
================================================
const fs = require('fs')
const path = require('path')
const { createPath, validatePath } = require('gatsby-page-utils')
const remarkPlugins = [
  require('remark-images'),
  require('remark-unwrap-images'),
  require('remark-emoji'),
]

exports.onPreBootstrap = ({}, opts = {}) => {
  opts.dirname = opts.dirname || __dirname
  const staticSourceDir = path.join(opts.dirname, 'static')
  const hasStaticDir = fs.existsSync(staticSourceDir)

  if (fs.existsSync('./static')) {
    // remove temp directory
    fs.unlinkSync('./static')
  }

  if (hasStaticDir) {
    // link to source static directory
    fs.symlinkSync(staticSourceDir, './static')
  }
}

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.mdx$/,
          use: [
            loaders.js(),
            {
              loader: '@mdx-js/loader',
              options: {
                remarkPlugins,
              }
            },
          ]
        }
      ]
    }
  })
}

exports.resolvableExtensions = () => ['.mdx']

exports.createPages = ({
  actions,
}, {
  path: source,
} = {}) => {
  if (!source) return

  actions.createPage({
    path: '/',
    matchPath: '/*',
    component: source,
  })
}


================================================
FILE: packages/gatsby-plugin/gatsby-ssr.js
================================================
export { wrapPageElement } from './src'


================================================
FILE: packages/gatsby-plugin/index.js
================================================
// noop
export * from './src'


================================================
FILE: packages/gatsby-plugin/package.json
================================================
{
  "name": "@mdx-deck/gatsby-plugin",
  "version": "4.1.1",
  "main": "index.js",
  "author": "Brent Jackson",
  "license": "MIT",
  "repository": "github:jxnblk/mdx-deck",
  "scripts": {
    "start": "gatsby develop --open"
  },
  "peerDependencies": {
    "gatsby": "^2.14.0",
    "react": "^16.10.0",
    "react-dom": "^16.10.0"
  },
  "devDependencies": {
    "gatsby": "^2.14.0",
    "react": "^16.10.0",
    "react-dom": "^16.10.0"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.5.3",
    "@mdx-js/mdx": "^1.5.3",
    "gatsby-page-utils": "^0.0.39",
    "gatsby-plugin-react-helmet": "^3.1.18",
    "hhmmss": "^1.0.0",
    "react-helmet": "^5.2.1",
    "remark-emoji": "^2.0.2",
    "remark-images": "^2.0.0",
    "remark-unwrap-images": "^2.0.0",
    "theme-ui": "^0.3.0-alpha.6"
  },
  "gitHead": "13d00b47780424cc3b52d38ad6f19e99d007c06a",
  "publishConfig": {
    "access": "public"
  }
}


================================================
FILE: packages/gatsby-plugin/src/clock.js
================================================
import React from 'react'

export default props => {
  const [time, setTime] = React.useState(new Date().toLocaleTimeString())

  React.useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date()
      setTime(now.toLocaleTimeString())
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  return time
}


================================================
FILE: packages/gatsby-plugin/src/components.js
================================================
/** @jsx jsx */
import { jsx } from 'theme-ui'
import React from 'react'
import useSteps from './use-steps'

const createComponent = key => {
  const Component = () => false
  Component.__mdxDeck = true
  Component[`__mdxDeck_${key}`] = true
  return Component
}

export const Notes = createComponent('notes')
export const Head = createComponent('head')
export const Header = createComponent('header')
export const Footer = createComponent('footer')

export const Color = ({
  color,
  bg,
  ...props
}) =>
  


export const Invert = props =>
  

export const StepList = props => {
  const list = React.Children.toArray(props.children)
    .find(child => /^(ul|ol)$/.test(child.props.originalType))

  // ensure this works
  const items = React.Children.toArray(list && list.props.children)

  const step = useSteps(items.length)

  const children = items.map((item, i) => React.cloneElement(item, {
    style: {
      visibility: i < step ? 'visible' : 'hidden'
    }
  }))

  return React.cloneElement(list, { children })
}

export const Appear = props => {
  const children = React.Children.toArray(props.children)
  const step = useSteps(children.length)
  const styled = children.map((child, i) =>
    React.cloneElement(child, {
      style: {
        visibility: i < step ? 'visible' : 'hidden',
      }
    })
  )
  return {styled}
}

export const Steps = props => {
  const list = React.Children.toArray(props.children)
    .find(child => /^(ul|ol)$/.test(child.props.originalType))

  if (!list) return 
  return 
}

export const Image = ({
  src,
  width = '100%',
  height = '100%',
  size = 'cover',
  ...props
}) =>
  


export const Horizontal = ({
  ...props
}) => {
  const children = React.Children.toArray(props.children)
  return (
    

      {children.map((child, i) => (
        

          {child}
        

      ))}
    

  )
}

const Half = props => 


export const Split = ({ reverse, ...props }) => {
  const [first, ...rest] = React.Children.toArray(props.children)
  const children = reverse
    ? [ {rest}, {first} ]
    : [ {first}, {rest} ]

  return (
    

      {children}
    

  )
}

export const SplitRight = props =>
  

export const FullScreenCode = ({ ...props }) => (
  

)


================================================
FILE: packages/gatsby-plugin/src/container.js
================================================
/** @jsx jsx */
import { jsx, Box, Flex } from 'theme-ui'
import React from 'react'
import { Context, useDeck } from './context'
import modes from './modes'
import Header from './header'
import Footer from './footer'
import Slide from './slide'
import Clock from './clock'
import Timer from './timer'

const Main = ({
  width = '100vw',
  height = '100vh',
  preview = false,
  ...props
}) => {
  const outer = useDeck()
  const context = {
    ...outer,
    main: !preview,
  }

  return (
    
      

        {props.header && (
          

            {props.header}
          

        )}
        {props.children}
        {props.footer && (
          

            {props.footer}
          

        )}
      

    
  )
}

const Presenter = props => {
  const next = props.slides[props.index + 1]

  return (
    

      

        

          
            {props.slide}
          
        

      

      
        
          {next}
        
        

          {props.notes}
        

        
          
            {props.index} / {props.slides.length - 1}
          
          
            ⬈
          
          
          
            
            {' '}
            
          
        
      
    

  )
}

const Overview = props => {
  const ref = React.useRef(null)

  React.useEffect(() => {
    if (!ref.current) return
    if (typeof ref.current.scrollIntoViewIfNeeded !== 'function') return
    ref.current.scrollIntoViewIfNeeded()
  }, [ref.current])

  return (
    

      

        {props.slides.map((slide, i) => (
          
 {
              props.setIndex(i)
              props.setStep(0)
              props.setSteps(0)
            }}
            sx={{
              p: 2,
              height: '30%'
            }}>
            
              {slide}
            
          

        ))}
      

      

        

          
            {props.slide}
          
        

      

    

  )
}

const Grid = props => {
  const ref = React.useRef(null)

  React.useEffect(() => {
    if (!ref.current) return
    if (typeof ref.current.scrollIntoViewIfNeeded !== 'function') return
    ref.current.scrollIntoViewIfNeeded()
  }, [ref.current])

  return (
    

      

        {props.slides.map((slide, i) => (
          
 {
              props.setIndex(i)
              props.setStep(0)
              props.setSteps(0)
              props.setMode(modes.default)
            }}
            sx={{
              p: 2,
              width: '25%',
              height: '23vh',
            }}>
            
              {slide}
            
          

        ))}
      

    

  )
}

const Print = props => {
  return (
    
      {props.slides.map((slide, i) => (
        

          
            {slide}
          
        

      ))}
    
  )
}

export default props => {
  const context = useDeck()

  switch (context.mode) {
    case modes.presenter:
      return 
    case modes.overview:
      return 
    case modes.grid:
      return 
    case modes.print:
      return 
    case modes.default:
    default:
      return 

  }
}


================================================
FILE: packages/gatsby-plugin/src/context.js
================================================
import React from 'react'

export const Context = React.createContext({})

export const useDeck = () => React.useContext(Context)


================================================
FILE: packages/gatsby-plugin/src/deck.js
================================================
import React from 'react'
import { Helmet } from 'react-helmet'
import { ThemeProvider, merge } from 'theme-ui'
import split from './split-slides'
import { Context } from './context'
import Keyboard from './keyboard'
import modes from './modes'
import Storage from './storage'
import Container from './container'
import Slide from './slide'
import baseTheme from './theme'

const getIndex = props => {
  if (!props.location) return 0
  const n = Number(props.location.hash.replace(/^#/, ''))
  return n
}

export default props => {
  const slides = split(props)
  const [index, setIndex] = React.useState(getIndex(props))
  const { slug } = props.pageContext || {}
  const slide = slides[index]

  const [mode, setMode] = React.useState(modes.default)
  const toggleMode = next => setMode(current =>
    current === next ? modes.default : next
  )

  const [step, setStep] = React.useState(0)
  const [steps, setSteps] = React.useState(0)

  const lastIndex = React.useRef(0)
  const direction = index - lastIndex.current

  React.useEffect(() => {
    lastIndex.current = index
  }, [index])

  React.useEffect(() => {
    if (props.location.pathname === '/print') return
    props.navigate('/#' + index, {
      replace: true,
    })
  }, [index])

  React.useEffect(() => {
    if (props.location.pathname === '/print') {
      setMode(modes.print)
    }
    if (!slide) {
      props.navigate('/')
      setIndex(0)
    }
  }, [])

  if (!slide) return false

  const context = {
    slides,
    slug,
    index,
    setIndex,
    direction,
    length: slides.length,
    slide,
    mode,
    setMode,
    toggleMode,
    notes: slide.notes,
    header: slides.header,
    footer: slides.footer,
    step,
    setStep,
    steps,
    setSteps,
  }

  context.previous = () => {
    if (steps && step > 0) {
      setStep(n => n - 1)
    } else {
      setIndex(n => n > 0 ? n - 1 : n)
      setStep(0)
      setSteps(0)
    }
  }

  context.next = () => {
    if (step < steps) {
      setStep(n => n + 1)
    } else {
      setIndex(n => n < slides.length - 1 ? n + 1 : n)
      setStep(0)
      setSteps(0)
    }
  }

  const theme = merge(baseTheme, props.theme || {})

  return (
    
      
      
      
        {slides.head.children}
        {theme.googleFont && }
      
      
        
          
            {slide}
          
        
      
    
  )
}


================================================
FILE: packages/gatsby-plugin/src/footer.js
================================================
/** @jsx jsx */
import { jsx } from 'theme-ui'

export default props =>