{"bin":{"mdx-deck":"./cli.js"},"dist":{"shasum":"054eb51549e7345ef2335453560267114387d5ce","tarball":"https://registry.npmjs.org/mdx-deck/-/mdx-deck-1.4.3-0.tgz","fileCount":34,"integrity":"sha512-TERCg5NMu0r3yc56T9AlnC5HyO4mUvbPIBddTbjWLxwffgDU3MQEaYs7viOcO3BVb/yNA1jekj33Z5wG0U4Oaw==","signatures":[{"sig":"MEQCIEZ27axysChrvY15VTyS2OLs3FhRixjMdxIxvMfdeb3uAiBWyyPT4V/BK9IEql4geT5oFdhH2yLqnf+e67phHnzRdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZc4yCRA9TVsSAnZWagAAO5wQAKBec/yX9QTZS8yLxQEM\np0loqGl9QWaKknQOSOhO9CtWI8hK3ba2aLjQDFYG6QVYwkFeqmMmign7wHcX\ndUfRpM5pOK/WWeiwBZofVj/i1y32LAilamn6Z1C+KGwDg7jfR+ZchLvvqHcR\nqNPWnYaGnFzlpTLZDqqgWeprB9lzqxqGTHAhYQsUWhQ0Y0uxXxqL2QZnjd/D\nRAYk2PmMEhpGhPViePmN/rUaI/IcUrpXoCgxjzcKE1i/BnzucrHb1+GKGksL\nYR+YLMte18wA41sID/0o4+HsVxD0o7U3PCayxSFEdtPtmEqBIEt0WOSkNiUK\nUg1sffnrMRo+N/GENTWLZMRwQMZPqQi7F7z79DKXnZmEJ5D4umiXaMf8shCq\np6cV0Pnrtrj40rqT5irtr0y2x+POKMdXfircUEshbHX64l/rf2uzIYlQjF6o\no7B0E+Kssb+Zs4gUo6/2mX+MvvWzQZpYh3gjIP+sNVeCJBqIzblWDA1RXZfz\ndd26N7GEUEzy0Gp9mXcyOQ2XeMiyeYQwgldZMFRyubRSk0R+udy9MjhsfFdY\nrOI0S6Wua3fxB2zQjsUz7p3U1rC4cVkDik9v6tfcn8OdmEwWptln1M02LXdD\ndVwoESm+XFtRXP4KVxu02vo+q7REhbSczWb4TsbJonj2rvGeIR0TOtsNtzwc\n8L+d\r\n=O4Hh\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 (**Beta**)\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\n- :nail_care: Customizable [themes](#theming) and [components](#custom-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\n## Usage\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\n### Theming\n\nmdx-deck uses [styled-components][] for styling.\n\n### Built-in Themes\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\nThe following themes are available from `mdx-deck/themes`:\n\n- `theme`: default theme with white background\n- `dark`: black background dark theme\n- `future`: dark theme with Avenir Next\n- `condensed`: dark theme with Roboto Condensed\n- `yellow`: bright yellow theme with Roboto Condensed\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 based on [styled-system][]'s theme schema.\n\n```js\n// example theme.js\nexport default {\n  font: 'Georgia',\n  monospace: 'Menlo, monospace',\n  fontSizes: [\n    '0.75em', '1em', '1.5em', '2em', '3em'\n  ],\n  colors: {\n    text: '#000',\n    background: 'transparent',\n    link: '#07c',\n    heading: '#000',\n    quote: '#000',\n    pre: '#f0f',\n    preBackground: '#333',\n    code: '#f0f',\n    codeBackground: 'transparent',\n  },\n  css: {\n    // apply any styles to the root element\n  },\n  // custom CSS can be provided to any of the default components:\n  heading: {\n    fontWeight: 400\n  },\n  link: {\n    textDecoration: 'none',\n    '&:hover': {\n      textDecoration: 'underline',\n    }\n  }\n}\n```\n\nThe following keys are available for theming:\n\n- `font`: base font family\n- `monospace`: font family for `<pre>` and `<code>`\n- `fontSizes`: array of font sizes from smallest to largest\n- `colors`: object of colors used for MDX components\n  - `text`: root foreground color\n  - `background`: root background color\n  - `link`\n  - `heading`\n  - `blockquote`\n  - `pre`\n  - `preBackground`\n  - `code`\n  - `codeBackground`\n- `css`: root CSS object\n- `heading`: CSS for all headings\n- `h1`: CSS for `<h1>`\n- `h2`: CSS for `<h2>`\n- `h3`: CSS for `<h3>`\n- `paragraph`: CSS for `<p>`\n- `link`: CSS for `<a>`\n- `ul`: CSS for `<ul>`\n- `ol`: CSS for `<ol>`\n- `li`: CSS for `<li>`\n- `img`: CSS for `<img>`\n\n### Custom Components\n\nmdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], export a `components` object.\n\n```mdx\nexport { default as components } from './components'\n\n# Custom Components\n```\n\n### Components\n\nmdx-deck includes some built-in components to help with creating presentations.\n\n#### Image\n\nUse the `<Image />` component to render a fullscreen image (using the CSS `background-image` property).\n\n```mdx\nimport { Image } from 'mdx-deck'\n\n<Image src='kitten.png' />\n```\n\n#### Appear\n\nUse the `<Appear />` component to make its children appear one at a time within a single slide.\nUse the up and down arrow keys to step through each element.\n\n```mdx\nimport { Appear } from 'mdx-deck'\n\n<ul>\n  <Appear>\n    <li>One</li>\n    <li>Two</li>\n    <li>Three</li>\n  </Appear>\n</ul>\n```\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### Custom Provider\n\nA custom Provider component can be exported to wrap the entire application.\nThis is useful for adding custom context providers in React.\n\n```mdx\nexport { default as Provider } from './Provider'\n\n# Hello\n```\n\nA custom Provider component will receive the application's state as props,\nwhich can be used to show custom page numbers or add other elements to the UI.\n\n#### Props\n\n- `index`: (number) the current slide index\n- `length`: (number) the length of the slides array\n- `mode`: (string) the current mode (one of `'NORMAL'` or `'PRESENTER'`)\n- `notes`: (object) custom [speaker notes](#speaker-notes) for all slides\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/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 `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## 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\n### PDF Export\n\nPresentations can be exported as PDF using the CLI.\nThis works well as a backup option for any unforeseen technical difficulties.\n\n```json\n\"script\": {\n  \"pdf\": \"mdx-deck pdf deck.mdx\"\n}\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--title       Title for the HTML document\n```\n\n## React API\n\nmdx-deck components can also be used in any React application, such as [create-react-app][] or [next.js][].\n\n### Webpack Loader\n\nmdx-deck uses a custom webpack loader to split MDX files into an array of slides. Use this loader to import mdx files in a webpack application.\n\n```js\n// example webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.mdx$/,\n        ignore: /node_modules/,\n        use: [\n          'babel-loader',\n          'mdx-deck/loader'\n        ]\n      }\n    ]\n  }\n}\n```\n\n### SlideDeck Component\n\n```js\nimport React from 'react'\nimport { SlideDeck } from 'mdx-deck'\nimport slides from './deck.mdx'\nimport theme from './theme'\nimport components from './components'\n\nexport default () =>\n  <SlideDeck\n    slides={slides}\n    theme={theme}\n    components={components}\n    width='100vw'\n    height='100vh'\n  />\n```\n\nView the source for other components available for use.\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[MDXProvider]: https://github.com/mdx-js/mdx#mdxprovider\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[create-react-app]: https://github.com/facebook/create-react-app\n[next.js]: https://github.com/zeit/next.js/\n[Spectacle]: https://github.com/FormidableLabs/spectacle\n","gitHead":"a66f6848612ca9fd7a4bbcb4e3926c01141c7681","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"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"keywords":[],"prettier":{"semi":false,"singleQuote":true,"jsxBracketSameLine":true},"_npmVersion":"6.2.0","description":"MDX-based slide deck presentations","directories":{},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"8.1.2","dependencies":{"meow":"^5.0.0","chalk":"^2.4.1","react":"^16.4.1","hhmmss":"^1.0.0","ok-cli":"^3.1.1","pkg-conf":"^2.1.0","superbox":"^2.1.0","puppeteer":"^1.6.1","clipboardy":"^1.2.3","prop-types":"^15.6.2","@mdx-js/mdx":"^0.15.0-1","@mdx-js/tag":"^0.14.1","gray-matter":"^4.0.1","loader-utils":"^1.1.0","remark-emoji":"^2.0.1","styled-system":"^3.0.2","lodash.debounce":"^4.0.8","react-dev-utils":"^5.0.1","stringify-object":"^3.2.2","normalize-newline":"^3.0.0","styled-components":">=3.0.0","webpack-hot-client":"^4.1.1","@compositor/webfont":"^1.0.38"},"_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.4.3-0_1533398577752_0.6636089091364463","host":"s3://npm-registry-packages"},"_id":"mdx-deck@1.4.3-0","version":"1.4.3-0"}