*actually* fix utteranc.es dark/light theme-ing

assets/js/dark-mode.js

@@ -9,23 +9,43 @@ toggle.style.visibility = 'visible';
 // check for preset `dark_mode_pref` in localStorage
 let pref = localStorage.getItem('dark_mode_pref');
 
-// keep track of current state, light by default
+// keep track of current state (light by default)
 let activated = false;
 
 // dynamically switch utteranc.es's theme
-const setUtterances = function(t) {
+let utterancesInit = false;
-  // if utteranc.es iframe hasn't loaded yet
+const setUtterances = function() {
-  const script = document.querySelector('script[src="https://utteranc.es/client.js"]');
+  let theme = activated ? 'github-dark' : 'github-light';
-  if (script) script.setAttribute('data-theme', t);
+  const container = document.querySelector('div#comments');
 
-  // if utteranc.es iframe has already loaded
+  // don't do any of this if we're not on a page with comments enabled
-  const frame = document.querySelector('iframe.utterances-frame');
+  if (container) {
-  if (frame) {
+    if (!utterancesInit) {
-    // https://github.com/utterance/utterances/blob/4d9823c6c4f9a58365f06e2aa76c51b8cf5d5478/src/configuration-component.ts#L160
+      const script = document.createElement('script');
-    frame.contentWindow.postMessage({
+      script.type = 'text/javascript';
-      type: 'set-theme',
+      script.async = true;
-      theme: t
+      script.defer = true;
-    }, 'https://utteranc.es');
+      script.src = 'https://utteranc.es/client.js';
+      script.crossorigin = true;
+      script.setAttribute('data-repo', '{{ .Site.Params.github | safeJS }}');
+      script.setAttribute('data-issue-term', 'og:title');
+      script.setAttribute('data-theme', theme);
+      script.setAttribute('data-label', 'comments');
+      container.appendChild(script);
+
+      utterancesInit = true;
+    } else {
+      const frame = document.querySelector('.utterances-frame');
+
+      // be extra sure frame exists
+      if (frame) {
+        // https://github.com/utterance/utterances/blob/4d9823c6c4f9a58365f06e2aa76c51b8cf5d5478/src/configuration-component.ts#L160
+        frame.contentWindow.postMessage({
+          type: 'set-theme',
+          theme: theme
+        }, '*');
+      }
+    }
   }
 };
 
@@ -33,29 +53,32 @@ const activateDarkMode = function() {
   document.body.classList.remove('light');
   document.body.classList.add('dark');
 
-  setUtterances('github-dark');
-
   activated = true;
+
+  setUtterances();
 };
 
 const activateLightMode = function() {
   document.body.classList.remove('dark');
   document.body.classList.add('light');
 
-  setUtterances('github-light');
-
   activated = false;
+
+  setUtterances();
 };
 
-// if user already explicitly enabled dark mode in the past, turn it back on.
+// if user already explicitly toggled in the past, restore their preference.
-// light is default, so no need to do anything otherwise.
 if (pref === 'true') activateDarkMode();
+if (pref === 'false') activateLightMode();
 
 // user has never clicked the button, so go by their OS preference until/if they do so
 if (!pref) {
   // check for OS dark mode setting and switch accordingly
   // https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) activateDarkMode();
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+    activateDarkMode();
+  else
+    activateLightMode();
 
   // real-time switching if supported by OS/browser
   // TODO: stop listening when the parent condition becomes false,
@@ -74,4 +97,4 @@ toggle.addEventListener('click', function() {
     activateLightMode();
     localStorage.setItem('dark_mode_pref', 'false');
   }
-});
+}, true);

layouts/_default/baseof.html

@@ -10,7 +10,6 @@
 {{ block "main" . }}{{ end }}
 </div>
 {{ partialCached "page/footer" . }}
-{{ partial "scripts/_bundle" . }}
 {{ partial "scripts/shortcodes" . }}
 {{ if eq hugo.Environment "production" }}
   {{ partialCached "scripts/simple_analytics" . }}

layouts/_default/single.html

@@ -12,9 +12,7 @@
     </div>
 
     {{ if and (ne .Params.comments false) (eq hugo.Environment "production") }}
-    <div id="comments">
+    <div id="comments"></div>
-      {{ partial "scripts/utterances" . }}
-    </div>
     {{ end }}
   </article>
 </main>

layouts/partials/head/_head.html

@@ -8,4 +8,5 @@
 {{ partialCached "head/feeds" . -}}
 {{ partialCached "head/webmention" . -}}
 {{ partial "head/canonical" . -}}
+{{ partial "scripts/_bundle" . }}
 {{ partial "head/schema" . -}}

layouts/partials/scripts/_bundle.html

@@ -1,5 +1,5 @@
-{{ $darkmode := resources.Get "js/dark-mode.js" }}
+{{ $darkmode := resources.Get "js/dark-mode.js" | resources.ExecuteAsTemplate "vendor/emoji/dark-mode.js" . }}
 {{ $twemoji := resources.Get "vendor/emoji/emoji.js" | resources.ExecuteAsTemplate "vendor/emoji/emoji.min.js" . }}
 
 {{ $js := slice $darkmode $twemoji | resources.Concat "/js/main.js" | resources.Minify | resources.Fingerprint "sha256" }}
-<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+<script defer src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>

layouts/partials/scripts/utterances.html

@@ -1,7 +0,0 @@
-<script async defer
-        src="https://utteranc.es/client.js"
-        data-repo="{{ .Site.Params.github }}"
-        data-issue-term="og:title"
-        data-label="comments"
-        data-theme="github-light"
-        crossorigin></script>

yarn.lock

@@ -262,9 +262,9 @@
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
 "@types/node@*":
-  version "13.13.2"
+  version "13.13.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.2.tgz#160d82623610db590a64e8ca81784e11117e5a54"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.4.tgz#1581d6c16e3d4803eb079c87d4ac893ee7501c2c"
-  integrity sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
+  integrity sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -711,9 +711,9 @@ character-reference-invalid@^1.0.0:
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
 chokidar@^3.3.0:
-  version "3.3.1"
+  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
-  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -721,7 +721,7 @@ chokidar@^3.3.0:
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.3.0"
+    readdirp "~3.4.0"
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -3483,7 +3483,7 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -3853,12 +3853,12 @@ readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readdirp@~3.3.0:
+readdirp@~3.4.0:
-  version "3.3.0"
+  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
   dependencies:
-    picomatch "^2.0.7"
+    picomatch "^2.2.1"
 
 redent@^1.0.0:
   version "1.0.0"