'Scrollytelling' narrative for ABoVE report

This is the narrative portion of a report for the ABoVE project, implemented in a 'scrollytelling' style.

This is built using, among other things:

• webpack boilerplate
• leaflet for maps
• picnicss for design framework
• scrollama for scroll effects

How to work on this project

Setup

Install dependencies:

$ npm install

Project layout

./index.ejs  <-- where to include other template files
./templates/  <-- where partial templates live
./assets/styles  <-- hello styles!  scss flavor
./assets/images  <-- hello images!
./app  <-- JS used to build the page lives here
./scripts  <-- a few utility scripts for munging data

Development

Run the local webpack-dev-server with livereload and autocompile on http://localhost:8080/

$ npm run dev

A few notes:

• The page is broken into sections, where each section generally has its own EJS/JS/SCSS files. They need to be added to ./index.ejs, ./app/index.js and ./assets/styles/index.scss respectively.
• The build process uses stylelint to enforce conventions for SCSS. If the compilation of the project fails during development due to a style violation, the CSS won't hot-reload in the browser.
• Keep an eye on the terminal window showing the build process while working on this. If you see errors, you may need to fix them and restart the dev server.
• Background images in SCSS need to reference images via a module resolution, not path. For example, this is correct: background-image: url(~images/my-picture.jpg).

Deployment

Build the current application:

$ npm run build

...and deploy to the appropriate location!