The front-end

Overview

Welcome to the web workspace. This is the codebase for the website users will see when they visit https://digitalhumanities.mit.edu.

This website uses the following technologies, methodologies, and libraries:

• Eleventy for static site generation with Liquid templates.
• Webpack for bundling our app during development and in production
• Utility-first SCSS via wool
• autoprefixer and cssnano postcss plugins for further style optimizations
• PurgeCSS to remove unused styles from the production CSS bundle
• PJAX page navigation via Highway.js
• GSAP for animations
• picoapp for managing JS modules across PJAX page transitions
• Babel to transpile modern JS syntax into ES5 for wider browser support
• Terser for minimizing the Javascript bundle for production

Project Structure

├── src
│   ├── assets # fonts, favicons, etc.
│   ├── data # eleventy global data files
│   ├── scripts # javascript
│   │   ├── components # picoapp components
│   │   ├── lib # custom modules
│   │   ├── transitions # highway.js page transitions
│   │   ├── util # shared utilities
│   │   ├── app.js # picoapp setup
│   │   ├── index.js # (entry) add listeners and mount app
│   │   └── router.js # highway.js setup
│   ├── styles # scss
│   ├── templates # liquid templates
│   └── util # build-time utilities
├── README.md # you're currently reading me
├── package.json
└── webpack.config.js # webpack configuration