This is the repo for radicalxchange.org
The RadicalxChange www site is meant to:
- Teach users about RadicalxChange's core concepts
- Encourage users to join the RadicalxChange community
We use the following metrics to decide whether the website is effective:
- How many users come to the site?
- What content is most viewed?
- How much time do users spend on the site in a single session?
- Do they sign up for our newsletter?
All of these metrics can be found in our Fathom Analytics data.
Run npm run serve:dev to watch files in the repository, rebuild the site when files change and serve them to a browser.
Images are not automatically re-processed when they are changed. Run npm run build:images to reprocess images when needed.
Run npm run build to build the site and its images. The built site is written to dist/.
Merge your change to master and push to GitHub to deploy a new version of our site. Netlify watches for changes to master and rebuilds when the branch changes. The site is also rebuilt once a day at midnight PT. This means you can pull data from APIs during the build and assume it will always be at most 24 hours stale.
The RadicalxChange www site is built on 11ty. It's styled using TailWind CSS. We host the site on Netlify. For legacy reasons, we use Digital Ocean for DNS. We use Fathom Analytics to track user activity without invading their privacy. We use Zapier to trigger our daily builds.
Pages are laid out on grids. A grid has fixed-width margins, fixed-width gutters and fluid columns. Desktop pages are on a 12-column or 16-column grid. Mobile pages are on a 4-column grid.
We use TailWind's built-in scale for general size and space. These utilities use rem units. Size and space include content, padding, border, margin and gaps.
For typography heavy pages, we use a multiple of line height for vertical spacing. The utilities use em units.
We use a fluid type scale for almost all text. This scale provides a base text size and "steps" up and down from that. If you assign a step size to text, it will automatically scale relative to the width of the browser.
For text written in Messer font, use font-size in the vw unit instead.
11ty builds from src/site. Read 11ty's documentation to understand a lot about this directory. We outline only notable quirks here:
- src/data contains NodeJS modules that fetch data for use in 11ty collections. These files are referenced from .eleventy.js.
- src/site/_includes/components contains Nunjuck macros and JavaScript for reuse across pages.
- src/site/_includes/css contains all our CSS. Each css file must be imported by _includes/css/styles.css. CSS is processed by a PostCSS pipeline configured in src/site/css/styles.11ty.js.
- src/site/_includes/layouts contains common HTML templates for pages. _base.njk is the base of all layouts.
- src/site/_images contains the site's images. This directory is processed completely outside of 11ty. Instead, the directory is processed by src/site/images.js. In this Node script, developers can decided exactly how they want to process images for the web.
- src/site/_headers, _redirects, and 404.njk are all processed by Netlify. They configure HTTP headers, server-side HTTP redirects and the 404 page respectively.