Simple by-category views

hugo.yaml

@@ -2,6 +2,10 @@ baseURL:
 languageCode: en-us
 title: My New Hugo Site
 canonifyURLs: true
+disableKinds:
+  - taxonomy
+  - RSS
+  - robotsTXT
 outputs:
   home:
     - html

layouts/cats/list.html

@@ -0,0 +1,122 @@
+{{ define "extratitle" }}
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li class="is-active"><a href="#" aria-current="page">Category</a></li>
+  </ul>
+</nav>
+{{ end }}
+
+{{ define "main" }}
+
+<h1 class="subtitle is-3">Categories</h1>
+
+<div id="listing"></div>
+
+<noscript>
+  <p class="is-3">
+  Sorry, this page is using JavaScript.
+  Maybe try view source?
+  The data is packed there.
+  </p>
+</noscript>
+
+<script>
+var urlized = {
+{{ range .Site.RegularPages -}}
+  {{- range (first 40 .Params.categories) -}}
+    "{{ . }}": "{{ . | urlize }}",
+  {{- end -}}
+{{- end -}}
+};
+
+var data = [
+{{ range .Site.RegularPages -}}
+  {{- if .Params.categories -}}
+  {{ $title := .Title }}
+  {{ if not $title }}
+    {{ $title = .Params.feedlink }}
+  {{ end }}
+  {{ $urlized := ($title | urlize) }}
+  {
+      "t": "{{ $title }}",
+      "s": {{ .Params.score }},
+      "l": "{{ .Permalink }}",
+      "u": "{{ $urlized }}",
+      "c": [
+  {{- range (first 40 .Params.categories) -}}
+          "{{ . }}",
+  {{- end -}}
+      ],
+  },
+  {{- end -}}
+{{- end }}
+];
+
+  // Collect the items
+  var cats = {};
+  var listing = document.getElementById("listing");
+  for (var feed of data) {
+    var p = document.createElement("p");
+    for (var cat of feed.c) {
+      if (!(cat in cats)) {
+        cats[cat] = [];
+      }
+      cats[cat].push({
+          "title": feed.t,
+          "score": feed.s,
+          "link": feed.l,
+      })
+    }
+  }
+
+  // Sort by feeds in cat, then cat name
+  var cats = Object.keys(cats).map(function(key) {
+    return [key, cats[key]];
+  });
+  cats.sort(function(a, b) {
+    var d = b[1].length - a[1].length;
+    if (d == 0) {
+        d = a[0] - b[0];
+    }
+    return d;
+  });
+
+  for (cat of cats) {
+    var details = document.createElement("details");
+    details.classList.add("mb-0");
+    details.classList.add("mt-4");
+    var summary = document.createElement("summary");
+    var h = document.createElement("h2");
+      h.innerText = cat[0] + " (" + cat[1].length + ")";
+    h.classList.add("subtitle");
+    h.classList.add("is-5");
+    h.classList.add("is-inline");
+    h.id = urlized[cat[0]];
+
+    // Highest score, then alphabetical by title
+    cat[1].sort(function(a, b) {
+        var d = b.score - a.score;
+        if (d == 0) {
+          d = a.title - b.title;
+        }
+        return d;
+    });
+
+    for (var page of cat[1]) {
+      var a = document.createElement("a");
+      a.innerText = page.title;
+      a.href = page.link;
+      details.appendChild(document.createElement("br"));
+      details.appendChild(a);
+    }
+    details.appendChild(summary);
+    var bottom = document.createElement("div");
+    bottom.classList.add("p-4");
+    details.appendChild(bottom);
+    summary.appendChild(h);
+    listing.appendChild(details);
+  }
+</script>
+
+{{ end }}

layouts/discover/list.html

@@ -16,6 +16,7 @@ <h2 class="subtitle is-4">Web Feed List</h2>
 
 <p class="block">
 {{ $feeds | len }} web feeds are discoverable through the blogroll network.
+You may also browse by <a href="/cats/">category</a>.
 </p>
 
 <p class="block">
@@ -59,9 +60,11 @@ <h2 class="subtitle is-4">Web Feed List</h2>
     <div class="p-3">
     <span>Categories:</span>
     {{ range (first 40 .Params.categories) }}
+      <a href="{{ absURL (printf "/cats/#%s" (. | urlize)) }}">
       <span class="tag">
         {{- trim (. | truncate 40) " " -}}
       </span>
+      </a>
     {{ end }}
     </div>
   {{ end }}

layouts/discover/single.html

@@ -21,7 +21,9 @@ <h2 class="subtitle is-3 mb-1">{{ .Title | truncate 120 }}</h2>
   {{ if .Params.categories }}
     <div class="tags">
     {{ range (first 10 .Params.categories) }}
+      <a href="{{ absURL (printf "/cats/#%s" (. | urlize) ) }}">
       <span class="tag">{{- trim (. | truncate 40) " " -}}</span>
+      </a>
     {{ end }}
     </div>
   {{ end }}