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;
|
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 {
|
#blog-loading-spinner {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
height: auto;
|
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 Author from "./Author";
|
||||||
import TimeUtility from "./TimeUtility";
|
import TimeUtility from "./TimeUtility";
|
||||||
|
|
||||||
|
@ -71,6 +71,7 @@ class UI {
|
||||||
UI.addLineNumbers(element);
|
UI.addLineNumbers(element);
|
||||||
UI.addHighlighting(element);
|
UI.addHighlighting(element);
|
||||||
UI.addBootstrapTooltips(element);
|
UI.addBootstrapTooltips(element);
|
||||||
|
UI.renderSpoilers(element);
|
||||||
UI.renderTeX(element);
|
UI.renderTeX(element);
|
||||||
UI.renderTimestamps(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.
|
* Renders all TeX in the document.
|
||||||
* @param element The element to search for TeX in.
|
* @param element The element to search for TeX in.
|
||||||
|
@ -197,7 +212,7 @@ class UI {
|
||||||
element = element || document.body;
|
element = element || document.body;
|
||||||
element.querySelectorAll("pre code").forEach((block) => {
|
element.querySelectorAll("pre code").forEach((block) => {
|
||||||
let content = block.innerHTML;
|
let content = block.innerHTML;
|
||||||
|
|
||||||
// but ugly fucking hack. I hate this
|
// but ugly fucking hack. I hate this
|
||||||
content = content.replaceAll("<mark>", "<mark>");
|
content = content.replaceAll("<mark>", "<mark>");
|
||||||
content = content.replaceAll("</mark>", "</mark>");
|
content = content.replaceAll("</mark>", "</mark>");
|
||||||
|
|
Loading…
Reference in New Issue