JSON canvas initial

assets/page/main.html

@@ -1,4 +1,5 @@
-{{define "headScripts"}}<script src="/_/page/actions.js"></script>{{end}}
+{{define "headScripts"}}<script src="/_/page/actions.js"></script>
+<script src="/_/page/canvas-actions.js"></script>{{end}}
 
 {{define "headerActions"}}{{if .CanEdit}}
 <button class="btn btn-block" onclick="newPage()" title="New page (N)">NEW</button>
@@ -8,9 +9,20 @@
 <button class="btn btn-block danger" onclick="deletePage()" title="Delete page">DELETE</button>
 {{end}}
 <a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT</a>
+<button class="btn btn-block" onclick="newCanvas()" title="New canvas">NEW CANVAS</button>
 {{end}}{{end}}
 
 {{define "content"}}
+{{/* Canvases in this folder are alternative views of the same page, so they
+     read as a tab strip above the content rather than as rows in the file
+     listing (listEntries filters them out for exactly this reason). */}}
+{{if .Canvases}}
+<nav class="canvas-tabs row" aria-label="Page views">
+    <span class="canvas-tab is-active">PAGE</span>
+    {{range .Canvases}}<a class="canvas-tab" href="{{.URL}}">{{.Name}}</a>{{end}}
+    {{if .CanEdit}}<button type="button" class="canvas-tab canvas-tab-add" onclick="newCanvas()" title="New canvas">+</button>{{end}}
+</nav>
+{{end}}
 {{if .Content}}
 <div class="content">{{.Content}}</div>
 {{end}}