193 lines
4.8 KiB
HTML
193 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/css.css">
|
|
<style>
|
|
#content {
|
|
grid-template-areas:
|
|
"header header2"
|
|
"content content"
|
|
"footer2 footer"
|
|
;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
#content>.content {
|
|
font-size: 1.2em;
|
|
max-width: 75ch;
|
|
}
|
|
|
|
#content>.content {
|
|
text-align: justify;
|
|
text-justify: auto;
|
|
}
|
|
|
|
#content h2::before {
|
|
content: "> ";
|
|
}
|
|
|
|
#content h3::before {
|
|
content: ">> ";
|
|
}
|
|
|
|
#content h3 {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#content h4::before {
|
|
content: ">>> ";
|
|
}
|
|
|
|
.toc {
|
|
background: var(--background-text);
|
|
border-radius: var(--radius);
|
|
padding: var(--padding);
|
|
}
|
|
|
|
pre.quote {
|
|
font: inherit;
|
|
|
|
background: var(--background-text);
|
|
border-left: var(--margin) solid var(--border);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
/* padding-bottom: var(--margin); */
|
|
padding: var(--padding);
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
background-color: var(--border);
|
|
border-radius: var(--radius);
|
|
height: 2px;
|
|
}
|
|
|
|
img {
|
|
background-color: var(--background-text);
|
|
border-radius: var(--radius);
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
#enlarged-image {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: var(--background-text)50;
|
|
display: none;
|
|
}
|
|
|
|
#enlarged-image.visible {
|
|
display: initial;
|
|
}
|
|
|
|
#content>.footer {
|
|
display: none;
|
|
}
|
|
|
|
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
|
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="background-color: #222;">
|
|
<div id="content">
|
|
<div class="header" style="grid-area: header; text-align: center">
|
|
<a href="/" style="color: inherit; text-decoration: inherit">
|
|
<h1>SpoodyThe<span style="color:var(--background-text)">.</span>One</h1>
|
|
</a>
|
|
</div>
|
|
<div class="content" style="grid-area: content; text-align: left">
|
|
<h2>Loading...</h2>
|
|
</div>
|
|
<div class="footer" style="grid-area: footer; text-align: center">
|
|
<a href="#">Back to the top</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="background"></div>
|
|
<script src="/js/main.js"></script>
|
|
<script src="/js/code_highlighter.js"></script>
|
|
<script src="/js/md2html.js"></script>
|
|
<script>
|
|
const show_index = async () => {
|
|
let response = await fetch(`/posts/index`);
|
|
if (response.status != 200)
|
|
document.querySelector("#content>.content>h2")[0].innerText = "An error occured when fetching index...";
|
|
|
|
let posts = (await response.text()).split("\n");
|
|
|
|
generate_background(posts);
|
|
|
|
let elem = document.querySelector("#content>.content");
|
|
elem.innerHTML = `<ul>${posts.map(x => `<li><a href="/posts?post=${x}" style="font-size: 1.2em;">${x}</a></li>`).join("\n")}</ul>`;
|
|
elem.style.maxWidth = "80ch";
|
|
document.querySelector(".header>a").href = "/";
|
|
};
|
|
|
|
(async () => {
|
|
try {
|
|
let post = new URLSearchParams(window.location.search).get("post");
|
|
|
|
if (post === null) {
|
|
show_index();
|
|
return;
|
|
}
|
|
|
|
let response = await fetch(`/posts/${post}/post.md`);
|
|
let content = ""
|
|
|
|
if (response.status != 200) {
|
|
response = await fetch(`/posts/${post}.md`);
|
|
if (response.status != 200) {
|
|
content = `\nError Exception Null\n# Unknown post '${post}'`
|
|
} else
|
|
content = await response.text();
|
|
} else
|
|
content = await response.text();
|
|
|
|
let lines = content.split("\n");
|
|
lines.shift();
|
|
let terms = lines.shift();
|
|
content = lines.join("\n");
|
|
|
|
generate_background(terms.split(" "));
|
|
|
|
document.getElementsByClassName("content")[0].innerHTML = tokens2html(md2tokens(content), post);
|
|
|
|
await new Promise(res => setTimeout(res, 5000));
|
|
if (document.body.scrollHeight > window.innerHeight) {
|
|
document.querySelector("#content>.footer").style.display = "initial";
|
|
}
|
|
} catch (e) {
|
|
document.getElementsByClassName("content")[0].innerText = e;
|
|
throw e;
|
|
}
|
|
})()
|
|
|
|
const enlarge = (img, event) => {
|
|
let oldclick = img.onclick;
|
|
img.classList.add("enlarged")
|
|
img.onclick = null;
|
|
event.cancelBubble = true;
|
|
document.body.onclick = () => delarge(img, oldclick);
|
|
console.log(event);
|
|
}
|
|
|
|
const delarge = (img, oldclick) => {
|
|
document.body.onclick = null;
|
|
img.onclick = oldclick;
|
|
img.classList.remove("enlarged");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|