Awesome

Theatre.js website

The website/documentation for Theatre.js.

Uses Next.js and ContentLayer.

Development

Run $ npm run dev to start next.

Deployment

Pushing to the production branch will trigger a deploy.

Hosting videos

We use mux to host our videos. Here is the workflow for adding videos to the website:

Initially just add the file to the ./public folder and use <MuxVideoWithFallback> to play it. During development, the video will be served from the ./public folder. When deployed, the video will be served from Mux.

To actually upload the video to Mux, run $ yarn sync-with-mux. This will upload all videos in the ./public folder to Mux (unless they're alraedy there) and update the ./src/mux-db.json file. <MuxVideoWithFallback> will then use the Mux URL instead of the local URL.

Note that you'll need to have the MUX_TOKEN_ID and MUX_TOKEN_SECRET environment variables set for this to work. Ask teammates to get yours. Don't commit these to the repo. Put them in .env.production.local so they'll be gitignored.

TODO: Use Git LFS to store the videos instead of regular git.

Credits

Credit goes to @schickling of Contentlayer for open-sourcing their website 💚