Modifying the JavaScript

JavaScript files are located in the js folder, and are built using parcel and placed in the assets/js folder. To modify the JavaScript, you will need to rebuild it to reflect the changes.

Setup

Option 1: Using nix

The provided shell.nix file sets up a development environment with all necessary dependencies. To enter the nix shell and install dependencies, run:

nix-shell
yarn install

Option 2: Using Node.js and yarn

First, you need to install the yarn package manager .

Then install the dependencies:

yarn install

Building

There is a justfile provided with build commands you can read about here .

If you want to build the JavaScript files manually, you can run:

yarn build --no-source-maps

and to watch for changes and rebuild automatically, run:

yarn watch

Critical CSS

Critical CSS is handled using the just command runner and the critical npm package. If no CSS is generated, the theme falls back to use critical.scss as the manual critical CSS.

Critical CSS can be generated using just critical

Configuration

This is the default critical.config.json file:

{
    "critical": {
        "base": "./test-site/",
        "dimensions": [
            {
                "height": 900,
                "width": 1300
            },
            {
                "height": 900,
                "width": 375
            },
            {
                "height": 900,
                "width": 768
            }
        ],
        "ignore": {
            "selectors": [
                ".hover",
                ".focus",
                ".active",
                ":hover",
                ":focus",
                ":active",
                ".animation",
                ".transition",
                ".scroll-button",
                "#progress-header"
            ],
            "atrules": ["@font-face", "@media print"]
        },
        "extract": true,
        "inline": false
    },
    "pages": [
        {
            "url": "index.html",
            "name": "home",
            "description": "Homepage critical CSS"
        },
        {
            "url": "birds/index.html",
            "name": "list",
            "description": "List page critical CSS"
        },
        {
            "url": "about/index.html",
            "name": "single",
            "description": "Single page critical CSS"
        }
    ]
}

Other Resources