Add theme switcher

4 years ago · c905e2a5b3
6 changed files with 145 additions and 8 deletions
--- a/go.mod
+++ b/go.mod
@ -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
 )
--- a/go.sum
+++ b/go.sum
@ -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=
--- a/main.go
+++ b/main.go
@ -68,6 +68,7 @@ func getPage(w http.ResponseWriter, r *http.Request) {

 	if strings.Split(path, ".")[1] != "md" {
 		http.ServeFile(w, r, path)
 		return
 	}

 	content, err := fileToHTML(path)
--- a/BIN
+++ b/BIN
--- a/templates.go
+++ b/templates.go
@ -10,14 +10,39 @@ const dirTemplate = `
 <style>
 body {
    font-family: Arial, Helvetica, sans-serif;
 }
 .dark {
    background:#000000;
    color:#cccccc;
 }
 </style>
 <body>
 <body class="dark">
    <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">

 {{.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>
 </html>
 `
@ -29,19 +54,30 @@ const htmlTemplate = `
 <style>
 body {
    font-family: Arial, Helvetica, sans-serif;
 }
 .dark {
    background:#000000;
    color:#cccccc;
 }
 pre, code{
    padding-left: 3px;
    padding-right: 3px;
    background: #333333;
    border-radius: 3px;
    background: #cccccc;
 }
 .dark pre, .dark code{
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    background: #333333;
 }
 pre{
    padding: 5px;
 }
 pre>code {
    color: #000000;
 }
 .dark pre>code {
    color: #c0fffa;
 }
 h1:after{
@ -54,7 +90,7 @@ h2:after{
    display:block;
    border:0.7px solid #cccccc;
 }
 th{
 .dark th{
    padding: 3px;
    border: 1px solid #234b4f;
    background-color: #143134;
@ -63,10 +99,50 @@ td{
    padding: 3px;
    border: 1px solid #234b4f;
 }
 </style>
 <body>
 .container {
  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}}
 </div>

 <script>
 (function() {
@ -78,10 +154,32 @@ td{
 	conn.onmessage = function(evt) {
 	    console.log('file updated');
 	    // location.reload();
 	    console.log("evt", evt);
 	    document.getElementsByTagName("BODY")[0].innerHTML = evt.data;
 	    // console.log("evt", evt);
 	    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>
 </body>
 </html>
@ -99,6 +197,7 @@ body {
 }
 </style>
 <body>
    <a href="/" title="go to root">root</a>

 <h3>File doesn't exist</h3>
 <br><br>
--- a/utils.go
+++ b/utils.go
@ -6,7 +6,7 @@ import (
 	"path/filepath"

 	"github.com/fatih/color"
 	blackfriday "gopkg.in/russross/blackfriday.v2"
 	blackfriday "github.com/russross/blackfriday/v2"
 )

 func check(err error) {