diff --git a/README.md b/README.md index d7a13bb..ff9abe8 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,23 @@ -livemd -====== +# livemd -Live Markdown Rendering In Go \ No newline at end of file +## Overview + +I wanted a simple tool that watched file updates as I worked on design docs. +I also didn't want to `npm install` anything. So I wrote a server in Go, with live Markdown updates over websockets. + +## Libraries Used + +* [github.com/russross/blackfriday](https://github.com/russross/blackfriday) +* [golang.org/x/net/websocket](https://golang.org/x/net/websocket) +* [gopkg.in/fsnotify.v1](https://github.com/go-fsnotify/fsnotify) + +## Usage +``` +go get github.com/barakmich/livemd +cd $PROJECT_DIR +livemd +``` + +## License + +BSD diff --git a/github_markdown.go b/github_markdown.go new file mode 100644 index 0000000..7b743ed --- /dev/null +++ b/github_markdown.go @@ -0,0 +1,665 @@ +package main + +var githubCss = ` +@font-face { + font-family: octicons-anchor; + src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); +} + +.markdown-body { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: #333; + overflow: hidden; + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + font-size: 16px; + line-height: 1.6; + word-wrap: break-word; +} + +.markdown-body a { + background: transparent; +} + +.markdown-body a:active, +.markdown-body a:hover { + outline: 0; +} + +.markdown-body strong { + font-weight: bold; +} + +.markdown-body h1 { + font-size: 2em; + margin: 0.67em 0; +} + +.markdown-body img { + border: 0; +} + +.markdown-body hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +.markdown-body pre { + overflow: auto; +} + +.markdown-body code, +.markdown-body kbd, +.markdown-body pre { + font-family: monospace, monospace; + font-size: 1em; +} + +.markdown-body input { + color: inherit; + font: inherit; + margin: 0; +} + +.markdown-body html input[disabled] { + cursor: default; +} + +.markdown-body input { + line-height: normal; +} + +.markdown-body input[type="checkbox"] { + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} + +.markdown-body table { + border-collapse: collapse; + border-spacing: 0; +} + +.markdown-body td, +.markdown-body th { + padding: 0; +} + +.markdown-body * { + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.markdown-body input { + font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.markdown-body a { + color: #4183c4; + text-decoration: none; +} + +.markdown-body a:hover, +.markdown-body a:active { + text-decoration: underline; +} + +.markdown-body hr { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; +} + +.markdown-body hr:before { + display: table; + content: ""; +} + +.markdown-body hr:after { + display: table; + clear: both; + content: ""; +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + margin-top: 15px; + margin-bottom: 15px; + line-height: 1.1; +} + +.markdown-body h1 { + font-size: 30px; +} + +.markdown-body h2 { + font-size: 21px; +} + +.markdown-body h3 { + font-size: 16px; +} + +.markdown-body h4 { + font-size: 14px; +} + +.markdown-body h5 { + font-size: 12px; +} + +.markdown-body h6 { + font-size: 11px; +} + +.markdown-body blockquote { + margin: 0; +} + +.markdown-body ul, +.markdown-body ol { + padding: 0; + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body ol ol, +.markdown-body ul ol { + list-style-type: lower-roman; +} + +.markdown-body ul ul ol, +.markdown-body ul ol ol, +.markdown-body ol ul ol, +.markdown-body ol ol ol { + list-style-type: lower-alpha; +} + +.markdown-body dd { + margin-left: 0; +} + +.markdown-body code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 12px; +} + +.markdown-body pre { + margin-top: 0; + margin-bottom: 0; + font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; +} + +.markdown-body .octicon { + font: normal normal 16px octicons-anchor; + line-height: 1; + display: inline-block; + text-decoration: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.markdown-body .octicon-link:before { + content: '\f05c'; +} + +.markdown-body>*:first-child { + margin-top: 0 !important; +} + +.markdown-body>*:last-child { + margin-bottom: 0 !important; +} + +.markdown-body .anchor { + position: absolute; + top: 0; + left: 0; + display: block; + padding-right: 6px; + padding-left: 30px; + margin-left: -30px; +} + +.markdown-body .anchor:focus { + outline: none; +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + position: relative; + margin-top: 1em; + margin-bottom: 16px; + font-weight: bold; + line-height: 1.4; +} + +.markdown-body h1 .octicon-link, +.markdown-body h2 .octicon-link, +.markdown-body h3 .octicon-link, +.markdown-body h4 .octicon-link, +.markdown-body h5 .octicon-link, +.markdown-body h6 .octicon-link { + display: none; + color: #000; + vertical-align: middle; +} + +.markdown-body h1:hover .anchor, +.markdown-body h2:hover .anchor, +.markdown-body h3:hover .anchor, +.markdown-body h4:hover .anchor, +.markdown-body h5:hover .anchor, +.markdown-body h6:hover .anchor { + padding-left: 8px; + margin-left: -30px; + text-decoration: none; +} + +.markdown-body h1:hover .anchor .octicon-link, +.markdown-body h2:hover .anchor .octicon-link, +.markdown-body h3:hover .anchor .octicon-link, +.markdown-body h4:hover .anchor .octicon-link, +.markdown-body h5:hover .anchor .octicon-link, +.markdown-body h6:hover .anchor .octicon-link { + display: inline-block; +} + +.markdown-body h1 { + padding-bottom: 0.3em; + font-size: 2.25em; + line-height: 1.2; + border-bottom: 1px solid #eee; +} + +.markdown-body h1 .anchor { + line-height: 1; +} + +.markdown-body h2 { + padding-bottom: 0.3em; + font-size: 1.75em; + line-height: 1.225; + border-bottom: 1px solid #eee; +} + +.markdown-body h2 .anchor { + line-height: 1; +} + +.markdown-body h3 { + font-size: 1.5em; + line-height: 1.43; +} + +.markdown-body h3 .anchor { + line-height: 1.2; +} + +.markdown-body h4 { + font-size: 1.25em; +} + +.markdown-body h4 .anchor { + line-height: 1.2; +} + +.markdown-body h5 { + font-size: 1em; +} + +.markdown-body h5 .anchor { + line-height: 1.1; +} + +.markdown-body h6 { + font-size: 1em; + color: #777; +} + +.markdown-body h6 .anchor { + line-height: 1.1; +} + +.markdown-body p, +.markdown-body blockquote, +.markdown-body ul, +.markdown-body ol, +.markdown-body dl, +.markdown-body table, +.markdown-body pre { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-body hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: #e7e7e7; + border: 0 none; +} + +.markdown-body ul, +.markdown-body ol { + padding-left: 2em; +} + +.markdown-body ul ul, +.markdown-body ul ol, +.markdown-body ol ol, +.markdown-body ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body li>p { + margin-top: 16px; +} + +.markdown-body dl { + padding: 0; +} + +.markdown-body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: bold; +} + +.markdown-body dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-body blockquote { + padding: 0 15px; + color: #777; + border-left: 4px solid #ddd; +} + +.markdown-body blockquote>:first-child { + margin-top: 0; +} + +.markdown-body blockquote>:last-child { + margin-bottom: 0; +} + +.markdown-body table { + display: block; + width: 100%; + overflow: auto; + word-break: normal; + word-break: keep-all; +} + +.markdown-body table th { + font-weight: bold; +} + +.markdown-body table th, +.markdown-body table td { + padding: 6px 13px; + border: 1px solid #ddd; +} + +.markdown-body table tr { + background-color: #fff; + border-top: 1px solid #ccc; +} + +.markdown-body table tr:nth-child(2n) { + background-color: #f8f8f8; +} + +.markdown-body img { + max-width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.markdown-body code { + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; + margin: 0; + font-size: 85%; + background-color: rgba(0,0,0,0.04); + border-radius: 3px; +} + +.markdown-body code:before, +.markdown-body code:after { + letter-spacing: -0.2em; + content: "\00a0"; +} + +.markdown-body pre>code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-body .highlight { + margin-bottom: 16px; +} + +.markdown-body .highlight pre, +.markdown-body pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f7f7f7; + border-radius: 3px; +} + +.markdown-body .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-body pre { + word-wrap: normal; +} + +.markdown-body pre code { + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markdown-body pre code:before, +.markdown-body pre code:after { + content: normal; +} + +.markdown-body kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #555; + vertical-align: middle; + background-color: #fcfcfc; + border: solid 1px #ccc; + border-bottom-color: #bbb; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #bbb; +} + +.markdown-body .pl-c { + color: #969896; +} + +.markdown-body .pl-c1, +.markdown-body .pl-mdh, +.markdown-body .pl-mm, +.markdown-body .pl-mp, +.markdown-body .pl-mr, +.markdown-body .pl-s1 .pl-v, +.markdown-body .pl-s3, +.markdown-body .pl-sc, +.markdown-body .pl-sv { + color: #0086b3; +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #795da3; +} + +.markdown-body .pl-s1 .pl-s2, +.markdown-body .pl-smi, +.markdown-body .pl-smp, +.markdown-body .pl-stj, +.markdown-body .pl-vo, +.markdown-body .pl-vpf { + color: #333; +} + +.markdown-body .pl-ent { + color: #63a35c; +} + +.markdown-body .pl-k, +.markdown-body .pl-s, +.markdown-body .pl-st { + color: #a71d5d; +} + +.markdown-body .pl-pds, +.markdown-body .pl-s1, +.markdown-body .pl-s1 .pl-pse .pl-s2, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sra, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-src { + color: #df5000; +} + +.markdown-body .pl-mo, +.markdown-body .pl-v { + color: #1d3e81; +} + +.markdown-body .pl-id { + color: #b52a1d; +} + +.markdown-body .pl-ii { + background-color: #b52a1d; + color: #f8f8f8; +} + +.markdown-body .pl-sr .pl-cce { + color: #63a35c; + font-weight: bold; +} + +.markdown-body .pl-ml { + color: #693a17; +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + color: #1d3e81; + font-weight: bold; +} + +.markdown-body .pl-mq { + color: #008080; +} + +.markdown-body .pl-mi { + color: #333; + font-style: italic; +} + +.markdown-body .pl-mb { + color: #333; + font-weight: bold; +} + +.markdown-body .pl-md, +.markdown-body .pl-mdhf { + background-color: #ffecec; + color: #bd2c00; +} + +.markdown-body .pl-mdht, +.markdown-body .pl-mi1 { + background-color: #eaffea; + color: #55a532; +} + +.markdown-body .pl-mdr { + color: #795da3; + font-weight: bold; +} + +.markdown-body kbd { + display: inline-block; + padding: 3px 5px; + font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 10px; + color: #555; + vertical-align: middle; + background-color: #fcfcfc; + border: solid 1px #ccc; + border-bottom-color: #bbb; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #bbb; +} + +.markdown-body .task-list-item { + list-style-type: none; +} + +.markdown-body .task-list-item+.task-list-item { + margin-top: 3px; +} + +.markdown-body .task-list-item input { + float: left; + margin: 0.3em 0 0.25em -1.6em; + vertical-align: middle; +} + +.markdown-body :checked+.radio-label { + z-index: 1; + position: relative; + border-color: #4183c4; +} +` diff --git a/livemd.go b/livemd.go index 9b2089a..96b9ee5 100644 --- a/livemd.go +++ b/livemd.go @@ -1,7 +1,7 @@ package main import ( - "fmt" + "io/ioutil" "log" "net/http" "os" @@ -23,6 +23,28 @@ var rootTmpl *template.Template var pageTmpl *template.Template var path string +type state int + +const ( + None state = iota + Open + Close +) + +type Listener struct { + File string + Socket *websocket.Conn + State state +} + +type Update struct { + File string +} + +type BrowserMsg struct { + Markdown string +} + func init() { var err error rootTmpl, err = template.New("root").Parse(rootTemplate) @@ -64,17 +86,18 @@ func AddWatch(w *fsnotify.Watcher) filepath.WalkFunc { } } -func WatcherEventLoop(w *fsnotify.Watcher, done chan bool) { +func WatcherEventLoop(w *fsnotify.Watcher, updates chan Update, done chan bool) { for { select { case event := <-w.Events: - log.Println("Event:", event) + // log.Println("Event:", event) // TODO(barakmich): On directory creation, stat path if directory, and watch it. if HasMarkdownSuffix(event.Name) { + subfile := strings.TrimPrefix(event.Name, path) if event.Op == fsnotify.Write { + updates <- Update{subfile} } } - case err := <-w.Errors: log.Println("Error:", err) done <- true @@ -82,28 +105,92 @@ func WatcherEventLoop(w *fsnotify.Watcher, done chan bool) { } } +func writeFileForListener(l Listener) { + var data []byte + file, err := os.Open(filepath.Join(path, l.File)) + if err != nil { + data = []byte("Error: " + err.Error()) + } + filebytes, err := ioutil.ReadAll(file) + if err != nil { + data = []byte("Error: " + err.Error()) + } + data = blackfriday.MarkdownCommon(filebytes) + var msg BrowserMsg + msg.Markdown = string(data) + err = websocket.JSON.Send(l.Socket, msg) + if err != nil { + log.Println("Error sending message:", err) + } +} + +func UpdateListeners(updates chan Update, listeners chan Listener) { + currentListeners := make([]Listener, 0) + for { + select { + case listener := <-listeners: + if listener.State == Open { + log.Println("New listener on", listener.File) + currentListeners = append(currentListeners, listener) + writeFileForListener(listener) + } + if listener.State == Close { + for i, l := range currentListeners { + if l.Socket == listener.Socket { + log.Println("Deregistering Listener") + currentListeners = append(currentListeners[:i], currentListeners[i+1:]...) + } + } + } + case update := <-updates: + log.Println("Update on", update.File) + for _, l := range currentListeners { + if update.File == l.File { + writeFileForListener(l) + } + } + } + } +} + func RootFunc(w http.ResponseWriter, r *http.Request) { tocMutex.Lock() - localToc := toc[:] + localToc := make([]string, len(toc)) + copy(localToc, toc) tocMutex.Unlock() + log.Println(localToc) for i, s := range localToc { - s = strings.TrimPrefix(s, path) - localToc[i] = "* " + s + chop := strings.TrimPrefix(s, path) + localToc[i] = "* [" + chop + "](/md" + chop + ")" } tocMkd := strings.Join(localToc, "\n") bytes := blackfriday.MarkdownCommon([]byte(tocMkd)) rootTmpl.Execute(w, string(bytes)) } +func CSSFunc(css string) http.HandlerFunc { + return func(w http.ResponseWriter, r *http.Request) { + w.Write([]byte(css)) + } +} + func PageFunc(w http.ResponseWriter, r *http.Request) { subpath := strings.TrimPrefix(r.RequestURI, "/md") log.Println("New watcher on ", subpath) pageTmpl.Execute(w, subpath) } -func HandleListener(ws *websocket.Conn) { - fmt.Println("WEBSOCKET!", ws.Request().RequestURI) - ws.Close() +func HandleListener(listeners chan Listener) func(ws *websocket.Conn) { + return func(ws *websocket.Conn) { + subpath := strings.TrimPrefix(ws.Request().RequestURI, "/ws") + listeners <- Listener{subpath, ws, Open} + var closeMessage string + err := websocket.Message.Receive(ws, &closeMessage) + if err != nil && err.Error() != "EOF" { + log.Println("Error before close:", err) + } + listeners <- Listener{subpath, ws, Close} + } } func main() { @@ -119,7 +206,8 @@ func main() { defer watcher.Close() done := make(chan bool) - go WatcherEventLoop(watcher, done) + updates := make(chan Update) + go WatcherEventLoop(watcher, updates, done) log.Println("Watching directory", path) err = filepath.Walk(path, AddWatch(watcher)) @@ -127,10 +215,12 @@ func main() { log.Fatal(err) } - fmt.Println(toc) + listeners := make(chan Listener) + go UpdateListeners(updates, listeners) http.HandleFunc("/", RootFunc) http.HandleFunc("/md/", PageFunc) - http.Handle("/ws/", websocket.Handler(HandleListener)) + http.HandleFunc("/github.css", CSSFunc(githubCss)) + http.Handle("/ws/", websocket.Handler(HandleListener(listeners))) http.ListenAndServe(":8080", nil) } diff --git a/page_template.go b/page_template.go index de450be..abbb6cf 100644 --- a/page_template.go +++ b/page_template.go @@ -3,24 +3,33 @@ package main var pageTemplate = ` -LiveMarkdown +LiveMarkdown {{.}} + + +
+
` diff --git a/root_template.go b/root_template.go index fc309fe..488fc15 100644 --- a/root_template.go +++ b/root_template.go @@ -4,8 +4,15 @@ var rootTemplate = ` LiveMarkdown + + +

LiveMD: Listing of files

{{.}}