From 556f462a2d3e3c6a8eb5dc7bdb68a8a03c6b617f Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Wed, 5 Aug 2020 10:03:54 +0200
Subject: [PATCH] Add sidebar

---
 editor/src/index.js    | 41 ++++++++++++++++++++++++-----------------
 editor/src/styles.scss | 14 ++++++++++++++
 main.go                | 25 +++++++++++++++++--------
 templates/layout.html  | 13 +++++++++----
 templates/sidebar.html |  3 +++
 5 files changed, 67 insertions(+), 29 deletions(-)
 create mode 100644 templates/sidebar.html

diff --git a/editor/src/index.js b/editor/src/index.js
index 1bd5401..7cb9005 100644
--- a/editor/src/index.js
+++ b/editor/src/index.js
@@ -191,25 +191,25 @@ function renderGraphs() {
     })
 }
 
-if (holder) {
-    const MD = new MarkdownIt({
-        linkify: true,
-        highlight: function (str, lang) {
-            if (lang === 'mermaid') {
-                return '<div class="mermaid">' + str + '</div>';
-            }
-            return '';
+const MD = new MarkdownIt({
+    linkify: true,
+    highlight: function (str, lang) {
+        if (lang === 'mermaid') {
+            return '<div class="mermaid">' + str + '</div>';
         }
-    })
-    MD.use(MarkdownItWikilinks({
-        baseURL: holder.dataset.baseUrl,
-        uriSuffix: '',
-        relativeBaseURL: '/edit/',
-        htmlAttributes: {
-            class: 'wiki-link'
-        },
-    })).use(MarkdownItMark).use(MarkdownItKatex)
+        return '';
+    }
+})
+MD.use(MarkdownItWikilinks({
+    baseURL: document.querySelector('body').dataset.baseUrl,
+    uriSuffix: '',
+    relativeBaseURL: '/edit/',
+    htmlAttributes: {
+        class: 'wiki-link'
+    },
+})).use(MarkdownItMark).use(MarkdownItKatex)
 
+if (holder) {
     const options = {
         transform(text, element) {
             let converted = text
@@ -489,3 +489,10 @@ search(searchInput).then(searcher => {
         return true
     })
 })
+
+document.querySelectorAll(".page-loader")
+    .forEach((el, key, parent) => {
+        fetch('/' + el.dataset.page + '?format=markdown').then(res => res.text()).then(text => {
+            el.innerHTML = MD.render(text)
+        })
+    })
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index e3735e9..e032d9f 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -207,3 +207,17 @@ mark {
 .marker, .fold {
   user-select: none;
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: 300px auto;
+
+  .sidebar {
+    padding: 0 12px;
+    width: 100%;
+  }
+}
+
+.section {
+  padding: 0;
+}
diff --git a/main.go b/main.go
index 892f8cb..c5dd45e 100644
--- a/main.go
+++ b/main.go
@@ -151,6 +151,8 @@ type recentPage struct {
 	Recent  []Change
 }
 
+var baseTemplate = []string{"templates/layout.html", "templates/sidebar.html"}
+
 type indexHandler struct{}
 type graphHandler struct{}
 type saveHandler struct {
@@ -177,7 +179,9 @@ func (*authHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 	if r.Method == http.MethodGet {
 		if r.URL.Path == "/auth/login" {
-			t, err := template.ParseFiles("templates/layout.html", "templates/login.html")
+			templates := baseTemplate
+			templates = append(templates, "templates/login.html")
+			t, err := template.ParseFiles(templates...)
 			if err != nil {
 				http.Error(w, err.Error(), 500)
 				return
@@ -215,7 +219,9 @@ func (*authHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 			http.Redirect(w, r, sess.NextURI, 302)
 			return
 		} else if r.URL.Path == "/auth/logout" {
-			t, err := template.ParseFiles("templates/layout.html", "templates/logout.html")
+			templates := baseTemplate
+			templates = append(templates, "templates/logout.html")
+			t, err := template.ParseFiles(templates...)
 			if err != nil {
 				http.Error(w, err.Error(), 500)
 				return
@@ -459,8 +465,9 @@ func (h *editHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		TodayPage:    todayPage(),
 		ShowGraph:    page != "Daily_Notes",
 	}
-
-	t, err := template.ParseFiles("templates/layout.html", "templates/edit.html")
+	templates := baseTemplate
+	templates = append(templates,  "templates/edit.html")
+	t, err := template.ParseFiles(templates...)
 	if err != nil {
 		http.Error(w, err.Error(), 500)
 		return
@@ -540,8 +547,9 @@ func (h *graphHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		Nodes:        template.JS(nodesBuf.String()),
 		Edges:        template.JS(edgesBuf.String()),
 	}
-
-	t, err := template.ParseFiles("templates/layout.html", "templates/graph.html")
+	templates := baseTemplate
+	templates = append(templates,  "templates/graph.html")
+	t, err := template.ParseFiles(templates...)
 	if err != nil {
 		http.Error(w, err.Error(), 500)
 		return
@@ -670,8 +678,9 @@ func (h *indexHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 			ShowGraph:    page != "Daily_Notes",
 			TodayPage:    todayPage(),
 		}
-
-		t, err := template.ParseFiles("templates/layout.html", "templates/view.html")
+	templates := baseTemplate
+	templates = append(templates,  "templates/view.html")
+		t, err := template.ParseFiles(templates...)
 		if err != nil {
 			http.Error(w, err.Error(), 500)
 			return
diff --git a/templates/layout.html b/templates/layout.html
index ef987b2..236b3d0 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -225,7 +225,7 @@
         }
     </style>
 </head>
-<body>
+<body data-base-url="{{ .BaseURL }}">
 <div>
     <nav class="navbar" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
@@ -262,9 +262,14 @@
         </div>
     </div>
 
-    <section class="section">
-        {{ template "content" . }}
-    </section>
+    <div class="grid">
+        {{ template "sidebar" . }}
+
+        <section class="section">
+            {{ template "content" . }}
+        </section>
+    </div>
+
 
     <div class="h-app">
         <a href="/" class="u-url p-name">Wiki</a>
diff --git a/templates/sidebar.html b/templates/sidebar.html
new file mode 100644
index 0000000..18057d0
--- /dev/null
+++ b/templates/sidebar.html
@@ -0,0 +1,3 @@
+{{ define "sidebar" }}
+    <div class="sidebar page-loader content" data-page="Sidebar"></div>
+{{ end }}