md-live-server/templates.go
templates.goRaw
1package main
2
3import (
4 "strings"
5)
6
7// html templates are here instead of an .html file to avoid depending on external files
8// in this way, everything is inside the binary
9
10func fillCSSintoTemplate(template string) string {
11 if strings.Contains(template, "[CSS]") {
12 template = strings.Replace(template, "[CSS]", cssTemplate, -1)
13 }
14 return template
15}
16
17var dirTemplate = `
18<!DOCTYPE html>
19<html>
20<title>{{.Title}}</title>
21[CSS]
22<style>
23body {
24 box-sizing: border-box;
25 min-width: 200px;
26 max-width: 980px;
27 margin: 0 auto;
28 padding: 45px;
29}
30
31@media (prefers-color-scheme: dark) {
32 body {
33 background-color: #0d1117;
34 }
35}
36</style>
37<body class="dark-theme">
38<article class="markdown-body">
39 <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
40
41{{.Content}}
42
43<script>
44 let theme = localStorage.getItem("theme");
45 if (theme === "light") {
46 document.getElementById("themeSwitcher").checked = false;
47 document.body.className = theme;
48 } else {
49 document.getElementById("themeSwitcher").checked = true;
50 }
51
52 function switchThemeClick() {
53 theme = localStorage.getItem("theme");
54 if (theme === "light") {
55 document.getElementById("themeSwitcher").checked = true;
56 theme = "dark-theme";
57 localStorage.setItem("theme", theme);
58 } else {
59 document.getElementById("themeSwitcher").checked = false;
60 theme = "light";
61 localStorage.setItem("theme", theme);
62 }
63 document.body.className = theme;
64 }
65</script>
66
67</article>
68</body>
69</html>
70`
71
72var htmlTemplate = `
73<!DOCTYPE html>
74<html>
75<title>{{.Title}}</title>
76[CSS]
77<style>
78body {
79 box-sizing: border-box;
80 min-width: 200px;
81 max-width: 980px;
82 margin: 0 auto;
83 padding: 45px;
84}
85
86@media (prefers-color-scheme: dark) {
87 body {
88 background-color: #0d1117;
89 }
90}
91</style>
92
93<body class="dark-theme">
94<article class="markdown-body">
95<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
96<a href="/" title="go to root">root</a>
97<div id="content" class="container">
98{{.Content}}
99</div>
100
101
102<!-- TODO: make all the imports locally, to allow working offline -->
103
104<!-- LaTex renderization -->
105<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
106
107<!-- The loading of KaTeX is deferred to speed up page rendering -->
108<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
109
110<!-- To automatically render math in text elements, include the auto-render extension: -->
111<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
112
113<!-- Mermaidjs -->
114<script type="module">
115 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
116 mermaid.initialize({ startOnLoad: false });
117
118 window.renderMermaid = async function() {
119 document.querySelectorAll('pre > code.language-mermaid').forEach(function(codeBlock) {
120 const pre = codeBlock.parentElement;
121 pre.className = 'mermaid';
122 pre.textContent = codeBlock.textContent;
123 });
124
125 await mermaid.run({ querySelector: '.mermaid' });
126 };
127</script>
128
129<script>
130 document.addEventListener("DOMContentLoaded", function() {
131 renderMathInElement(document.body, {
132 // customised options
133 // • auto-render specific keys, e.g.:
134 delimiters: [
135 {left: '$$', right: '$$', display: true},
136 {left: '$', right: '$', display: true},
137 {left: '\\(', right: '\\)', display: false},
138 {left: '\\[', right: '\\]', display: true}
139 ],
140 // • rendering keys, e.g.:
141 throwOnError : false
142 });
143
144 if (window.renderMermaid) {
145 window.renderMermaid().catch(console.error);
146 }
147 });
148</script>
149
150<script>
151(function() {
152
153 var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
154 conn.onclose = function(evt) {
155 console.log('Connection closed');
156 alert('Connection closed');
157 }
158 conn.onmessage = function(evt) {
159 console.log('file updated');
160 // location.reload();
161 // console.log("evt", evt);
162 document.getElementById("content").innerHTML = evt.data;
163
164 renderMathInElement(document.body, {
165 // customised options
166 // • auto-render specific keys, e.g.:
167 delimiters: [
168 {left: '$$', right: '$$', display: true},
169 {left: '$', right: '$', display: false},
170 {left: '\\(', right: '\\)', display: false},
171 {left: '\\[', right: '\\]', display: true}
172 ],
173 // • rendering keys, e.g.:
174 throwOnError : false
175 });
176
177 if (window.renderMermaid) {
178 window.renderMermaid().catch(console.error);
179 }
180 }
181})();
182
183
184 let theme = localStorage.getItem("theme");
185 if (theme === "light") {
186 document.getElementById("themeSwitcher").checked = false;
187 document.body.className = theme;
188 } else {
189 document.getElementById("themeSwitcher").checked = true;
190 }
191
192 function switchThemeClick() {
193 theme = localStorage.getItem("theme");
194 if (theme === "light") {
195 document.getElementById("themeSwitcher").checked = true;
196 theme = "dark-theme";
197 localStorage.setItem("theme", theme);
198 } else {
199 document.getElementById("themeSwitcher").checked = false;
200 theme = "light";
201 localStorage.setItem("theme", theme);
202 }
203 document.body.className = theme;
204 }
205
206</script>
207</article>
208</body>
209</html>
210`
211
212const errTemplate = `
213<!DOCTYPE html>
214<html>
215<title>{{.Title}}</title>
216<style>
217body {
218 font-family: Arial, Helvetica, sans-serif;
219 background:#000000;
220 color:#cccccc;
221}
222</style>
223<body>
224 <a href="/" title="go to root">root</a>
225
226<h3>File doesn't exist</h3>
227<br><br>
228<a href="/">Back to dir menu</a>
229
230</body>
231</html>
232`