feat: auto-refresh browser during live reload

Co-authored-by: Aditya Hegde <[email protected]>

cmd/anna/anna.go

@@ -14,6 +14,7 @@ import (
 type Cmd struct {
 	RenderDrafts bool
 	Addr         string
+	LiveReload   bool
 }
 
 func (cmd *Cmd) VanillaRender() {
@@ -23,6 +24,7 @@ func (cmd *Cmd) VanillaRender() {
 		TagsMap:      make(map[template.URL][]parser.TemplateData),
 		ErrorLogger:  log.New(os.Stderr, "ERROR\t", log.Ldate|log.Ltime|log.Lshortfile),
 		RenderDrafts: cmd.RenderDrafts,
+		LiveReload:   cmd.LiveReload,
 	}
 
 	e := engine.Engine{

cmd/anna/livereload.go

@@ -6,11 +6,16 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"sync/atomic"
 	"time"
 
 	"github.com/acmpesuecc/anna/pkg/helpers"
 )
 
+var reloadPage = make(chan struct{})
+
+var countRequests atomic.Int32
+
 type liveReload struct {
 	errorLogger *log.Logger
 	fileTimes   map[string]time.Time
@@ -43,6 +48,7 @@ func (cmd *Cmd) StartLiveReload() {
 		for _, rootDir := range lr.rootDirs {
 			if lr.traverseDirectory(rootDir) {
 				cmd.VanillaRender()
+				reloadPage <- struct{}{}
 			}
 		}
 		if !lr.serverRunning {
@@ -97,8 +103,35 @@ func (lr *liveReload) checkFile(path string, modTime time.Time) bool {
 
 func (lr *liveReload) startServer(addr string) {
 	fmt.Print("Serving content at: http://localhost:", addr, "\n")
-	err := http.ListenAndServe(":"+addr, http.FileServer(http.Dir(helpers.SiteDataPath+"./rendered")))
+	http.Handle("/", http.FileServer(http.Dir(helpers.SiteDataPath+"./rendered")))
+	http.HandleFunc("/events", eventsHandler)
+	err := http.ListenAndServe(":"+addr, nil)
 	if err != nil {
 		lr.errorLogger.Fatal(err)
 	}
 }
+
+func eventsHandler(w http.ResponseWriter, r *http.Request) {
+	countRequests.Add(1)
+
+	// Set CORS headers to allow all origins.
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Expose-Headers", "Content-Type")
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+
+	if countRequests.Load() == 1 {
+		<-reloadPage
+	} else {
+		countRequests.Store(countRequests.Load() - 1)
+		return
+	}
+
+	event := "event:\ndata:\n\n"
+	w.Write([]byte(event))
+	w.(http.Flusher).Flush()
+
+	countRequests.Store(countRequests.Load() - 1)
+}

main.go

@@ -29,6 +29,7 @@ func main() {
 			}
 
 			if serve {
+				annaCmd.LiveReload = true
 				annaCmd.StartLiveReload()
 			}
 

pkg/parser/parser.go

@@ -45,6 +45,7 @@ type TemplateData struct {
 	Frontmatter Frontmatter
 	Body        template.HTML
 	Layout      LayoutConfig
+	LiveReload  bool
 }
 
 type Date int64
@@ -74,6 +75,9 @@ type Parser struct {
 	ErrorLogger *log.Logger
 
 	Helper *helpers.Helper
+
+	// Determines the injection of Live Reload JS in HTML
+	LiveReload bool
 }
 
 func (p *Parser) ParseMDDir(baseDirPath string, baseDirFS fs.FS) {
@@ -129,6 +133,7 @@ func (p *Parser) AddFileAndRender(baseDirPath string, dirEntryPath string, front
 		Frontmatter: frontmatter,
 		Body:        template.HTML(body),
 		Layout:      p.LayoutConfig,
+		LiveReload:  p.LiveReload,
 	}
 
 	// Adding the page to the merged map storing all site pages
@@ -248,7 +253,6 @@ func (p *Parser) ParseRobots(inFilePath string, outFilePath string) {
 
 // Parse all the ".html" layout files in the layout/ directory
 func (p *Parser) ParseLayoutFiles() *template.Template {
-
 	// Parsing all files in the layout/ dir which match the "*.html" pattern
 	templ, err := template.ParseGlob(helpers.SiteDataPath + "layout/*.layout")
 	if err != nil {

site/layout/page.html

@@ -41,4 +41,4 @@ <h1>{{ $PageData.Frontmatter.Title }}</h1>
 
 </html>
 
-{{ end}}
+{{ end}}

site/layout/partials/head.html

@@ -13,12 +13,28 @@
     <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />
     <link rel="alternate" type="application/atom+xml" title="feed" href="/feed.xml" />
 
+
+    {{ if .LiveReload }}
+    <script>
+        const eventSource = new EventSource('http://localhost:8000/events');
+        eventSource.onmessage = function (event) {
+            location.reload()
+        };
+        window.onbeforeunload = function(event)
+        {
+               return confirm("Confirm refresh");
+        };
+    </script>
+    {{ end }}
+
+
     {{range .Frontmatter.JSFiles}}
     <script src="/script/{{.}}" defer></script>
     {{end}} {{range .Layout.SiteScripts}}
     <script src="/script/{{.}}" defer></script>
     {{end}}
 
+
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{ .Frontmatter.Title }}" />
     <meta property="og:description" content="{{ .Frontmatter.Description }}" />
@@ -33,4 +49,4 @@
 </head>
 {{end}}
 
-</html>
+</html>