Merge commit '5be51ac3db225d5df501ed1fa1499c41d97dbf65'

docs/assets/css/components/all.css

@@ -1,4 +1,4 @@
-/* The ordeer of these does not matter. */
+/* The order of these does not matter. */
 @import "./content.css";
 @import "./fonts.css";
 @import "./helpers.css";

docs/assets/css/components/chroma_dark.css

@@ -5,7 +5,7 @@
 /* CodeLine */ .dark .chroma .cl {  }
 /* LineTableTD */ .dark .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .dark .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .dark .chroma .hl { background-color: #ffffcc }
+/* LineHighlight */ .dark .chroma .hl { background-color: rgb(0,19,28) }
 /* LineNumbersTable */ .dark .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* LineNumbers */ .dark .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* Line */ .dark .chroma .line { display: flex; }

docs/assets/css/components/content.css

@@ -12,31 +12,32 @@
 }
 
 .highlight code {
-  @apply text-sm;
+  @apply text-sm/6;
 }
 
 .content {
   @apply prose prose-sm sm:prose-base prose-stone max-w-none dark:prose-invert dark:text-slate-200;
   /* headings */
-  @apply prose-h4:font-bold prose-h5:font-bold prose-h6:font-bold;
+  @apply prose-headings:font-semibold;
   /* lead */
   @apply prose-lead:text-slate-500 prose-lead:text-xl prose-lead:mt-2 sm:prose-lead:mt-4 prose-lead:leading-relaxed dark:prose-lead:text-slate-400;
   /* links */
-  @apply prose-a:text-primary prose-a:hover:text-primary/70 prose-a:underline;
-  @apply prose-a:prose-code:underline prose-a:prose-code:hover:text-primary/70 prose-a:prose-code:hover:underline;
+  @apply prose-a:text-primary dark:prose-a:text-blue-500 prose-a:hover:text-blue-500 dark:prose-a:hover:text-blue-400 prose-a:underline;
+  @apply prose-a:prose-code:underline prose-a:prose-code:hover:text-blue-500 prose-a:prose-code:hover:underline;
   /* pre */
   @apply prose-pre:text-gray-800 prose-pre:border-1 prose-pre:border-gray-100 prose-pre:bg-light dark:prose-pre:bg-dark dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
   /* code */
   @apply prose-code:px-0.5 prose-code:text-gray-500 prose-code:dark:text-gray-300 border-none;
   @apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
+  @apply prose-table:prose-th:prose-code:text-white;
   /* tables */
-  @apply prose-table:border-2 prose-table:border-gray-100  prose-table:dark:border-gray-800 prose-table:relative prose-table:overflow-scroll prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
+  @apply prose-table:w-auto prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
   /* hr */
   @apply dark:prose-hr:border-slate-800;
-
-  h6 + * {
-    @apply mt-2;
-  }
+  /* ol */
+  @apply prose-ol:marker:prose dark:prose-ol:marker:text-gray-300;
+  /* ul */
+  @apply prose-ul:marker:text-gray-500 dark:prose-ul:marker:text-gray-300;
 }
 
 /* This will not match highlighting inside e.g. the code-toggle shortcode. */

docs/assets/css/components/view-transitions.css

@@ -16,7 +16,5 @@
 
 /* Turbo styles */
 .turbo-progress-bar {
-  @apply bg-blue-500;
-  opacity: 0.35;
-  height: 3px;
+  visibility: hidden;
 }

docs/assets/css/styles.css

@@ -76,8 +76,9 @@
   --color-green-950: #051410;
 
   /* Fonts. */
-  --font-sans: "Mulish", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Mulish", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html {
@@ -121,3 +122,10 @@ body {
 .algolia-docsearch-suggestion--highlight {
   color: var(--color-primary);
 }
+
+/* Footnotes */
+.footnote-backref,
+.footnote-ref {
+  text-decoration: none;
+  padding-left: .0625em;
+}

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);
+	}
+}