This repository contains learning materials originally sourced and written for the Oak team at The New York Times. The courses within focus on developing an understanding of how the three tools that the Oak collaborative rich text editor relies on, React, ProseMirror, and Redux, actually work.
The content is deployed with GitHub Pages, and can be viewed at https://nytimes.github.io/oak-byo-react-prosemirror-redux/.
If you want to learn more about why we built this, and the kinds of problems it helped us solve, check out our NYT Open blog post [link TK].
This educational project is heavily inspired by Rodrigo Pombo's excellent Build your own React, and relies heavily on the Code Hike remark plugin he developed.
Rodrigo's Build your own React is also directly linked as the "Build Your Own..." course for the React section of the syllabus.
This website is powered by Next.js. We use Next.js's Static HTML Export feature to build out static web pages, which are hosted with GitHub Pages.
The posts are authored as MDX files in the /posts/ directory.
Code Hike is used to augment the code snippets, and
next-mdx-remote allows us to
load the MDX in getStaticProps. Check out the getStaticProps method in
/pages/post/[[...slug]].js to see how we wire together MDX, Code Hike, and
Nextjs using next-mdx-remote.
You'll need Node.js installed, as well as the Yarn CLI. If you're using
Node.js >= 16.9.0, you can install Yarn by simply running corepack enable. See
the Node.js docs for more information
about Corepack.
Alternatively, if you use VS Code, you can use the dev container configuration in this repo alongside the VS Code Dev Containers extension to develop in a Docker/Podman container.
Run yarn to install dependencies. Then run yarn dev to start the development
server on port 3000. Any changes to the pages/ or posts/ directories will
trigger a rebuild and rerender.