{"_id":"@ayc0/mdx-deck","_rev":"1-186c7f9d43fb6f0fdcc15e4f90cf7544","name":"@ayc0/mdx-deck","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ayc0/mdx-deck","version":"0.1.0","description":"MDX-based presentation decks","main":"dist/index.js","bin":{"mdx-deck":"./cli.js"},"scripts":{"prepare":"npm run babel","babel":"babel src -d dist","watch":"babel src -d dist --watch","start":"./cli.js docs/index.mdx -p 8989","build":"./cli.js build docs/index.mdx -d site","pdf":"./cli.js pdf docs/index.mdx -d site","screenshot":"./cli.js screenshot docs/index.mdx -d docs","help":"./cli.js","test":"jest"},"keywords":[],"author":{"name":"Brent Jackson"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/jxnblk/mdx-deck.git"},"dependencies":{"@compositor/webfont":"^1.0.39","@mdx-js/mdx":"^0.15.3","@mdx-js/tag":"^0.15.0","ansi-html":"0.0.7","babel-core":"^6.26.3","babel-loader":"^7.1.5","babel-plugin-styled-components":"^1.7.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","chalk":"^2.4.1","clipboardy":"^1.2.3","find-up":"^3.0.0","get-port":"^4.0.0","gray-matter":"^4.0.1","hhmmss":"^1.0.0","html-entities":"^1.2.1","koa":"^2.5.3","koa-static":"^5.0.0","koa-webpack":"^5.1.0","loader-utils":"^1.1.0","lodash.debounce":"^4.0.8","lodash.get":"^4.4.2","meow":"^5.0.0","mini-html-webpack-plugin":"^0.2.3","mkdirp":"^0.5.1","normalize-newline":"^3.0.0","pkg-conf":"^2.1.0","progress-bar-webpack-plugin":"^1.11.0","prop-types":"^15.6.2","puppeteer":"^1.8.0","querystring":"^0.2.0","react":"^16.5.2","react-dev-utils":"^5.0.2","react-dom":"^16.5.2","react-swipeable":"^4.3.0","react-syntax-highlighter":"^8.0.1","remark-emoji":"^2.0.1","remark-unwrap-images":"0.0.2-0","rimraf":"^2.6.2","stringify-object":"^3.2.2","styled-components":"^3.4.9","styled-system":"^3.1.4","superbox":"^2.1.0","webpack":"^4.19.1","webpack-hot-client":"^4.1.1","webpack-merge":"^4.1.4","webpack-node-externals":"^1.7.2"},"peerDependencies":{},"devDependencies":{"babel-cli":"^6.26.0","husky":"^1.0.0-rc.15","jest":"^23.6.0","jest-styled-components":"^5.0.1","lint-staged":"^7.3.0","mdx-deck-code-surfer":"^0.4.1","prettier":"^1.14.3","react-test-renderer":"^16.5.2"},"jest":{"roots":["<rootDir>/test/"],"testMatch":["**/test/**/*.js"],"testURL":"http://localhost/","coverageReporters":["html"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json}":["prettier --write","git add"]},"prettier":{"semi":false,"singleQuote":true,"trailingComma":"es5","jsxBracketSameLine":true},"gitHead":"8ba58f10374d0ec5089b0ade8cb52d50d79b6311","bugs":{"url":"https://github.com/jxnblk/mdx-deck/issues"},"homepage":"https://github.com/jxnblk/mdx-deck#readme","_id":"@ayc0/mdx-deck@0.1.0","_npmVersion":"6.4.1","_nodeVersion":"11.0.0","_npmUser":{"name":"ayc0","email":"ayc0.benj@gmail.com"},"dist":{"integrity":"sha512-vL9odJ1fwbCxM0h/WrGxIi2Y4y9vsOKno4YXCD6qlEro3zWNMfSvqvfcAqGPA7j6ML1tg0TG/Wf1AeqXGCka2Q==","shasum":"ed9e7b549d9191c534fdf664b035ea40c54c5dd1","tarball":"https://registry.npmjs.org/@ayc0/mdx-deck/-/mdx-deck-0.1.0.tgz","fileCount":65,"unpackedSize":138530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5OggCRA9TVsSAnZWagAAAEUP/jEHHUJQtYj2pqaeleuM\n00jblbQzDu5q3cApCUFDDZpBNXuCvkvVzWuMUV+89ynBuSj9fSCR1ZUEMQKT\n2CUXiVtMurvAwE/YPz9deAlwuBpfBGnTx5LMY9d6VBFCKISPkZA0r3EIdbUo\niqPznBRAYNXH8QQ9ZX+0sBZhDt7rYhsbz9AkK5+tplK6HUEJUQKysaAOHqf3\n20F69fuFY+CmUKkLtYoatVxrikVlJLojae7eVyOG5XWQkererERq3wpigp8f\ndcSPU0d3xrpLeFf7HSCzlsN0lzq8xyiAdgMH0rnTIZs9EIV4FAl1fTSIRm7e\nWX5Y+XIwehBCUu1eVtEsRp3eD6tpr69F+Bog4ADKRL2rL8gptXGTZESvv6yK\nBpSvQ4MiZo7kkU/2WwtUr0D85gPV5KUCAEEf2YgJD60kBhreEoSBR6kFgH64\nABQt18WsX0VmuRsnJe/k0/WY7IpSMnnoiCOcnpC40iEl5vhhwcvTgLQBZzvV\nreFOd56J8YQgWYyLoKSacgT1b7OwmIXwDiudjkwCBlYt7mcglTkeOt8HIiS3\nkuvUAec10RLVpY7s2TWXO4mdcpdnOe1SUxfsd3XK9j8bWl+wiKyqmYoJLjOo\nVEpF2Uhz2GKwpZs9oLq1dyPK8WaRTQMSGTAd7r84iA3F2in5y1W0JGclSH1/\n0KjJ\r\n=TOlm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq49rlg0Z9eXjzRx6q2AmwrDSD6IDTqet06eNm+F7lXwIhAKpTYOMKZPAhoVkEu8j4axZxW1lhK4otn58i36ek/Nhe"}]},"maintainers":[{"name":"ayc0","email":"ayc0.benj@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mdx-deck_0.1.0_1541728287600_0.4411102186604823"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-09T01:51:27.421Z","0.1.0":"2018-11-09T01:51:27.811Z","modified":"2022-04-04T17:14:19.353Z"},"maintainers":[{"name":"ayc0","email":"ayc0.benj@gmail.com"}],"description":"MDX-based presentation decks","homepage":"https://github.com/jxnblk/mdx-deck#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/jxnblk/mdx-deck.git"},"author":{"name":"Brent Jackson"},"bugs":{"url":"https://github.com/jxnblk/mdx-deck/issues"},"license":"MIT","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\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\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\n[codesurfer]: https://github.com/pomber/code-surfer\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 + 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 (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--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","readmeFilename":"README.md"}