Rework diary to focus on yearly pages

assets/diary/calendar.html

@@ -1,11 +1,13 @@
-<div class="diary-cal panel panel-sidebar">
+<div class="diary-cal panel panel-sidebar"
+     data-display-year="{{.DisplayYear}}"
+     data-display-month="{{.DisplayMonth}}">
   <div class="panel-header"><a href="{{.DiaryURL}}">Chronological</a></div>
   <div class="diary-cal-nav">
-    <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
+    <a href="{{.DisplayMonthURL}}" class="diary-cal-heading" data-cal-month-link>{{.DisplayMonthName}}</a>
     <div class="dropdown diary-cal-drop">
       <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
       <div class="dropdown-menu scrollable">
-        {{range .AllMonths}}<a class="btn btn-block{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
+        {{range .Months}}<a class="btn btn-block" data-cal-month-jump="{{.Num}}" href="{{.AnchorURL}}">{{.Name}}</a>{{end}}
       </div>
     </div>
     <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
@@ -16,7 +18,8 @@
       </div>
     </div>
   </div>
-  <table class="diary-cal-grid">
+  {{range .Months}}
+  <table class="diary-cal-grid" data-cal-month="{{.Num}}"{{if ne .Num $.DisplayMonth}} hidden{{end}}>
     <thead>
       <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></tr>
     </thead>
@@ -25,5 +28,6 @@
     {{end}}
     </tbody>
   </table>
+  {{end}}
 </div>
 <script src="/_/diary/calendar.js"></script>

assets/diary/calendar.js

@@ -2,4 +2,51 @@
   var cal = document.querySelector(".diary-cal");
   if (!cal) return;
   cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
+
+  var displayYear = parseInt(cal.dataset.displayYear, 10);
+  var current = parseInt(cal.dataset.displayMonth, 10);
+  var monthLink = cal.querySelector("[data-cal-month-link]");
+  var months = {};
+  cal.querySelectorAll("[data-cal-month]").forEach(function (t) {
+    months[parseInt(t.dataset.calMonth, 10)] = t;
+  });
+  var jumpLinks = {};
+  cal.querySelectorAll("[data-cal-month-jump]").forEach(function (a) {
+    jumpLinks[parseInt(a.dataset.calMonthJump, 10)] = a;
+  });
+
+  function pad(n) { return n < 10 ? "0" + n : "" + n; }
+
+  function show(m) {
+    if (m === current) return;
+    if (!months[m]) return;
+    months[current].hidden = true;
+    months[m].hidden = false;
+    current = m;
+    if (monthLink) {
+      var label = jumpLinks[m];
+      if (label) monthLink.textContent = label.textContent;
+      monthLink.setAttribute("href", "#" + displayYear + "-" + pad(m));
+    }
+  }
+
+  // Dropdown month picks scroll via the href anchor; we also swap the grid
+  // so the calendar reflects what the user just navigated to.
+  Object.keys(jumpLinks).forEach(function (key) {
+    var a = jumpLinks[key];
+    a.addEventListener("click", function () { show(parseInt(key, 10)); });
+  });
+
+  // Any in-page anchor click (#YYYY-MM or #YYYY-MM-DD) updates the calendar
+  // so it tracks the user's focus through the year page.
+  function syncFromHash() {
+    var h = window.location.hash;
+    if (!h) return;
+    var m = h.match(/^#(\d{4})-(\d{2})(?:-\d{2})?$/);
+    if (!m) return;
+    if (parseInt(m[1], 10) !== displayYear) return;
+    show(parseInt(m[2], 10));
+  }
+  window.addEventListener("hashchange", syncFromHash);
+  syncFromHash();
 })();

assets/diary/content.html

@@ -0,0 +1,13 @@
+{{range .Sections}}
+{{if eq .Level 1}}<h1 id="{{.ID}}">{{.Heading}}{{if .EditURL}} <a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}</h1>
+{{else if eq .Level 2}}<h2 id="{{.ID}}">{{.Heading}}{{if .EditURL}} <a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}</h2>
+{{else}}<h3 id="{{.ID}}">{{.Heading}}{{if .EditURL}} <a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}</h3>{{end}}
+{{if .Body}}{{.Body}}{{end}}
+{{if .Photos}}
+<div class="photo-grid">
+  {{range .Photos}}
+  <a href="{{.URL}}" target="_blank"><img src="{{.ThumbURL}}" alt="" loading="lazy"></a>
+  {{end}}
+</div>
+{{end}}
+{{end}}

assets/diary/day.html

@@ -1,7 +0,0 @@
-{{if .Photos}}
-<div class="photo-grid">
-  {{range .Photos}}
-  <a href="{{.URL}}" target="_blank"><img src="{{.ThumbURL}}" alt="" loading="lazy"></a>
-  {{end}}
-</div>
-{{end}}

assets/diary/month.html

@@ -1,13 +0,0 @@
-{{range .Days}}
-<h2 id="{{.ID}}">{{if .URL}}<a href="{{.URL}}">{{.Heading}}</a>{{else}}{{.Heading}}{{end}}
-  {{if .EditURL}}<a href="{{.EditURL}}" class="btn btn-small">edit</a>{{end}}
-</h2>
-{{if .Content}}{{.Content}}{{end}}
-{{if .Photos}}
-<div class="photo-grid">
-  {{range .Photos}}
-  <a href="{{.URL}}" target="_blank"><img src="{{.ThumbURL}}" alt="" loading="lazy"></a>
-  {{end}}
-</div>
-{{end}}
-{{end}}

assets/diary/year.html

@@ -1,11 +0,0 @@
-<h2 id="months">Monate</h2>
-{{range .Months}}
-<h3 id="{{.ID}}"><a href="{{.URL}}">{{.Name}}</a></h3>
-{{if .Photos}}
-<div class="photo-grid">
-  {{range .Photos}}
-  <a href="{{.URL}}" target="_blank"><img src="{{.ThumbURL}}" alt="" loading="lazy"></a>
-  {{end}}
-</div>
-{{end}}
-{{end}}