wip(web): paginate blog archives with a centered numbered pager and 9 posts per page

Author: lgarciaog

web/config.toml

@@ -22,6 +22,10 @@ ignoreFiles = ['_index\.template\.md$']
     tag = "tags"
     author = "author"
 
+# blog archives render a 3-column card grid, so pages hold a multiple of 3
+[pagination]
+    pagerSize = 9
+
 [params]
     # draft site: keep search engines out — remove before production launch
     noindex = true

web/layouts/_default/list.html

@@ -0,0 +1,19 @@
+{{ define "main" }}
+	<section id="blog" class="sectionPad">
+		<div class="gradientOverlay blueGradient inverted"></div>
+		<div class="container">
+			<div class="row">
+				{{ if or .Title .Content }}
+					<h1 class="col-sm-12 textGradient">{{ if ne .Section "blog" }} <span class="capitalize">{{ .Section }}:</span> {{ end }} {{ .Title }}</h1>
+					{{ with .Content }}<div>{{ . }}</div>{{ end }}
+				{{ end }}
+				<div id="postList" class="row columnGap">
+					{{ range .Paginator.Pages }}
+						{{ .Render "summary" }}
+					{{ end }}
+				</div>
+				{{ partial "pagination.html" . }}
+			</div>
+		</div>
+	</section>
+{{ end }}

web/layouts/partials/pagination.html

@@ -0,0 +1,19 @@
+{{ if gt .Paginator.TotalPages 1 }}
+<div class="separator"></div>
+<nav class="pagination textCenter">
+	{{ if .Paginator.HasPrev }}
+		<a href="{{ .Paginator.Prev.URL }}" class="prev noUnderline" title="Previous page">&lsaquo;</a>
+	{{ end }}
+	{{ range $i, $pager := .Paginator.Pagers }}
+		{{- if $i }}<span class="dot">&middot;</span>{{ end -}}
+		{{- if eq $pager.PageNumber $.Paginator.PageNumber -}}
+			<span class="current">{{ $pager.PageNumber }}</span>
+		{{- else -}}
+			<a href="{{ $pager.URL }}" class="noUnderline" title="Page {{ $pager.PageNumber }}">{{ $pager.PageNumber }}</a>
+		{{- end -}}
+	{{ end }}
+	{{ if .Paginator.HasNext }}
+		<a href="{{ .Paginator.Next.URL }}" class="next noUnderline" title="Next page">&rsaquo;</a>
+	{{ end }}
+</nav>
+{{ end }}

web/static/css/site.css

@@ -44,3 +44,24 @@
 		transform: rotate(225deg) translateY(-1px);
 	}
 }
+
+/* blog pagination (project partial): centered "< 1 · 2 · 3 > " pager */
+.pagination {
+	/* relative lifts it above the section's absolutely-positioned
+	   .gradientOverlay, which otherwise swallows the clicks */
+	position: relative;
+	width: 100%;
+	margin-top: 30px;
+}
+
+.pagination a,
+.pagination .current,
+.pagination .dot {
+	display: inline-block;
+	padding: 0 10px;
+}
+
+.pagination a {
+	color: var(--baseColor);
+}
+