Switch to CSS variables

.eleventy.js

@@ -9,13 +9,26 @@ function escapeHtml(unsafe) {
        .replace(/'/g, "'");
 }
 
-
+const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
   eleventyConfig.addLayoutAlias('home', 'layouts/home.html');
   eleventyConfig.addLayoutAlias('page', 'layouts/page.html');
   eleventyConfig.addLayoutAlias('playground', 'layouts/playground.html');
 
+  // When the linked css or javascript changes and we are in dev mode, update in the browser
+  eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+
+  // Make sure to either copy (or passthrough from original location for dev server) needed files
+  eleventyConfig.addPassthroughCopy("assets/**/*");
+  eleventyConfig.addPassthroughCopy("dist/**/*");
+  eleventyConfig.addPassthroughCopy("js/**/*.js");
+
+  // For source maps, pass through scss as well
+  eleventyConfig.addPassthroughCopy("src/**/*.scss");
+
   eleventyConfig.addPairedShortcode("example", function (content, id, application_notice, further_preview_class) {
     content = content.trim();
     if (application_notice) {
@@ -30,6 +43,7 @@ module.exports = function (eleventyConfig) {
   });
 
   return {
+    pathPrefix: process.env.ELEVENTY_PATH_PREFIX || "",
     dir: {
       input: "docs_src",
       output: "docs"

.github/workflows/build-deploy-pages.yml

@@ -0,0 +1,78 @@
+name: Pages
+
+on:
+  push:
+    branches: [ "master" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Set-up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build Docs Site
+        run: npm run build
+        env:
+          ELEVENTY_PATH_PREFIX: ${{ steps.pages.outputs.base_path }}
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./docs
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: Build
+
+on:
+  pull_request:
+    branches: [ "develop" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Set-up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build all
+        run: npm run build
+        env:
+          ELEVENTY_PATH_PREFIX: ${{ steps.pages.outputs.base_path }}

.gitignore

@@ -1,3 +1,13 @@
-node_modules/*
+node_modules/
 scratch/*
-.idea/*
+.idea/
+
+# Do not put from-MD-compiled-HTML into the repo
+/docs/
+!/docs/CNAME
+
+# Do not put from-SASS-compiled-CSS into the repo
+/dist/
+
+# Do not put from-TS-compiled-JS into the repo
+/js/

README.md

@@ -21,6 +21,21 @@ To set up, simply run:
 
     npm install
 
-and to build the files, run
+and to build all the files, run
 
     npm run build
+
+If you only want to rebuild CSS/JS/Docs, run one of
+
+    npm run css_build
+    npm run js_build
+    npm run docs_build
+
+### Development
+
+For easy development, run
+
+    npm run dev
+
+and it will host the documentation at http://localhost:8080.
+The site will automatically update when you make changes.