{"bin":{"mdx-deck":"./cli.js"},"bugs":{"url":"https://github.com/jxnblk/mdx-deck/issues"},"dist":{"shasum":"10aefce98d69891d094c4e028beeef2321c1182a","tarball":"https://registry.npmjs.org/mdx-deck/-/mdx-deck-1.6.8-0.tgz","fileCount":63,"integrity":"sha512-uZh3Qo5bDQGcfDz7BMcInAfnaddPO7USmeD09uD+m0pByphCKbef1aIDa4vyBMRLkv6O6riRiCWRCC39r6U3Zg==","signatures":[{"sig":"MEUCIFJF+duv+HSx6/SBRieTvNoKE64tVbSVwaDdlFzWTSidAiEA7VFk0Q5a2zrFMVVPH2O7PWmy2O2Hvap7Gqi5VeWgnXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhH1GCRA9TVsSAnZWagAAvBkP/15BG57FUWbSAUxDvM1q\nwK0Au5QyGnbgFEUNkAF597leEGWkXJJF9CmEJ1DobxrjE4P9qUQK5VxosghB\n2QYCw28bzLGZSg0lCsdPz5EbyIWF4PBrNgkgCKaXVOftgkS1Ddq+A27EdGDo\nJxVCFc/WVbOgTRyzDTP1TddQtXJNhAIPoSaYT1mMRnZ766/XHK+/OpK4vFx7\nCoR54E9rZm2ArBmJ3tWvFK4RN5iqdOXZMFDYoDenYjiQpTpnHiGDWTdZFJBo\nb8YsxNSCBGx+Vy5JkmGGRweN9sfKD9e90FG1qq7rT8n2f8Z9PWewR/RW8j8h\nlGf5ObvLAXddZPnWuYyf88ZMHxno0/a6nPAdUY1N3nl5bhjkrcVtgeyh10ee\nhKTn4fq74ScfNvYLUj6IhhNCmBah3Wag3c8PvhKiL9FroSGA9geSnoUicwVr\ndwe8YIimrwcK+Sf+5qbi0P09jzX89wUQO+VW1SbdpPZdcb/kGQuV94i/BZNY\nQWFKU8rwcuCZWQ/KgADuA1IFFUWRQvRkI0PeQM8b1Wuq+rcmdlj8swsMhT1Q\nSBW5lNvDEmI5QFu8U2Mrmh624bo0gl3gz8Tr9Mj0xdFMlpq21HU9bVr5zXIu\ngSAXTZX8PWjD6yc4ZQUBCYgvD6N2KSnzzizG9a1l4LGrLjV5ITy/dTvqUJNr\nGtzr\r\n=i4BK\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","author":{"name":"Brent Jackson"},"readme":"\n# 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\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\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## Video Tutorial\n\nFor a video introduction, see this [egghead tutorial][egghead] by [@andrewdelprete](https://github.com/andrewdelprete).\n\n[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react\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### 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```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\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 + P` (`Alt + P`) key 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\nRight Arrow | Go to next slide\nSpace | Go to next slide\nUp Arrow | Hide current step in [Appear](#appear) component\nDown Arrow | Show next step in [Appear](#appear) component\nOption + P | Toggle [Presenter Mode](#presenter-mode)\nOption + O | Toggle [Overview Mode](#overview-mode)\nOption + G | Toggle grid view mode\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\n## CLI Options\n\n```\n-p --port     Dev server port\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```\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---\n\n### Related\n\n- [MDX][]\n- [ok-mdx][]\n- [ok-cli][]\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[ok-cli]: https://github.com/jxnblk/ok-mdx/tree/master/packages/ok-cli\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","gitHead":"8d4fa2e199ade9f5c027a0acce345f6fa4c37377","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 8989","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,"jsxBracketSameLine":true},"repository":{"url":"git+https://github.com/jxnblk/mdx-deck.git","type":"git"},"_npmVersion":"6.2.0","description":"MDX-based presentation decks","directories":{},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"10.9.0","dependencies":{"koa":"^2.5.2","meow":"^5.0.0","chalk":"^2.4.1","react":"^16.4.2","hhmmss":"^1.0.0","mkdirp":"^0.5.1","rimraf":"^2.6.2","webpack":"^4.16.5","get-port":"^4.0.0","pkg-conf":"^2.1.0","superbox":"^2.1.0","ansi-html":"0.0.7","puppeteer":"^1.6.1","react-dom":"^16.4.2","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.0","@mdx-js/tag":"^0.15.0","gray-matter":"^4.0.1","koa-webpack":"^5.1.0","querystring":"^0.2.0","babel-loader":"^7.1.5","loader-utils":"^1.1.0","remark-emoji":"^2.0.1","html-entities":"^1.2.1","styled-system":"^3.0.2","lodash.debounce":"^4.0.8","react-dev-utils":"^5.0.1","react-swipeable":"^4.3.0","babel-preset-env":"^1.7.0","stringify-object":"^3.2.2","normalize-newline":"^3.0.0","styled-components":">=3.0.0","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.0.2-0","webpack-node-externals":"^1.7.2","mini-html-webpack-plugin":"^0.2.3","react-syntax-highlighter":"^8.0.1","progress-bar-webpack-plugin":"^1.11.0","babel-plugin-styled-components":"^1.5.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.4.2","prettier":"^1.14.0","babel-cli":"^6.26.0","react-test-renderer":"^16.4.1","jest-styled-components":"^5.0.1"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/mdx-deck_1.6.8-0_1535409477988_0.24468156992966783","host":"s3://npm-registry-packages"},"_id":"mdx-deck@1.6.8-0","version":"1.6.8-0"}