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<!-- LaTex renderization -->
156<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
157
158<!-- The loading of KaTeX is deferred to speed up page rendering -->
159<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
160
161<!-- To automatically render math in text elements, include the auto-render extension: -->
162<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>
163
164<script>
165 document.addEventListener("DOMContentLoaded", function() {
166 renderMathInElement(document.body, {
167 // customised options
168 // • auto-render specific keys, e.g.:
169 delimiters: [
170 {left: '$$', right: '$$', display: true},
171 {left: '$', right: '$', display: true},
172 {left: '\\(', right: '\\)', display: false},
173 {left: '\\[', right: '\\]', display: true}
174 ],
175 // • rendering keys, e.g.:
176 throwOnError : false
177 });
178 });
179</script>
180
181<script>
182(function() {
183 var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
184 conn.onclose = function(evt) {
185 console.log('Connection closed');
186 alert('Connection closed');
187 }
188 conn.onmessage = function(evt) {
189 console.log('file updated');
190 // location.reload();
191 // console.log("evt", evt);
192 document.getElementById("content").innerHTML = evt.data;
193
194 renderMathInElement(document.body, {
195 // customised options
196 // • auto-render specific keys, e.g.:
197 delimiters: [
198 {left: '$$', right: '$$', display: true},
199 {left: '$', right: '$', display: false},
200 {left: '\\(', right: '\\)', display: false},
201 {left: '\\[', right: '\\]', display: true}
202 ],
203 // • rendering keys, e.g.:
204 throwOnError : false
205 });
206
207 }
208})();
209
210
211 let theme = localStorage.getItem("theme");
212 if (theme === "light") {
213 document.getElementById("themeSwitcher").checked = false;
214 document.body.className = theme;
215 }
216
217 function switchThemeClick() {
218 theme = localStorage.getItem("theme");
219 if (theme === "light") {
220 document.getElementById("themeSwitcher").checked = true;
221 theme = "dark";
222 localStorage.setItem("theme", theme);
223 } else {
224 document.getElementById("themeSwitcher").checked = false;
225 theme = "light";
226 localStorage.setItem("theme", theme);
227 }
228 document.body.className = theme;
229 }
230
231</script>
232</body>
233</html>
234`
235
236const errTemplate = `
237<!DOCTYPE html>
238<html>
239<title>{{.Title}}</title>
240<style>
241body {
242 font-family: Arial, Helvetica, sans-serif;
243 background:#000000;
244 color:#cccccc;
245}
246</style>
247<body>
248 <a href="/" title="go to root">root</a>
249
250<h3>File doesn't exist</h3>
251<br><br>
252<a href="/">Back to dir menu</a>
253
254</body>
255</html>
256`