folkert/MarkdownPreviewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move dirs

Browse Source
This commit is contained in:
Folkert Kevelam 2025-08-24 18:01:06 +02:00
parent fe20509060
commit 9ae19d743b
2 changed files with 57 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Server/MarkdownPreviewer/static/style.css → data/css/style.css
View File

@ -17,6 +17,7 @@
--secondary-color: #34A853; --secondary-color: #34A853;
--accent-color: #EA4335; --accent-color: #EA4335;
--background-color: white; --background-color: white;
--quote-bg-color: #F5F5F5;
--text-color: #222222; --text-color: #222222;
--light-gray: #ECF0F1; --light-gray: #ECF0F1;
--dark-gray: #303333; --dark-gray: #303333;
@ -40,9 +41,13 @@
--spacing-medium: 1rem; --spacing-medium: 1rem;
--spacing-large: 2rem; --spacing-large: 2rem;
--quote-blue: #0726b0;
--border-radius: 4px; --border-radius: 4px;
--border-width: 2px; --border-width: 2px;
--blockquote-width: 8px;
--shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-medium: 0 2px 6px rgba(0,0,0,0.12); --shadow-medium: 0 2px 6px rgba(0,0,0,0.12);
@ -62,6 +67,17 @@ body {
padding: 0; padding: 0;
} }
blockquote {
border-left: var(--blockquote-width) solid var(--quote-blue);
border-radius: var(--border-radius);
margin-left: 0px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-color: var(--quote-bg-color);
}
.page-header { .page-header {
margin-bottom: var(--spacing-large); margin-bottom: var(--spacing-large);
text-align: center; text-align: center;

55
Server/template/index.html → template/index.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="highlight/styles/tokyo-night-dark.min.css"> <link rel="stylesheet" href="lib/highlight/styles/tokyo-night-dark.min.css">
<script src="highlight/highlight.min.js"></script> <script src="lib/highlight/highlight.min.js"></script>
<link href="katex/katex.min.css" rel="stylesheet" type="text/css"> <link href="lib/katex/katex.min.css" rel="stylesheet" type="text/css">
<script src="katex/katex.min.js"></script> <script src="lib/katex/katex.min.js"></script>
<script src="katex/contrib/auto-render.min.js"></script> <script src="lib/katex/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="style.css"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<header class="page-header"> <header class="page-header">
<h1 class="page-title">Your Note Title</h1> <h1 id="page-title" class="page-title">{{ title }}</h1>
<div class="page-subtitle"> <div class="page-subtitle">
<div class="page-author">Author: Your Name</div> <div id="page-author" class="page-author">{{ course }}</div>
<div class="page-date">Date: August 1, 2025</div> <div class="page-date">Date: <span id="date">{{ date }}</span></div>
</div> </div>
</header> </header>
@ -42,11 +42,10 @@
socket.send("ping"); socket.send("ping");
}); });
socket.addEventListener("message", (event) => { function change_body(v) {
var data = JSON.parse(event.data); const node = document.getElementById("page-content");
var node = document.getElementById("page-content"); const wrapper = document.createElement("div");
var wrapper = document.createElement('div'); wrapper.innerHTML = v;
wrapper.innerHTML = data['show'];
node.replaceChildren(wrapper); node.replaceChildren(wrapper);
hljs.highlightAll(); hljs.highlightAll();
@ -60,6 +59,34 @@
{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]) => {
console.log(k,v);
switch (k) {
case "show":
change_body(v)
break;
case "title":
case "date":
case "course":
change_header(k,v);
break;
}
})
}); });
</script> </script>
</body> </body>