innerText -> textContent & other modernized DOM methods

assets/js/src/clipboard.js

@@ -14,26 +14,26 @@ if (ClipboardJS.isSupported() && document.querySelector("div.highlight")) {
 
     const button = document.createElement("button");
     button.className = "copy-button";
-    button.innerText = defaultTerm;
+    button.textContent = defaultTerm;
 
     // insert button as a sibling to Hugo's code fence
-    highlightDiv.parentNode.insertBefore(wrapperDiv, highlightDiv);
+    highlightDiv.before(wrapperDiv);
-    wrapperDiv.appendChild(highlightDiv);
+    wrapperDiv.prepend(button);
-    wrapperDiv.insertBefore(button, wrapperDiv.firstChild);
+    wrapperDiv.append(highlightDiv);
   });
 
   // now that all the buttons are in place, bind them to the copy action
   new ClipboardJS("button.copy-button", {
     text: (trigger) =>
       // actual code element will have class "language-*", even if plaintext
-      trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').innerText),
+      trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').textContent),
   }).on("success", (e) => {
     // show a subtle indication of success
-    e.trigger.innerText = successTerm;
+    e.trigger.textContent = successTerm;
 
     // reset button to original text after 2 seconds
     setTimeout(() => {
-      e.trigger.innerText = defaultTerm;
+      e.trigger.textContent = defaultTerm;
     }, 2000);
 
     // text needed to be auto-selected to copy, unselect immediately

assets/js/src/contact.js

@@ -3,7 +3,7 @@ import fetch from "cross-fetch";
 
 // don't continue if there isn't a contact form on this page
 // TODO: be better and only do any of this on /contact/
-const contactForm = document.getElementById("contact-form");
+const contactForm = document.querySelector("form#contact-form");
 
 if (contactForm) {
   contactForm.addEventListener("submit", (event) => {
@@ -11,17 +11,17 @@ if (contactForm) {
     event.preventDefault();
 
     // feedback <span>s for later
-    const successSpan = document.getElementById("contact-form-result-success");
+    const successSpan = document.querySelector("span#contact-form-result-success");
-    const errorSpan = document.getElementById("contact-form-result-error");
+    const errorSpan = document.querySelector("span#contact-form-result-error");
 
     // disable the whole form if the button has been disabled below (on success)
-    const submitButton = document.getElementById("contact-form-btn-submit");
+    const submitButton = document.querySelector("button#contact-form-btn-submit");
     if (submitButton.disabled === true) {
       return;
     }
 
     // change button appearance between click and server response
-    submitButton.innerText = "Sending...";
+    submitButton.textContent = "Sending...";
     submitButton.disabled = true; // prevent accidental multiple submissions
     submitButton.style.cursor = "default";
 
@@ -60,7 +60,7 @@ if (contactForm) {
             errorSpan.style.display = "none";
 
             // let user know we were successful
-            successSpan.innerText = "Success! You should hear from me soon. :)";
+            successSpan.textContent = "Success! You should hear from me soon. :)";
           } else {
             // pass on an error sent by the server
             throw new Error(data.message);
@@ -71,16 +71,16 @@ if (contactForm) {
 
       // give user feedback based on the error message returned
       if (message === "USER_INVALID_CAPTCHA") {
-        errorSpan.innerText = "Did you complete the CAPTCHA? (If you're human, that is...)";
+        errorSpan.textContent = "Did you complete the CAPTCHA? (If you're human, that is...)";
       } else if (message === "USER_MISSING_DATA") {
-        errorSpan.innerText = "Please make sure that all fields are filled in.";
+        errorSpan.textContent = "Please make sure that all fields are filled in.";
       } else {
         // something else went wrong, and it's probably my fault...
-        errorSpan.innerText = "Internal server error. Try again later?";
+        errorSpan.textContent = "Internal server error. Try again later?";
       }
 
       // reset submit button to let user try again
-      submitButton.innerText = "Try Again";
+      submitButton.textContent = "Try Again";
       submitButton.disabled = false;
       submitButton.style.cursor = "pointer";
       submitButton.blur(); // remove keyboard focus from the button

assets/js/src/counter.js

@@ -6,7 +6,7 @@ import urlParse from "url-parse";
 const HITS_ENDPOINT = "/api/hits/";
 
 // don't continue if there isn't a span#meta-hits element on this page
-const wrapper = document.getElementById("meta-hits");
+const wrapper = document.querySelector("div#meta-hits");
 
 // page must have both span#meta-hits and canonical URL to enter
 if (wrapper) {
@@ -35,19 +35,19 @@ if (wrapper) {
       wrapper.title = `${hitsComma} ${hitsPlural}`;
 
       // finally inject the hits...
-      const counter = document.getElementById("meta-hits-counter");
+      const counter = document.querySelector("span#meta-hits-counter");
       if (counter) {
-        counter.appendChild(document.createTextNode(hitsComma));
+        counter.append(hitsComma);
       }
 
       // ...and hide the loading spinner
-      const spinner = document.getElementById("meta-hits-loading");
+      const spinner = document.querySelector("div#meta-hits-loading");
       if (spinner) {
-        spinner.style.display = "none";
+        spinner.remove();
       }
     })
     .catch(() => {
       // something went horribly wrong, initiate coverup
-      wrapper.style.display = "none";
+      wrapper.remove();
     });
 }

assets/js/src/dark-mode.js

@@ -2,7 +2,7 @@ import { init as initDarkMode } from "dark-mode-switcheroo";
 
 // HACK: disable theme transition until user's preference is auto-restored (1/2)
 const disableTransitionCSSHack = document.createElement("style");
-document.head.appendChild(disableTransitionCSSHack);
+document.head.append(disableTransitionCSSHack);
 disableTransitionCSSHack.sheet.insertRule(`
   *,
   ::before,
@@ -19,7 +19,7 @@ initDarkMode({
 
     // HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
     setTimeout(() => {
-      document.head.removeChild(disableTransitionCSSHack);
+      disableTransitionCSSHack.remove();
     }, 500);
   },
 });

assets/js/src/projects.js

@@ -12,7 +12,7 @@ const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
 
 // don't continue if there isn't a span#meta-hits element on this page
 // TODO: be better.
-const wrapper = document.getElementById("github-cards");
+const wrapper = document.querySelector("div#github-cards");
 
 if (wrapper) {
   dayjs.extend(dayjsLocalizedFormat);
@@ -74,13 +74,13 @@ if (wrapper) {
         const div = document.createElement("div");
         div.classList.add("github-card");
         render(template(repo), div);
-        wrapper.appendChild(div);
+        wrapper.append(div);
       });
 
       // we're done, hide the loading spinner
-      const spinner = document.getElementById("loading-spinner");
+      const spinner = document.querySelector("div.loading");
       if (spinner) {
-        spinner.style.display = "none";
+        spinner.remove();
       }
 
       // the repo descriptions were added after the first twemoji parsing
@@ -90,6 +90,6 @@ if (wrapper) {
     })
     .catch(() => {
       // something went horribly wrong, initiate coverup
-      wrapper.style.display = "none";
+      wrapper.remove();
     });
 }

assets/sass/abstracts/_settings.scss

@@ -15,8 +15,9 @@ $webfont-mono-variable: "Roboto Mono var";
 // System fonts:
 // https://markdotto.com/2018/02/07/github-system-fonts/
 // stylelint-disable-next-line value-keyword-case
-$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
+$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif,
-$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
+  "Apple Color Emoji", "Segoe UI Emoji";
+$system-fonts-monospace: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
 
 // Prefer web fonts with system fonts as backup:
 $font-stack-sans: list.join($webfont-sans, $system-fonts-sans);

assets/sass/abstracts/_themes.scss

@@ -18,7 +18,7 @@
   transition: list.join($addTransitions, $defaults, $separator: comma);
 
   // keep track of the original selector(s) calling this mixin for below
-  $selectors: "#{&}";
+  $selectors: #{&};
 
   // add corresponding body.light and body.dark root selectors
   @each $theme, $map in $themes {

layouts/_default/single.html

@@ -30,7 +30,8 @@
       {{ if eq hugo.Environment "production" }}
       <div id="meta-hits" style="display: none;">
         <span class="meta-icon">👀</span>
-        <div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div><span id="meta-hits-counter"></span>
+        <div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div>
+        <span id="meta-hits-counter"></span>
       </div>
       {{ end }}
     </div>

yarn.lock

@@ -261,14 +261,14 @@
     js-tokens "^4.0.0"
 
 "@babel/parser@^7.16.0":
-  version "7.16.0"
+  version "7.16.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.0.tgz#cf147d7ada0a3655e79bf4b08ee846f00a00a295"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.2.tgz#3723cd5c8d8773eef96ce57ea1d9b7faaccd12ac"
-  integrity sha512-TEHWXf0xxpi9wKVyBCmRcSSDjbJ/cl6LUdlbYUHEaNQUJGhreJbZrXT6sR4+fZLxVUJqNRB4KyOvjuy/D9009A==
+  integrity sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.0":
-  version "7.16.0"
+  version "7.16.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.0.tgz#efb7f147042aca34ce8156a055906a7abaadeaf0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183"
-  integrity sha512-djyecbGMEh4rOb/Tc1M5bUW2Ih1IZRa9PoubnPOCzM+DRE89uGUHR1Y+3aDdTMW4drjGRZ2ol8dt1JUFg6hJLQ==
+  integrity sha512-h37CvpLSf8gb2lIJ2CgC3t+EjFbi0t8qS7LCS1xcJIlEXE4czlofwaW7W1HA8zpgOCzI9C1nmoqNR1zWkk0pQg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
@@ -3381,9 +3381,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.878:
-  version "1.3.885"
+  version "1.3.886"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.885.tgz#c8cec32fbc61364127849ae00f2395a1bae7c454"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.886.tgz#ac039c4001b665b1dd0f0ed9c2e4da90ff3c9267"
-  integrity sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg==
+  integrity sha512-+vYdeBosI63VkCtNWnEVFjgNd/IZwvnsWkKyPtWAvrhA+XfByKoBJcbsMgudVU/bUcGAF9Xp3aXn96voWlc3oQ==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -5074,7 +5074,7 @@ https-proxy-agent@^5.0.0:
 
 "hugo-extended@github:jakejarvis/hugo-extended#main":
   version "0.88.1-patch1"
-  resolved "https://codeload.github.com/jakejarvis/hugo-extended/tar.gz/8251c012de3d7d7916c1cbf21ac8013f90a1a93c"
+  resolved "https://codeload.github.com/jakejarvis/hugo-extended/tar.gz/8698b388877ef0f4ffcd3c4b0411ec0608d44561"
   dependencies:
     careful-downloader "^2.0.1"
     log-symbols "^5.0.0"