Blog: List page with summary and pagination

2023-10-08 00:13:18 +02:00 · 2023-10-08 00:13:18 +02:00 · 171fa015f1
commit 171fa015f1
parent a80cb42a34
14 changed files with 282 additions and 53 deletions
--- a/README.md
+++ b/README.md
@ -62,6 +62,9 @@ To create a new general blog post, run a command like this:
 hugo new content --kind article blog/your-article-title.md
 ```

+By default the first 70 words are shown as a summary on list pages.
+Please use `<!--more-->` to manually separate the summary from other post content.
+
 ### Icons

 You can use solid and brand icons from https://fontawesome.com/icons version 6 in your posts like this:
--- a/content/blog/test-event-future.md
+++ b/content/blog/test-event-future.md
@ -6,9 +6,15 @@ publishDate: 2023-08-27T09:03:20+02:00 # when to publish
 draft: false
 location: Z9
 authors:
-  - jtbx
  - Ada Lovelace
 ---
 This is **bold** text, and this is *emphasized* text.

-Visit the [Hugo](https://gohugo.io) website!
+Visit the [Hugo](https://gohugo.io) website!
+
+Rem qui qui dolores sit. Ut sequi doloribus nobis et eaque. Voluptas deserunt aut explicabo exercitationem.
+Recusandae qui libero corporis in et voluptatem neque quas. Eius quaerat repellendus minus et. Ut est magnam aut vitae maiores deserunt cumque ut. Quia et ad atque consequuntur magnam odit.
+<!--more-->
+Magnam ipsam sed ratione. Voluptates voluptas facilis quas quia rerum reiciendis. Laborum aspernatur molestiae at quibusdam eligendi fuga voluptas molestiae.
+Sint recusandae fugiat ut dolore. A culpa sapiente soluta quis quis assumenda ratione. Nulla rem et quis corrupti dolorem. Ea odio nobis qui. Non dolorum tempora explicabo pariatur a accusantium sint id. Reiciendis omnis nam aut.
+Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.
--- a/content/blog/test-event-future2.md
+++ b/content/blog/test-event-future2.md
@ -16,4 +16,4 @@ Rem qui qui dolores sit. Ut sequi doloribus nobis et eaque. Voluptas deserunt au
 Recusandae qui libero corporis in et voluptatem neque quas. Eius quaerat repellendus minus et. Ut est magnam aut vitae maiores deserunt cumque ut. Quia et ad atque consequuntur magnam odit.
 Magnam ipsam sed ratione. Voluptates voluptas facilis quas quia rerum reiciendis. Laborum aspernatur molestiae at quibusdam eligendi fuga voluptas molestiae.
 Sint recusandae fugiat ut dolore. A culpa sapiente soluta quis quis assumenda ratione. Nulla rem et quis corrupti dolorem. Ea odio nobis qui. Non dolorum tempora explicabo pariatur a accusantium sint id. Reiciendis omnis nam aut.
-Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.
+Quia ut asperiores eos earum assumenda ratione voluptatem aliquid. Quod delectus et blanditiis aspernatur. Et nemo est ducimus voluptas ut excepturi excepturi ea. Harum et natus culpa velit.
--- a/content/blog/test-event.md
+++ b/content/blog/test-event.md
@ -10,7 +10,9 @@ authors:
  - Ada Lovelace
 tags:
  - test
+  - bar
+  - foo
 ---
 This is **bold** text, and this is *emphasized* text.

-Visit the [Hugo](https://gohugo.io) website!
+Visit the [Hugo](https://gohugo.io) website!
--- a/content/blog/test-post.md
+++ b/content/blog/test-post.md
@ -11,4 +11,4 @@ tags:
 ---
 This is **bold** text, and this is *emphasized* text.

-Visit the [Hugo](https://gohugo.io) website!
+Visit the [Hugo](https://gohugo.io) website!
--- a/themes/ccchh/assets/sass/main.scss
+++ b/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 {
--- a/themes/ccchh/layouts/_default/list.html
+++ b/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>
--- a/themes/ccchh/layouts/_default/summary.html
+++ b/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>
--- a/themes/ccchh/layouts/_default/term.html
+++ b/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 }}
--- a/themes/ccchh/layouts/_default/terms.html
+++ b/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>
--- a/themes/ccchh/layouts/blog/list.html
+++ b/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 }}
--- a/themes/ccchh/layouts/blog/single.html
+++ b/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 }}
--- a/themes/ccchh/layouts/partials/blog-header.html
+++ b/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 }}
--- a/themes/ccchh/layouts/partials/pagination.html
+++ b/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 -}}