Move a bunch of scripts and CSS to assets so they can be processed with Hugo Pipes

Use Pipes to fingerprint and add SLI information to <script> and <link> tags.

assets/scripts/railroad-utils.js

@@ -0,0 +1,67 @@
+{{ with partial "secure_asset.html" "scripts/lib/railroad.js" }}
+import rr from "{{ .Secure.RelPermalink }}";
+{{ else }}
+  {{ errorf "Unable to get railroad.js resource" }}
+{{ end }}
+
+class RailroadDiagramManager {
+    constructor() {
+        this.figures = new Map();
+        this.isCurrentlyNarrow = undefined;
+
+        this.diagramBreakpoint = window.matchMedia("(max-width: 450px)");
+        this.diagramBreakpoint.addEventListener("change", () => {
+            this.updateVisiblity();
+        });
+    }
+
+    add(svg) {
+        const parent = svg.parentElement;
+        if (!this.figures.has(parent)) {
+            this.figures.set(parent, []);
+        }
+
+        this.figures.get(parent).push(svg);
+
+        parent.removeChild(svg);
+    }
+
+    updateVisiblity() {
+        const isNarrow = this.diagramBreakpoint.matches;
+
+        if (isNarrow === this.isCurrentlyNarrow) {
+            return;
+        }
+
+        this.isCurrentlyNarrow = isNarrow;
+
+        for (let [figure, svgs] of this.figures.entries()) {
+            for (let svg of svgs) {
+                const svgHasNarrowClass = svg.classList.contains("narrow");
+                if (isNarrow && svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (!isNarrow && !svgHasNarrowClass)
+                    figure.appendChild(svg);
+                else if (svg.parentElement === figure)
+                    figure.removeChild(svg);
+            }
+        }
+    }
+}
+
+let railroadDiagramManager = new RailroadDiagramManager();
+
+export function railroadDiagram(builder, elementID, isNarrow) {
+    const diagram = builder(rr);
+    const svg = diagram.addTo(document.getElementById(elementID));
+
+    if (isNarrow) {
+        svg.classList.add("narrow");
+    }
+
+    railroadDiagramManager.add(svg);
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    railroadDiagramManager.updateVisiblity();
+});

assets/scripts/site.js

@@ -0,0 +1,25 @@
+/* site.js
+ * Eryn Wells <eryn@erynwells.me>
+ */
+
+window.addEventListener("DOMContentLoaded", () => {
+  const siteHeader = document.querySelector("header.site");
+  if (!siteHeader) {
+    return;
+  }
+  siteHeader.classList.add("visible");
+
+  siteHeader.addEventListener("animationend", () => {
+    console.log("Animation ended");
+    siteHeader.classList.add("sticky");
+  }, false);
+
+  try {
+    const documentReferrer = new URL(document.referrer);
+    if (documentReferrer.pathname === "/") {
+      siteHeader.classList.add("animated");
+    } else {
+      siteHeader.classList.add("sticky");
+    }
+  } catch { }
+});

assets/scripts/sketch-utils.js

@@ -0,0 +1,7 @@
+function getInlineSketchWidth() {
+    return getComputedStyle(document.documentElement).getPropertyValue("--body-width");
+}
+
+function convertRemToPx(rem) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}