feat: add support for future spoiler tags
This commit is contained in:
parent
143131b413
commit
1fe65aed3b
|
@ -212,6 +212,20 @@ div.alert *:last-child {
|
|||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
background: #1e1e1e;
|
||||
color: #1e1e1e;
|
||||
cursor: pointer;
|
||||
padding: 2px 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
|
||||
&.spoiler-revealed {
|
||||
background: lighten(#333333, 12.5%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
#blog-loading-spinner {
|
||||
margin: 20px;
|
||||
height: auto;
|
||||
|
|
19
src/ts/UI.ts
19
src/ts/UI.ts
|
@ -1,4 +1,4 @@
|
|||
import BlogPost from "./BlogPost";
|
||||
import BlogPost from "./BlogPost";
|
||||
import Author from "./Author";
|
||||
import TimeUtility from "./TimeUtility";
|
||||
|
||||
|
@ -71,6 +71,7 @@ class UI {
|
|||
UI.addLineNumbers(element);
|
||||
UI.addHighlighting(element);
|
||||
UI.addBootstrapTooltips(element);
|
||||
UI.renderSpoilers(element);
|
||||
UI.renderTeX(element);
|
||||
UI.renderTimestamps(element);
|
||||
}
|
||||
|
@ -120,6 +121,20 @@ class UI {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders all spoilers in the document.
|
||||
* @param element The element to search for spoilers in.
|
||||
*/
|
||||
public static renderSpoilers(element?: Element) {
|
||||
element = element || document.body;
|
||||
const spoilers = element.querySelectorAll(".spoiler");
|
||||
spoilers.forEach((spoiler) => {
|
||||
spoiler.addEventListener("click", () => {
|
||||
spoiler.classList.add("spoiler-revealed");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders all TeX in the document.
|
||||
* @param element The element to search for TeX in.
|
||||
|
@ -197,7 +212,7 @@ class UI {
|
|||
element = element || document.body;
|
||||
element.querySelectorAll("pre code").forEach((block) => {
|
||||
let content = block.innerHTML;
|
||||
|
||||
|
||||
// but ugly fucking hack. I hate this
|
||||
content = content.replaceAll("<mark>", "<mark>");
|
||||
content = content.replaceAll("</mark>", "</mark>");
|
||||
|
|
Loading…
Reference in New Issue