98 lines
3.4 KiB
HTML
98 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>THP: Typed Hypertext Processor</title>
|
|
|
|
<!-- Tailwind output -->
|
|
<link href="/css/out.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="/css/xcode-colors.css">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-c-bg text-c-text">
|
|
<nav class="fixed w-screen top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
|
|
<div class="container mx-auto h-full w-full flex items-center">
|
|
<a href="/" class="font-display font-bold text-2xl">
|
|
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="lg:grid lg:grid-cols-[14rem_auto_12rem] container mx-auto">
|
|
<div class="pt-12 lg:h-screen lg:sticky top-0">
|
|
<nav id="sidebar" class="py-4 pr-2 overflow-x-scroll lg:h-[calc(100vh-3rem)]"
|
|
>
|
|
{{pages}}
|
|
</nav>
|
|
</div>
|
|
|
|
<main class="lg:py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0">
|
|
{{markdown}}
|
|
</main>
|
|
|
|
<div class="lg:pt-12 pt-4 max-h-screen overflow-x-scroll sticky top-0">
|
|
<nav class="rounded-md lg:mt-10">
|
|
<h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2>
|
|
|
|
{{sidebar}}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let current_uri = window.location.pathname;
|
|
if (!current_uri.endsWith("/") && !current_uri.endsWith(".html")) {
|
|
current_uri += ".html";
|
|
}
|
|
|
|
const sidebar = document.getElementById("sidebar");
|
|
const links = sidebar.querySelectorAll("a");
|
|
for (const link of [...links]) {
|
|
if (link.getAttribute("href") === current_uri) {
|
|
console.log(sidebar.offsetTop);
|
|
console.log(link.offsetTop);
|
|
|
|
const viewport_middle = window.innerHeight / 2;
|
|
|
|
sidebar.scrollTop = link.offsetTop - sidebar.offsetTop - 250;
|
|
|
|
link.classList.add("bg-pink-200", "dark:bg-pink-950");
|
|
// link.scrollIntoView({ behavior: "instant", block: "nearest", inline: "nearest" });
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<script src="/js/highlighter.js"></script>
|
|
<script>
|
|
// Add an editor to all code samples
|
|
|
|
const code_elements = document.querySelectorAll(".language-thp");
|
|
|
|
for (const el of [...code_elements]) {
|
|
const pre_parent = el.parentElement;
|
|
const new_div = document.createElement("div");
|
|
const code = el.innerText;
|
|
|
|
el.parentElement.className = "language-thp"
|
|
pre_parent.removeChild(el);
|
|
pre_parent.appendChild(new_div);
|
|
|
|
CodeJar(new_div, thp_highlighter, {
|
|
tab: " "
|
|
}).updateCode(code);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |