Remove theme toggle

config.yaml

@@ -22,9 +22,23 @@ params:
       issueTerm: "pathname"
       github:
         username: davegallant
-        repository: site
+        repository: davegallant.github.io
 
   prism:
+    languages:
+      - markup
+      - css
+      - clike
+      - javascript
+      - bash
+      - csharp
+      - hcl
+      - ignore
+      - json
+      - markdown
+      - powershell
+      - toml
+      - yaml
     plugins:
       - normalize-whitespace
       - toolbar

content/about.md

@@ -26,4 +26,4 @@ Connect with me by using any of the following methods:
 
 - The site is generated with [hugo](https://gohugo.io/)
 - The theme is a modified version of [hugo-theme-gruvbox](https://github.com/schnerring/hugo-theme-gruvbox)
-- The comments system is powered by [utterances](https://github.com/utterance/utterances)
+- The comments system uses [utterances](https://github.com/utterance/utterances)

layouts/partials/comments/utterances.html

@@ -5,22 +5,25 @@
 .Page.Site.Params.comments.utterances.github.repository -}}
 
 <script>
-  // load comments
+  // load utteranc comment
-  var getTheme =
+  var getTheme = window.localStorage && window.localStorage.getItem("theme");
-    window.matchMedia &&
+  getTheme =
-    window.matchMedia("(prefers-color-scheme: light)").matches
+    getTheme == null
-      ? "light"
+      ? window.matchMedia &&
-      : "dark";
+        window.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark"
+      : getTheme;
   getTheme = getTheme == null ? "dark" : getTheme;
 
   let theme = getTheme === "dark" ? "gruvbox-dark" : "github-light";
-  let script = document.createElement("script");
+  let s = document.createElement("script");
-  script.src = "https://utteranc.es/client.js";
+  s.src = "https://utteranc.es/client.js";
-  script.setAttribute("repo", '{{ print $username "/" $repository }}');
+  s.setAttribute("repo", '{{ print $username "/" $repository }}');
-  script.setAttribute("issue-term", "{{ $issueTerm }}");
+  s.setAttribute("issue-term", "{{ $issueTerm }}");
-  script.setAttribute("theme", theme);
+  s.setAttribute("theme", theme);
-  script.setAttribute("crossorigin", "anonymous");
+  s.setAttribute("crossorigin", "anonymous");
-  script.setAttribute("async", "");
+  s.setAttribute("async", "");
   document.querySelector("div.comments").innerHTML = "";
-  document.querySelector("div.comments").appendChild(script);
+  document.querySelector("div.comments").appendChild(s);
 </script>

themes/hugo-theme-gruvbox/assets/css/critical/15-colors.css

@@ -6,8 +6,7 @@
   {{ $backgroundColor = "bg0_h" }}
 {{ end }}
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
-  :root {
   --bg: var(--{{ $backgroundColor }});
   --bg0: #fbf1c7;
   --bg0_h: #f9f5d7;
@@ -42,11 +41,9 @@
   & .light--hidden {
     display: none;
   }
-  }
 }
 
-@media (prefers-color-scheme: dark) {
+:root[data-theme="dark"] {
-  :root {
   --bg: var(--{{ $backgroundColor }});
   --bg0: #282828;
   --bg0_h: #1d2021;
@@ -81,8 +78,6 @@
   & .dark--hidden {
     display: none;
   }
-  }
-
 }
 
 :root {
@@ -90,4 +85,3 @@
   --primary: var(--{{ $themeColor }}1);
   --primary-alt: var(--{{ $themeColor }}2);
 }
-

themes/hugo-theme-gruvbox/assets/css/critical/45-json-resume.css

@@ -0,0 +1,29 @@
+.jr__item-meta {
+  font-family: var(--font-monospace);
+}
+
+.jr__item-meta {
+  align-items: start;
+  flex-flow: column;
+}
+
+@media (--md) {
+  .jr__item-meta {
+    align-items: center;
+    flex-flow: row wrap;
+  }
+
+  .jr__date,
+  .jr__date-range,
+  .jr-work__location {
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  .jr-awards__awarder,
+  .jr-publications__publisher,
+  .jr-education__institution,
+  .jr-volunteer__organization {
+    flex-basis: 100%;
+  }
+}

themes/hugo-theme-gruvbox/assets/css/critical/50-social-share.css

@@ -0,0 +1,68 @@
+.social-share {
+  align-items: center;
+  border-top: 2px dotted var(--bg1);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  margin: 3rem 0;
+  padding-top: 3rem;
+
+  & svg {
+    fill: var(--fg);
+    width: 24px;
+    height: 24px;
+
+    &.icon-tabler {
+      fill: none;
+      stroke: var(--fg);
+    }
+  }
+}
+
+.social-share__item {
+  background: var(--bg1);
+  padding: 0.5rem;
+  display: flex;
+}
+
+/* Sticky social bar left
+
+@media (--xl) {
+  .social-share {
+    align-items: flex-start;
+    border-top: none;
+    flex-direction: column;
+
+    position: fixed;
+    top: 15%;
+    left: 0;
+  }
+
+  .social-share__heading {
+    display: none;
+  }
+
+  .social-share__item {
+    transition: padding 0.2s ease-in;
+
+    &:hover {
+      padding: 0.5rem 1rem;
+    }
+
+    & svg {
+      &:hover {
+        fill: var(--fg);
+      }
+
+      &.icon-tabler {
+        fill: none;
+
+        &:hover {
+          stroke: var(--fg);
+        }
+      }
+    }
+  }
+}
+
+*/

themes/hugo-theme-gruvbox/assets/js/dark-mode.js

@@ -1,4 +1,12 @@
 function getTheme() {
+  if (localStorage && localStorage.getItem("theme")) {
+    // User preference
+    return localStorage.getItem("theme");
+  }
+  // Undefined
+}
+
+function getOSTheme() {
   if (window.matchMedia) {
     // OS preference
     return window.matchMedia("(prefers-color-scheme: light)").matches
@@ -8,34 +16,44 @@ function getTheme() {
   // Undefined
 }
 
-function setPrismTheme(theme) {
+function setTheme(theme) {
+  // Main theme
+  document.documentElement.setAttribute("data-theme", theme);
+
+  // Prism 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) {
+function saveTheme(theme) {
-  if (document.querySelector(".utterances-frame")) {
+  localStorage.setItem("theme", theme);
-    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");
-  }
 }
 
 // Initial load
 const theme = getTheme();
+const osTheme = getOSTheme();
 if (theme) {
-  setPrismTheme(theme);
+  setTheme(theme);
+  // Store user preference
+} else if (osTheme) {
+  setTheme(osTheme);
 }
 
-window
+function toggleTheme(e) {
-  .matchMedia("(prefers-color-scheme: dark)")
+  const theme = e.currentTarget.classList.contains("light--hidden")
-  .addEventListener("change", (event) => {
+    ? "light"
-    const theme = event.matches ? "dark" : "light";
+    : "dark";
-    setPrismTheme(theme);
+  setTheme(theme);
-    setCommentsTheme(theme);
+  saveTheme(theme);
+}
+
+// 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);
   });
+});