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

@@ -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"

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>