Move site script into its own file

assets/js/site.js

@@ -0,0 +1,62 @@
+(function() {
+    // Set up shop for logo interaction.
+    var logo = document.querySelector("#logo");
+    var logoQuotes = [
+        "Hey there! :3",
+        "Just dancing in this void for at least 659 hours, how about you?",
+        "How's it going, man?",
+        "Having ourselves a party, yeh?",
+        "Why, hello there.",
+        "!!!",
+        "!?! That's an interrabang."
+    ];
+
+    logo.addEventListener("mouseenter", (event) => {
+        const randomItem = Math.floor(Math.random() * logoQuotes.length)
+        event.target.dataset.tooltip = logoQuotes[randomItem];
+    });
+
+    // Set up shop for QoL code listing features.
+    var codeListings = document.querySelectorAll("main .listingblock > .content")
+
+    for (elem of codeListings) {
+        var parent = elem.parentElement;
+
+        var fullscreenButton = document.createElement("button");
+        fullscreenButton.classList.add("listingblock__fullscreen-btn");
+        fullscreenButton.ariaLabel = "{{ T "fullscreenButtonAriaLabel" }}";
+        fullscreenButton.title = "{{ T "fullscreenButtonLabel" }}";
+        fullscreenButton.ariaDescription = "{{ T "fullscreenButtonDescription" }}";
+        fullscreenButton.innerHTML = `{{- partial "components/heroicon.html" (dict "id" "arrows-pointing-out") | safeHTML }}`;
+
+        fullscreenButton.addEventListener("click", (event) => {
+            const { target } = event;
+            const parent = target.closest(".listingblock");
+            if (!document.fullscreenElement) {
+                parent.requestFullscreen();
+            } else if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+        });
+
+        var copyButton = document.createElement("button");
+        copyButton.classList.add("listingblock__copy-btn");
+        copyButton.ariaLabel = "{{ T "copyButtonAriaLabel" }}";
+        copyButton.title = "{{ T "copyButtonLabel" }}";
+        copyButton.ariaDescription = "{{ T "copyButtonDescription" }}";
+        copyButton.innerHTML = `{{- partial "components/heroicon.html" (dict "id" "clipboard") }}`;
+
+        copyButton.addEventListener("click", (event) => {
+            const { target } = event;
+            const parent = target.closest(".listingblock");
+            const codeListing = parent.querySelector(".content");
+            navigator.clipboard.writeText(codeListing.textContent.trim());
+        })
+
+        var buttonRow = document.createElement("div");
+        buttonRow.classList.add("listingblock__btn-row");
+        buttonRow.appendChild(copyButton);
+        buttonRow.appendChild(fullscreenButton);
+        parent.appendChild(buttonRow);
+    }
+})();

layouts/_default/baseof.html

@@ -11,6 +11,7 @@
     {{- block "main" . }}{{- end }}
     <hr aria-hidden="true">
     {{- partial "footer.html" . -}}
+    {{- partial "scripts.html" . -}}
     {{- if hugo.IsProduction -}}
     <script data-goatcounter="https://foo-dogsquared.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
     {{- end }}

layouts/partials/footer.html

@@ -60,67 +60,3 @@
 
 <noscript>{{ T "siteFeaturesScriptingDisabled" }}</noscript>
 </footer>
-
-<!-- Have these scripts as a separate file. -->
-<script>
-  var logo = document.querySelector("#logo");
-  var logoQuotes = [
-    "Hey there! :3",
-    "Just dancing in this void for at least 659 hours, how about you?",
-    "How's it going, man?",
-    "Having ourselves a party, yeh?",
-    "Why, hello there.",
-    "!!!",
-    "!?! That's an interrabang."
-  ];
-
-  logo.addEventListener("mouseenter", (event) => {
-    const randomItem = Math.floor(Math.random() * logoQuotes.length)
-    event.target.dataset.tooltip = logoQuotes[randomItem];
-  });
-</script>
-
-<script>
-  var codeListings = document.querySelectorAll("main .listingblock > .content")
-
-  for (elem of codeListings) {
-    var parent = elem.parentElement;
-
-    var fullscreenButton = document.createElement("button");
-    fullscreenButton.classList.add("listingblock__fullscreen-btn");
-    fullscreenButton.ariaLabel = "{{ T "fullscreenButtonAriaLabel" }}";
-    fullscreenButton.title = "{{ T "fullscreenButtonLabel" }}";
-    fullscreenButton.ariaDescription = "{{ T "fullscreenButtonDescription" }}";
-    fullscreenButton.innerHTML = "{{ partial "components/heroicon.html" (dict "id" "arrows-pointing-out") }}";
-
-    fullscreenButton.addEventListener("click", (event) => {
-        const { target } = event;
-        const parent = target.closest(".listingblock");
-        if (!document.fullscreenElement) {
-          parent.requestFullscreen();
-        } else if (document.exitFullscreen) {
-          document.exitFullscreen();
-        }
-    });
-
-    var copyButton = document.createElement("button");
-    copyButton.classList.add("listingblock__copy-btn");
-    copyButton.ariaLabel = "{{ T "copyButtonAriaLabel" }}";
-    copyButton.title = "{{ T "copyButtonLabel" }}";
-    copyButton.ariaDescription = "{{ T "copyButtonDescription" }}";
-    copyButton.innerHTML = "{{ partial "components/heroicon.html" (dict "id" "clipboard") }}";
-
-    copyButton.addEventListener("click", (event) => {
-        const { target } = event;
-        const parent = target.closest(".listingblock");
-        const codeListing = parent.querySelector(".content");
-        navigator.clipboard.writeText(codeListing.textContent.trim());
-    })
-
-    var buttonRow = document.createElement("div");
-    buttonRow.classList.add("listingblock__btn-row");
-    buttonRow.appendChild(copyButton);
-    buttonRow.appendChild(fullscreenButton);
-    parent.appendChild(buttonRow);
-  }
-</script>

layouts/partials/scripts.html

@@ -0,0 +1,2 @@
+{{ $siteScript := resources.Get "js/site.js" | resources.ExecuteAsTemplate "js/site.js" . }}
+<script src="{{ $siteScript.Permalink }}"> </script>