Pence Lab Websites

This is a monorepo that contains all of the code for our various websites. This file documents things that I thought were subtle enough that I could forget them at some point.

Lab:
Products:

Table of Contents

• Pence Lab Websites
  • Data
  • Linting
  • I18n
  • Build Process

Data

Data that we process for the publication and talk lists are found in the _data folder. To add new things, copy the template from templates.json to the appropriate spot and customize it as needed.

Linting

Call npm run lint to run a variety of checks on the data in the _data folder. For the moment, this checks to make sure that the English and French translations are matching, and also verifies some important fields in the publications and talks data to be sure nothing is missing.

I18n

All these sites are designed for complete i18n from the ground up. Localized strings are found in _data/i18n.json and are exposed via a few shortcode functions added to Eleventy. We assume that every website directory will have en and fr directories underneath it.

To get translated pages working correctly, you need to:

• Create directory data files that will set the lang attribute for all pages under them (e.g., fr/fr.json containing { "lang": "fr" })
• Name the files according to their English URL names (e.g., en/about.md and fr/about.md)
• Set the permalink in the French version of the page to a translated URL string (e.g., in fr/about.md, permalink: /fr/a-propos/index.html)

The translated strings support is only needed for things like navigation and templates, where a reusable piece of code has bits that need to be translated. Otherwise, prefer translating content directly in the different templates.

There is an automatic redirect set in all these sites from / to /en (i.e., the English version of the page will always be default).

Build Process

The sites are designed to be built by a git actions or CI workflow – at the moment, we’re using https://statichost.eu for our hosting. For the build system to know which of the sites is being built, the SITE_ROOT environment variable needs to be set, and will be passed to Eleventy’s --input parameter.

Put differently, there are no Eleventy templates in the root: multiple sites, with multiple roots, are found in sub-folders here.

Eleventy plugins are included for minifying and preprocessing CSS with PostCSS, as well as for minifying HTML with html-minifier-terser.