OPENBUREAU/layouts/library/list.html

{{ define "main" }}
  <div class="collection" style="--section-color: var(--palette-ichigo)">
    <h1 class="collection-title">{{ .Title }}</h1>
    <div class="collection-inner">
      {{ .Content }}

      {{ $pages := where site.RegularPages "Section" "library" }}

      {{ 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" }}
                  {{ $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>
                {{ end }}
              </ul>
            </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 }}
    </div>
  </div>
{{ end }}