Skip to content

Latest commit

 

History

History
47 lines (29 loc) · 2.46 KB

README.md

File metadata and controls

47 lines (29 loc) · 2.46 KB
Raw

plait-lab.org

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.

Getting Started

To get the repository up and running, make sure you have Node and npm installed. Then, install dependencies by running:

npm install

After installing dependencies, run the development server:

npm run dev

Open http://localhost:3000 in your browser to see the result!

Recommended Extensions

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.formatOnSave enabled (see the documentation) will format your code each time you save.
  • Tailwind Intellisense – Provides inline intellisense for Tailwind classes.

Optimizing Images

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:

  1. Install pngquant. On macOS, we suggest using Homebrew:
brew install pngquant
  1. 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