{"bin":{"mdx-deck":"./cli.js"},"bugs":{"url":"https://github.com/jxnblk/mdx-deck/issues"},"dist":{"shasum":"676b936281978649665a4ce4240db46bc45021bb","tarball":"https://registry.npmjs.org/mdx-deck/-/mdx-deck-1.7.15-0.tgz","fileCount":65,"integrity":"sha512-6QHPYi/CeUOt8Kxtb3iD7xEDLN4nUy7fLZCoGF8zlLrgNMeK1yd4hcnkuyzMsK32eo6Kp5mamG6ujvGXCjQbeg==","signatures":[{"sig":"MEUCIQCXJTEsnxpEopkAJYH3Ed4NkoElkR43OzusnvVYymRxKgIgRo5qHN6zXmbZ11Zv+mN6W8bFhhs2Ucf393HnJMm51lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/FjSCRA9TVsSAnZWagAAHywP/0X0aFC/TdrUu2PK0dnH\ngyxT/6yXeYoJB21V2jefPS3G8PthEcIYcR1Y1SGC1VYIURfhs8Es2pgFkMwg\nE5rpgAoCyaJE5SvT3SkvyBlHB8zapKX6PSe+rCtwuc+GKt2T1wjexENmB4JR\njc9FbELOHPeDvunozKR+c3wW3zuyS7LSL3RjwG2jeN1sIONtUkkvTHHg3vB+\neDkIyXiYhp19C5HV0YOHMPcTH7CZ06E0eMzEA+dUQeYfq35VUvFWG59yR9xJ\nUJJ+j+imwfxE1/L+IB3GJMevu4J/D9hP1p/SFOoON0jznT1bQ3XuxoCZmfq8\nkopHbnqMjzP8nRGmGUJiu3FwH8U86XR0ZtScCoofvHRz68uiIIy1odcSoWP7\nhiigMtxFMUqXKwdixrhGkOVqGg4jgg8BshDaSzhfpNp4g01JI4jxAmqFAR9Y\n18ZrJBNT6s2ynmPyrtmtFn8XHVAWEmwCnbGKpiPRgiMwXliSVs8V1L/SIrWc\nSIa2tmEKhedMJdYgT6/vuCbZmhuNhjNJfR91wtG1FZnJ1byw546VtV04ry00\nPWJPhznr/VbZo7wkFuPMbFIzp8Dm/s4zIyYIjhnx1Tv6gAHRj/uEClQaWXkY\n0bQ83Xs9iPxcRGnIr4C/kc1iiuwJ8PBZ8oiJN/aG4C14FpCWebIy4f/tNekq\nTn1g\r\n=eUeN\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"roots":["<rootDir>/test/"],"testURL":"http://localhost/","testMatch":["**/test/**/*.js"],"coverageReporters":["html"]},"main":"dist/index.js","name":"mdx-deck","husky":{"hooks":{"pre-commit":"lint-staged"}},"author":{"name":"Brent Jackson"},"readme":"# mdx-deck\n\n![](https://s3.amazonaws.com/jxnblk/mdx-deck.gif)\n\n[MDX][]-based presentation decks\n\n[![Build Status][badge]][travis]\n[![Version][version-badge]][npm]\n[![Downloads][downloads-badge]][npm]\n\n[badge]: https://img.shields.io/travis/jxnblk/mdx-deck.svg?style=flat-square\n[travis]: https://travis-ci.org/jxnblk/mdx-deck\n[version-badge]: https://img.shields.io/npm/v/mdx-deck.svg?style=flat-square\n[downloads-badge]: https://img.shields.io/npm/dw/mdx-deck.svg?style=flat-square\n[npm]: https://npmjs.com/package/mdx-deck\n\n```sh\nnpm i -D mdx-deck\n```\n\n- :memo: Write presentations in markdown\n- :atom_symbol: Import and use [React components](#imports)\n- :nail_care: Customizable [themes](#theming) and components\n- :zero: Zero-config CLI\n- :tipping_hand_woman: [Presenter mode](#presenter-mode)\n- :notebook: [Speaker notes](#speaker-notes)\n\n[View demo](https://jxnblk.com/mdx-deck)\n\n## Getting Started\n\nCreate an [MDX][] file and separate each slide with `---`.\n\n````mdx\n# This is the title of my deck\n---\n# About Me\n---\n```jsx\n<CodeSnippet />\n```\n---\nimport Demo from './components/Demo'\n\n<Demo />\n---\n# The end\n````\n\nAdd a run script to your `package.json` with the mdx-deck CLI\npointing to the `.mdx` file to start the dev server:\n\n```json\n\"scripts\": {\n  \"start\": \"mdx-deck deck.mdx\"\n}\n```\n\nStart the dev server:\n\n```sh\nnpm start\n```\n\n## Videos & Articles\n\n- [Egghead Tutorial][egghead] by [Andrew Del Prete](https://github.com/andrewdelprete).\n- [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]\n- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])\n- [What is MDX][kcd-video] by [Kent C. Dodds][]\n- [Build a Custom Provider Component for MDX-Deck](ks-egghead) by [Kyle Shevlin][]\n\n[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react\n[Kent C. Dodds]: https://mobile.twitter.com/kentcdodds\n[kcd-video]: http://youtu.be/d2sQiI5NFAM?a\n[kcd-medium]: https://blog.kentcdodds.com/mdx-deck-slide-decks-powered-by-markdown-and-react-bfc6d6af20da\n[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be\n[hw-demo]: https://github.com/hswolff/mdx-deck-demo\n[Harry Wolff]: https://mobile.twitter.com/hswolff\n[ks-egghead]: https://egghead.io/lessons/javascript-build-a-custom-provider-component-for-mdx-deck\n[Kyle Shevlin]: https://twitter.com/kyleshevlin\n\n## Quick Start\n\nTo create a new presentation with zero-configuration, run the following command to generate a presentation deck in a new folder:\n\n```sh\nnpm init deck my-presentation-name\n```\n\n## Using MDX\n\nMDX can use Markdown syntax and render React components with JSX.\n\n### Imports\n\nTo import components, use ES import syntax separated with empty lines from any markdown or JSX syntax.\n\n```mdx\nimport { Box } from 'grid-styled'\n\n<Box color='tomato'>\n  Hello\n</Box>\n```\n\nRead more about MDX syntax in the [MDX Docs][MDX].\n\n## Theming\n\nmdx-deck uses [styled-components][] for styling, making practically any part of the presentation themeable.\n\n### Built-in Themes\n\n<div>\n  <img src='docs/images/future.png' width='256' />\n  <img src='docs/images/comic.png' width='256' />\n  <img src='docs/images/yellow.png' width='256' />\n</div>\n\nmdx-deck includes several built-in themes to change the look and feel of the presentation.\nExport `theme` from your MDX file to enable a theme.\n\n```mdx\nexport { dark as theme } from 'mdx-deck/themes'\n\n# Dark Theme\n```\n\nMDX uses [exports](https://github.com/mdx-js/mdx#exports) as a way for files to communicate with their parent components.\nFor a list of available themes see the [Themes Docs](docs/themes.md).\n\n### Custom Themes\n\nA custom theme can be provided by exporting `theme` from the MDX file.\n\n```mdx\nexport { default as theme } from './theme'\n\n# Hello\n```\n\nThe theme should be an object with fields for fonts, colors, and CSS for individual components.\nIt's recommended that all custom themes extend the default theme as a base.\n\n```js\n// example theme.js\nimport theme from 'mdx-deck/themes'\n\nexport default {\n  // extends the default theme\n  ...theme,\n  // add a custom font\n  font: 'Roboto, sans-serif',\n  // custom colors\n  colors: {\n    text: '#f0f',\n    background: 'black',\n    link: '#0ff',\n  }\n}\n```\n\nRead more about theming in the [Theming docs](docs/theming.md)\n\n### Components\n\nmdx-deck includes built-in components to help with creating presentations, including a full screen Image component, the Appear component that allows stepping through parts of a single slide, and the Notes component for adding speaker notes.\n\nRead more in the [components docs](docs/components.md).\n\n### Libraries\n\nThese third-party libraries are great for use with mdx-deck.\n\n- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.\n- [mdx-code][]: Runnable code playgrounds for MDX Deck.\n\n[codesurfer]: https://github.com/pomber/code-surfer\n[mdx-code]: https://github.com/pranaygp/mdx-code\n\n### Layouts\n\nEach slide can include a custom layout around its content.\nThis can be used as a substitute for slide templates found in other presentation apps and libraries.\n\n```js\n// example Layout.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  <div\n    style={{\n      width: '100vw',\n      height: '100vw',\n      backgroundColor: 'tomato'\n    }}>\n    {children}\n  </div>\n)\n```\n\n```mdx\nimport Layout from './Layout'\n\n# No Layout\n\n---\nexport default Layout\n\n# Custom Layout\n```\n\nThe layout component will wrap the MDX elements within that slide,\nwhich means you can use a nested ThemeProvider or target elements with CSS-in-JS.\n\n### Built-in Layouts\n\nmdx-deck includes some built-in layouts for inverting theme colors and changing the layout of a slide. Read more about [built-in layouts](docs/components.md#layouts).\n\n## Presenter Mode\n\nmdx-deck includes a built-in presenter mode, with a preview of the next slide and a timer.\n\n![presenter mode screenshot](docs/images/presenter-mode.png)\n\nTo use presenter mode:\n\n- Open two windows in the same browser, with the same URL on two different screens. (this should work in both development and exported presentations)\n- In your window, press the `Option/Alt + P` keys to enter presenter mode.\n- Display the other window on the screen for the audience to see.\n- Control the presentation from your window by using the left and right arrow keys; the other window should stay in sync\n\n### Speaker Notes\n\nNotes that only show in presenter mode can be added to any slide.\nSpeaker notes can be added in one of the following two ways:\n\n**Markdown:** Use the `notes` language attribute in a fenced code block to add speaker notes.\n\n````mdx\n# Slide Content\n\n```notes\nThese are only visible in presenter mode\n```\n````\n\n**Notes Component:** Use the `Notes` component to create more complex speaker notes.\n\n```mdx\nimport { Notes } from 'mdx-deck'\n\n# Slide Content\n\n<Notes>\n  Only visible in presenter mode\n</Notes>\n```\n\n## Overview Mode\n\n![Overview Mode](docs/images/overview-mode.png)\n\nWhen editing a slide deck, toggle overview mode with `Option + O`.\nThis shows a list of all slides on the left and a preview of the current slide on the right.\n\n## Keyboard Shortcuts\n\nKey         | Description\n----------- | -----------\nLeft Arrow  | Go to previous slide (or step in [Appear][])\nRight Arrow | Go to next slide (or step in [Appear][])\nSpace       | Go to next slide (or step in [Appear][])\nUp Arrow    | Hide current step in [Appear][] component without navigating slides\nDown Arrow  | Show next step in [Appear][] component without navigating slides\nOption + P  | Toggle [Presenter Mode](#presenter-mode)\nOption + O  | Toggle [Overview Mode](#overview-mode)\nOption + G  | Toggle grid view mode\n\n[Appear]: docs/components.md#appear\n\n## Exporting\n\nAdd a `build` script to your `package.json` to export a presentation as HTML with a JS bundle.\n\n```json\n\"scripts\": {\n  \"build\": \"mdx-deck build deck.mdx\"\n}\n```\n\nSee more exporting options in the [Exporting Documentation](docs/exporting.md)\n\n## CLI Options\n\n```\n-p --port     Dev server port\n-h --host     Host the dev server listens to\n--no-open     Prevent from opening in default browser\n-d --out-dir  Output directory for exporting\n--no-html     Disable static HTML rendering\n--out-file    Filename for screenshot or PDF export\n--width       Width in pixels\n--height      Height in pixels\n--webpack     Path to webpack config file\n```\n\n## Docs\n\n- [Theming](docs/theming.md)\n- [Built-in Themes](docs/themes.md)\n- [Layouts](docs/layouts.md)\n- [Components](docs/components.md)\n- [Exporting](docs/exporting.md)\n- [Advanced Usage](docs/advanced.md)\n- [React API](docs/react.md)\n\n## Examples\n\n- [Design Systems & React][design-systems-react] by [Diana Mount](https://mobile.twitter.com/broccolini)\n- [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https://mobile.twitter.com/rauchg/)\n- [Simplify React][simplify-react] by [Kent C. Dodds](https://mobile.twitter.com/kentcdodds)\n- [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)\n- [Stop de #divFest][stop-div-fest] by [Sara Vieira](https://mobile.twitter.com/NikkitaFTW)\n\n---\n\n### Related\n\n- [MDX][]\n- [mdx-go][]\n- [ok-mdx][]\n- [Compositor x0][]\n- [styled-components][]\n- [styled-system][]\n- [Spectacle][]\n\n[MIT License](LICENSE.md)\n\n[MDX]: https://github.com/mdx-js/mdx\n[ok-mdx]: https://github.com/jxnblk/ok-mdx\n[Compositor x0]: https://github.com/c8r/x0\n[styled-system]: https://github.com/jxnblk/styled-system\n[styled-components]: https://github.com/styled-components/styled-components\n[Spectacle]: https://github.com/FormidableLabs/spectacle\n[mdx-go]: https://github.com/jxnblk/mdx-go\n\n<!-- examples -->\n\n[design-systems-react]: https://github-ds.now.sh/#0\n[brazil-now]: https://braziljs.now.sh\n[simplify-react]: https://simply-react.netlify.com/#0\n[99-problems]: https://99-problems-graphql-aint-one.now.sh/#0\n[stop-div-fest]: https://stop-div-fest.now.sh/\n","gitHead":"80277096e158768c819824b4d2bff3e2fc580dab","license":"MIT","scripts":{"pdf":"./cli.js pdf docs/index.mdx -d site","help":"./cli.js","test":"jest","babel":"babel src -d dist","build":"./cli.js build docs/index.mdx -d site","start":"./cli.js docs/index.mdx -p 8080","watch":"babel src -d dist --watch","prepare":"npm run babel","screenshot":"./cli.js screenshot docs/index.mdx -d docs"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"homepage":"https://github.com/jxnblk/mdx-deck#readme","keywords":[],"prettier":{"semi":false,"singleQuote":true,"trailingComma":"es5","jsxBracketSameLine":true},"repository":{"url":"git+https://github.com/jxnblk/mdx-deck.git","type":"git"},"_npmVersion":"6.4.1","description":"MDX-based presentation decks","directories":{},"lint-staged":{"*.{js,json}":["prettier --write","git add"]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"10.4.0","dependencies":{"koa":"^2.6.2","meow":"^5.0.0","chalk":"^2.4.1","react":"^16.6.1","hhmmss":"^1.0.0","mkdirp":"^0.5.1","rimraf":"^2.6.2","find-up":"^3.0.0","webpack":"^4.25.1","get-port":"^4.0.0","pkg-conf":"^2.1.0","superbox":"^2.1.0","ansi-html":"0.0.7","puppeteer":"^1.10.0","react-dom":"^16.6.1","babel-core":"^6.26.3","clipboardy":"^1.2.3","koa-static":"^5.0.0","lodash.get":"^4.4.2","prop-types":"^15.6.2","@mdx-js/mdx":"^0.15.7","@mdx-js/tag":"^0.15.6","gray-matter":"^4.0.1","koa-webpack":"^5.1.1","querystring":"^0.2.0","babel-loader":"^7.1.5","loader-utils":"^1.1.0","remark-emoji":"^2.0.2","html-entities":"^1.2.1","styled-system":"^3.1.11","webpack-merge":"^4.1.4","lodash.debounce":"^4.0.8","react-dev-utils":"^6.1.1","react-swipeable":"^4.3.0","babel-preset-env":"^1.7.0","stringify-object":"^3.3.0","normalize-newline":"^3.0.0","styled-components":"^3.4.10","babel-preset-react":"^6.24.1","webpack-hot-client":"^4.1.1","@compositor/webfont":"^1.0.39","babel-preset-stage-0":"^6.24.1","remark-unwrap-images":"^0.1.0","webpack-node-externals":"^1.7.2","mini-html-webpack-plugin":"^0.2.3","react-syntax-highlighter":"^8.1.0","progress-bar-webpack-plugin":"^1.11.0","babel-plugin-styled-components":"1.8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^1.1.3","prettier":"^1.15.2","babel-cli":"^6.26.0","lint-staged":"^7.3.0","react-test-renderer":"^16.6.1","mdx-deck-code-surfer":"^0.4.1","jest-styled-components":"^5.0.1"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/mdx-deck_1.7.15-0_1543264465027_0.9199279226733306","host":"s3://npm-registry-packages"},"_id":"mdx-deck@1.7.15-0","version":"1.7.15-0"}