feature(library): Wiki-Links, Backlinks, Suche + A-Z-Index

single.html: [[Begriff]]-Auflösung zu internen Links (.wikilink), fehlende Seiten als .wikilink-missing, „Siehe auch" (Gruppe+Tags) und „Erwähnt in" (Backlinks), Eintrags-Fuss mit Gruppe + bearbeiten. list.html: Suchfeld + A-Z-Index mit JS-Filter (Umlaute normalisiert), data-title auf <li> für clientseitiges Filtern. custom.css: .wikilink, .wikilink-missing, .entry-links, .entry-links-label, .lib-filter, .lib-search, .lib-az — alle via --section-color (ichigo/rose). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feature(archiv): Umschalter Kategorie ↔ Jahr
2026-06-06 01:40:00 +02:00 · 2026-06-05 21:16:30 +02:00
4 changed files with 233 additions and 45 deletions
@@ -729,6 +729,33 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
 .entry-foot a { color: var(--color-text-muted); text-decoration: none; }
 .entry-foot a:hover { color: var(--accent); }

+/* Wiki-Links in Library-Einträgen */
+.wikilink { color: var(--section-color, var(--accent)); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
+.wikilink:hover { text-decoration-style: solid; }
+.wikilink-missing { color: var(--color-text-muted); border-bottom: 1px dashed currentColor; }
+
+/* Querverweise: „Siehe auch" + „Erwähnt in" */
+.entry-links { margin-top: var(--spacing-md); padding: 0.7em 1em;
+  background: color-mix(in oklab, var(--section-color, var(--accent)) 8%, transparent);
+  border-left: 3px solid var(--section-color, var(--accent)); border-radius: 0 8px 8px 0; }
+.entry-links + .entry-links { margin-top: 0.5em; }
+.entry-links ul { list-style: none; margin: 0.3em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0.8em; }
+.entry-links li { font-size: var(--font-size-small); }
+.entry-links a { color: var(--section-color, var(--accent)); text-decoration: none; }
+.entry-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+.entry-links-label { font-size: var(--font-size-small); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
+
+/* Library-Übersicht: Suchfeld + A-Z-Index */
+.lib-filter { margin-bottom: var(--spacing-md); display: flex; flex-direction: column; gap: 0.6em; }
+.lib-search { width: 100%; padding: 0.45em 0.8em; border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: var(--font-size-base); font-family: inherit; }
+.lib-search:focus { outline: none; border-color: var(--section-color, var(--accent)); }
+.lib-az { display: flex; flex-wrap: wrap; gap: 0.25em; }
+.lib-az button { padding: 0.15em 0.45em; border: 1px solid var(--color-border); border-radius: 4px;
+  background: transparent; color: var(--color-text-muted); font-size: var(--font-size-small); cursor: pointer; font-family: inherit; line-height: 1.5; }
+.lib-az button:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
+.lib-az button.active { background: var(--section-color, var(--accent)); border-color: var(--section-color, var(--accent)); color: white; }
+
 /* ── Software-Landing: Werkzeuge getrennt von Texten ── */
 .software-h { font-family: var(--font-family-serif); margin: var(--spacing-md) 0 var(--spacing-sm); }
 .software-tools { margin-bottom: var(--spacing-lg); }
@@ -1135,6 +1162,21 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
  margin: 0 0 var(--spacing-md);
 }

+/* Archiv-Umschalter (Kategorie ↔ Jahr) */
+.archiv-toggle { display: inline-flex; gap: 0.3em; margin: 0 0 var(--spacing-md); }
+.archiv-toggle button {
+  font: inherit; font-size: var(--font-size-small); cursor: pointer;
+  padding: 0.3em 0.95em; border-radius: 999px;
+  background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
+}
+.archiv-toggle button:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
+.archiv-toggle button.is-active {
+  background: var(--section-color, var(--accent));
+  border-color: var(--section-color, var(--accent));
+  color: var(--color-text-primary); font-weight: 600;
+}
+.archiv-view[hidden] { display: none; }
+
 .time-list ul {
  list-style: none;
  margin-left: 0;
@@ -1,44 +1,86 @@
 {{ define "main" }}
  {{ if eq .Path "/archiv" }}
-      {{/* Archiv root: Titel + Intro + Atlas (je Kategorie die letzten 10) */}}
+      {{/* 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 }}
-      <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 }}
+
+      <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 first 10 .RegularPages.ByDate.Reverse }}
+              {{ range .Pages }}
                <li>
                  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-                  <span class="list-meta text-muted"> · {{ partial "date.html" .Date }}</span>
+                  {{ with .CurrentSection }}<span class="list-meta text-muted"> · {{ .LinkTitle }}</span>{{ end }}
                </li>
              {{ end }}
            </ul>
-            {{ if gt (len .RegularPages) 10 }}
-              <p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
-            {{ end }}
          </article>
        {{ end }}
+      </div>

-        {{/* Tag-Cloud */}}
-        {{ 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>
+      <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. */}}
@@ -88,8 +130,9 @@
          </ul>
        </div>
      </section>
+
    {{ else }}
-      {{/* Library subsection: chronologisch */}}
+      {{/* Archiv-Unterseite (Rubrik): chronologisch */}}
      {{ $section := path.Base .RelPermalink }}
      <header class="section-header" data-section="{{ $section }}">
        <p class="section-rubric">Archiv</p>
@@ -5,21 +5,47 @@
      {{ .Content }}

      {{ $pages := where site.RegularPages "Section" "library" }}
-      {{ $groups := dict }}
-      {{ range $pages }}
-        {{ $g := .Params.group | default "Allgemein" }}
-        {{ $existing := index $groups $g | default slice }}
-        {{ $groups = merge $groups (dict $g ($existing | append .)) }}
-      {{ end }}

      {{ if $pages }}
+        {{/* A-Z Buchstaben aus vorhandenen Titeln */}}
+        {{ $letters := slice }}
+        {{ range $pages }}
+          {{ $first := substr (upper .Title) 0 1 }}
+          {{ $first = replace $first "Ä" "A" }}
+          {{ $first = replace $first "Ö" "O" }}
+          {{ $first = replace $first "Ü" "U" }}
+          {{ if not (in $letters $first) }}{{ $letters = $letters | append $first }}{{ end }}
+        {{ end }}
+        {{ $letters = sort $letters }}
+
+        <div class="lib-filter">
+          <input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
+          <div class="lib-az">
+            <button class="lib-az-all active" data-letter="">Alle</button>
+            {{ range $letters }}<button data-letter="{{ lower . }}">{{ . }}</button>{{ end }}
+          </div>
+        </div>
+
+        {{/* Gruppen aufbauen */}}
+        {{ $groups := dict }}
+        {{ range $pages }}
+          {{ $g := .Params.group | default "Allgemein" }}
+          {{ $existing := index $groups $g | default slice }}
+          {{ $groups = merge $groups (dict $g ($existing | append .)) }}
+        {{ end }}
+
        <section class="atlas">
          {{ range $g, $ps := $groups }}
            <article class="atlas-section">
              <h2>{{ $g }}</h2>
              <ul class="atlas-list">
                {{ range sort $ps "Title" }}
-                  <li>
+                  {{ $norm := lower .Title }}
+                  {{ $norm = replace $norm "ä" "a" }}
+                  {{ $norm = replace $norm "ö" "o" }}
+                  {{ $norm = replace $norm "ü" "u" }}
+                  {{ $norm = replace $norm "ß" "ss" }}
+                  <li data-title="{{ $norm }}">
                    <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
                    {{ with .Params.summary }}<span class="list-meta text-muted"> — {{ . }}</span>{{ end }}
                  </li>
@@ -28,6 +54,40 @@
            </article>
          {{ end }}
        </section>
+
+        <script>
+        (function(){
+          var input = document.getElementById('lib-search');
+          var azBtns = document.querySelectorAll('.lib-az button');
+          var activeLetter = '';
+
+          function filter() {
+            var q = input.value.trim().toLowerCase()
+              .replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'ss');
+            document.querySelectorAll('.atlas-section').forEach(function(sec) {
+              var visible = 0;
+              sec.querySelectorAll('li[data-title]').forEach(function(li) {
+                var t = li.dataset.title;
+                var matchQ = !q || t.indexOf(q) !== -1;
+                var matchL = !activeLetter || t.charAt(0) === activeLetter;
+                if (matchQ && matchL) { li.style.display = ''; visible++; }
+                else li.style.display = 'none';
+              });
+              sec.style.display = visible ? '' : 'none';
+            });
+          }
+
+          input.addEventListener('input', filter);
+          azBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+              azBtns.forEach(function(b){ b.classList.remove('active'); });
+              this.classList.add('active');
+              activeLetter = this.dataset.letter || '';
+              filter();
+            });
+          });
+        })();
+        </script>
      {{ else }}
        <p class="text-muted"><em>Noch keine Einträge — der erste entsteht im Redaktions-Editor.</em></p>
      {{ end }}
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="single">
+  <article class="single library-entry" style="--section-color: var(--palette-ichigo)">
    <header class="single-header">
      <h1>{{ .Title }}</h1>
      {{ with .Params.summary }}<p class="single-summary">{{ . }}</p>{{ end }}
@@ -14,20 +14,63 @@
      </nav>
    {{ end }}

-    <div class="single-content">
-      {{ .Content }}
-    </div>
+    {{/* Wiki-Links [[Titel]] / [[slug]] → Link auf die passende Library-Seite. */}}
+    {{ $html := .Content }}
+    {{ range (where site.RegularPages "Section" "library") }}
+      {{ $a := printf `<a href="%s" class="wikilink">%s</a>` .RelPermalink .LinkTitle }}
+      {{ $html = replace $html (printf "[[%s]]" .LinkTitle) $a }}
+      {{ $html = replace $html (printf "[[%s]]" .File.ContentBaseName) $a }}
+    {{ end }}
+    {{/* Übrige (noch nicht angelegte) Verweise: ohne Klammern, dezent markiert. */}}
+    {{ $html = replaceRE `\[\[([^\]]+)\]\]` `<span class="wikilink-missing" title="Seite existiert noch nicht">$1</span>` $html }}
+    <div class="single-content">{{ $html | safeHTML }}</div>

-    {{/* Fuss: Gruppe + weitere Einträge derselben Gruppe + bearbeiten. */}}
-    {{ $g := .Params.group | default "Allgemein" }}
-    {{ $siblings := where (where site.RegularPages "Section" "library") "Params.group" (.Params.group) }}
+    {{/* ── Siehe auch: gleiche Gruppe + geteilte Tags ── */}}
+    {{ $cur := . }}
+    {{ $related := slice }}
+    {{ range where (where site.RegularPages "Section" "library") "Params.group" .Params.group }}
+      {{ if ne .RelPermalink $cur.RelPermalink }}{{ $related = $related | append . }}{{ end }}
+    {{ end }}
+    {{ with .Params.tags }}
+      {{ range $t := . }}
+        {{ range (where site.RegularPages "Section" "library") }}
+          {{ if and (ne .RelPermalink $cur.RelPermalink) (in (.Params.tags | default slice) $t) }}
+            {{ $related = $related | append . }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+    {{ $related = $related | uniq }}
+    {{ with $related }}
+      <nav class="entry-links" aria-label="Siehe auch">
+        <span class="entry-links-label">Siehe auch</span>
+        <ul>{{ range . }}<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>{{ end }}</ul>
+      </nav>
+    {{ end }}
+
+    {{/* ── Erwähnt in (Backlinks): Seiten, die per Link oder [[…]] hierher zeigen ── */}}
+    {{ $back := slice }}
+    {{ $url := .RelPermalink }}
+    {{ $tok1 := printf "[[%s]]" .Title }}
+    {{ $tok2 := printf "[[%s]]" .File.ContentBaseName }}
+    {{ range site.RegularPages }}
+      {{ if ne .RelPermalink $url }}
+        {{ $raw := .RawContent }}
+        {{ if or (in $raw $url) (in $raw $tok1) (in $raw $tok2) }}
+          {{ $back = $back | append . }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+    {{ with $back }}
+      <nav class="entry-links" aria-label="Erwähnt in">
+        <span class="entry-links-label">Erwähnt in</span>
+        <ul>{{ range . }}<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>{{ end }}</ul>
+      </nav>
+    {{ end }}
+
+    {{/* Fuss: Gruppe + zuletzt bearbeitet + bearbeiten. */}}
    <div class="entry-foot">
-      <span class="entry-more">
-        <strong>{{ $g }}</strong>
-        {{ $others := slice }}
-        {{ range $siblings }}{{ if ne .RelPermalink $.RelPermalink }}{{ $others = $others | append . }}{{ end }}{{ end }}
-        {{ with $others }} · {{ range $i, $p := . }}{{ if $i }} · {{ end }}<a href="{{ $p.RelPermalink }}">{{ $p.LinkTitle }}</a>{{ end }}{{ end }}
-      </span>
+      <span class="entry-more"><strong>{{ .Params.group | default "Allgemein" }}</strong></span>
      {{ if .Lastmod }}<span>Zuletzt bearbeitet am {{ .Lastmod.Format "02.01.2006" }}</span>{{ end }}
      {{ with .File }}<a href="{{ site.Params.repoURL }}/_edit/branch/main/content/{{ .Path }}" rel="nofollow">bearbeiten ↗</a>{{ end }}
    </div>