theme updates

etc/index.html

@@ -58,7 +58,7 @@ <h4 class="subheader">extra stuff</h4>
           <a href="./sudo-ps1.html">sudo for powershell</a>
         </x-hr-container>
         <x-hr-container date="02/23/2024">
-          <a href="./dontbreakmyfall.html">lost album found</a>
+          <a href="./dontbreakmyfall.html">don't break my fall</a>
         </x-hr-container>
         <x-hr-container date="02/23/2024">
           <a href="./tandypack.html">tandypack</a>

etc/sudo-ps1.html

@@ -34,10 +34,6 @@
     <script src="/src/js/index.js" async defer></script>
     <script src="/src/js/codeblock.js" async defer></script>
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/night-owl.min.css"
-    />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
     <link
@@ -84,7 +80,7 @@ <h4 class="subheader text-center margin-top">
       </div>
       <div>
         <p>attemps to emulate sudo. this shouldn't be needed anymore</p>
-        <pre data-src="/src/snippets/sudo.ps1"></pre>
+        <pre data-src="/src/snippets/sudo.ps1" class="border-radius-5"></pre>
       </div>
     </main>
     <x-footer></x-footer>

etc/update-drivers.html

@@ -38,10 +38,6 @@
     <script src="/src/js/index.js" async defer></script>
     <script src="/src/js/codeblock.js" async defer></script>
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/night-owl.min.css"
-    />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
     <link
@@ -95,7 +91,10 @@ <h4 class="subheader text-center margin-top">
             >this post</a
           >.
         </p>
-        <pre data-src="/src/snippets/update-drivers.ps1"></pre>
+        <pre
+          class="border-radius-5"
+          data-src="/src/snippets/update-drivers.ps1"
+        ></pre>
       </div>
     </main>
     <x-footer></x-footer>

etc/winget-stuck.html

@@ -45,10 +45,6 @@
     <script src="/src/js/index.js" async defer></script>
     <script src="/src/js/codeblock.js" async defer></script>
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/night-owl.min.css"
-    />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
     <link
@@ -94,12 +90,11 @@ <h4 class="subheader text-center margin-top">
       </div>
       <div>
         <p>
-          Winget sometimes times out (blue loading thing). This is a script that
-          curls the winget installer, and tries to install it. If it initially
-          fails, it's probably because of a dependency on the Microsoft.UI.XML
-          framework. This script also tries to install that.
+          winget sometimes times out (blue loading thing). this has worked 99%
+          of the time whenever winget isn't installed or updated.
         </p>
         <pre
+          class="border-radius-5"
           data-src="https://raw.githubusercontent.com/tandyx/winget-fix/master/winget-fix.ps1"
         ></pre>
         <!-- <img

src/css/index.css

@@ -636,6 +636,9 @@ a:visited {
 .margin-top-30 {
   margin-top: 30px;
 }
+.border-radius-5 > * {
+  border-radius: 5px;
+}
 
 .blue-white-anchor,
 .blue-white-anchor:visited {

src/js/codeblock.js

@@ -12,23 +12,29 @@ const langMap = {
   ps1: "powershell",
 };
 
+const themeCssMap = {
+  dark: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css",
+  light:
+    "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css",
+};
+
 // main();
-window.addEventListener("load", () => {
+window.addEventListener("load", async () => {
+  addCssFile(themeCssMap[Theme.activeTheme]);
   for (const preNode of document.getElementsByTagName("pre")) {
     const fileSource = preNode.getAttribute("data-src");
-    fetch(fileSource).then((response) => {
-      response.text().then((code) => {
-        const language =
-          preNode.getAttribute("data-language") ||
-          langMap[fileSource.split(".")[1]];
-        loadCodeBlock(preNode, code, language);
-      });
-    });
-  }
-  try {
-    hljs.addPlugin(new CopyButtonPlugin());
-  } catch (error) {
-    console.error(error);
+    const resp = await fetch(fileSource);
+    if (!resp.ok) throw new Error(`fetching ${fileSource}: ${resp.status}`);
+    loadCodeBlock(
+      preNode,
+      await resp.text(),
+      preNode.getAttribute("data-language") || langMap[fileSource.split(".")[1]]
+    );
+    try {
+      hljs.addPlugin(new CopyButtonPlugin());
+    } catch (error) {
+      console.error(error);
+    }
   }
 });
 // /**
@@ -50,7 +56,7 @@ window.addEventListener("load", () => {
 function loadCodeBlock(id, code, language = null) {
   const preNode = typeof id === "string" ? document.getElementById(id) : id;
   if (!preNode || preNode.tagName !== "PRE") {
-    console.error("Invalid ID or element");
+    console.error("invalid id or element");
     return;
   }
   const codeNode = document.createElement("code");

src/js/components/navbar.js

@@ -36,14 +36,9 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 document.addEventListener("click", (event) => {
-  // Check if the clicked element is not inside the navbar
-  if (!event.target?.closest(".nav")) {
-    // Close the hamburger menu
-    const menuToggle = document.getElementById("menu-toggle");
-    if (menuToggle && menuToggle.checked) {
-      menuToggle.checked = false;
-    }
-  }
+  if (event.target?.closest(".nav")) return;
+  const menuToggle = document.getElementById("menu-toggle");
+  if (menuToggle && menuToggle.checked) menuToggle.checked = false;
 });
 
 window.addEventListener("load", () => {
@@ -54,7 +49,11 @@ window.addEventListener("load", () => {
       const anchor = child.getElementsByTagName("a")[0];
       anchor.text = Theme.unicodeIcon;
       child.addEventListener("click", () => {
-        anchor.text = Theme.fromExisting().reverse().unicodeIcon;
+        anchor.text = Theme.fromExisting().reverse(sessionStorage, (theme) => {
+          if (typeof themeCssMap === "undefined") return;
+          removeFileFromHead(themeCssMap[theme.opposite.theme]);
+          addCssFile(themeCssMap[theme.theme]);
+        }).unicodeIcon;
       });
       continue;
     }

src/js/index.js

@@ -7,11 +7,14 @@
 "use strict";
 
 /**
+ * class for theme management
  * @template {"dark" | "light"} T
  */
 class Theme {
   /**
+   * manually create a new theme.
    * @param {T} theme "dark" or "light"
+   * @typedef {T extends "dark" ? Theme<"light"> : Theme<"dark">} OppTheme
    */
   constructor(theme) {
     if (!["light", "dark"].includes(theme)) {
@@ -64,28 +67,37 @@ class Theme {
         "light"
     );
   }
+  /**
+   * opposite theme object without setting
+   * @returns {OppTheme}
+   */
+  get opposite() {
+    return new Theme(this.theme === "dark" ? "light" : "dark");
+  }
 
   /**
    * sets <html data-mode="this.theme"> and saves it to session storage
-   * @param {"session" | "local" | null} [save = "session"] by default saves to `sessionStorage`
+   * @param {Storage} storage storage to save to, default doesn't save
+   * @param {(theme: this) => null} [onSave = null] callback that executes after save.
    * @returns {this}
    */
-  set(save = "session") {
+  set(storage, onSave = null) {
     document.documentElement.setAttribute("data-mode", this.theme);
-    if (save === "session") sessionStorage.setItem("theme", this.theme);
-    if (save === "local") localStorage.setItem("theme", this.theme);
+    if (storage) storage.setItem("_theme", this.theme);
+    if (onSave) onSave(this);
     return this;
   }
   /**
    * reverses the theme (if dark -> light)
-   * @param {"session" | "local" | null} [save = "session"] by default saves to `sessionStorage`
-   * @returns {T extends "dark" ? Theme<"light"> : Theme<"dark">}
+   * @param {Storage?} storage storage to save to, default doesn't save
+   * @param {(theme: OppTheme) => null} [onSave = null] executed callback function when changing; `theme` is the NEW theme
+   * @returns {OppTheme}
    * @example
    * const theme = new Theme.fromExisting().reverse()
    */
-  reverse(save = "session") {
+  reverse(storage, onSave = null) {
     if (!this.theme) throw new Error("must set theme to reverse it");
-    return new Theme(this.theme === "dark" ? "light" : "dark").set(save);
+    return this.opposite.set(storage, onSave);
   }
 }
 
@@ -119,9 +131,9 @@ const digitToWord = [
  */
 function main() {
   if (!["/index.html", "/"].includes(window.location.pathname)) {
-    Theme.fromExisting().set(null);
+    Theme.fromExisting().set();
   } else {
-    new Theme("dark").set(null);
+    new Theme("dark").set();
   }
 
   document.addEventListener("scroll", () => {
@@ -557,3 +569,36 @@ async function fetchCatch(url, fetchParams, cache = "session") {
     return await resp.text();
   }
 }
+
+/**
+ * adds a css file to the header given that it doesn't exist
+ * @param {string} src
+ * @param {boolean} [force=true] force the change if it exists, default `true`
+ * @returns {HTMLLinkElement} link el created
+ */
+function addCssFile(src, force = true) {
+  const matching = [...document.head.children].filter(
+    (e) => e.tagName === "LINK" && e?.href?.includes(src)
+  );
+  if (matching.length && !force) return matching[0];
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.type = "text/css";
+  link.href = src;
+  link.media = "all";
+  document.head.appendChild(link);
+  return link;
+}
+
+/**
+ * removes link from css head
+ * @param {string} src
+ * @returns  {HTMLElement[]}
+ */
+function removeFileFromHead(src) {
+  const matching = [...document.head.children].filter(
+    (e) => e.tagName === "LINK" && e?.href?.includes(src)
+  );
+  for (const el of matching) document.head.removeChild(el);
+  return matching;
+}

src/js/project.js

@@ -95,7 +95,7 @@ function addProjectEvents(projectWrapper) {
 
   if (!projectWrapper) return;
   projectWrapper.addEventListener("click", function (event) {
-    console.log(event.target);
+    // console.log(event.target);
     if (
       ["A", "IMG"].includes(event.target.tagName) ||
       event.target.classList.contains("fa")