software catalog

layouts/partials/sections/catalog.html

@@ -0,0 +1,70 @@
+{{/*
+  The software catalog: every page in content/software/, grouped by its
+  `category` in the order of params.softwareGroups (hugo.toml). Each row
+  links to the app's page and shows its tagline and where it's installed
+  from. A filter box (progressive: hidden without JS) narrows the rows.
+*/}}
+{{ $s := . }}
+{{ $apps := (site.GetPage "/software").RegularPages }}
+{{ partial "sections/head.html" $s }}
+<div class="cat-tools">
+  <nav class="cat-nav" aria-label="Software groups">
+    {{ range site.Params.softwareGroups }}
+    {{ $n := len (where $apps "Params.category" .name) }}
+    {{ if $n }}<a href="#{{ .name | anchorize }}">{{ .name }}<span class="cat-count">{{ $n }}</span></a>{{ end }}
+    {{ end }}
+  </nav>
+  <label class="cat-filter" hidden>
+    <span class="visually-hidden">Filter the catalog</span>
+    <input type="search" placeholder="Filter {{ len $apps }} titles…" autocomplete="off" spellcheck="false">
+  </label>
+</div>
+<div class="catalog">
+  {{ range site.Params.softwareGroups }}
+  {{ $group := . }}
+  {{ with where $apps "Params.category" $group.name }}
+  <section class="cat-group" id="{{ $group.name | anchorize }}">
+    <header class="cat-group-head">
+      <h3>{{ $group.name }}</h3>
+      {{ with $group.blurb }}<p>{{ . }}</p>{{ end }}
+    </header>
+    <ul class="cat-list">
+      {{ range .ByTitle }}
+      <li class="cat-row" data-search="{{ lower (delimit (slice .Title (.Params.tagline | default "") (.Params.package | default "") (delimit (.Params.replaces | default slice) " ")) " ") }}">
+        <a class="cat-name" href="{{ .RelPermalink }}">{{ .Title }}</a>
+        <span class="cat-desc">{{ .Params.tagline | markdownify }}</span>
+        <span class="cat-src cat-src-{{ .Params.source | default "pacman" | urlize }}">{{ .Params.source | default "pacman" }}</span>
+      </li>
+      {{ end }}
+    </ul>
+  </section>
+  {{ end }}
+  {{ end }}
+  <p class="cat-none" hidden>Nothing matches. Try another word, or <a href="{{ "contribute/" | relURL }}">suggest a title</a>.</p>
+</div>
+{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+<script>
+  (function () {
+    var box = document.querySelector('.cat-filter');
+    if (!box) return;
+    box.hidden = false;
+    var input = box.querySelector('input');
+    var rows = document.querySelectorAll('.cat-row');
+    var groups = document.querySelectorAll('.cat-group');
+    var none = document.querySelector('.cat-none');
+    input.addEventListener('input', function () {
+      var words = input.value.toLowerCase().trim().split(/\s+/).filter(Boolean);
+      rows.forEach(function (row) {
+        var text = row.dataset.search;
+        row.hidden = !words.every(function (w) { return text.indexOf(w) !== -1; });
+      });
+      var any = false;
+      groups.forEach(function (g) {
+        var shown = g.querySelector('.cat-row:not([hidden])');
+        g.hidden = !shown;
+        if (shown) any = true;
+      });
+      none.hidden = any;
+    });
+  })();
+</script>