163 lines
4.2 KiB
HTML
163 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="/css/css.css">
|
|
<style>
|
|
#content {
|
|
grid-template-areas:
|
|
"header header2"
|
|
"content content"
|
|
"footer2 footer"
|
|
;
|
|
grid-template-columns: 1fr 1fr;
|
|
max-width: 120ch;
|
|
}
|
|
|
|
#content>.content {
|
|
text-align: justify;
|
|
text-justify: auto;
|
|
}
|
|
|
|
ul,ol {
|
|
margin-top:0;
|
|
padding-left: calc(4*var(--margin));
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
img.enlarged {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 80%;
|
|
max-width: 90%;
|
|
object-fit: contain;
|
|
border-radius: 0px;
|
|
background: transparent;
|
|
}
|
|
|
|
#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="/posts" 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 = posts.map(x => `<a href="/posts?post=${x}"><h2>${x}</h2></a>`).join("<br>\n");
|
|
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}.md`);
|
|
let content = await response.text();
|
|
|
|
if (response.status != 200) {
|
|
content = `\nError Exception Null\n#Unknown post '${post}'`
|
|
}
|
|
|
|
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));
|
|
|
|
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>
|