Change default license branch to main

Fixes #33.

README.md

@@ -12,6 +12,7 @@ All JavaScript functionalities are exposed using the `window.fwdekker` object.
 Some functionalities are automatically executed after configuring some `<meta>` tags in the HTML.
 For example, set `<meta name="fwd:nav:target" content="#nav" />` to automatically put the navigation bar in the `#nav`
 element.
+All meta-tag behaviour is opt-in.
 
 Read the files' individual documentation for more information.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.0.0",
+    "version": "3.6.5",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
@@ -24,20 +24,20 @@
         "deploy": "grunt deploy"
     },
     "dependencies": {
-        "@picocss/pico": "^1.5.6"
+        "@picocss/pico": "^1.5.10"
     },
     "devDependencies": {
-        "grunt": "^1.5.3",
+        "grunt": "^1.6.1",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
-        "grunt-contrib-cssmin": "^4.0.0",
+        "grunt-contrib-cssmin": "^5.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
-        "grunt-webpack": "^5.0.0",
+        "grunt-webpack": "^6.0.0",
-        "ts-loader": "^9.4.1",
+        "ts-loader": "^9.5.1",
         "ts-node": "^10.9.1",
-        "typescript": "^4.9.3",
+        "typescript": "^5.3.2",
-        "webpack": "^5.75.0",
+        "webpack": "^5.89.0",
-        "webpack-cli": "^5.0.0"
+        "webpack-cli": "^5.1.4"
     }
 }

src/main/css/main.css

@@ -4,5 +4,5 @@
 @import "snippets/colors.css";
 
 @import "snippets/common.css";
+@import "snippets/forms.css";
 @import "snippets/nav.css";
-@import "snippets/validation.css";

src/main/css/snippets/colors.css

@@ -1,11 +1,39 @@
 /* pico.css overrides, based on https://picocss.com/docs/customization.html */
-:root {
+
+/* Light (default) */
+.fwd-nav,
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
     --primary: rgb(0, 51, 204) !important;
     --primary-hover: rgb(0, 61, 245) !important;
     --primary-focus: rgba(0, 41, 163, 0.125) !important;
     --primary-focus-opaque: rgb(0, 41, 163) !important;
+    --primary-focus-dark: rgb(0, 29, 114) !important;
     --primary-inverse: white !important;
+}
 
+/* Dark (auto) */
+@media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]):not(.fwd-nav) {
+        --primary: #1e88e5 !important;
+        --primary-hover: #2196f3 !important;
+        --primary-focus: rgba(30, 136, 229, 0.25) !important;
+        --primary-focus-opaque: rgb(30, 136, 229) !important;
+        --primary-inverse: white !important;
+    }
+}
+
+/* Dark (forced) */
+:root[data-theme="dark"]:not(.fwd-nav) {
+    --primary: #1e88e5 !important;
+    --primary-hover: #2196f3 !important;
+    --primary-focus: rgba(30, 136, 229, 0.25) !important;
+    --primary-focus-opaque: rgb(30, 136, 229) !important;
+    --primary-inverse: white !important;
+}
+
+/* Common */
+:root {
     --form-element-active-border-color: var(--primary) !important;
     --form-element-focus-color: var(--primary-focus) !important;
     --switch-color: var(--primary-inverse) !important;

src/main/css/snippets/common.css

@@ -7,7 +7,10 @@ a[target="_blank"]::after {
     margin-left: 0.25rem;
 
     /* Image from https://icons.getbootstrap.com/icons/box-arrow-up-right/. MIT License. */
-    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
+    --mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
+    -webkit-mask-image: var(--mask-image);
+    -webkit-mask-size: cover;
+    mask-image: var(--mask-image);
     mask-size: cover;
     background-repeat: no-repeat no-repeat;
     background-position: center center;
@@ -35,21 +38,30 @@ a[target="_blank"]::after {
     }
 }
 
-/* Container with table of contents */
+/* Container with sidebar, e.g. for table of contents */
-@media (min-width: 576px) {
+@media (min-width: 992px) {
-    .container-with-toc {
+    :root {
-        display: grid;
+        --aside-width: 200px;
-        grid-template-columns: 200px auto;
-        grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
     }
 
-    .container-with-toc nav {
+    .grid-with-sidebar {
-        max-width: 200px;
+        display: grid;
+        grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
+        grid-template-columns: var(--aside-width) auto;
+    }
+
+    .grid-with-sidebar aside {
+        max-width: var(--aside-width);
+    }
+
+    .grid-with-sidebar aside .sticky {
+        position: sticky;
+        top: var(--block-spacing-vertical);
     }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 992px) {
-    .container-with-toc aside {
+    .grid-with-sidebar aside {
         margin-bottom: var(--block-spacing-vertical);
     }
 }
@@ -68,7 +80,7 @@ noscript.fwd-js-notice p {
 
 /* Header */
 header.fwd-header a[href="."] {
-    color: black;
+    color: unset;
 }
 
 

src/main/css/snippets/forms.css

@@ -1,14 +1,21 @@
+/* Status card */
 .status-card {
     font-weight: bold;
+    position: relative;
+}
+
+.status-card output {
+    display: block;
+    margin-right: var(--block-spacing-horizontal);
 }
 
 .status-card .close {
-    float: right;
+    position: absolute;
-    display: block;
+    right: var(--block-spacing-horizontal);
+    top: calc(var(--block-spacing-vertical) / 2);
 
     width: 1rem;
     height: 1rem;
-    margin: 0 0 calc(var(--block-spacing-vertical) / 2) calc(var(--block-spacing-vertical) / 2);
 
     background-image: var(--icon-close);
     background-position: center;
@@ -46,14 +53,35 @@
 }
 
 
+/* Input validation */
 label.invalid,
+*[data-label-for].invalid,
 input.invalid,
 *[data-hint-for].invalid {
     color: var(--form-element-invalid-border-color) !important;
 }
 
 label.valid,
+*[data-label-for].valid,
 input.valid,
 *[data-hint-for].valid {
     color: var(--form-element-valid-border-color) !important;
 }
+
+
+/* Enable hint-like styling on any element */
+.input-hint {
+    display: block;
+
+    /*noinspection CssUnresolvedCustomProperty*/
+    margin-top: calc(var(--spacing) * -.75);
+}
+
+
+/* Custom components */
+.inline-button {
+    display: inline-block;
+    width: unset;
+    margin: 0;
+    padding: 0.3em;
+}

src/main/css/snippets/nav.css

@@ -1,140 +1,138 @@
 /* Base elements */
 nav.fwd-nav {
-    display: block;
+    --fwd-nav-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
-    z-index: 10;
+    box-shadow: var(--fwd-nav-box-shadow);
-
-    margin: 0;
-    width: 100%;
-
-    background-color: var(--primary);
-    border-bottom: 1px solid var(--nav-border-color);
-
-    --padding: calc(2em / 3);
 }
 
-nav.fwd-nav * {
+nav.fwd-nav > ul {
-    vertical-align: middle;
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
 }
 
-nav.fwd-nav a,
+nav.fwd-nav > ul > li {
-nav.fwd-nav a:link,
+    flex-grow: 0;
-nav.fwd-nav a:visited,
+    flex-basis: 0;
-nav.fwd-nav a:hover,
-nav.fwd-nav a:active {
-    /* Ensures whole li is clickable */
-    width: 100%;
 }
 
-nav.fwd-nav a,
+nav.fwd-nav li {
-nav.fwd-nav a:link,
-nav.fwd-nav a:visited,
-nav.fwd-nav a:hover,
-nav.fwd-nav a:active,
-nav.fwd-nav #nav-hamburger-label {
-    display: inline-block;
-    margin: 0;
-    padding: calc(var(--padding)) calc(var(--padding));
-    height: 100%;
-
-    color: var(--primary-inverse);
-}
-
-nav.fwd-nav #nav-hamburger-label {
-    float: right;
-}
-
-nav.fwd-nav a[target="_blank"]::after {
-    margin-bottom: 0.2rem;
-    background-color: var(--primary-inverse);
-}
-
-
-/* Logo */
-nav.fwd-nav .logo {
-    width: calc(1em + var(--padding));
-    height: calc(1em + var(--padding));
-
-    vertical-align: middle;
-    filter: brightness(0) invert(1);
-}
-
-nav.fwd-nav div.logo {
-    display: inline-block;
-    margin-right: calc(1em / 3);
-}
-
-
-/* First level nesting */
-nav.fwd-nav ul {
-    display: block;
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-}
-
-nav.fwd-nav ul li {
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-
     position: relative;
-    background-color: var(--primary);
+    width: 100%;
+    padding: var(--nav-element-spacing-horizontal);
+
+    white-space: nowrap;
 }
 
-nav.fwd-nav ul li:hover,
+nav.fwd-nav li > :first-child {
-nav.fwd-nav ul li:focus-within,
+    display: inline-block;
-nav.fwd-nav #nav-hamburger-label:hover,
+    width: 100%;
-nav.fwd-nav #nav-hamburger-label:focus-within {
+    margin: 0;
-    cursor: pointer;
-    background-color: var(--primary-hover);
 }
 
-nav.fwd-nav li.currentPage {
+nav.fwd-nav ul ul {
-    background-color: var(--primary-focus-opaque);
-}
-
-
-/* Second level nesting */
-nav.fwd-nav ul li ul {
-    z-index: 11;
-
     display: none;
+
     position: absolute;
+    top: 100%;
     left: 0;
+    margin: 0;
+
+    box-shadow: var(--fwd-nav-box-shadow);
 }
 
-nav.fwd-nav ul li ul li ul {
+nav.fwd-nav li:where(:active, :focus-within, :hover, .fwd-nav-active) > ul {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+nav.fwd-nav ul ul ul {
     left: 100%;
     top: 0;
 }
 
-nav.fwd-nav ul li:hover > ul,
+/* z-index */
-nav.fwd-nav ul li:focus-within > ul,
+nav.fwd-nav a {
-nav.fwd-nav ul li ul:hover {
+    position: relative;
-    display: block;
 }
 
-nav.fwd-nav ul li ul li {
+nav.fwd-nav > ul > li > ul {
-    min-width: 7em;
+    z-index: 10;
-    width: 100%;
-    white-space: nowrap;
 }
 
+/* Colors and optional styling */
+nav.fwd-nav,
+nav.fwd-nav ul {
+    background-color: var(--primary);
+}
 
-/* Hide hamburger-related elements */
+nav.fwd-nav li.fwd-nav-separator {
-nav.fwd-nav input[type="checkbox"] {
+    border-top: 1px solid #ccc;
-    display: none;
+}
+
+nav.fwd-nav li:where(:active, :focus-within, :hover, .fwd-nav-active) {
+    background-color: var(--primary-focus-dark);
+}
+
+nav.fwd-nav li.fwd-nav-highlighted:not(:where(:active, :focus-within, :hover, .fwd-nav-active)) {
+    background-color: var(--primary-focus-opaque);
+}
+
+nav.fwd-nav a {
+    color: var(--primary-inverse);
+}
+
+nav.fwd-nav a::after {
+    background-color: var(--primary-inverse);
+}
+
+/* Logo */
+nav.fwd-nav #logo {
+    font-weight: bold;
+}
+
+nav.fwd-nav #logo::before {
+    display: inline-block;
+
+    width: calc(1em * var(--line-height));
+    height: calc(1em * var(--line-height));
+    margin-right: 0.25rem;
+    vertical-align: top;
+
+    --mask-image: url("https://fwdekker.com/favicon.png");
+    -webkit-mask-image: var(--mask-image);
+    -webkit-mask-size: cover;
+    mask-image: var(--mask-image);
+    mask-size: cover;
+    background-repeat: no-repeat no-repeat;
+    background-position: center center;
+    background-size: cover;
+    background-color: var(--primary-inverse);
+
+    content: "";
+}
+
+/* Hamburger */
+nav.fwd-nav #fwd-nav-hamburger-label {
+    height: fit-content;
+    margin: 0;
+    padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));
+
+    color: var(--primary-inverse);
+}
+
+nav.fwd-nav #fwd-nav-hamburger-label:where(:active, :focus-within, :hover, .fwd-nav-active) {
+    background-color: var(--primary-focus-dark);
 }
 
 @media (min-width: 576px) {
-    nav.fwd-nav #nav-hamburger-label {
+    nav.fwd-nav #fwd-nav-hamburger-label {
         display: none;
     }
 }
 
 @media (max-width: 576px) {
-    nav.fwd-nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
+    nav.fwd-nav #fwd-nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
         display: none;
     }
 }

src/main/css/snippets/overrides.css

@@ -1,3 +1,29 @@
+/* pico.css: Improved text contrast (see also picocss/pico#276) */
+:root {
+    --code-color: var(--color) !important;
+}
+
+:root[data-theme="light"] {
+    --muted-color: hsl(205deg, 15%, 41%) !important;
+}
+
+:root[data-theme="dark"] {
+    --muted-color: hsl(205deg, 12%, 59%) !important;
+}
+
+/* pico.css: Bold <label> and <th>, except for checkbox/radio labels */
+:root {
+    --form-label-font-weight: bold;
+}
+
+tr th {
+    font-weight: bold;
+}
+
+input:where([type="checkbox"], [type="radio"]) + label {
+    font-weight: normal;
+}
+
 /* pico.css: Halve header margins */
 h1 {
     --typography-spacing-vertical: 1.5rem;
@@ -43,8 +69,12 @@ article > header {
 }
 
 article > footer {
-    margin-bottom: calc(var(--block-spacing-vertical) / -2);
     margin-top: calc(var(--block-spacing-vertical) / 2);
+    margin-bottom: calc(var(--block-spacing-vertical) / -2);
+}
+
+article > footer > form > article {
+    margin-top: 0;
 }
 
 article > header > hgroup,

src/main/js/Storage.ts

@@ -20,7 +20,6 @@ export interface Storage {
      *
      * @param name the name of the array to store
      * @param value the array to store under the given name
-     * @protected
      */
     setArray(name: string, value: any[]): void;
 
@@ -29,7 +28,6 @@ export interface Storage {
      *
      * @param name the name of the boolean to retrieve
      * @param def the value to return if no boolean is stored with the given name
-     * @protected
      */
     getBoolean(name: string, def: boolean): boolean;
 
@@ -38,7 +36,6 @@ export interface Storage {
      *
      * @param name the name of the boolean to store
      * @param value the boolean to store under the given name
-     * @protected
      */
     setBoolean(name: string, value: boolean): void;
 
@@ -47,7 +44,6 @@ export interface Storage {
      *
      * @param name the name of the number to retrieve
      * @param def the value to return if no number is stored with the given name
-     * @protected
      */
     getNumber(name: string, def: number): number;
 
@@ -56,9 +52,24 @@ export interface Storage {
      *
      * @param name the name of the number to store
      * @param value the number to store under the given name
-     * @protected
      */
     setNumber(name: string, value: number): void;
+
+    /**
+     * Retrieves a string from storage.
+     *
+     * @param name the name of the string to retrieve
+     * @param def the value to return if no string is stored with the given name
+     */
+    getString(name: string, def: string): string;
+
+    /**
+     * Stores a string.
+     *
+     * @param name the name of the string to store
+     * @param value the number to store under the given name
+     */
+    setString(name: string, value: string): void;
 }
 
 /**
@@ -115,28 +126,32 @@ export class LocalStorage implements Storage {
     }
 
     setArray(name: string, value: any[]): void {
-        const item = this.read();
+        this.setString(name, JSON.stringify(value));
-        item[name] = JSON.stringify(value);
-        this.write(item);
     }
 
     getBoolean(name: string, def: boolean = false): boolean {
-        return (this.read()[name] ?? `${def}`) === "true";
+        return this.getString(name, def ? "true" : "false") === "true";
     }
 
     setBoolean(name: string, value: boolean): void {
-        const item = this.read();
+        this.setString(name, "" + value);
-        item[name] = "" + value;
-        this.write(item);
     }
 
     getNumber(name: string, def: number = 0): number {
-        return +(this.read()[name] ?? def);
+        return +this.getString(name, "" + def);
     }
 
     setNumber(name: string, value: number): void {
+        this.setString(name, "" + value);
+    }
+
+    getString(name: string, def: string = ""): string {
+        return this.read()[name] ?? def;
+    }
+
+    setString(name: string, value: string): void {
         const item = this.read();
-        item[name] = "" + value;
+        item[name] = value;
         this.write(item);
     }
 }
@@ -175,4 +190,12 @@ export class MemoryStorage implements Storage {
     getNumber(name: string, def: number): number {
         return this.storage[name] ?? def;
     }
+
+    setString(name: string, value: string): void {
+        this.storage[name] = value;
+    }
+
+    getString(name: string, def: string): string {
+        return this.storage[name] ?? def;
+    }
 }

src/main/js/Template.ts

@@ -2,11 +2,11 @@
  * Converts the given string to an HTML element.
  *
  * @param string the string to convert to an HTML element
- * @param query the type of element to return
+ * @param query the type of element to return, or `undefined` to return the first element
- * @returns the HTML element described by the given string, or `null` if `query` did not match any element
+ * @returns the HTML element described by the given string
  */
-export function stringToHtml(string: string, query: string): HTMLElement | null {
+export function stringToHtml(string: string, query: string = "*"): HTMLElement {
-    return (new DOMParser()).parseFromString(string, "text/html").body.querySelector(query);
+    return (new DOMParser()).parseFromString(string, "text/html").body.querySelector(query)!;
 }
 
 /**
@@ -81,35 +81,36 @@ export function getMetaProperty(name: string): string | null | undefined {
  * @returns a base navigation element that will eventually be filled with contents
  */
 function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
-    const base = stringToHtml(
+    const nav = stringToHtml(`<nav class="fwd-nav"></nav>`);
-        `<ul><li><a href="https://fwdekker.com/">` +
-        `<div class="logo"><img class="logo" src="https://fwdekker.com/favicon.png" alt="FWDekker" /></div>` +
-        `<b>FWDekker</b>` +
-        `</a></li></ul>`,
-        "ul"
-    )!;
 
+    const checkbox = stringToHtml(`<input id="fwd-nav-hamburger-checkbox" type="checkbox" hidden />`);
+    nav.appendChild(checkbox);
+
+    const base = stringToHtml(
+        `<ul><li ${highlightPath === "/" ? `class="fwd-nav-highlighted" aria-current="page"` : ""}>` +
+        `<a id="logo" href="https://fwdekker.com/">FWDekker</a>` +
+        `</li></ul>`
+    );
     fetch("https://fwdekker.com/api/nav/")
         .then(it => it.json())
         .then(json => {
             if (cb !== undefined)
                 cb(json);
 
-            json.entries.forEach(
+            json.entries.forEach((it: any) => base.appendChild(unpackEntry(it, "/", highlightPath)));
-                (entry: any) =>
+
-                    base.appendChild(stringToHtml(unpackEntry(entry, "/", highlightPath), "li")!)
+            document.body.addEventListener(
+                "click",
+                () => $a("li", base).forEach(it => it.classList.remove("fwd-nav-active")),
+                {capture: true}
             );
         })
         .catch(error => console.error("Failed to fetch navigation elements", error));
-
-    const nav = stringToHtml(
-        `<nav class="fwd-nav">` +
-        `<input id="nav-hamburger-checkbox" type="checkbox" hidden />` +
-        `<label id="nav-hamburger-label" for="nav-hamburger-checkbox">&#9776;</label>` +
-        `</nav>`,
-        "nav"
-    )!;
     nav.appendChild(base);
+
+    const label = stringToHtml(`<label id="fwd-nav-hamburger-label" for="fwd-nav-hamburger-checkbox">&#9776;</label>`);
+    nav.appendChild(label);
+
     return nav;
 }
 
@@ -117,29 +118,45 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
  * Unpacks a navigation entry returned from the navigation API into an HTML element.
  *
  * @param entry the entry to unpack
- * @param path the current path traversed, found by joining the names of the entries with `/`s; always starts and ends
+ * @param parentPath the current path traversed, found by joining the names of the entries with `/`s; always starts and
- * with a `/`
+ * ends with a `/`
  * @param highlightPath the path to highlight together with its parents, or `undefined` if no path should be highlighted
- * @returns the navigation list entry as HTML, described by its children
+ * @returns the navigation list entry
  */
-function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
+function unpackEntry(entry: any, parentPath: string = "/", highlightPath?: string): HTMLLIElement {
-    const shouldHighlight = highlightPath?.startsWith(`${path + entry.name}/`) ?? false;
+    const path = `${parentPath + entry.name}/`;
-    const isExternalLink = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#";
+    const hasChildren = entry.entries.length !== 0;
 
-    if (entry.entries.length === 0)
+    const li = document.createElement("li");
-        return "" +
+    if (highlightPath === path) li.setAttribute("aria-current", "page");
-            `<li ${shouldHighlight ? "class=\"currentPage\"" : ""}>` +
+    if (highlightPath?.startsWith(path) ?? false) li.classList.add("fwd-nav-highlighted");
-            `<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
+    if (entry.border) li.classList.add("fwd-nav-separator");
-            `</li>`;
 
-    const depth = path.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
+    const a = document.createElement("a");
-    const arrow = depth === 0 ? "&#9662;" : "&#9656;";
+    a.innerText = entry.name;
+    a.tabIndex = 0;
+    if (hasChildren) {
+        const depth = parentPath.split("/").length - 2;  // -1 because count parts, then another -1 because of leading /
+        a.innerText += ` ${depth === 0 ? "▾" : "▸"}`;
+    }
+    if (entry.link != null) {
+        a.href = entry.link;
 
-    return "" +
+        if (entry.link !== "#" && !/^https:\/\/.*fwdekker.com/i.test(entry.link))
-        `<li class="${shouldHighlight ? "currentPage" : ""}">` +
+            a.target = "_blank";
-        `<a href="${entry.link}">${entry.name} ${arrow}</a>` +
+    }
-        `<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
+    li.addEventListener("click", () => li.classList.add("fwd-nav-active"));
-        `</li>`;
+    li.appendChild(a);
+
+    if (hasChildren) {
+        const ul = document.createElement("ul");
+        entry.entries
+            .map((it: any) => unpackEntry(it, path, highlightPath))
+            .forEach((it: HTMLLIElement) => ul.appendChild(it));
+        li.appendChild(ul);
+    }
+
+    return li;
 }
 
 /**
@@ -182,7 +199,7 @@ function footer(
     if (author === undefined) author = "Florine&nbsp;W.&nbsp;Dekker";
     if (authorURL === undefined) authorURL = "https://fwdekker.com/";
     if (license === undefined) license = "MIT";
-    if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/master/LICENSE`;
+    if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/main/LICENSE`;
     if (vcs === undefined && vcsURL !== undefined) vcs = "git";
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
@@ -192,9 +209,8 @@ function footer(
         footerLink("Licensed ", license, licenseURL, ". ") +
         footerLink("Source and support on ", vcs, vcsURL, ". ") +
         footerLink("Read the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
-        `</small><div id="fwd-footer-version"><small>${version || ""}</small></div></footer>`,
+        `</small><div id="fwd-footer-version"><small>${version || ""}</small></div></footer>`
-        "footer"
+    );
-    )!;
 }
 
 /**
@@ -251,4 +267,10 @@ doAfterLoad(() => {
             footerTarget
         );
     }
+
+    if (getMetaProperty("fwd:auto:show-main") !== undefined)
+        $("main")?.classList?.remove("hidden");
+
+    if (getMetaProperty("fwd:auto:autofocus") !== undefined)
+        $("[autofocus]")?.focus();
 });

src/main/js/Validation.ts

@@ -25,22 +25,27 @@ export function clearFormValidity(form: HTMLFormElement): void {
  */
 export function showMessageType(card: HTMLElement | HTMLFormElement,
                                 message?: string,
-                                type?: "error" | "info" | "success" | "warning"): void {
+                                type?: "busy" | "error" | "info" | "success" | "warning"): void {
     if (card instanceof HTMLFormElement) {
-        const formCard = $(`article[data-status-for="${card.id}"]`);
+        if (card.dataset.statusCard == null) return;
+
+        const formCard = $(`#${card.dataset.statusCard}`);
         if (formCard == null) return;
 
         card = formCard;
     }
     const output = $("output", card)!;
 
+    output.removeAttribute("aria-busy");
     card.classList.remove("hidden", "error", "info", "success", "warning");
 
     if (message == null || type == null) {
         card.classList.add("hidden");
         output.innerHTML = "";
     } else {
-        card.classList.add(type);
+        if (type === "busy") output.setAttribute("aria-busy", "true");
+        else card.classList.add(type);
+
         output.innerHTML = message;
     }
 }
@@ -54,6 +59,16 @@ export function clearMessageStatus(card: HTMLElement): void {
     showMessageType(card);
 }
 
+/**
+ * Shows a busy message in `card`, i.e. with a loading indicator.
+ *
+ * @param card the card to show `message` in
+ * @param message the message to show in `card`
+ */
+export function showMessageBusy(card: HTMLElement, message: string): void {
+    showMessageType(card, message, "busy");
+}
+
 /**
  * Shows an error message in `card`.
  *
@@ -105,7 +120,7 @@ export function clearInputValidity(input: HTMLInputElement): void {
     input.removeAttribute("aria-invalid");
     input.removeAttribute("aria-errormessage");
 
-    const label = $(`label[for="${input.id}"]`);
+    const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
     if (label != null)
         label.classList.remove("valid", "invalid");
 
@@ -123,15 +138,16 @@ export function clearInputValidity(input: HTMLInputElement): void {
  *
  * @param input the input to show as invalid
  * @param message the message explaining what is invalid
+ * @param focus `true` if `input` should receive focus
  */
-export function showInputInvalid(input: HTMLInputElement, message?: string): void {
+export function showInputInvalid(input: HTMLInputElement, message?: string, focus: boolean = true): void {
     clearInputValidity(input);
 
     input.classList.add("invalid");
     input.setAttribute("aria-invalid", "true");
-    input.focus();
+    if (focus) input.focus();
 
-    const label = $(`label[for="${input.id}"]`);
+    const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
     if (label != null)
         label.classList.add("invalid");
 
@@ -157,7 +173,7 @@ export function showInputValid(input: HTMLInputElement, message?: string): void
     input.classList.add("valid");
     input.setAttribute("aria-invalid", "false");
 
-    const label = $(`label[for="${input.id}"]`);
+    const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
     if (label != null)
         label.classList.add("valid");
 
@@ -186,7 +202,7 @@ doAfterLoad(() => {
         });
     });
 
-    $a("input + small[data-hint]").forEach((hint: Element) => {
+    $a("small[data-hint]").forEach((hint: Element) => {
         if (!(hint instanceof HTMLElement)) return;
 
         hint.innerHTML = hint.dataset["hint"] ?? "";

src/test/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,7 +11,7 @@
     <meta name="fwd:nav:target" content="#nav" />
     <meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
     <meta name="fwd:footer:target" content="#footer" />
-    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/fwdekker.com/template/" />
     <meta name="fwd:footer:version" content="vTEST" />
     <meta name="fwd:validation:load-forms" />
 
@@ -29,16 +29,9 @@
     </p>
 </noscript>
 <nav id="nav"></nav>
-<main class="container container-with-toc">
+<main class="container grid-with-sidebar">
     <aside>
-        <nav>
+        Table of contents test
-            <b class="hidden-no-mobile">Table of contents</b>
-            <ul>
-                <li>Item 1</li>
-                <li>Item 2</li>
-            </ul>
-            <hr class="hidden-no-mobile" />
-        </nav>
     </aside>
     <div role="document">
         <section>
@@ -58,6 +51,7 @@
             <p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
             <p>These are some more contents.</p>
             <p>These are the page contents.</p>
+            <p><code>This is a code block</code></p>
 
 
             <article>
@@ -67,25 +61,21 @@
                         <h3>Already have an account? Welcome back!</h3>
                     </hgroup>
                 </header>
-                <form id="test-form" novalidate>
+                <form id="test-form" data-status-card="test-status-card" novalidate>
-                    <article class="status-card hidden" data-status-for="test-form">
+                    <article id="test-status-card" class="status-card hidden">
                         <output>Congrats!</output>
                         <a class="close" href="#" aria-label="Close"></a>
                     </article>
 
-                    <fieldset>
+                    <label for="test-email">Email</label>
-                        <label for="test-email">Email</label>
+                    <input id="test-email" type="email" name="email" autocomplete="on" />
-                        <input id="test-email" type="email" name="email" autocomplete="on" />
+                    <small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
-                        <small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
 
-                        <label for="test-password">Password</label>
+                    <label for="test-password">Password</label>
-                        <input id="test-password" type="password" name="password" />
+                    <input id="test-password" type="password" name="password" />
-                        <small id="test-password-hint" data-hint-for="test-password"></small>
+                    <small id="test-password-hint" data-hint-for="test-password"></small>
-                    </fieldset>
 
-                    <fieldset>
+                    <button id="login-button">Log in</button>
-                        <button id="login-button">Log in</button>
-                    </fieldset>
                 </form>
             </article>
         </section>
@@ -119,7 +109,7 @@
         }
     });
 
-    validation.showMessageWarning($("#global-status-card"), ":D");
+    validation.showMessageBusy($("#global-status-card"), ":D");
 </script>
 </body>
 </html>