arnaucube/md-live-server
1
0
Fork 0
mirror of https://github.com/arnaucube/md-live-server.git synced 2026-02-07 03:46:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add theme switcher

Browse Source
This commit is contained in:
arnaucube
2020-05-29 00:01:47 +02:00
parent f4a55d1f1e
commit c905e2a5b3
6 changed files with 145 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
go.mod Normal file
View File

@@ -0,0 +1,12 @@
module md-live-server
go 1.14
require (
github.com/fatih/color v1.9.0
github.com/fsnotify/fsnotify v1.4.9
github.com/gorilla/mux v1.7.4
github.com/gorilla/websocket v1.4.2
github.com/russross/blackfriday/v2 v2.0.1
github.com/shurcooL/sanitized_anchor_name v1.0.0 // indirect
)

25
go.sum Normal file
View File

@@ -0,0 +1,25 @@
github.com/fatih/color v1.9.0 h1:8xPHl4/q1VyqGIPif1F+1V3Y3lSmrq01EabUW3CoW5s=
github.com/fatih/color v1.9.0/go.mod h1:eQcE1qtQxscV5RaZvpXrrb8Drkc3/DdQ+uUYCNjL+zU=
github.com/fsnotify/fsnotify v1.4.9 h1:hsms1Qyu0jgnwNXIxa+/V/PDsU6CfLf6CNO8H7IWoS4=
github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
github.com/gorilla/mux v1.7.4 h1:VuZ8uybHlWmqV03+zRzdwKL4tUnIp1MAQtp1mIFE1bc=
github.com/gorilla/mux v1.7.4/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc=
github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
github.com/mattn/go-colorable v0.1.4 h1:snbPLB8fVfU9iwbbo30TPtbLRzwWu6aJS6Xh4eaaviA=
github.com/mattn/go-colorable v0.1.4/go.mod h1:U0ppj6V5qS13XJ6of8GYAs25YV2eR4EVcfRqFIhoBtE=
github.com/mattn/go-isatty v0.0.8/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hdxcsrc5s=
github.com/mattn/go-isatty v0.0.11 h1:FxPOTFNqGkuDUGi3H/qkUbQO4ZiBa2brKq5r0l8TGeM=
github.com/mattn/go-isatty v0.0.11/go.mod h1:PhnuNfih5lzO57/f3n+odYbM4JtupLOxQOAqxQCu2WE=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/russross/blackfriday v1.5.2 h1:HyvC0ARfnZBqnXwABFeSZHpKvJHJJfPz81GNueLj0oo=
github.com/russross/blackfriday/v2 v2.0.1 h1:lPqVAte+HuHNfhJ/0LC98ESWRz8afy9tM/0RK8m9o+Q=
github.com/russross/blackfriday/v2 v2.0.1/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
github.com/shurcooL/sanitized_anchor_name v1.0.0 h1:PdmoCO6wvbs+7yrJyMORt4/BmY5IYyJwS/kOiWx8mHo=
github.com/shurcooL/sanitized_anchor_name v1.0.0/go.mod h1:1NzhyTcUVG4SuEtjjoZeVRXNmyL/1OwPU0+IJeTBvfc=
golang.org/x/sys v0.0.0-20190222072716-a9d3bda3a223/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9 h1:L2auWcuQIvxz9xSEqzESnV/QN/gNRXNApHi3fYwl2w0=
golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/sys v0.0.0-20191026070338-33540a1f6037 h1:YyJpGZS1sBuBCzLAR1VEpK193GlqGZbnPFnPV/5Rsb4=
golang.org/x/sys v0.0.0-20191026070338-33540a1f6037/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=

1
main.go
View File

@@ -68,6 +68,7 @@ func getPage(w http.ResponseWriter, r *http.Request) {
if strings.Split(path, ".")[1] != "md" { if strings.Split(path, ".")[1] != "md" {
http.ServeFile(w, r, path) http.ServeFile(w, r, path)
return
} }
content, err := fileToHTML(path) content, err := fileToHTML(path)

BIN
md-live-server
View File

Binary file not shown.

113
templates.go
View File

@@ -10,14 +10,39 @@ const dirTemplate = `
<style> <style>
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
}
.dark {
background:#000000; background:#000000;
color:#cccccc; color:#cccccc;
} }
</style> </style>
<body> <body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
{{.Content}} {{.Content}}
<script>
let theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = false;
document.body.className = theme;
}
function switchThemeClick() {
theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = true;
theme = "dark";
localStorage.setItem("theme", theme);
} else {
document.getElementById("themeSwitcher").checked = false;
theme = "light";
localStorage.setItem("theme", theme);
}
document.body.className = theme;
}
</script>
</body> </body>
</html> </html>
` `
@@ -29,19 +54,30 @@ const htmlTemplate = `
<style> <style>
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
}
.dark {
background:#000000; background:#000000;
color:#cccccc; color:#cccccc;
} }
pre, code{ pre, code{
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
background: #333333;
border-radius: 3px; border-radius: 3px;
background: #cccccc;
}
.dark pre, .dark code{
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
background: #333333;
} }
pre{ pre{
padding: 5px; padding: 5px;
} }
pre>code { pre>code {
color: #000000;
}
.dark pre>code {
color: #c0fffa; color: #c0fffa;
} }
h1:after{ h1:after{
@@ -54,7 +90,7 @@ h2:after{
display:block; display:block;
border:0.7px solid #cccccc; border:0.7px solid #cccccc;
} }
th{ .dark th{
padding: 3px; padding: 3px;
border: 1px solid #234b4f; border: 1px solid #234b4f;
background-color: #143134; background-color: #143134;
@@ -63,10 +99,50 @@ td{
padding: 3px; padding: 3px;
border: 1px solid #234b4f; border: 1px solid #234b4f;
} }
</style> .container {
<body> width: 100%;
padding-right: 1rem;
padding-left: 1rem;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 900px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 900px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 900px;
}
}
</style>
<body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
<a href="/" title="go to root">root</a>
<div id="content" class="container">
{{.Content}} {{.Content}}
</div>
<script> <script>
(function() { (function() {
@@ -78,10 +154,32 @@ td{
conn.onmessage = function(evt) { conn.onmessage = function(evt) {
console.log('file updated'); console.log('file updated');
// location.reload(); // location.reload();
console.log("evt", evt); // console.log("evt", evt);
document.getElementsByTagName("BODY")[0].innerHTML = evt.data; document.getElementById("content").innerHTML = evt.data;
} }
})(); })();
let theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = false;
document.body.className = theme;
}
function switchThemeClick() {
theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = true;
theme = "dark";
localStorage.setItem("theme", theme);
} else {
document.getElementById("themeSwitcher").checked = false;
theme = "light";
localStorage.setItem("theme", theme);
}
document.body.className = theme;
}
</script> </script>
</body> </body>
</html> </html>
@@ -99,6 +197,7 @@ body {
} }
</style> </style>
<body> <body>
<a href="/" title="go to root">root</a>
<h3>File doesn't exist</h3> <h3>File doesn't exist</h3>
<br><br> <br><br>

2
utils.go
View File

@@ -6,7 +6,7 @@ import (
"path/filepath" "path/filepath"
"github.com/fatih/color" "github.com/fatih/color"
blackfriday "gopkg.in/russross/blackfriday.v2" blackfriday "github.com/russross/blackfriday/v2"
) )
func check(err error) { func check(err error) {