99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="lib/highlight/styles/tokyo-night-dark.min.css">
|
|
<script src="lib/highlight/highlight.min.js"></script>
|
|
<link href="lib/katex/katex.min.css" rel="stylesheet" type="text/css">
|
|
<script src="lib/katex/katex.min.js"></script>
|
|
<script src="lib/katex/contrib/auto-render.min.js"></script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<header class="page-header">
|
|
<h1 id="page-title" class="page-title">{{ title }}</h1>
|
|
<div class="page-subtitle">
|
|
<div id="page-author" class="page-author">{{ course }}</div>
|
|
<div class="page-date">Date: <span id="date">{{ date }}</span></div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="page-content" class="page-content">
|
|
{% raw body_content %}
|
|
</div>
|
|
|
|
<script>
|
|
hljs.highlightAll();
|
|
renderMathInElement(
|
|
document.body,
|
|
{
|
|
delimiters : [
|
|
{left: "$$", right: "$$", display: true},
|
|
{left: "\\[", right: "\\]", display: true},
|
|
{left: "$", right: "$", display: false},
|
|
{left: "\\(", right: "\\)", display: false}
|
|
]
|
|
});
|
|
|
|
const socket = new WebSocket("ws://localhost:8888/ws");
|
|
|
|
socket.addEventListener("open", (event) => {
|
|
socket.send("ping");
|
|
});
|
|
|
|
function change_body(v) {
|
|
const node = document.getElementById("page-content");
|
|
const wrapper = document.createElement("div");
|
|
wrapper.innerHTML = v;
|
|
node.replaceChildren(wrapper);
|
|
|
|
hljs.highlightAll();
|
|
renderMathInElement(
|
|
node,
|
|
{
|
|
delimiters : [
|
|
{left: "$$", right: "$$", display: true},
|
|
{left: "\\[", right: "\\]", display: true},
|
|
{left: "$", right: "$", display: false},
|
|
{left: "\\(", right: "\\)", display: false}
|
|
]
|
|
});
|
|
}
|
|
|
|
function change_header(k,v) {
|
|
const dict = {
|
|
'title' : 'page-title',
|
|
'date' : 'date',
|
|
'course' : 'page-author'
|
|
}
|
|
|
|
const node = document.getElementById(dict[k])
|
|
node.replaceChildren(v);
|
|
}
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
var data = JSON.parse(event.data);
|
|
Object.entries(data).forEach(([k,v]) => {
|
|
switch (k) {
|
|
case "scroll":
|
|
var height = window.scrollHeight
|
|
|| document.body.scrollHeight;
|
|
|
|
window.scrollTo({left : 0, top: height * v, behavior: 'smooth'});
|
|
break;
|
|
case "show":
|
|
change_body(v)
|
|
break;
|
|
case "title":
|
|
case "date":
|
|
case "course":
|
|
change_header(k,v);
|
|
break;
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|