Update js with latest improvements from second edition

blog/static/js/edition-3/main.js

@@ -1,17 +1,23 @@
 window.onload = function () {
-  var container = document.querySelector('#toc-aside');
-
+  let container = document.querySelector('#toc-aside');
   if (container != null) {
     resize_toc(container);
     toc_scroll_position(container);
     window.onscroll = function () { toc_scroll_position(container) };
   }
+
+  let theme = localStorage.getItem("theme");
+  if (theme != null) {
+    setTimeout(() => {
+      set_giscus_theme(theme)
+    }, 500);
+  }
 }
 
 function resize_toc(container) {
-  var containerHeight = container.clientHeight;
+  let containerHeight = container.clientHeight;
 
-  var resize = function () {
+  let resize = function () {
     if (containerHeight > document.documentElement.clientHeight - 100) {
       container.classList.add('coarse');
     } else {
@@ -20,7 +26,7 @@ function resize_toc(container) {
   };
   resize();
 
-  var resizeId;
+  let resizeId;
   window.onresize = function () {
     clearTimeout(resizeId);
     resizeId = setTimeout(resize, 300);
@@ -32,7 +38,6 @@ function toc_scroll_position(container) {
     // skip computation if ToC is not visible
     return;
   }
-  var items = container.querySelectorAll("li")
 
   // remove active class for all items
   for (item of container.querySelectorAll("li")) {
@@ -40,15 +45,15 @@ function toc_scroll_position(container) {
   }
 
   // look for active item
-  var site_offset = document.documentElement.scrollTop;
-  var current_toc_item = null;
+  let site_offset = document.documentElement.scrollTop;
+  let current_toc_item = null;
   for (item of container.querySelectorAll("li")) {
     if (item.offsetParent === null) {
       // skip items that are not visible
       continue;
     }
-    var anchor = item.firstElementChild.getAttribute("href");
-    var heading = document.querySelector(anchor);
+    let anchor = item.firstElementChild.getAttribute("href");
+    let heading = document.querySelector(anchor);
     if (heading.offsetTop <= (site_offset + document.documentElement.clientHeight / 3)) {
       current_toc_item = item;
     } else {
@@ -63,27 +68,32 @@ function toc_scroll_position(container) {
 }
 
 function toggle_lights() {
-  var body = document.querySelector("body");
-  var comment_form = document.querySelector("iframe.utterances-frame");
-  if (body != null) {
-    if (body.classList.contains("dark")) {
-      body.classList.replace("dark", "light");
-      if (comment_form != null) {
-        comment_form.contentWindow.postMessage(
-          { type: "set-theme", theme: "github-light" },
-          "https://utteranc.es/"
-        )
-      }
-    } else {
-      body.classList.remove("light");
-      body.classList.add("dark");
-      if (comment_form != null) {
-        comment_form.contentWindow.postMessage(
-          { type: "set-theme", theme: "github-dark" },
-          "https://utteranc.es/"
-        )
-      }
-    }
-    console.log(body)
+  if (document.documentElement.getAttribute("data-theme") === "dark") {
+    set_theme("light")
+  } else if (document.documentElement.getAttribute("data-theme") === "light") {
+    set_theme("dark")
+  } else {
+    set_theme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark")
   }
-}
+}
+
+function set_theme(theme) {
+  document.documentElement.setAttribute("data-theme", theme)
+  set_giscus_theme(theme)
+  localStorage.setItem("theme", theme)
+}
+
+function clear_theme_override() {
+  document.documentElement.removeAttribute("data-theme");
+  set_giscus_theme("preferred_color_scheme")
+  localStorage.removeItem("theme")
+}
+
+function set_giscus_theme(theme) {
+  let comment_form = document.querySelector("iframe.giscus-frame");
+  if (comment_form != null) {
+    comment_form.contentWindow.postMessage({
+      giscus: { setConfig: { theme: theme } }
+    }, "https://giscus.app")
+  }
+}