This repository contains source code for the new plait-lab.org. We use TypeScript alongside Next.js to power the site, taking advantage of Next's static generation (SSG) capabilities to produce plain HTML, CSS, and JSON at build time. If you're familiar with React, Next provides a nice set of abstractions on top of React to handle things like routing, data fetching, image optimization, development servers, etc. Finally, we use a utility CSS framework, Tailwind, for styling.
To get the repository up and running, make sure you have Node and npm installed. Then, install dependencies by running:
npm installAfter installing dependencies, run the development server:
npm run devOpen http://localhost:3000 in your browser to see the result!
If using VSCode, there are a few extensions that will help make the development experience smoother.
- Prettier – Prettier is a formatter for JavaScript, HTML, CSS, JSON, and other languages. Using this extensions with
editor.formatOnSaveenabled (see the documentation) will format your code each time you save. - Tailwind Intellisense – Provides inline intellisense for Tailwind classes.
Next.js has some neat features for automated image optimization. However, most require your application to be deployed on a Node.js web server rather than as a static site. Alas, you can't have it all.
To try to squeeze back some benefits, we use pngquant to reduce image sizes. Contributors mostly don't need to worry about this, but if you'd like to optimize images locally you can take the following steps:
- Install
pngquant. On macOS, we suggest using Homebrew:
brew install pngquant- Run
npm run optimize:images.
This script will optimize all images in the public directory.
If you receive a "Permission denied" error, make sure you have permissions to run the file.
chmod +x ./src/scripts/optimize-images.sh