oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor: delegate refresh to UI class

This commit is contained in:
Oliver Booth 2023-08-10 15:15:06 +01:00
parent 522caa6add
commit 42af5ebcdd
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
2 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/ts/UI.ts
View File

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

14
src/ts/app.ts
View File

@ -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) => {
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;
});
UI.updateUI();
const tex = document.getElementsByClassName("math");
Array.prototype.forEach.call(tex, function (el) {