Allow editing of individual sections

assets/page.html

@@ -26,6 +26,7 @@
         <main>
             {{if .EditMode}}
             <form id="edit-form" class="edit-form" method="POST" action="{{.PostURL}}">
+                {{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
                 <div class="editor-toolbar">
                     <button type="button" class="btn btn-tool" data-action="bold"      data-key="B" title="Bold (B)">**</button>
                     <button type="button" class="btn btn-tool" data-action="italic"    data-key="I" title="Italic (I)">*</button>
@@ -62,6 +63,9 @@
             {{if or .Content .SpecialContent}}
             <script src="/_/content.js"></script>
             {{end}}
+            {{if .Content}}
+            <script src="/_/sections.js"></script>
+            {{end}}
             {{if .Entries}}
             <div class="listing">
                 <div class="listing-header">Contents</div>

assets/sections.js

@@ -0,0 +1,16 @@
+(function () {
+    var content = document.querySelector('.content');
+    if (!content) return;
+    var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    if (!headings.length) return;
+
+    // Section 0 is pre-heading content, editable via full-page edit.
+    // Sections 1..N each start at a heading; that is the index sent to the server.
+    headings.forEach(function (h, i) {
+        var a = document.createElement('a');
+        a.href = '?edit&section=' + (i + 1);
+        a.className = 'btn btn-small section-edit';
+        a.textContent = 'edit';
+        h.appendChild(a);
+    });
+}());

assets/style.css

@@ -104,6 +104,13 @@ header {
     color: #ffd54f;
 }
 
+/* === Button modifiers === */
+.btn-small {
+    font-size: 0.65rem;
+    font-weight: normal;
+    vertical-align: middle;
+}
+
 /* === Main === */
 main {
     max-width: 860px;
@@ -331,7 +338,6 @@ textarea:focus {
     box-shadow: 0 0 5px #0a0;
 }
 
-
 /* === Diary views === */
 .diary-section {
     margin: 2rem 0;
@@ -380,6 +386,11 @@ textarea:focus {
     margin-bottom: 0.75rem;
 }
 
+/* === Section edit links === */
+.section-edit {
+    margin-left: 0.75rem;
+}
+
 /* === Empty state === */
 .empty {
     padding: 1rem;