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</script>
117
118<script>
119 document.addEventListener("DOMContentLoaded", function() {
120 renderMathInElement(document.body, {
121 // customised options
122 // • auto-render specific keys, e.g.:
123 delimiters: [
124 {left: '$$', right: '$$', display: true},
125 {left: '$', right: '$', display: true},
126 {left: '\\(', right: '\\)', display: false},
127 {left: '\\[', right: '\\]', display: true}
128 ],
129 // • rendering keys, e.g.:
130 throwOnError : false
131 });
132 });
133</script>
134
135<script>
136(function() {
137
138 var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
139 conn.onclose = function(evt) {
140 console.log('Connection closed');
141 alert('Connection closed');
142 }
143 conn.onmessage = function(evt) {
144 console.log('file updated');
145 // location.reload();
146 // console.log("evt", evt);
147 document.getElementById("content").innerHTML = evt.data;
148
149 renderMathInElement(document.body, {
150 // customised options
151 // • auto-render specific keys, e.g.:
152 delimiters: [
153 {left: '$$', right: '$$', display: true},
154 {left: '$', right: '$', display: false},
155 {left: '\\(', right: '\\)', display: false},
156 {left: '\\[', right: '\\]', display: true}
157 ],
158 // • rendering keys, e.g.:
159 throwOnError : false
160 });
161 }
162})();
163
164
165 let theme = localStorage.getItem("theme");
166 if (theme === "light") {
167 document.getElementById("themeSwitcher").checked = false;
168 document.body.className = theme;
169 } else {
170 document.getElementById("themeSwitcher").checked = true;
171 }
172
173 function switchThemeClick() {
174 theme = localStorage.getItem("theme");
175 if (theme === "light") {
176 document.getElementById("themeSwitcher").checked = true;
177 theme = "dark-theme";
178 localStorage.setItem("theme", theme);
179 } else {
180 document.getElementById("themeSwitcher").checked = false;
181 theme = "light";
182 localStorage.setItem("theme", theme);
183 }
184 document.body.className = theme;
185 }
186
187</script>
188</article>
189</body>
190</html>
191`
192
193const errTemplate = `
194<!DOCTYPE html>
195<html>
196<title>{{.Title}}</title>
197<style>
198body {
199 font-family: Arial, Helvetica, sans-serif;
200 background:#000000;
201 color:#cccccc;
202}
203</style>
204<body>
205 <a href="/" title="go to root">root</a>
206
207<h3>File doesn't exist</h3>
208<br><br>
209<a href="/">Back to dir menu</a>
210
211</body>
212</html>
213`