thp-lang.org/static/template.html

73 lines
2.4 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
2023-10-05 12:56:34 +00:00
<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>
2023-10-05 12:56:34 +00:00
<link
2024-03-28 01:55:35 +00:00
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap"
2023-10-05 12:56:34 +00:00
rel="stylesheet">
</head>
2023-10-05 12:56:34 +00:00
<body class="bg-c-bg text-c-text">
2024-01-14 00:08:57 +00:00
<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">
2024-03-28 01:55:35 +00:00
<a href="/" class="font-display font-bold text-2xl">
2023-10-05 12:56:34 +00:00
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
2024-01-14 00:08:57 +00:00
</a>
2023-10-05 12:56:34 +00:00
</div>
</nav>
2024-03-28 01:55:35 +00:00
<div class="grid grid-cols-[14rem_auto_12rem] container mx-auto">
<div class="pt-12 h-screen sticky top-0">
2024-01-14 00:08:57 +00:00
<nav class="py-4 pr-2 overflow-x-scroll"
style="height: calc(100vh - 3rem);"
2023-10-05 12:56:34 +00:00
>
{{pages}}
</nav>
</div>
2024-03-28 01:55:35 +00:00
<main class="py-[3.5rem] pl-12 pr-4 markdown min-w-0">
{{markdown}}
</main>
<div class="pt-12 max-h-screen overflow-x-scroll sticky top-0">
<nav class="rounded-md mt-10">
<h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2>
2023-10-05 12:56:34 +00:00
2023-07-01 01:55:29 +00:00
{{sidebar}}
</nav>
</div>
</div>
2023-10-02 02:26:57 +00:00
<script src="/js/highlighter.js"></script>
<script>
// Add an editor to all code samples
const code_elements = document.querySelectorAll(".language-thp");
2023-10-05 12:56:34 +00:00
for (const el of [...code_elements]) {
const pre_parent = el.parentElement;
const new_div = document.createElement("div");
2024-03-27 17:15:32 +00:00
const code = el.innerText;
el.parentElement.classList.add("language-thp");
pre_parent.removeChild(el);
pre_parent.appendChild(new_div);
CodeJar(new_div, thp_highlighter, {
tab: " "
}).updateCode(code);
}
</script>
</body>
</html>