Tweak theme

2025-08-06 00:33:39 +00:00 · 2024-04-07 21:46:55 -04:00
parent 2475d2d67e
commit 8d898eb69a
117 changed files with 5 additions and 9 deletions
--- a/themes/custom-theme/assets/js/dark-mode.js
+++ b/themes/custom-theme/assets/js/dark-mode.js
@@ -0,0 +1,46 @@
+function getTheme() {
+  if (localStorage && localStorage.getItem("theme")) {
+    return localStorage.getItem("theme");
+  }
+  return "auto";
+}
+
+function saveTheme(theme) {
+  localStorage.setItem("theme", theme);
+}
+
+function setPrismTheme(theme) {
+  const prismDark = document.getElementById("prism-dark");
+  const prismLight = document.getElementById("prism-light");
+  prismDark.toggleAttribute("disabled", theme === "light");
+  prismLight.toggleAttribute("disabled", theme === "dark");
+}
+
+function setCommentsTheme(theme) {
+  if (document.querySelector(".utterances-frame")) {
+    const iframe = document.querySelector(".utterances-frame");
+    var message = {
+      type: "set-theme",
+      theme: theme == "dark" ? "gruvbox-dark" : "github-light",
+    };
+    iframe.contentWindow.postMessage(message, "https://utteranc.es");
+  }
+}
+
+function setTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  setPrismTheme(theme);
+  setCommentsTheme(theme);
+}
+
+
+setTheme("dark");
+
+// This script is inlined in the <head> of the document, so we have to wait
+// for the DOM content before can add event listeners to the toggle buttons
+document.addEventListener("DOMContentLoaded", function () {
+  const toggleButtons = document.querySelectorAll(".theme__toggle");
+  toggleButtons.forEach((btn) => {
+    btn.addEventListener("click", toggleTheme);
+  });
+});
--- a/themes/custom-theme/assets/js/flexsearch.js
+++ b/themes/custom-theme/assets/js/flexsearch.js
@@ -0,0 +1,137 @@
+//! Source: https://github.com/h-enk/doks/blob/master/assets/js/index.js
+
+import { Document } from "flexsearch";
+
+const search = document.getElementById("search__text");
+const suggestions = document.getElementById("search__suggestions");
+
+if (search !== null) {
+  document.addEventListener("keydown", (e) => {
+    if (e.ctrlKey && e.key === "/") {
+      // Focus search bar with CTRL + /
+      e.preventDefault();
+      search.focus();
+    } else if (e.key === "Escape") {
+      // Unfocus search bar with ESC
+      search.blur();
+      suggestions.classList.add("search__suggestions--hidden");
+    }
+  });
+}
+
+document.addEventListener("click", (e) => {
+  const clickInsideSuggestions = suggestions.contains(e.target);
+  if (!clickInsideSuggestions) {
+    // Hide search suggestions if clicking elsewhere
+    suggestions.classList.add("search__suggestions--hidden");
+  }
+});
+
+/*! Source: https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3 */
+document.addEventListener("keydown", (e) => {
+  const suggestionsHidden = suggestions.classList.contains(
+    "search__suggestions--hidden"
+  );
+  if (suggestionsHidden) return;
+
+  const focusableSuggestions = [...suggestions.querySelectorAll("a")];
+  if (focusableSuggestions.length === 0) return;
+
+  const currentIndex = focusableSuggestions.indexOf(document.activeElement);
+
+  if (e.key === "ArrowDown") {
+    // Focus next suggestion
+    e.preventDefault();
+    const nextIndex =
+      currentIndex + 1 < focusableSuggestions.length
+        ? currentIndex + 1
+        : currentIndex;
+    focusableSuggestions[nextIndex].focus();
+  } else if (e.key === "ArrowUp") {
+    // Focus previous suggestion
+    e.preventDefault();
+    nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+    focusableSuggestions[nextIndex].focus();
+  }
+});
+
+(function () {
+  const index = new Document({
+    tokenize: "forward",
+    cache: 100,
+    document: {
+      id: "id",
+      store: ["href", "title", "description"],
+      index: ["title", "description", "content"],
+    },
+  });
+
+  //! Source: https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
+  {{ $list := (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+  {{ $len := (len $list) }}
+
+  index.add(
+    {{ range $index, $element := $list }}
+      {
+        id: {{ $index }},
+        href: "{{ .RelPermalink }}",
+        title: {{ .Title | jsonify }},
+        {{ with .Description }}
+          description: {{ . | jsonify }},
+        {{ else }}
+          description: {{ .Summary | plainify | jsonify }},
+        {{ end }}
+        content: {{ .Plain | jsonify }}
+      })
+      {{ if ne (add $index 1) $len }}
+        .add(
+      {{ end }}
+    {{ end }}
+    {{ if eq 0 $len }}
+      )
+    {{ end }}
+  ;
+
+  search.addEventListener("input", function () {
+    const maxResultsCount = {{ $.Site.Params.flexsearch.maxResultsCount | default 5 }};
+    const searchText = this.value;
+    const searchResults = index.search(searchText, maxResultsCount, { enrich: true });
+    const searchResultsMap = new Map();
+
+    // Deduplicate search results by href
+    for (const searchResult of searchResults.flatMap((r) => r.result)) {
+      if (searchResultsMap.has(searchResult.href)) continue;
+      searchResultsMap.set(searchResult.doc.href, searchResult.doc);
+    }
+
+    suggestions.innerHTML = "";
+    suggestions.classList.remove("search__suggestions--hidden");
+
+    if (searchResultsMap.size === 0 && searchText) {
+      const noResultsMessage = document.createElement("div")
+      noResultsMessage.innerHTML = `No results for "<strong>${searchText}</strong>"`
+      noResultsMessage.classList.add("search__no-results");
+      suggestions.appendChild(noResultsMessage);
+      return;
+    }
+
+    for (const [href, searchResult] of searchResultsMap) {
+      const suggestion = document.createElement("a");
+      suggestion.href = href;
+      suggestion.classList.add("search__suggestion-item");
+      suggestions.appendChild(suggestion);
+
+      const title = document.createElement("div");
+      title.textContent = searchResult.title;
+      title.classList.add("search__suggestion-title");
+      suggestion.appendChild(title);
+
+      const description = document.createElement("div");
+      description.textContent = searchResult.description;
+      description.classList.add("search__suggestion-description");
+      suggestion.appendChild(description);
+
+      if (suggestions.childElementCount === maxResultsCount) break;
+    }
+  });
+})();
--- a/themes/custom-theme/assets/js/prism.js
+++ b/themes/custom-theme/assets/js/prism.js
@@ -0,0 +1,11 @@
+import Prism from "prismjs";
+
+{{ range $.Site.Params.prism.languages }}
+  import "prismjs/components/prism-{{ . }}";
+{{ end }}
+
+{{ range $.Site.Params.prism.plugins }}
+  import "prismjs/plugins/{{ . }}/prism-{{ . }}";
+{{ end }}
+
+Prism.highlightAll();