Requirements

Parcel

---

Documentation

Site Variables

• Custom site variables are located in _data/site.json. These are used in the templates, such as _includes/shared/header.njk.
• Specifically, these are used to dynamically generate page titles and meta descriptions.

Templates

• Custom templates are located in _includes/layouts.
• In order to use layout: default instead of layouts/default.njk, an alias was added to .eleventy.js.

Local Development

• npm run start
  • This runs eleventy --serve and parcel watch ./_assets/js/main.js --out-dir ./_site/assets.
  • --out-dir ensures the assets generated by parcel are loaded in the _site directory generated by eleventy.

Production Build

• npm run build
  • This runs eleventy and parcel build ./_assets/js/main.js --out-dir ./_site/assets.
  • parcel build minifies everything.
  • --out-dir ensures the assets generated by parcel are loaded in the _site directory generated by eleventy.

Styles

• Bootstrap is loaded via npm, and then imported in at _assets/css/vendor/_bootstrap.scss
• Bootstap overrides are located at _assets/css/base/_bootstrap-overrides.scss.
• All .scss files are imported into _assets/css/main.scss.
• _assets/css/main.scss is then imported into _assets/js/main.js.
• _assets/js/main.js is then bundled via Parcel. Parcel magically creates a _site/assets/main.css and _site/assets/main.js from this file.

Javascript

• All javascript is imported into _assets/js/main.js and then compiled into _site/assets/main.js via Parcel
• In order to use Popovers and Tooltips, I created _assets/js/vendor/popover.js and _assets/js/vendor/tooltip.js respectively. These are then imported into _assets/js/main.js.