refactor toggleThemeCallbacks

- use object instead of array to ensure uniqueness for each callback
- do not use <script data-no-instant> to add callback, they won't be called if the page is not loaded first time;
  instead, try to set the callback each time the page is loaded

layouts/partials/header.html

@@ -28,15 +28,15 @@ function setPrefTheme(theme) {
   localStorage.setItem("pref-theme", theme);
 }
 
-const toggleThemeCallbacks = []
+const toggleThemeCallbacks = {}
-toggleThemeCallbacks.push((isDark) => {
+toggleThemeCallbacks['main'] = (isDark) => {
   // console.log('window toggle-theme 1')
   if (isDark) {
     setPrefTheme('light');
   } else {
     setPrefTheme('dark');
   }
-})
+}
 
 // listen to set-theme event,
 // because window is never changed by InstantClick,
@@ -44,7 +44,9 @@ toggleThemeCallbacks.push((isDark) => {
 window.addEventListener('toggle-theme', function() {
   // console.log('window toggle-theme')
   const isDark = isDarkTheme()
-  toggleThemeCallbacks.forEach(callback => callback(isDark))
+  for (const key in toggleThemeCallbacks) {
+    toggleThemeCallbacks[key](isDark)
+  }
 });
 </script>
 <script>

layouts/partials/remark42.html

@@ -16,8 +16,24 @@
   }
 
   (function() {
-    const remark42 = window.REMARK42
+    // toogle theme callback
+    const key = 'remark42'
+    if (!toggleThemeCallbacks.hasOwnProperty(key)) {
+      toggleThemeCallbacks[key] = (isDark) => {
+        const remark42 = window.REMARK42
+        if (!remark42 || !document.querySelector('#remark42')) {
+          return;
+        }
+        if (isDark) {
+          remark42.changeTheme('light');
+        } else {
+          remark42.changeTheme('dark');
+        }
+      }
+    }
 
+    // init or reset remark42
+    const remark42 = window.REMARK42
     if (remark42) {
       remark42.destroy()
       remark42.createInstance(remark_config)
@@ -34,27 +50,3 @@
     }
   })();
 </script>
-
-<script data-no-instant>
-  (function() {
-    if (!toggleThemeCallbacks) {
-      return;
-    }
-
-    toggleThemeCallbacks.push((isDark) => {
-      const remark42 = window.REMARK42
-      if (!remark42) {
-        return;
-      }
-      if (!document.getElementById('remark42')) {
-        return;
-      }
-
-      if (isDark) {
-        remark42.changeTheme('light');
-      } else {
-        remark42.changeTheme('dark');
-      }
-    });
-  })();
-</script>

layouts/partials/telegram_widget.html

@@ -4,6 +4,24 @@
 
 <script>
   (function() {
+    // toogle theme callback
+    const key = 'telegram-widget'
+    if (!toggleThemeCallbacks.hasOwnProperty(key)) {
+      toggleThemeCallbacks[key] = (isDark) => {
+        // console.log('window toggle-theme for telegram widget')
+        const telegram = window.Telegram
+        if (!telegram || !document.querySelector('#telegram-widget-container')) {
+          return;
+        }
+        if (isDark) {
+          telegram.setWidgetOptions({'nodark': 1})
+        } else {
+          telegram.setWidgetOptions({'dark': 1})
+        }
+      }
+    }
+
+    // telegram widget config attrs
     const attrs = {
       'data-telegram-discussion': "{{ .channel }}",
       'data-comments-limit': "{{ .limit | default 10 }}",
@@ -18,6 +36,8 @@
       attrs['data-dark'] = '1'
     }
 
+    // because Telegram does not provide a function to reset the widget from existing instance,
+    // we have to add the widget script every time.
     var d = document, s = d.createElement('script');
     s.src = "https://telegram.org/js/telegram-widget.js?19";
     for (const key in attrs) {
@@ -30,23 +50,3 @@
     container.appendChild(s);
   })();
 </script>
-
-<script data-no-instant>
-  (function() {
-    if (!toggleThemeCallbacks) {
-      return;
-    }
-
-    toggleThemeCallbacks.push((isDark) => {
-      // console.log('window toggle-theme for telegram widget')
-      if (!window.Telegram) {
-        return;
-      }
-      if (isDark) {
-        Telegram.setWidgetOptions({'nodark': 1})
-      } else {
-        Telegram.setWidgetOptions({'dark': 1})
-      }
-    });
-  })();
-</script>