luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework diary to focus on yearly pages

Browse Source
This commit is contained in:
luxick
2026-05-28 13:54:44 +02:00
parent 20a6bac3d6
commit 61e50c033f
14 changed files with 641 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/diary/calendar.html
+8 -4
View File
@@ -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
+47
View File
@@ -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
+13
View File
@@ -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
-7
View File
@@ -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
-13
View File
@@ -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
-11
View File
@@ -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}}
assets/editor/main.html
+1
View File
@@ -9,6 +9,7 @@
</script>
<form id="edit-form" class="edit-form" method="POST" action="{{.PostURL}}">
{{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
{{if ge .InsertBefore 0}}<input type="hidden" name="insert_before" value="{{.InsertBefore}}">{{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>
assets/page/main.html
+1 -1
View File
@@ -28,7 +28,7 @@
{{if or .Content .SpecialContent}}
<script src="/_/page/content.js"></script>
<script src="/_/page/anchors.js"></script>
<script src="/_/page/toc.js"></script>
{{if not .SuppressTOC}}<script src="/_/page/toc.js"></script>{{end}}
<script src="/_/page/tasks.js"></script>
{{end}}
{{if .Content}}
assets/page/sections.js
+5 -1
View File
@@ -6,12 +6,16 @@
// 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.
// Skip headings that already carry a server-rendered edit link (the diary
// slice templates bake their own edit URLs pointing at the year file).
headings.forEach(function (h, i) {
if (h.querySelector('a.btn')) return;
var a = document.createElement('a');
a.href = '?edit&section=' + (i + 1);
a.className = 'btn btn-small';
a.textContent = 'edit';
a.textContent = 'edit';
h.appendChild(document.createTextNode(' '))
h.appendChild(a);
});
}());
``
assets/style.css
+7 -2
View File
@@ -325,7 +325,7 @@ main > h2 {
.dropdown-menu.align-right { left: auto; right: 0; }
.dropdown-menu.open-up { top: auto; bottom: 100%; margin-bottom: 0.4rem; }
.dropdown-menu.is-open { display: block; }
.dropdown-menu.scrollable { max-height: 14rem; overflow-y: auto; }
.dropdown-menu.scrollable { max-height: 23rem; overflow-y: auto; }
/* === Suggestion dropdown (header search + editor link picker) ===
Anchored to a position:relative host. Mirrors .dropdown-menu visuals with
@@ -449,7 +449,6 @@ button.fab { display: none; }
top: var(--space-4);
align-self: start;
max-height: calc(100vh - 2rem);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
@@ -582,6 +581,12 @@ aside.sidebar:empty { display: none; }
font-size: var(--font-sm);
}
.diary-cal-nav .diary-cal-drop + .diary-cal-heading { margin-left: var(--space-3); }
/* Anchor the month/year dropdowns to the nav row instead of the ▾ button so
the menu spans the full panel width rather than overflowing the 14rem
sidebar with its default min-width: 9rem. */
.diary-cal-nav { position: relative; }
.diary-cal-nav .diary-cal-drop { position: static; }
.diary-cal-nav .dropdown-menu { left: 0; right: 0; min-width: 0; }
.diary-cal-heading { color: var(--link); }
.diary-cal-heading:hover { color: var(--link-hover); }
.diary-cal-grid {