Merge commit '5be51ac3db225d5df501ed1fa1499c41d97dbf65'

docs/assets/js/alpinejs/data/explorer.js

@@ -1,6 +1,6 @@
 var debug = 0 ? console.log.bind(console, '[explorer]') : function () {};
 
-// This is cureently not used, but kept in case I change my mind.
+// This is currently not used, but kept in case I change my mind.
 export const explorer = (Alpine) => ({
 	uiState: {
 		containerScrollTop: -1,

docs/assets/js/alpinejs/data/navbar.js

@@ -1,6 +1,24 @@
 export const navbar = (Alpine) => ({
 	init: function () {
 		Alpine.bind(this.$root, this.root);
+
+		return this.$nextTick(() => {
+			let contentEl = document.querySelector('.content:not(.content--ready)');
+			if (contentEl) {
+				contentEl.classList.add('content--ready');
+				let anchorTemplate = document.getElementById('anchor-heading');
+				if (anchorTemplate) {
+					let els = contentEl.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]');
+					for (let i = 0; i < els.length; i++) {
+						let el = els[i];
+						el.classList.add('group');
+						let a = anchorTemplate.content.cloneNode(true).firstElementChild;
+						a.href = '#' + el.id;
+						el.appendChild(a);
+					}
+				}
+			}
+		});
 	},
 	root: {
 		['@scroll.window.debounce.10ms'](event) {

docs/assets/js/alpinejs/data/search.js

@@ -1,3 +1,5 @@
+import { LRUCache } from '../../helpers';
+
 const designMode = false;
 
 const groupByLvl0 = (array) => {
@@ -33,10 +35,10 @@ const applyHelperFuncs = (array) => {
 };
 
 export const search = (Alpine, cfg) => ({
-	query: designMode ? 'shortcodes' : '',
+	query: designMode ? 'apac' : '',
 	open: designMode,
 	result: {},
-
+	cache: new LRUCache(10), // Small cache, avoids network requests on e.g. backspace.
 	init() {
 		Alpine.bind(this.$root, this.root);
 
@@ -66,6 +68,13 @@ export const search = (Alpine, cfg) => ({
 			this.result = {};
 			return;
 		}
+
+		// Check cache first.
+		const cached = this.cache.get(this.query);
+		if (cached) {
+			this.result = cached;
+			return;
+		}
 		var queries = {
 			requests: [
 				{
@@ -91,6 +100,7 @@ export const search = (Alpine, cfg) => ({
 			.then((response) => response.json())
 			.then((data) => {
 				this.result = groupByLvl0(applyHelperFuncs(data.results[0].hits));
+				this.cache.put(this.query, this.result);
 			});
 	},
 	root: {
@@ -102,7 +112,7 @@ export const search = (Alpine, cfg) => ({
 		['@search-toggle.window']() {
 			this.toggleOpen();
 		},
-		['@keydown.meta.k.window.prevent']() {
+		['@keydown.slash.window.prevent']() {
 			this.toggleOpen();
 		},
 	},

docs/assets/js/alpinejs/data/toc.js

@@ -23,7 +23,7 @@ export const toc = (Alpine) => ({
 		});
 
 		return this.$nextTick(() => {
-			let contentEl = document.getElementById('content');
+			let contentEl = document.getElementById('article');
 			if (contentEl) {
 				const handleIntersect = (entries) => {
 					if (this.justClicked) {

docs/assets/js/alpinejs/stores/nav.js

@@ -87,8 +87,8 @@ export function initColorScheme() {
 
 const toggleDarkMode = function (dark) {
 	if (dark) {
-		document.body.classList.add('dark');
+		document.documentElement.classList.add('dark');
 	} else {
-		document.body.classList.remove('dark');
+		document.documentElement.classList.remove('dark');
 	}
 };

docs/assets/js/helpers/index.js

@@ -1,2 +1,3 @@
 export * from './bridgeTurboAndAlpine';
 export * from './helpers';
+export * from './lrucache';

docs/assets/js/helpers/lrucache.js

@@ -0,0 +1,19 @@
+// A simple LRU cache implementation backed by a map.
+export class LRUCache {
+	constructor(maxSize) {
+		this.maxSize = maxSize;
+		this.cache = new Map();
+	}
+
+	get(key) {
+		return this.cache.get(key);
+	}
+
+	put(key, value) {
+		if (this.cache.size >= this.maxSize) {
+			const firstKey = this.cache.keys().next().value;
+			this.cache.delete(firstKey);
+		}
+		this.cache.set(key, value);
+	}
+}