From f835f0aa6f015f7a7dd5df2cfcca3146e3148a5b Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Tue, 21 Feb 2023 01:06:05 +0800
Subject: [PATCH] Create QoL improvements for code listings

- Added a "Copy to clipboard" button for easily following in case the
  post is code-heavy.

- Added a toggle fullscreen button for code listings that are too large.
  It is pretty small and limiting in those cases, after all.
---
 i18n/en.toml                 | 33 ++++++++++++++++
 layouts/partials/footer.html | 75 +++++++++++++++++++++++++++++++++---
 2 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 i18n/en.toml

diff --git a/i18n/en.toml b/i18n/en.toml
new file mode 100644
index 0000000..49fae0f
--- /dev/null
+++ b/i18n/en.toml
@@ -0,0 +1,33 @@
+[siteFooterAriaLabel]
+other = "Site footer"
+
+[copyButtonLabel]
+other = "Copy to clipboard"
+
+[copyButtonAriaLabel]
+other = "Copy to clipboard"
+
+[copyButtonDescription]
+other = "Copy the code listing content to clipboard"
+
+[fullscreenButtonLabel]
+other = "Toggle fullscreen"
+
+[fullscreenButtonAriaLabel]
+other = "Toggle fullscreen"
+
+[fullscreenButtonDescription]
+other = "Make the code listing takes up fullscreen"
+
+[generatedOn]
+other = "Generated on"
+
+[siteFeaturesScriptingDisabled]
+other = """
+    Some of the features of this site relies on JavaScript scripting.
+    You'll be missing out on some features such as copying code listings to the clipboard, code syntax higlighting, and code listing fullscreen button.
+    Also, some of the JavaScript libraries this site relies on such as interactive image zooming and MathJax rendering will be disabled.
+"""
+
+[lastUpdated]
+other = "Last updated"
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6ebb0e6..c573ee3 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,10 +1,10 @@
-<footer aria-label="Site footer">
+<footer aria-label="{{ T "siteFooterAriaLabel" }}">
 <!-- A convenient back to top link. -->
-<p><a href="#top">{{ i18n "back_to_top" | default "Back to top" }}</a></p>
+<p><a href="#top">{{ T "back_to_top" | default "Back to top" }}</a></p>
 
 <!-- Linking to other languages' homepage. -->
 {{ if $.Site.IsMultiLingual }}
-  <p>{{ i18n "multilingual" }}:
+  <p>{{ T "multilingual" }}:
   <span class="list site__languages">
   {{ range $.Site.Languages }}
     <a href="{{ . | relURL }}" hreflang="{{ .Lang }}">{{ with .LanguageName }}{{ . }}{{ else }}{{ .Lang }}{{ end }}</a>
@@ -47,15 +47,80 @@
 {{- end }}
 
 <p>
-<small>Generated on {{ now.Format "2006-01-02 15:04:05 -0700" }}</small></p>
+<small>{{ T "generatedOn" }} {{ now.Format "2006-01-02 15:04:05 -0700" }}</small></p>
 
 {{ with (getenv "LAST_COMMIT_DATE") }}
-  <p>Last updated: {{ time . | dateFormat "2 Jan 2006" }}</p>
+<p>{{ T "lastUpdated" }}: {{ time . | dateFormat "2 Jan 2006" }}</p>
 {{ end }}
 
 {{ $logo := resources.Get "svg/logo.svg" }}
 <div id="logo" data-tooltip="Hey there! :3">
 {{ $logo.Content | safeHTML }}
 </div>
+
+<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" "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" "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>