Add search support

Only supports elasticlunr_json

config.toml

@@ -34,7 +34,7 @@ highlight_themes_css = [
 smart_punctuation = true
 
 [search]
-index_format = "elasticlunr_javascript"
+index_format = "elasticlunr_json"
 
 [languages.ru]
 title = "Duckquill"

content/_index.md

@@ -1,5 +1,6 @@
 +++
 insert_anchor_links = "right"
+title = "Home"
 +++
 
 {% crt() %}

sass/_article-list.scss

@@ -11,7 +11,7 @@
 			h3 {
 				margin-right: 8rem;
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					margin-right: unset;
 					margin-left: 8rem;
 				}
@@ -69,7 +69,7 @@
 				height: 12rem;
 				content: "";
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					right: unset;
 					left: -3rem;
 					transform: translateY(-50%) rotate(10deg);
@@ -97,7 +97,7 @@
 				top: 1rem;
 				right: 1rem;
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					right: unset;
 					left: 0.5rem;
 				}
@@ -108,7 +108,7 @@
 				color: var(--faves-fg);
 			}
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				border-top-right-radius: var(--rounded-corner);
 				border-top-left-radius: 2.125rem;
 
@@ -136,7 +136,7 @@
 				height: 1rem;
 			}
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				right: unset;
 				left: 0;
 			}

sass/_comments.scss

@@ -8,7 +8,7 @@
 		width: 7.8125rem;
 		height: 7.8125rem;
 
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			float: left;
 			margin: 3rem 1rem 0 0;
 		}
@@ -47,7 +47,7 @@
 				border-radius: 0.25rem;
 				padding-left: 1rem;
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					border-right: 0.25rem solid var(--fg-muted-2);
 					border-left: unset;
 					padding-right: 1rem;

sass/_containers.scss

@@ -21,7 +21,7 @@
 		padding: 0.5rem;
 		line-height: 0;
 
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			right: unset;
 			left: 0.5rem;
 		}

sass/_external.scss

@@ -12,7 +12,7 @@
 	height: 0.75em;
 	content: "";
 
-	:root[dir="rtl"] & {
+	:root[dir*="rtl"] & {
 		transform: scaleX(-100%);
 		margin-right: 0.25rem;
 		margin-left: unset;

sass/_media.scss

@@ -40,7 +40,7 @@ video {
 		transform-origin: left;
 		margin-inline-end: 1rem;
 
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			float: right;
 			transform-origin: right;
 		}
@@ -52,7 +52,7 @@ video {
 		transform-origin: right;
 		margin-inline-start: 1rem;
 
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			float: left;
 			transform-origin: left;
 		}

sass/_nav.scss

@@ -14,20 +14,109 @@
 		padding: 0.5rem;
 
 		#main-content {
+			-webkit-backdrop-filter: var(--blur);
 			position: absolute;
-			transform: translateY(-100%);
+			top: 0;
+			left: 50%;
+			transform: translateX(-50%);
 			opacity: 0;
 			z-index: 999;
+			backdrop-filter: var(--blur);
 			transition: var(--transition);
-			background: var(--bg-color), var(--primary-color);
+			box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
+			border-radius: 999px;
+			background-color: var(--nav-bg);
+			padding: 0.5rem 0.75rem;
 			pointer-events: none;
+			line-height: normal;
+			text-decoration: none;
 
 			&:focus {
-				transform: translateY(0);
+				top: calc(100% + 0.5rem);
 				opacity: 1;
 			}
 		}
 
+		#search-container {
+			-webkit-backdrop-filter: var(--blur);
+			position: absolute;
+			top: 0;
+			left: 0;
+			opacity: 0;
+			z-index: 999;
+			backdrop-filter: var(--blur);
+			transition: var(--transition);
+			box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
+			border-radius: calc(var(--rounded-corner) + 0.5rem);
+			background-color: var(--nav-bg);
+			padding: 0.5rem;
+			width: 100%;
+			pointer-events: none;
+
+			&.active {
+				top: calc(100% + 0.5rem);
+				opacity: 1;
+				pointer-events: unset;
+			}
+
+			#search-bar {
+				box-shadow: var(--edge-highlight);
+				border: none;
+				border-radius: var(--rounded-corner);
+				background-image: none;
+				background-color: var(--fg-muted-1);
+				padding: 0.5rem 0.75rem;
+				width: 100%;
+
+				&::placeholder {
+					opacity: 1;
+					color: var(--fg-muted-4);
+				}
+			}
+
+			#search-results {
+				display: none;
+				flex-direction: column;
+				gap: 0.5rem;
+				margin-top: 0.5rem;
+				border-radius: var(--rounded-corner);
+				max-height: 50vh;
+				overflow: auto;
+
+				.item {
+					display: inline-flex;
+					flex-direction: column;
+					box-shadow: var(--edge-highlight);
+					border-radius: var(--rounded-corner);
+					background-color: var(--fg-muted-1);
+					padding: 0.5rem;
+
+					a {
+						line-height: normal;
+
+						&::after {
+							content: " →";
+
+							:root[dir*="rtl"] & {
+								content: " ←";
+							}
+						}
+					}
+
+					div {
+						margin-top: 0.5rem;
+						border-top: 0.0625rem solid var(--fg-muted-2);
+						padding-top: 0.25rem;
+						color: var(--fg-muted-5);
+
+						b {
+							color: var(--fg-color);
+						}
+					}
+				}
+			}
+		}
+
 		ul {
 			display: flex;
 			flex-wrap: wrap;
@@ -46,7 +135,7 @@
 					position: relative;
 					margin-right: 0.625rem;
 
-					:root[dir="rtl"] & {
+					:root[dir*="rtl"] & {
 						margin-right: unset;
 						margin-left: 0.625rem;
 					}
@@ -60,7 +149,7 @@
 						height: calc(100% + 0.25rem);
 						content: "";
 
-						:root[dir="rtl"] & {
+						:root[dir*="rtl"] & {
 							right: unset;
 							left: -0.5rem;
 						}
@@ -77,7 +166,7 @@
 				}
 
 				a,
-				&#dropdown summary {
+				&#language-switcher summary {
 					&:hover {
 						box-shadow: var(--edge-highlight);
 						background-color: var(--fg-muted-1);
@@ -126,8 +215,9 @@
 					}
 				}
 
+				&#search a,
 				&#feed a,
-				&#dropdown summary {
+				&#language-switcher summary {
 					padding: 0.5rem 0.625rem;
 
 					&:hover .icon {
@@ -143,17 +233,31 @@
 					}
 				}
 
+				&#search {
+					cursor: pointer;
+
+					.icon {
+						$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");
+						-webkit-mask-image: $icon;
+						mask-image: $icon;
+
+						:root[dir*="rtl"] & {
+							transform: scaleX(-100%);
+						}
+					}
+				}
+
 				&#feed .icon {
 					$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
 					-webkit-mask-image: $icon;
 					mask-image: $icon;
 
-					:root[dir="rtl"] & {
+					:root[dir*="rtl"] & {
 						transform: scaleX(-100%);
 					}
 				}
 
-				&#dropdown {
+				&#language-switcher {
 					details {
 						position: relative;
 						box-shadow: unset;

sass/_post-nav.scss

@@ -18,7 +18,7 @@
 			transform-origin: left;
 			padding-right: 1rem;
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				transform-origin: right;
 				padding-right: unset;
 				padding-left: 1rem;
@@ -27,7 +27,7 @@
 			.nav-arrow::before {
 				content: "← ";
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					content: "→ ";
 				}
 			}
@@ -39,7 +39,7 @@
 			padding-left: 1rem;
 			text-align: end;
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				transform-origin: left;
 				margin-right: auto;
 				margin-left: unset;
@@ -50,7 +50,7 @@
 			.nav-arrow::after {
 				content: " →";
 
-				:root[dir="rtl"] & {
+				:root[dir*="rtl"] & {
 					content: " ←";
 				}
 			}

sass/_tags.scss

@@ -9,7 +9,7 @@
 	&.inline {
 		margin-left: 0.25rem;
 
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			margin-right: 0.25rem;
 			margin-left: unset;
 		}
@@ -58,7 +58,7 @@
 				content: "#";
 			}
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				padding: 0.25rem 0.75rem 0.25rem 0.5rem;
 			}
 		}
@@ -72,7 +72,7 @@
 			color: var(--fg-muted-4);
 			font-variant-numeric: tabular-nums;
 
-			:root[dir="rtl"] & {
+			:root[dir*="rtl"] & {
 				border-radius: 999px 0 0 999px;
 				padding: 0.25rem 0.5rem 0.25rem 0.625rem;
 			}

sass/_typography.scss

@@ -50,7 +50,7 @@ blockquote {
 	padding: 0 0.75rem;
 	color: var(--fg-muted-5);
 
-	:root[dir="rtl"] & {
+	:root[dir*="rtl"] & {
 		border-right: 0.25rem solid var(--primary-color);
 		border-left: unset;
 	}
@@ -110,7 +110,7 @@ hr {
 		content: "☙❧";
 
 		// An ugly hack to fix mirroring in rtl
-		:root[dir="rtl"] & {
+		:root[dir*="rtl"] & {
 			content: "❧☙";
 		}
 	}
@@ -133,7 +133,7 @@ aside {
 	padding: 1rem;
 	width: 30%;
 
-	:root[dir="rtl"] & {
+	:root[dir*="rtl"] & {
 		float: left;
 	}
 

templates/partials/head.html

@@ -46,7 +46,12 @@
 		{%- include "partials/copy_button.html" %}
 	{%- endif %}
 
-	{%- set scripts = [] %}
+	{%- if config.build_search_index %}
+		{%- include "partials/search.html" %}
+		{%- set scripts = ["elasticlunr.min.js"] %}
+	{%- else %}
+		{%- set scripts = [""] %}
+	{%- endif %}
 
 	{%- if config.extra.scripts %}
 		{%- set scripts = config.extra.scripts %}

templates/partials/language_switcher.html

@@ -1,6 +1,6 @@
 {#- Based on https://github.com/welpo/tabi/blob/main/templates/partials/language_switcher.html -#}
 
-<li id="dropdown">
+<li id="language-switcher">
     <details>
         <summary>
             <i class="icon"></i>

templates/partials/nav.html

@@ -3,9 +3,13 @@
 		<a href="#main" id="main-content" tabindex="0">
 			{{ macros_translate::translate(key="skip_to_content", default="Skip to main content", language_strings=language_strings) }}
 		</a>
+		<div id="search-container">
+			<input id="search-bar" type="search" placeholder="{{ macros_translate::translate(key='search_for', default='Search for…', language_strings=language_strings) }}">
+			<div id="search-results"></div>
+		</div>
 		<ul>
 			<li id="home">
-				<a href="{{ get_url(path="/", lang=lang) }}"
+				<a href="{{ get_url(path='/', lang=lang) }}"
 					{%- if current_url | default(value="/") | trim_end_matches(pat="/") | safe == get_url(path="/", lang=lang) | trim_end_matches(pat='/') | safe -%}
 						class="active"
 					{%- endif -%}>
@@ -33,6 +37,16 @@
 					</li>
 				{%- endif %}
 			{%- endfor -%}
+			{%- if config.build_search_index %}
+				<li id="search">
+					<a onclick="toggleSearch()" onkeypress="toggleSearch()" tabindex="0">
+						<i class="icon"></i>
+						<span class="hidden">
+							{{ macros_translate::translate(key="search", default="Search", language_strings=language_strings) }}
+						</span>
+					</a>
+				</li>
+			{%- endif %}
 			{%- if config.languages | length > 0 %}
 				{%- include "partials/language_switcher.html" %}
 			{%- endif -%}

templates/partials/search.html

@@ -0,0 +1,204 @@
+{#- Based on https://github.com/getzola/zola/blob/master/docs/static/search.js -#}
+
+<script>
+    function debounce(func, wait) {
+        var timeout;
+
+        return function () {
+            var context = this;
+            var args = arguments;
+            clearTimeout(timeout);
+
+            timeout = setTimeout(function () {
+                timeout = null;
+                func.apply(context, args);
+            }, wait);
+        };
+    }
+
+    // Taken from mdbook
+    // The strategy is as follows:
+    // First, assign a value to each word in the document:
+    //  Words that correspond to search terms (stemmer aware): 40
+    //  Normal words: 2
+    //  First word in a sentence: 8
+    // Then use a sliding window with a constant number of words and count the
+    // sum of the values of the words within the window. Then use the window that got the
+    // maximum sum. If there are multiple maximas, then get the last one.
+    // Enclose the terms in <b>.
+    function makeTeaser(body, terms) {
+        var TERM_WEIGHT = 40;
+        var NORMAL_WORD_WEIGHT = 2;
+        var FIRST_WORD_WEIGHT = 8;
+        var TEASER_MAX_WORDS = 30;
+
+        var stemmedTerms = terms.map(function (w) {
+            return elasticlunr.stemmer(w.toLowerCase());
+        });
+        var termFound = false;
+        var index = 0;
+        var weighted = []; // contains elements of ["word", weight, index_in_document]
+
+        // split in sentences, then words
+        var sentences = body.toLowerCase().split(". ");
+
+        for (var i in sentences) {
+            var words = sentences[i].split(" ");
+            var value = FIRST_WORD_WEIGHT;
+
+            for (var j in words) {
+                var word = words[j];
+
+                if (word.length > 0) {
+                    for (var k in stemmedTerms) {
+                        if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
+                            value = TERM_WEIGHT;
+                            termFound = true;
+                        }
+                    }
+                    weighted.push([word, value, index]);
+                    value = NORMAL_WORD_WEIGHT;
+                }
+
+                index += word.length;
+                index += 1;  // ' ' or '.' if last word in sentence
+            }
+
+            index += 1;  // because we split at a two-char boundary '. '
+        }
+
+        if (weighted.length === 0) {
+            return body;
+        }
+
+        var windowWeights = [];
+        var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
+        // We add a window with all the weights first
+        var curSum = 0;
+        for (var i = 0; i < windowSize; i++) {
+            curSum += weighted[i][1];
+        }
+        windowWeights.push(curSum);
+
+        for (var i = 0; i < weighted.length - windowSize; i++) {
+            curSum -= weighted[i][1];
+            curSum += weighted[i + windowSize][1];
+            windowWeights.push(curSum);
+        }
+
+        // If we didn't find the term, just pick the first window
+        var maxSumIndex = 0;
+        if (termFound) {
+            var maxFound = 0;
+            // backwards
+            for (var i = windowWeights.length - 1; i >= 0; i--) {
+                if (windowWeights[i] > maxFound) {
+                    maxFound = windowWeights[i];
+                    maxSumIndex = i;
+                }
+            }
+        }
+
+        var teaser = [];
+        var startIndex = weighted[maxSumIndex][2];
+        for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
+            var word = weighted[i];
+            if (startIndex < word[2]) {
+                // missing text from index to start of `word`
+                teaser.push(body.substring(startIndex, word[2]));
+                startIndex = word[2];
+            }
+
+            // add <em/> around search terms
+            if (word[1] === TERM_WEIGHT) {
+                teaser.push("<b>");
+            }
+            startIndex = word[2] + word[0].length;
+            teaser.push(body.substring(word[2], startIndex));
+
+            if (word[1] === TERM_WEIGHT) {
+                teaser.push("</b>");
+            }
+        }
+        teaser.push("…");
+        return teaser.join("");
+    }
+
+    function formatSearchResultItem(item, terms) {
+        return '<div class="item">'
+            + `<a href="${item.ref}">${item.doc.title}</a>`
+            + `<div>${makeTeaser(item.doc.body, terms)}</div>`
+            + '</div>';
+    }
+
+    function initSearch() {
+        var $searchInput = document.getElementById("search-bar");
+        var $searchResults = document.getElementById("search-results");
+        var MAX_ITEMS = 10;
+
+        var options = {
+            bool: "AND",
+            fields: {
+                title: { boost: 2 },
+                body: { boost: 1 },
+            }
+        };
+        var currentTerm = "";
+        var index;
+
+        var initIndex = async function () {
+            if (index === undefined) {
+                index = fetch("{{ get_url(path='/', lang=lang) }}/search_index.{{ config.default_language }}.json")
+                    .then(
+                        async function (response) {
+                            return await elasticlunr.Index.load(await response.json());
+                        }
+                    );
+            }
+            let res = await index;
+            return res;
+        }
+
+        $searchInput.addEventListener("keyup", debounce(async function () {
+            var term = $searchInput.value.trim();
+            if (term === currentTerm) {
+                return;
+            }
+            $searchResults.style.display = term === "" ? "none" : "flex";
+            $searchResults.innerHTML = "";
+            currentTerm = term;
+            if (term === "") {
+                return;
+            }
+
+            var results = (await initIndex()).search(term, options);
+            if (results.length === 0) {
+                $searchResults.style.display = "none";
+                return;
+            }
+
+            for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
+                $searchResults.innerHTML += formatSearchResultItem(results[i], term.split(" "));
+            }
+        }, 150));
+
+        window.addEventListener('click', function (e) {
+            if ($searchResults.style.display == "flex" && !$searchResults.contains(e.target)) {
+                $searchResults.style.display = "none";
+            }
+        });
+    }
+
+    function toggleSearch() {
+        var searchContainer = document.getElementById("search-container");
+        searchContainer.classList.toggle("active");
+    }
+
+    if (document.readyState === "complete" ||
+        (document.readyState !== "loading" && !document.documentElement.doScroll)
+    ) {
+        initSearch();
+    } else {
+        document.addEventListener("DOMContentLoaded", initSearch);
+    }
+</script>