Switch fonts with a toggle in the lefthand nav. (#193)

* Adds basic logic and styling for font toggler.

* Attempting to import open-dyslexic font.

* Toggle now works but doesn't persist.

* Toggling font persists across page loads now.

* Something funky is going on with this css file...

* Attempting to fix this weird static folder bug.

* Saves font choice to localStorage.

themes/hextra/assets/css/custom.css

@@ -45,3 +45,17 @@ article a[href^="https://"]::after
   display: none;
 }
 /* ---------------------------------------------------------------- */
+
+
+
+/* Import OpenDyslexic for font toggle. */
+/* ------------------------------------ */
+@font-face {
+  font-family: Open-Dyslexic;
+  src: url(/fonts/OpenDyslexic-Regular.woff2);
+}
+@font-face {
+  font-family: Open-Dyslexic-Mono;
+  src: url(/fonts/OpenDyslexic-Mono.otf);
+}
+/* ------------------------------------ */

themes/hextra/assets/js/toggle-font.js

@@ -0,0 +1,43 @@
+var contentElements = document.querySelectorAll('body');
+var preElements = document.querySelectorAll('pre');
+
+function toggleFont() {
+    var currentFont = localStorage.getItem('currentFont') || 'default';
+
+    if (currentFont === 'default') {
+        setDyslexicFonts();
+        localStorage.setItem('currentFont', 'dyslexic');
+    } else {
+        setDefaultFonts();
+        localStorage.setItem('currentFont', 'default');
+    }
+}
+
+function setDyslexicFonts() {
+    contentElements.forEach(function(element) {
+        element.style.fontFamily = 'Open-Dyslexic';
+    });
+    preElements.forEach(function(element) {
+        element.style.fontFamily = 'Open-Dyslexic-Mono';
+    });
+    console.log("Switch to Open-Dyslexic and Open-Dyslexic-Mono for pre tags.");
+}
+
+function setDefaultFonts() {
+    contentElements.forEach(function(element) {
+        element.style.fontFamily = 'sans-serif';
+    });
+    preElements.forEach(function(element) {
+        element.style.fontFamily = 'monospace';
+    });
+    console.log("Switch to sans-serif and monospace for pre tags.");
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    var savedFont = localStorage.getItem('currentFont');
+    if (savedFont === 'dyslexic') {
+        setDyslexicFonts();
+    } else {
+        setDefaultFonts();
+    }
+});

themes/hextra/layouts/partials/font-toggle.html

@@ -0,0 +1,21 @@
+{{- $hideLabel := .hideLabel | default false -}}
+{{- $changeFont := (T "changeFont") | default "Change font" -}}
+{{- $light := (T "light") | default "Light" -}}
+{{- $dark := (T "dark") | default "Dark" -}}
+
+
+<button
+  title="{{ $changeFont }}"
+  data-theme="light"
+  class=" hx-group hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50"
+  type="button"
+  aria-label="{{ $changeFont }}"
+  onclick="toggleFont()"
+>
+  <div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
+    {{- partial "utils/icon.html" (dict "name" "translate" "attributes" "height=12 class=\"group-data-[theme=light]:hx-hidden\"") -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hx-hidden">Toggle font</span>{{ end -}}
+    {{- partial "utils/icon.html" (dict "name" "translate" "attributes" "height=12 class=\"group-data-[theme=dark]:hx-hidden\"") -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hx-hidden">Toggle font</span>{{ end -}}
+  </div>
+</button>

themes/hextra/layouts/partials/scripts.html

@@ -6,14 +6,14 @@
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
 {{- $jsSidebar := resources.Get "js/sidebar.js" -}}
 {{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
+{{- $jsToggleFont := resources.Get "js/toggle-font.js" -}}
 
-{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
+{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop $jsToggleFont | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
   {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}
 <script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
 
-
 {{/* Search */}}
 {{- if (site.Params.search.enable | default true) -}}
   {{- $searchType := site.Params.search.type | default "flexsearch" -}}

themes/hextra/layouts/partials/sidebar.html

@@ -53,6 +53,7 @@
           <div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
         {{- end -}}
       {{- end -}}
+          <div class="hx-flex hx-grow hx-flex-col">{{ partial "font-toggle" }}</div>
     </div>
   {{- end -}}
 </aside>