feat: add font selector

src/css/default.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
 
 @tailwind base;
 @tailwind components;

src/js/main.js

@@ -55,3 +55,40 @@ themeButton.addEventListener("click", () => {
       break
   }
 })
+
+const clearFonts = () => {
+  document.body.classList.remove("font-sans")
+  document.body.classList.remove("font-serif")
+}
+
+const updateFonts = (currentFont) => {
+  if (currentFont && currentFont === "serif") {
+    clearFonts()
+    document.body.classList.add("font-serif")
+  }
+  if (currentFont && currentFont === "sans") {
+    clearFonts()
+    document.body.classList.add("font-sans")
+  }
+  if (!currentFont) {
+    clearFonts()
+  }
+}
+
+let currentFont = localStorage.getItem("font")
+updateFonts()
+
+const fontButton = document.getElementById("font-toggle")
+fontButton.addEventListener("click", () => {
+  currentFont = localStorage.getItem("font")
+  if (currentFont === "sans") {
+    currentFont = "serif"
+    fontButton.innerText = "serif"
+    localStorage.setItem("font", "serif")
+  } else {
+    currentFont = "sans"
+    fontButton.innerText = "sans"
+    localStorage.setItem("font", "sans")
+  }
+  updateFonts(currentFont)
+})

src/out/bundle.js

@@ -1 +1 @@
-const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},m=()=>{document.documentElement.classList.add("dark")};let a="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const c=document.getElementById("theme-toggle");c.addEventListener("click",(()=>{switch(a=(a+1)%3,a){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),c.innerText="theme: light"):(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),c.innerText="theme: light")}}));
+const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},s=()=>{document.documentElement.classList.add("dark")};let o="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const a=document.getElementById("theme-toggle");a.addEventListener("click",(()=>{switch(o=(o+1)%3,o){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),a.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),a.innerText="theme: light"):(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),a.innerText="theme: light")}}));const n=()=>{document.body.classList.remove("font-sans"),document.body.classList.remove("font-serif")},m=e=>{e&&"serif"===e&&(n(),document.body.classList.add("font-serif")),e&&"sans"===e&&(n(),document.body.classList.add("font-sans")),e||n()};let c=localStorage.getItem("font");m();const l=document.getElementById("font-toggle");l.addEventListener("click",(()=>{c=localStorage.getItem("font"),"sans"===c?(c="serif",l.innerText="serif",localStorage.setItem("font","serif")):(c="sans",l.innerText="sans",localStorage.setItem("font","sans")),m(c)}));

src/templates/default.html

@@ -75,6 +75,25 @@
         } else {
           themeButton.innerText = "theme: system"
         }
+        var fontButton = document.getElementById("font-toggle")
+        const font = localStorage.getItem("font")
+        if (font && font === "serif") {
+          document.body.classList.remove("font-sans")
+          document.body.classList.remove("font-serif")
+          document.body.classList.add("font-serif")
+          fontButton.innerText = "serif"
+        }
+        if (font && font === "sans") {
+          document.body.classList.remove("font-sans")
+          document.body.classList.remove("font-serif")
+          document.body.classList.add("font-sans")
+          fontButton.innerText = "sans"
+        }
+        if (!font) {
+          document.body.classList.remove("font-sans")
+          document.body.classList.remove("font-serif")
+          fontButton.innerText = "serif"
+        }
       }
       MathJax = {
         startup: {
@@ -115,6 +134,11 @@
         id="theme-toggle"
         class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
       ></button>
+      <span class="ml-2 font-serif">|</span>
+      <button
+        id="font-toggle"
+        class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
+      ></button>
     </header>
     $body$
     <footer class="mt-14 md:mt-24 pb-12">

tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Inter", "sans-serif"],
+        sans: ["Open Sans", "sans-serif"],
         serif: ["Merriweather", "serif"],
       },
       colors: {