Blog: List page with summary and pagination

themes/ccchh/assets/sass/main.scss

@@ -2,6 +2,9 @@ $roomstate_color_unknown: #dda218;
 $roomstate_color_open: var(--ins-color);
 $roomstate_color_closed: var(--del-color);
 
+:root {
+  --spacing: 0.7rem;
+}
 
 // General Customizations
 header {
@@ -10,6 +13,10 @@ header {
   h1 {
     margin-bottom: 0;
   }
+
+  h2 {
+    margin-bottom: 0;
+  }
 }
 
 body>footer {
@@ -31,6 +38,44 @@ body>main {
   }
 }
 
+.li-space {
+  &::after {
+    content: "";
+    padding-right: 1rem;
+  }
+
+  &:last-child::after {
+    padding-right: 0;
+  }
+}
+
+.morelink {
+  margin-top: calc(var(--typography-spacing-vertical) * -1);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+
+  li {
+    list-style: none;
+
+    a {
+      border-radius: 0;
+    }
+
+    &:first-child>a {
+      border-top-left-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+    }
+
+    &:last-child>a {
+      border-top-right-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+}
+
 
 // Room State in Menu
 #roomstate {

themes/ccchh/layouts/_default/list.html

@@ -6,7 +6,6 @@
 
     <ul>
       {{ range .Pages }}
-      <!-- TODO: Content summary -->
         <li>
           <a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
         </li>

themes/ccchh/layouts/_default/summary.html

@@ -0,0 +1,13 @@
+
+<article>
+  {{- partial "blog-header.html" (dict "subitem" true "page" . ) }}
+
+  {{- if in .RawContent "<!--more-->" }}
+    {{ .Summary | safeHTML }}
+  {{- else }}
+    <p>{{ .Summary | safeHTML }}</p>
+  {{- end }}
+  {{- if .Truncated }}
+    <div class="morelink"><a href="{{ .RelPermalink }}">mehr...</a></div>
+  {{- end }}
+</article>

themes/ccchh/layouts/_default/term.html

@@ -4,13 +4,9 @@
       <h1>{{ .Parent.Title }}: {{ .Title }}</h1>
     </header>
 
-    <ul>
-      {{ range .Pages }}
-      <!-- TODO: Content summary -->
-        <li>
-          <a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
-        </li>
-      {{ end }}
-    </ul>
+    {{- range .Pages }}
+      {{ .Render "summary" }}
+    {{- end }}
+    <!-- TODO: Pagination: see https://gohugo.io/templates/pagination/ -->
   </main>
 {{ end }}

themes/ccchh/layouts/_default/terms.html

@@ -6,11 +6,9 @@
 
     <section>
       <ul>
-        {{ range .Pages }}
-        <li>
-          <a href="{{ .Permalink }}">{{ .Title }}</a>
-        </li>
-        {{ end }}
+        {{- range .Pages }}
+        <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+        {{- end }}
       </ul>
     </section>
   </main>

themes/ccchh/layouts/blog/list.html

@@ -2,30 +2,23 @@
   <main class="container" aria-role="main">
     <header class="header">
       <h1>{{ .Title }}</h1>
-      {{ with .Params.subtitle }}
+      {{- with .Params.subtitle }}
       <span class="subtitle">{{ . }}</span>
-      {{ end }}
+      {{- end }}
 
       <div class="nav-aside">
         Filter nach Kategorie:
         <ul class="aside">
-        {{ range .Site.Taxonomies.categories }}
-          <li>
-            <a href="{{ .Page.Permalink }}">[{{ .Page.Title }}]</a>
-          </li>
-        {{ end }}
+        {{- range .Site.Taxonomies.categories }}
+          <li><a href="{{ .Page.Permalink }}">[{{ .Page.Title }}]</a></li>
+        {{- end }}
         </ul>
       </div>
     </header>
 
-    <ul>
-      {{ range .Pages }}
-      <!-- TODO: Content summary -->
-        <li>
-          <a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
-        </li>
-      {{ end }}
-    </ul>
-    <!-- TODO: Pagination: see https://gohugo.io/templates/pagination/ -->
+    {{ range .Paginator.Pages }}
+      {{ .Render "summary" }}
+    {{- end }}
+    {{ partial "pagination.html" . }}
   </main>
 {{ end }}

themes/ccchh/layouts/blog/single.html

@@ -1,23 +1,6 @@
 {{ define "main" }}
   <main class="container" aria-role="main">
-    <header class="header">
-      <h1>{{ .Title }}</h1>
-      {{- with .Params.subtitle }}
-      <span class="subtitle">{{ . }}</span>
-      {{- end }}
-
-      <div class="infos">
-        <i class="fa-regular fa-calendar-xmark"></i> {{ .Date.Format "2006-01-02 15:04" }}
-        {{- with .Params.location }},
-        <i class="fa-solid fa-location-dot"></i> {{ . }}
-        {{- end }}
-        <br>
-        {{- if .Params.authors }}
-        <i class="fa-regular fa-user"></i>
-          {{ range .Params.authors }}<span class="li-comma">{{ . }}</span>{{ end }}
-        {{- end }}
-      </div>
-    </header>
+    {{- partial "blog-header.html" (dict "subitem" false "page" . ) }}
 
     <section class="content">
       {{ .Content }}

themes/ccchh/layouts/partials/blog-header.html

@@ -0,0 +1,37 @@
+{{- $page := .page -}}
+{{- $isMain := not .subitem -}}
+
+{{ with $page }}
+      <header>
+        {{- if $isMain }}
+        <h1>{{ .Title }}</h1>
+        {{- else }}
+        <a href="{{ .Permalink }}"><h2>{{ .Title }}</h2></a>
+        {{- end }}
+        {{- with .Params.subtitle }}
+        <span class="subtitle">{{ . }}</span>
+        {{- end }}
+
+        <div class="infos">
+          <span class="li-space"><i class="fa-solid fa-calendar-day"></i> {{ .Date.Format "2006-01-02 15:04" }}</span>
+          {{- with .Params.location }}
+          <span class="li-space"><i class="fa-solid fa-location-dot"></i> {{ . }}</span>
+          {{- end }}
+          {{- with .Page.GetTerms "tags" }}
+          <span class="li-space"><i class="fa-solid fa-tag"></i>
+            {{- range . }}
+            <span class="li-comma"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
+            {{- end }}
+          </span>
+          {{- end }}
+          <br>
+          {{- with .Page.GetTerms "authors" }}
+          <span class="li-space"><i class="fa-regular fa-user"></i>
+            {{- range . }}
+            <span class="li-comma"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
+            {{- end }}
+          </span>
+          {{- end }}
+        </div>
+      </header>
+{{- end }}

themes/ccchh/layouts/partials/pagination.html

@@ -0,0 +1,154 @@
+{{- $validFormats := slice "default" "terse" }}
+
+{{- $msg1 := "When passing a map to the internal pagination template, one of the elements must be named 'page', and it must be set to the context of the current page." }}
+{{- $msg2 := "The 'format' specified in the map passed to the internal pagination template is invalid. Valid choices are: %s." }}
+
+{{- $page := . }}
+{{- $format := "default" }}
+
+{{- if reflect.IsMap . }}
+  {{- with .page }}
+    {{- $page = . }}
+  {{- else }}
+    {{- errorf $msg1 }}
+  {{- end }}
+  {{- with .format }}
+    {{- $format = lower . }}
+  {{- end }}
+{{- end }}
+
+{{- if in $validFormats $format }}
+  {{- if gt $page.Paginator.TotalPages 1 }}
+    <ul class="pagination pagination-{{ $format }}">
+      {{- partial (printf "partials/inline/pagination/%s" $format) $page }}
+    </ul>
+  {{- end }}
+{{- else }}
+  {{- errorf $msg2 (delimit $validFormats ", ") }}
+{{- end -}}
+
+{{/* Format: default
+{{/* --------------------------------------------------------------------- */}}
+{{- define "partials/inline/pagination/default" }}
+  {{- with .Paginator }}
+    {{- $currentPageNumber := .PageNumber }}
+
+    {{- with .First }}
+      {{- if ne $currentPageNumber .PageNumber }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="First" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
+      </li>
+      {{- else }}
+      <li class="page-item disabled">
+        <a aria-disabled="true" aria-label="First" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&laquo;&laquo;</span></a>
+      </li>
+      {{- end }}
+    {{- end }}
+
+    {{- with .Prev }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Previous" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;</span></a>
+      </li>
+    {{- else }}
+      <li class="page-item disabled">
+        <a aria-disabled="true" aria-label="Previous" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&laquo;</span></a>
+      </li>
+    {{- end }}
+
+    {{- $slots := 5 }}
+    {{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
+    {{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
+    {{- if lt (add (sub $end $start) 1) $slots }}
+      {{- $start = math.Max 1 (add (sub $end $slots) 1) }}
+    {{- end }}
+
+    {{- range $k := seq $start $end }}
+      {{- if eq $.Paginator.PageNumber $k }}
+      <li class="page-item active">
+        <a aria-current="page" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
+      </li>
+      {{- else }}
+      <li class="page-item">
+        <a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
+      </li>
+      {{- end }}
+    {{- end }}
+
+    {{- with .Next }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Next" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;</span></a>
+      </li>
+    {{- else }}
+      <li class="page-item disabled">
+        <a aria-disabled="true" aria-label="Next" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&raquo;</span></a>
+      </li>
+    {{- end }}
+
+    {{- with .Last }}
+      {{- if ne $currentPageNumber .PageNumber }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Last" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
+      </li>
+      {{- else }}
+      <li class="page-item disabled">
+        <a aria-disabled="true" aria-label="Last" class="page-link secondary outline" role="button" tabindex="-1"><span aria-hidden="true">&raquo;&raquo;</span></a>
+      </li>
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end -}}
+
+{{/* Format: terse
+{{/* --------------------------------------------------------------------- */}}
+{{- define "partials/inline/pagination/terse" }}
+  {{- with .Paginator }}
+    {{- $currentPageNumber := .PageNumber }}
+
+    {{- with .First }}
+      {{- if ne $currentPageNumber .PageNumber }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="First" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;&laquo;</span></a>
+      </li>
+      {{- end }}
+    {{- end }}
+
+    {{- with .Prev }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Previous" class="page-link secondary outline" role="button"><span aria-hidden="true">&laquo;</span></a>
+      </li>
+    {{- end }}
+
+    {{- $slots := 3 }}
+    {{- $start := math.Max 1 (sub .PageNumber (math.Floor (div $slots 2))) }}
+    {{- $end := math.Min .TotalPages (sub (add $start $slots) 1) }}
+    {{- if lt (add (sub $end $start) 1) $slots }}
+      {{- $start = math.Max 1 (add (sub $end $slots) 1) }}
+    {{- end }}
+
+    {{- range $k := seq $start $end }}
+      {{- if eq $.Paginator.PageNumber $k }}
+      <li class="page-item active">
+        <a aria-current="page" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
+      </li>
+      {{- else }}
+      <li class="page-item">
+        <a href="{{ (index $.Paginator.Pagers (sub $k 1)).URL }}" aria-label="Page {{ $k }}" class="page-link secondary outline" role="button">{{ $k }}</a>
+      </li>
+      {{- end }}
+    {{- end }}
+
+    {{- with .Next }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Next" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;</span></a>
+      </li>
+    {{- end }}
+
+    {{- with .Last }}
+      {{- if ne $currentPageNumber .PageNumber }}
+      <li class="page-item">
+        <a href="{{ .URL }}" aria-label="Last" class="page-link secondary outline" role="button"><span aria-hidden="true">&raquo;&raquo;</span></a>
+      </li>
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end -}}