elastiq

elastiq.ch

https://elastiq.ch/ website

edit contents

edit website here

local installation

This setup uses node and NPM to built the website statically.

1. install node and npm (https://nodejs.org/en/)
2. use the terminal/command-line to navigate to the folder where you checked out the project
3. install deps by typing npm install
4. once done type npm start to work on the project

setup

• parcel.js builds everything
• posthtml-expressions This plugin provides a syntax for including local variables and expressions in your templates, and also extends custom tags to act as helpers for conditionals and looping. Mainly used to include content from data.yml. posthtml-load-config makes sure .posthtmlrc.js the data from the YML ends up in the locals from posthtml-expressions.
• .browserslistrc Sets the browser compatibility for autoprefixer

┌──────────┐    ┌────────────────────┐
│ data.yml │───▶│posthtml-expressions│──┐
└──────────┘    └────────────────────┘  │
┌──────────┐    ┌───────────────────┐   │
│style.scss│───▶│  sass & postCSS   │──┐│  ┌─────────────┐
└──────────┘    └───────────────────┘  ├┴─▶│ /index.html │
┌──────────┐    ┌───────────────────┐  │   └──────┬──────┘
│ main.js  │───▶│     babel.js      │──┤         ┌┘
└──────────┘    └───────────────────┘  │         │
                         ┌──────────┐  │         ▼
                         │  images  │──┘    ┌─────────┐
                         └──────────┘       │ Magic * │
                                            └─────────┘
                                                 │
                                                 │
                                                 │
     * Magic = parcel.js             ┌───────────▼─────────┐
                                     │       ./dist        │
                                    ┌┴─────────────────────┴┐
                                    │      index.html       │
                                    ├───────────────────────┤
                                    │       style.css       │
                                    ├───────────────────────┤
                                    │  *.{jpg|png|gif...}   │
                                    └┬─────────────────────┬┘
                                     └─────────────────────┘

license

© David Aerne Feel free to do whatever with the sources. Except for the illustrations. Don't share or reuse them.