News and author pages: listPosts per page, with pager

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ

README.md

@@ -26,7 +26,8 @@ links to `/author/<name>/`, which lists all posts by that author. For a banner,
 image under `static/media/` and set `banner: /media/....jpg` (`image:` works too). Write the text in Markdown and
 remove `draft: true` to publish. The most recent posts (`homePosts` in `hugo.toml`, 5 by default) appear on the home page with their
 banner, date, author and summary (`summary:` in the front matter, or the text before
-`<!--more-->`, or the first lines); all posts are listed under News. Posts are never touched by
+`<!--more-->`, or the first lines); all posts are listed under News and on each
+author's page, `listPosts` per page (20 by default). Posts are never touched by
 `make content`.
 
 ## Search

assets/css/main.css

@@ -158,3 +158,7 @@ table { border-collapse: collapse; }
   --pagefind-ui-scale: 0.85;
 }
 #search mark { background: none; color: inherit; font-weight: 700; }
+
+.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 0; }
+.pager a, .pager .current { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: var(--panel); }
+.pager .current { font-weight: 700; border-color: var(--accent); }

hugo.toml

@@ -13,8 +13,10 @@ capitalizeListTitles = false
   date = ["date", ":filename", ":default"]
 
 [params]
-  # number of news posts summarised on the home page (the News page lists them all)
+  # number of news posts summarised on the home page
   homePosts = 5
+  # number of news posts per page on the News page and on each author's page
+  listPosts = 20
   description = "The Old-Computers.com museum of computers, consoles and pongs, rebuilt from the Wayback Machine archive."
 
 [taxonomies]

layouts/_partials/pager.html

@@ -0,0 +1,12 @@
+{{/* page links for a paginator; nothing when there is a single page */}}
+{{ if gt .TotalPages 1 }}
+<nav class="pager" aria-label="Pages" data-pagefind-ignore>
+  {{ if .HasPrev }}<a href="{{ .Prev.URL }}" rel="prev">← Newer</a>{{ end }}
+  {{ $current := .PageNumber }}
+  {{ range .Pagers }}
+  {{ if eq .PageNumber $current }}<span class="current" aria-current="page">{{ .PageNumber }}</span>
+  {{ else }}<a href="{{ .URL }}">{{ .PageNumber }}</a>{{ end }}
+  {{ end }}
+  {{ if .HasNext }}<a href="{{ .Next.URL }}" rel="next">Older →</a>{{ end }}
+</nav>
+{{ end }}

layouts/author/term.html

@@ -2,7 +2,9 @@
 {{ define "main" }}
 <p class="crumbs" data-pagefind-ignore>{{ with site.GetPage "/post" }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }} › <a href="{{ .Parent.RelPermalink }}">Authors</a></p>
 <h1>Posts by {{ .Title }}</h1>
+{{ $pager := .Paginate .Pages.ByDate.Reverse (site.Params.listPosts | default 20) }}
 <div class="posts">
-  {{ range .Pages.ByDate.Reverse }}{{ partial "post-summary.html" . }}{{ end }}
+  {{ range $pager.Pages }}{{ partial "post-summary.html" . }}{{ end }}
 </div>
+{{ partial "pager.html" $pager }}
 {{ end }}

layouts/post/section.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
 <div class="content">{{ .Content }}</div>
+{{ $pager := .Paginate .RegularPages.ByDate.Reverse (site.Params.listPosts | default 20) }}
 <div class="posts">
-  {{ range .RegularPages.ByDate.Reverse }}{{ partial "post-summary.html" . }}{{ end }}
+  {{ range $pager.Pages }}{{ partial "post-summary.html" . }}{{ end }}
 </div>
+{{ partial "pager.html" $pager }}
 {{ end }}