From 0b3755c69a7527383b450052a336f12b08d4bd40 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sat, 30 Dec 2023 19:38:37 -0800
Subject: [PATCH] Use a shim instead of the real katex-expression because it
 hardcodes too much.

We don't need a second bundle of KaTeX, or all of the fonts a second time, served
from a CDN we don't control.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
---
 config.toml                                |  2 +-
 layouts/shortcodes/katex_component_js.html | 35 +++++++++++++++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/config.toml b/config.toml
index 90701a7..a2941e2 100644
--- a/config.toml
+++ b/config.toml
@@ -34,7 +34,7 @@ defaultContentLanguage = 'en'
 
 [params]
 bergamotJsUrl = "https://static.danilafe.com/bergamot/bergamot.js"
-katexExpressionJsUrl = "https://static.danilafe.com/katex-expression/katex-expression.esm.js"
+katexJsUrl = "https://static.danilafe.com/katex/katex.min.js"
 plausibleAnalyticsDomain = "danilafe.com"
 githubUsername = "DanilaFe"
 siteSourceUrl = "https://dev.danilafe.com/Web-Projects/blog-static/src/branch/master"
diff --git a/layouts/shortcodes/katex_component_js.html b/layouts/shortcodes/katex_component_js.html
index 3b7a84c..5463f7d 100644
--- a/layouts/shortcodes/katex_component_js.html
+++ b/layouts/shortcodes/katex_component_js.html
@@ -1 +1,34 @@
-<script type="module" src="{{ .Site.Params.katexExpressionJsUrl }}"></script>
+<script src="{{ .Site.Params.katexJsUrl }}" crossorigin="anonymous"></script>
+<script defer>
+class KatexExpressionShim extends HTMLElement {
+    static observedAttributes = ["expression", "katex-options"];
+    targetSpan;
+
+    constructor() {
+        super();
+    }
+
+    doRender() {
+        if (!this.targetSpan) return;
+
+        const options = this.hasAttribute("katex-options") ?
+            this.getAttribute("katex-options") : {};
+        katex.render(
+            this.getAttribute("expression"),
+            this.targetSpan,
+            JSON.parse(options)
+        );
+    }
+
+    connectedCallback() {
+        this.targetSpan = document.createElement('span');
+        this.appendChild(this.targetSpan);
+        this.doRender();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.doRender();
+    }
+}
+customElements.define("katex-expression", KatexExpressionShim);
+</script>