The official landing site for Bits of Good š
The bits of good landing page is built on some modern tooling to keep everything nice and future-proof. Let's dive into what we're using.
Everything you see is built on SvelteJS, a component-based framework that magically disappears āØ There are countless reasons we chose this framework, as it brings a host of benefits for decreasing bundle size and load times. However, we mainly chose it because of how easy the syntax is to understand! You can read more here to learn why it's so awesome, or just dive into the docs to start experimenting yourself.
Along with Svelte, we are using Sapper to make wiring everything up a bit easier. Mainly, Sapper provides:
src/routes
directory becomes its own page you can link to using a regular old <a>
tag!For basically every text field you see on the site, we're fetching it using Contentful. This is a headless CMS that allows us to host all of our images, text, markdown, etc. in one place.
This is a huge benefit for our designers, who can now just edit a textbox or upload an image to see it appear on the site!
yarn install
For external contributors or contributors that don't have access to Bits of Good's Contentful API key, you can run the seed-contentful
script to seed a data export into your own Contentful account
Script Usage: yarn seed-contentful
This command will ask you for a space ID, and access tokens for the Contentful Management and Delivery API. It will import the data export into your Contentful space and create a local .env
with environment variables to retrieve data from Contentful.
If you're working in development, run the following to build + run the site with live reloading goodness:
yarn dev
For production builds, run the following to build and start the site:
yarn build && yarn start
In either case, you should be able to visit localhost:3000
to see the website in action!
This site uses Cypress for thorough end-to-end testing. To start up the testing environment, you can run:
yarn test
This will start the server and open Cypress. You can (and should!) add tests in cypress/integration/spec.js
ā consult the Cypress docs for more information.
š¤ Ben "Over-engineered" Holmes
š¤ Rishov Sarkar
š¤ Max Karpawich
Give a āļø if this project helped you!