Show uutils commit hash and date on playground page

Emit a version.js alongside the WASM binary in CI recording the
coreutils commit used for the build, and display it under the
terminal with a link to the commit on GitHub.

.github/workflows/website.yml

@@ -138,6 +138,18 @@ jobs:
           echo "const WASM_LOCALES = [$(echo "$locales" | sed 's/[^,]*/\"&\"/g')];" \
             > ../uutils.github.io/static/wasm/locales.js
           echo "Available locales: $locales"
+          # Record the coreutils commit used to build the WASM binary
+          commit_hash=$(git rev-parse HEAD)
+          commit_short=$(git rev-parse --short HEAD)
+          commit_date=$(git show -s --format=%cI HEAD)
+          cat > ../uutils.github.io/static/wasm/version.js <<EOF
+const UUTILS_WASM_VERSION = {
+  commit: "${commit_hash}",
+  short: "${commit_short}",
+  date: "${commit_date}"
+};
+EOF
+          echo "uutils WASM build: ${commit_short} (${commit_date})"
         fi
 
     - name: Run Zola

content/playground.md

@@ -15,7 +15,10 @@ template = "page.html"
 
 <div id="wasm-playground"></div>
 
+<p class="playground-version" id="playground-version"></p>
+
 <script src="/wasm/locales.js" defer></script>
+<script src="/wasm/version.js" defer></script>
 <script src="/js/wasm-terminal.js" defer></script>
 <script defer>
   document.addEventListener("DOMContentLoaded", function() {
@@ -31,6 +34,14 @@ template = "page.html"
         sel.appendChild(opt);
       });
     }
+    // Show the uutils commit that was used to build the WASM binary
+    if (typeof UUTILS_WASM_VERSION !== "undefined") {
+      var el = document.getElementById("playground-version");
+      var date = UUTILS_WASM_VERSION.date.split("T")[0];
+      var url = "https://github.com/uutils/coreutils/commit/" + UUTILS_WASM_VERSION.commit;
+      el.innerHTML = 'Built from uutils/coreutils <a href="' + url + '"><code>' +
+        UUTILS_WASM_VERSION.short + '</code></a> (' + date + ')';
+    }
   });
 </script>
 

static/style.css

@@ -548,6 +548,17 @@ main img {
   border: 1px solid var(--header-border-color);
 }
 
+.playground-version {
+  margin: -0.5em 0 1.5em;
+  font-size: 0.85em;
+  color: var(--secondary-text-color, inherit);
+  opacity: 0.8;
+}
+
+.playground-version:empty {
+  display: none;
+}
+
 #wasm-playground .wasm-loading {
   display: flex;
   align-items: center;