Add provision NPM script. Add build status to footer. Update readme with additional and simplified examples.

Author: gibbs

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy
+name: Build
 
 on:
   workflow_run:

README.md

@@ -1,5 +1,6 @@
 # dangibbs.uk
 
+![Build](https://github.com/gibbs/gibbs.github.io/actions/workflows/deploy.yml/badge.svg)
 ![Tests](https://github.com/gibbs/gibbs.github.io/actions/workflows/test.yml/badge.svg)
 
 Dan Gibbs's personal website repository built with 
@@ -14,12 +15,16 @@ npm run build
 ## Develop
 
 ```bash
-APP_URL="http://localhost:8080" npm run serve
+npm run serve
 ```
 
-## Test
+## Lint
 
-Run all tests:
+```bash
+npm run lint
+```
+
+## Test
 
 ```bash
 npm run test

package-lock.json

@@ -7,14 +7,15 @@
     "node": ">=16"
   },
   "scripts": {
-    "build": "run-s build:*",
+    "build": "run-s provision build:*",
     "build:assets": "APP_ENV=production webpack --mode production",
     "build:site": "APP_ENV=production npx @11ty/eleventy",
     "debug": "DEBUG=* npx @11ty/eleventy",
     "lint": "run-s lint:*",
     "lint:js": "eslint '**/*.js' || true",
     "lint:yaml": "eslint content/**/*.yaml || true",
-    "serve": "APP_URL=${APP_URL:-\"http://localhost:8080\"} run-p serve:*",
+    "serve": "APP_URL=${APP_URL:-\"http://localhost:8080\"} run-p provision serve:*",
+    "provision": "mkdirp docs/assets/images/scaled/",
     "serve:assets": "APP_ENV=${APP_ENV:-development} webpack --mode ${APP_ENV:-development} --watch",
     "serve:build": "APP_ENV=${APP_ENV:-development} APP_URL=${APP_URL:-\"http://localhost:8080\"} npx @11ty/eleventy",
     "serve:watch": "APP_ENV=${APP_ENV:-development} APP_URL=${APP_URL:-\"http://localhost:8080\"} npx @11ty/eleventy --serve --port ${APP_PORT:-8080}",
@@ -56,6 +57,7 @@
     "markdown-it-attrs": "^4.1.0",
     "markdown-it-mark": "^3.0.1",
     "mini-css-extract-plugin": "^2.4.4",
+    "mkdirp": "^1.0.4",
     "mocha": "^9.2.0",
     "modern-normalize": "^1.1.0",
     "npm-run-all": "^4.1.5",

package.json

@@ -58,6 +58,10 @@
           Cookie Preferences
         </a>
 
+        <a href="https://github.com/gibbs/gibbs.github.io/" class="copyright__test-status">
+          <img src="https://github.com/gibbs/gibbs.github.io/actions/workflows/deploy.yml/badge.svg" width="115" height="20" alt="Build Status">
+        </a>
+
         <a href="https://github.com/gibbs/gibbs.github.io/" class="copyright__test-status">
           <img src="https://github.com/gibbs/gibbs.github.io/actions/workflows/test.yml/badge.svg" width="107" height="20" alt="Test Status">
         </a>

src/_includes/footer.njk

@@ -208,6 +208,8 @@ body {
     align-self: center;
     margin: 0;
     font-size: small;
+    flex-direction: column;
+    gap: var(--spacer);
 
     a {
       padding: 0 calc(var(--gutter-width) * .25);
@@ -241,6 +243,8 @@ body {
 
   .copyright__test-status {
     justify-content: flex-end;
+    flex-direction: row;
+    gap: unset;
   }
 }