Files
OPENBUREAU/layouts/archiv/list.html
T
karim 42f2823ff0 ui(archiv+library): Section-Header, mehr Spalten, Kategorie-Pills
Archiv-Unterseiten (Büroführung etc.): .collection-Wrapper mit
--palette-kusa, .collection-title statt .section-header — gleiche
Optik wie Archiv/Library-Übersichten. Artikel-Grid: auto-fill
minmax(220px) → 3+ Spalten. Datum unter Titel (card-layout).

Archiv-Toggle-Pills: font-family-display (wie Dialog-Pill), margin
von spacing-md → 0.5em.

Library-Übersicht: A-Z-Index → Kategorie-Pills (Gruppe ausgeschrieben,
aktiv = ichigo), Atlas als 2-Spalten-Grid (.atlas--grid2), Suche
kombiniert mit Gruppe-Filter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-06 02:08:02 +02:00

163 lines
6.7 KiB
HTML

{{ define "main" }}
{{ if eq .Path "/archiv" }}
{{/* Archiv-Übersicht: Umschalter Kategorie ↔ Jahr */}}
<div class="collection" style="--section-color: var(--palette-kusa)">
<h1 class="collection-title">{{ .Title }}</h1>
<div class="collection-inner">
{{ .Content }}
<div class="archiv-toggle" role="group" aria-label="Sortierung">
<button type="button" data-mode="cat" class="is-active">nach Kategorie</button>
<button type="button" data-mode="year">nach Jahr</button>
</div>
{{/* Ansicht nach Kategorie — Jahr hinter dem Beitrag, je Rubrik die letzten 10 */}}
<div class="archiv-view" data-view="cat">
<section class="atlas">
{{ range .Sections.ByWeight }}
{{ $section := path.Base .RelPermalink }}
<article class="atlas-section" data-section="{{ $section }}">
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
<ul class="atlas-list">
{{ range first 10 .RegularPages.ByDate.Reverse }}
<li>
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
<span class="list-meta text-muted"> · {{ .Date.Format "2006" }}</span>
</li>
{{ end }}
</ul>
{{ if gt (len .RegularPages) 10 }}
<p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
{{ end }}
</article>
{{ end }}
{{ with site.Taxonomies.tags }}
<article class="atlas-tags">
<h2>Tags</h2>
<ul class="tag-cloud">
{{ range $name, $taxonomy := . }}
<li><a href="/tags/{{ $name | urlize }}/">{{ $name }} <span class="text-muted">({{ len $taxonomy }})</span></a></li>
{{ end }}
</ul>
</article>
{{ end }}
</section>
</div>
{{/* Ansicht nach Jahr — Kategorie hinter dem Beitrag, alle Beiträge */}}
<div class="archiv-view" data-view="year" hidden>
{{ $all := where site.RegularPages "Section" "archiv" }}
{{ range $all.GroupByDate "2006" }}
<article class="atlas-section">
<h2>{{ .Key }}</h2>
<ul class="atlas-list">
{{ range .Pages }}
<li>
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ with .CurrentSection }}<span class="list-meta text-muted"> · {{ .LinkTitle }}</span>{{ end }}
</li>
{{ end }}
</ul>
</article>
{{ end }}
</div>
<script>
(function () {
var bar = document.querySelector('.archiv-toggle'); if (!bar) return;
var views = document.querySelectorAll('.archiv-view');
function set(mode) {
bar.querySelectorAll('button').forEach(function (b) { b.classList.toggle('is-active', b.dataset.mode === mode); });
views.forEach(function (v) { v.hidden = v.dataset.view !== mode; });
try { localStorage.setItem('ob_archiv_mode', mode); } catch (e) {}
}
bar.addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) set(b.dataset.mode); });
var saved; try { saved = localStorage.getItem('ob_archiv_mode'); } catch (e) {}
if (saved === 'year') set('year');
})();
</script>
</div>
</div>
{{ else if eq .Path "/archiv/software" }}
{{/* Software: kuratierte Landing — Werkzeuge (mit externem Link) getrennt
von Texten & Anleitungen. */}}
<header class="section-header" data-section="software">
<p class="section-rubric">Archiv</p>
<h1 class="section-title">{{ .Title }}</h1>
{{ with .Params.description }}<p class="section-description">{{ . }}</p>{{ end }}
</header>
{{ .Content }}
{{ $tools := where .RegularPages "Params.external" "!=" nil }}
{{ $texts := where .RegularPages "Params.external" nil }}
{{ with $tools }}
<section class="software-tools">
<h2 class="software-h">Werkzeuge</h2>
<ul class="tool-list">
{{ range .ByWeight }}
<li class="tool-item"{{ with .Params.color }} data-color="{{ . }}"{{ end }}>
<a class="tool-main" href="{{ .RelPermalink }}">
<span class="tool-name">{{ .LinkTitle }}</span>
{{ with .Params.summary }}<span class="tool-sum text-muted">{{ . }}</span>{{ end }}
</a>
{{ with .Params.external }}<a class="tool-ext" href="{{ . }}" rel="noopener" aria-label="extern öffnen"></a>{{ end }}
</li>
{{ end }}
</ul>
</section>
{{ end }}
<section class="software-texts">
<h2 class="software-h">Texte &amp; Anleitungen</h2>
<div class="time-list" data-section="software">
<ul>
{{ range $texts.ByDate.Reverse }}
<li class="list-item">
<div class="list-title-row">
<div class="list-title">
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ with .Params.summary }}<div class="list-summary text-muted">{{ . }}</div>{{ end }}
</div>
<div class="list-meta">{{ partial "date.html" .Date }}</div>
</div>
</li>
{{ end }}
</ul>
</div>
</section>
{{ else }}
{{/* Archiv-Unterseite (Rubrik): gleiche Optik wie Übersichten */}}
<div class="collection" style="--section-color: var(--palette-kusa)">
<p class="section-rubric">Archiv</p>
<h1 class="collection-title">{{ .Title }}</h1>
<div class="collection-inner">
{{ with .Params.description }}<p class="section-description">{{ . }}</p>{{ end }}
{{ .Content }}
<div class="time-list">
<ul>
{{ range .RegularPages.ByDate.Reverse }}
<li class="list-item">
<div class="list-title-row">
<div class="list-title">
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ with .Params.summary }}
<div class="list-summary text-muted">{{ . }}</div>
{{ end }}
</div>
<div class="list-meta">{{ partial "date.html" .Date }}</div>
</div>
</li>
{{ end }}
</ul>
</div>
</div>
</div>
{{ end }}
{{ end }}