A separate base.jade template was made. An index.jade rewritten to use it.

internal/http/handlers.go

@@ -41,7 +41,7 @@ func (h *FilesHandlers) Index(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	web.Index(utils.MainSite(r.Host), currentPath, &stats, &entries, r, w)
+	web.Index("Files", utils.MainSite(r.Host), currentPath, &stats, &entries, r, w)
 }
 
 func (h *FilesHandlers) File(w http.ResponseWriter, r *http.Request) {

web/templates/base.jade

@@ -0,0 +1,25 @@
+doctype html
+html(lang='en')
+    head
+        block head
+            title Arav's dwelling / #{title}
+            meta(charset='utf-8')
+            meta(http-equiv='X-UA-Compatible' content='IE=edge')
+            meta(name='viewport' content='width=device-width, initial-scale=1.0')
+            meta(name='theme-color' content='#cd2682')
+            meta(name='description' content='My file share.')
+            link(rel='icon' type='image/svg+xml' href='/assets/img/favicon.svg' sizes='any')
+            link(href='/assets/css/main.css' rel='stylesheet')
+            script(src='/assets/js/main.js' defer='')
+    body
+        header
+            svg#logo(viewBox='0 -25 216 40')
+                text.logo Arav's dwelling
+                text.under(y='11') Welcome to my sacred place, wanderer
+            nav
+                block nav
+        block content
+        footer
+            a(href='/rss.xml' title="Stay up to date on what's going on.") RSS feed
+            br
+            | 2017—2023 Arav <#[a(href='mailto:me@arav.su') me@arav.su]> #[a(href='/privacy') Privacy statements]

web/templates/index.jade

@@ -1,56 +1,39 @@
-:go:func Index(mainSite, currentPath string, stats *files.DirStats, items *[]files.DirEntry, r *http.Request)
+extends base.jade
 
-:go:import "dwelling-files/pkg/files"
+block nav
-:go:import "dwelling-files/pkg/utils"
+    a(href=mainSite) Back to main website
+    h1 Files
 
-doctype html
+block content
-html(lang='en')
+    :go:func Index(title, mainSite, currentPath string, stats *files.DirStats, items *[]files.DirEntry, r *http.Request)
-    head
+    :go:import "dwelling-files/pkg/files"
-        title Arav's dwelling / Files
+    :go:import "dwelling-files/pkg/utils"
-        meta(charset='utf-8')
+    section#files
-        meta(http-equiv='X-UA-Compatible' content='IE=edge')
+        span!= currentPath
-        meta(name='viewport' content='width=device-width, initial-scale=1.0')
+        p Files: #{stats.Files} (#{stats.FilesSize}); Directories: #{stats.Directories}.
-        meta(name='theme-color' content='#cd2682')
+        input.hidden(type="text", name="filter" placeholder="Type in to filter this directory (case insensitive)")
-        meta(name='description' content='My file share.')
+        table
-        link(rel='icon' type='image/svg+xml' href='/assets/img/favicon.svg' sizes='any')
+            thead
-        link(href='/assets/css/main.css' rel='stylesheet')
+                tr
-        script(src='/assets/js/main.js' defer='')
+                    th Name
-    body
+                    th Date
-        header
+                    th Size
-            svg#logo(viewBox='0 -25 216 40')
+                tr(tabindex=0)
-                text.logo Arav's dwelling
+                    td #[a(href="../") ../]
-                text.under(y='11') Welcome to my sacred place, wanderer
+            tbody
-            nav
+                each item, i in *items
-                a(href=mainSite) Back to main website
+                    tr(tabindex=i+1)
-                h1 Files
+                        td #[a(href=item.Link) #{item.Name}]
-        section#files
+                        td!= utils.ToClientTimezone(item.Datetime, r).Format(files.FileDateFormat)
-            span!= currentPath
+                        td= item.Size
-            p Files: #{stats.Files} (#{stats.FilesSize}); Directories: #{stats.Directories}.
+    section
-            input.hidden(type="text", name="filter" placeholder="Type in to filter this directory (case insensitive)")
+        span!= currentPath
-            table
+    section#usage
-                thead
+        p On a page use up and down arrow keys to navigate through list. Use home and end keys to go to the start and end of a list. Use Ctrl+Backspace to return to a parent directory.
-                    tr
+        p In an overlay use a mouse wheel to change a scale of a video or a picture. Use left and right arrow keys to go through media. Use space key to toggle pause. Use escape key to close an overlay, or click outside a media. An audio volume is being kept across site using LocalStorage API.
-                        th Name
+    div#overlay
-                        th Date
+        button(name='prev') ❰
-                        th Size
+        div
-                    tr(tabindex=0)
-                        td #[a(href="../") ../]
-                tbody
-                    each item, i in *items
-                        tr(tabindex=i+1)
-                            td #[a(href=item.Link) #{item.Name}]
-                            td!= utils.ToClientTimezone(item.Datetime, r).Format(files.FileDateFormat)
-                            td= item.Size
-        section
-            span!= currentPath
-        section#usage
-            p On a page use up and down arrow keys to navigate through list. Use home and end keys to go to the start and end of a list. Use Ctrl+Backspace to return to a parent directory.
-            p In an overlay use a mouse wheel to change a scale of a video or a picture. Use left and right arrow keys to go through media. Use space key to toggle pause. Use escape key to close an overlay, or click outside a media. An audio volume is being kept across site using LocalStorage API.
-        footer
-            | 2017—2023 Arav <#[a(href='mailto:me@arav.su') me@arav.su]> #[a(href=mainSite+'/privacy') Privacy statements]
-        div#overlay
-            button(name='prev') ❰
             div
-                div
+            span
-                span
+        button(name='next') ❱
-            button(name='next') ❱