Skip to content

Latest commit

 

History

History
81 lines (53 loc) · 2.32 KB

CONTRIBUTING.md

File metadata and controls

81 lines (53 loc) · 2.32 KB
Raw

Contributing 🤓

About the tech stack

  • We use Snowpack to spin up a local dev server and bundle assets
  • We use plain HTML, CSS and JS to keep the footprint of the project as minimal as possible
  • We use Prism for syntax highlighting

Prerequisites

Get started

# Get the code
$ > git clone git@github.com:yetanother-blog/indiepen.git
$ > cd indiepen

# Install dependencies
$ > npm install

# Spin up snowpack
$ > npm start

Go to http://localhost:8080 😇

Testing

We use Cypress to run end-to-end tests. Take a look at the cypress/ folder and feel free to add tests for new features.

Running tests locally:

# Make sure the project runs locally
$ > npm start

# Run Cypress tests in another terminal
# This command will just execute the tests headlessly
$ > npm run test

# Run Cypress tests in an interactive session
# Helpful for debugging
$ > npm run test:dev

Head over to Cypress to learn more about their tooling and philosophy.

Linting

We use Prettier for code style formatting. You can run npm run lint to check your changes.

Generate font for embed

For the embed, we use a subset of the font Inter. Use the following commands to re-generate the font:

# Install dependencies for glyphhanger
pip install fonttools
pip install brotli

# Run glyphhanger to generate the font
npx glyphhanger --formats=woff2 --whitelist="INDEPCSJHTMLRU" --subset="node_modules/@fontsource/inter/files/inter-latin-900-normal.woff2" --css

# Move the font file to the embed folder
cp node_modules/@fontsource/inter/files/inter-latin-900-normal-subset.woff2 src/embed/font

The important part is, that we greenlisted the following characters: INDEPCSJHTMLRU. If we need to support more characters, then we need to update the list.

Pipeline & Hosting

We use Netlify as our hosting platform. In addition, we configured Netlify's git workflow to create deploy previews for every pull request. We also run checks before we deploy our application to Netlify:

  • Lint the code
  • Run end-to-end tests
  • Run accessibility checks
  • Run lighthouse audits

Take a look at the netlify.toml config for details.