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