refactor: delegate refresh to UI class

src/ts/UI.ts

@@ -6,6 +6,38 @@
     public static get blogPostTemplate(): HTMLDivElement {
         return document.querySelector("#blog-post-template");
     }
+
+    /**
+     * Forces all UI elements to update.
+     */
+    public static updateUI() {
+        UI.addLineNumbers();
+        UI.unescapeMarkTags();
+    }
+
+    /**
+     * Adds line numbers to all <pre> <code> blocks that have more than one line.
+     */
+    public static addLineNumbers() {
+        document.querySelectorAll("pre code").forEach((block) => {
+            let content = block.textContent;
+            if (content.trim().split("\n").length > 1) {
+                block.parentElement.classList.add("line-numbers");
+            }
+        });
+    }
+
+    /**
+     * Unescapes all <mark> tags in <pre> <code> blocks.
+     */
+    public static unescapeMarkTags() {
+        document.querySelectorAll("pre code").forEach((block) => {
+            let content = block.innerHTML;
+            content = content.replaceAll("&lt;mark&gt;", "<mark>");
+            content = content.replaceAll("&lt;/mark&gt;", "</mark>");
+            block.innerHTML = content;
+        });
+    }
 }
 
 export default UI;

src/ts/app.ts

@@ -52,6 +52,8 @@ declare const Handlebars: any;
             disqusCounter.src = "https://oliverbooth-dev.disqus.com/count.js";
             disqusCounter.async = true;
 
+            UI.updateUI();
+
             const spinner = document.querySelector("#blog-loading-spinner");
             if (spinner) {
                 spinner.classList.add("removed");
@@ -60,17 +62,7 @@ declare const Handlebars: any;
         });
     }
 
-    document.querySelectorAll("pre code").forEach((block) => {
+    UI.updateUI();
-        let content = block.textContent;
-        if (content.trim().split("\n").length > 1) {
-            block.parentElement.classList.add("line-numbers");
-        }
-
-        content = block.innerHTML;
-        content = content.replaceAll("&lt;mark&gt;", "<mark>");
-        content = content.replaceAll("&lt;/mark&gt;", "</mark>");
-        block.innerHTML = content;
-    });
 
     const tex = document.getElementsByClassName("math");
     Array.prototype.forEach.call(tex, function (el) {