├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── INSTRUCTIONS.md ├── LICENSE.md ├── README.md ├── components ├── Cover.jsx ├── Header.jsx ├── MDXProvider.jsx ├── PresentationMode.jsx ├── Slide.jsx ├── SpeakerNotes.jsx └── ThemeProvider.jsx ├── constants └── modes.js ├── context ├── CurrentSlideContext.jsx ├── ModeContext.jsx └── TotalPagesContext.js ├── hooks ├── useEventListener.js └── useStorage.js ├── layouts ├── AboutPage.jsx ├── SlidePage.jsx └── TransitionPage.jsx ├── next.config.js ├── package.json ├── pages ├── _app.jsx ├── _document.js ├── index.jsx └── slides │ └── [slide].js ├── public ├── animonica.png ├── contributing-to-react.png ├── devto-issue-example.png ├── favicon.ico ├── github-issue.png ├── httriri.png ├── types-of-oss-projects.png ├── uses.png └── zeit.svg ├── screenshots ├── next-mdx-deck-example.gif ├── next-mdx-deck-main.png └── next-mdx-deck-presentation.png ├── site.config.js ├── slides ├── 1.mdx └── talk.mdx └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | ["styled-components", { 5 | "ssr": true 6 | }] 7 | ] 8 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: 'babel-eslint', 3 | extends: ['airbnb', 'prettier'], 4 | plugins: ['react', 'jsx-a11y', 'import'], 5 | ignorePatterns: ['slides/'], 6 | rules: { 7 | // Next imports React into pages automatically 8 | 'react/react-in-jsx-scope': 'off', 9 | // Next includes packages like MDX using their bundle 10 | 'import/no-extraneous-dependencies': 'off', 11 | // Turn off const conversion 12 | 'prefer-const': 'off', 13 | }, 14 | env: { 15 | browser: true, 16 | }, 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | Twitter, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct (see below), please follow it in all your interactions with the project. Be excellent to eachother, and party on 🤘 7 | 8 | ## Setup 9 | 10 | 1. Clone project `git clone git@github.com:whoisryosuke/next-mdx-deck.git` 11 | 1. Navigate to project `cd next-mdx-deck` 12 | 1. Install dependencies `yarn` 13 | 1. Run the development server `yarn dev` 14 | 15 | ## Development 16 | 17 | See README.md for information on working with project. 18 | 19 | ## Pull Request Process 20 | 21 | 1. Make a PR with working or conceptual code. 22 | 1. Submit it. 23 | 24 | > That's it. I'd say more if we had tests, a CI/CD setup, versioning, etc. But it's pretty casual right now. Make sure if you have working code to test the build process and ensure it doesn't fail. 25 | 26 | ## Code of Conduct 27 | 28 | ### Our Pledge 29 | 30 | In the interest of fostering an open and welcoming environment, we as 31 | contributors and maintainers pledge to making participation in our project and 32 | our community a harassment-free experience for everyone, regardless of age, body 33 | size, disability, ethnicity, gender identity and expression, level of experience, 34 | nationality, personal appearance, race, religion, or sexual identity and 35 | orientation. 36 | 37 | ### Our Standards 38 | 39 | Examples of behavior that contributes to creating a positive environment 40 | include: 41 | 42 | - Using welcoming and inclusive language 43 | - Being respectful of differing viewpoints and experiences 44 | - Gracefully accepting constructive criticism 45 | - Focusing on what is best for the community 46 | - Showing empathy towards other community members 47 | 48 | Examples of unacceptable behavior by participants include: 49 | 50 | - The use of sexualized language or imagery and unwelcome sexual attention or 51 | advances 52 | - Trolling, insulting/derogatory comments, and personal or political attacks 53 | - Public or private harassment 54 | - Publishing others' private information, such as a physical or electronic 55 | address, without explicit permission 56 | - Other conduct which could reasonably be considered inappropriate in a 57 | professional setting 58 | 59 | ### Our Responsibilities 60 | 61 | Project maintainers are responsible for clarifying the standards of acceptable 62 | behavior and are expected to take appropriate and fair corrective action in 63 | response to any instances of unacceptable behavior. 64 | 65 | Project maintainers have the right and responsibility to remove, edit, or 66 | reject comments, commits, code, wiki edits, issues, and other contributions 67 | that are not aligned to this Code of Conduct, or to ban temporarily or 68 | permanently any contributor for other behaviors that they deem inappropriate, 69 | threatening, offensive, or harmful. 70 | 71 | ### Scope 72 | 73 | This Code of Conduct applies both within project spaces and in public spaces 74 | when an individual is representing the project or its community. Examples of 75 | representing a project or community include using an official project e-mail 76 | address, posting via an official social media account, or acting as an appointed 77 | representative at an online or offline event. Representation of a project may be 78 | further defined and clarified by project maintainers. 79 | 80 | ### Enforcement 81 | 82 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 83 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 84 | complaints will be reviewed and investigated and will result in a response that 85 | is deemed necessary and appropriate to the circumstances. The project team is 86 | obligated to maintain confidentiality with regard to the reporter of an incident. 87 | Further details of specific enforcement policies may be posted separately. 88 | 89 | Project maintainers who do not follow or enforce the Code of Conduct in good 90 | faith may face temporary or permanent repercussions as determined by other 91 | members of the project's leadership. 92 | 93 | ### Attribution 94 | 95 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 96 | available at [http://contributor-covenant.org/version/1/4][version] 97 | 98 | [homepage]: http://contributor-covenant.org 99 | [version]: http://contributor-covenant.org/version/1/4/ 100 | -------------------------------------------------------------------------------- /INSTRUCTIONS.md: -------------------------------------------------------------------------------- 1 | ![Presentation Mode](./screenshots/next-mdx-deck-example.gif) 2 | 3 | # Next MDX Deck 4 | 5 | Create presentation decks using MDX, React, and [Next.js](https://nextjs.org/). 6 | 7 | ## Features 8 | 9 | - 📽 React-based Slideshow 10 | - ✍️ Write using Markdown, React components, even HTML! 11 | - 🎨 Themeable with CSS vars or Styled Components 12 | - 👉 Swipe to change slides 13 | - ♻️ Sync slides between browser tabs 14 | - 👨‍💻 Presentation Mode 15 | - 📝 Speaker Notes 16 | 17 | ## Getting Started 18 | 19 | 1. Clone the project: `git clone https://github.com/whoisryosuke/next-mdx-deck` 20 | 2. Install dependencies: `npm i` or `yarn` 21 | 3. Run the dev server: `npm run dev` or `yarn dev` 22 | 4. Edit the first slide in `/slides/1.mdx` and save to [**see changes**](http://localhost:3000/)! 23 | 24 | When you're done, run `npm run build && npm run export` or `yarn build && yarn export` will create a static app you can deploy anywhere (or use locally). See below for more details. 25 | 26 | ### Deploying 27 | 28 | This project is easy to build locally or using a host with build services (like Netlify or Now). 29 | 30 | 1. ⚙️ Run the build process: `npm run build && npm run export` 31 | 1. 🚀 Upload the static contents of `out` folder to host/CDN (or run the `out/index.html` locally) 32 | 33 | ## How to Use 34 | 35 | ### 💬 Changing the Title/Date/etc 36 | 37 | The default theme includes a title, date, author (and link to the author's website) in of the `
` component. You can edit this data inside the `site.config.js` file. 38 | 39 | ### ✍️ Writing JSX 40 | 41 | You can use JSX in [a few ways](https://mdxjs.com/getting-started) in your MDX files: 42 | 43 | - You can use the syntax with HTML (`