Skip to content

Commit 04240ca

Browse files
tobihagemanntobihagemann
committed
updated blog list design/layout, added pagination
1 parent 5a9f190 commit 04240ca

File tree

5 files changed

+211
-11
lines changed

5 files changed

+211
-11
lines changed

‎i18n/de.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -828,6 +828,12 @@
828828
- id: hub_setup_contact_us_button
829829
translation: "Kontaktiere uns"
830830

831+
# Pagination
832+
- id: pagination_previous
833+
translation: "Weiter"
834+
- id: pagination_next
835+
translation: "Zurück"
836+
831837
# Pricing
832838
- id: pricing_title
833839
translation: "Finde die passende Option für dich"

‎i18n/en.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -828,6 +828,12 @@
828828
- id: hub_setup_contact_us_button
829829
translation: "Contact Us"
830830

831+
# Pagination
832+
- id: pagination_previous
833+
translation: "Previous"
834+
- id: pagination_next
835+
translation: "Next"
836+
831837
# Pricing
832838
- id: pricing_title
833839
translation: "Find the Right Plan for You"

‎layouts/blog/list.html

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,123 @@
11
{{ define "main" }}
2-
<div class="container-prose py-12">
2+
<div class="container py-12">
33
<header class="mb-6">
44
<h1 class="font-h1">{{ .Title }} <a class="text-link" href="{{ .Site.LanguagePrefix }}/feed.xml"><i class="fas fa-rss-square"></i></a></h1>
55
</header>
66

7-
{{ range .Pages.ByDate.Reverse }}
8-
<section class="mb-6">
9-
<article class="border white-box p-4">
10-
<p class="text-xs md:text-sm text-gray-600 mb-1">{{ dateFormat "2006-01-02" .Params.Date }}</p>
11-
<h2 class="font-h2 mb-6"><a class="text-link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
12-
<p class="font-p">{{ .Summary }}</p>
13-
</article>
14-
</section>
7+
{{ $paginator := .Paginate (.Pages.ByDate.Reverse) 10 }}
8+
9+
{{ if eq $paginator.PageNumber 1 }}
10+
11+
<!-- Section 1: Featured Post (only on Page 1) -->
12+
{{ $featured_post := first 1 $paginator.Pages }}
13+
{{ if $featured_post }}
14+
{{ range $page := $featured_post }}
15+
<article class="white-box grid grid-cols-1 lg:grid-cols-2 overflow-hidden mb-6">
16+
<figure class="h-48 w-full md:h-72 lg:h-96">
17+
<a href="{{ .RelPermalink }}">
18+
{{ if .Params.ogimage }}
19+
<img class="size-full object-cover" src="{{ .Params.ogimage.relsrc }}" alt="{{ .Title }}">
20+
{{ else }}
21+
<img class="size-full object-contain bg-primary-l2 p-6 md:p-12" src="/img/logo.svg" alt="{{ .Title }}">
22+
{{ end }}
23+
</a>
24+
</figure>
25+
<div class="p-4 md:p-8">
26+
<p class="text-xs md:text-sm leading-relaxed text-gray-600 mb-1">{{ dateFormat "2006-01-02" .Params.Date }}</p>
27+
<h2 class="font-headline font-medium text-xl md:text-4xl leading-snug md:leading-tight mb-6">
28+
<a class="text-link" href="{{ .RelPermalink }}">{{ .Title }}</a>
29+
</h2>
30+
<p class="text-sm md:text-xl leading-relaxed">{{ .Summary }}</p>
31+
</div>
32+
</article>
33+
{{ end }}
34+
{{ end }}
35+
36+
<!-- Section 2: Next 2 Posts (2-column cards) (only on Page 1) -->
37+
{{ $card_posts := first 2 (after 1 $paginator.Pages) }}
38+
{{ if $card_posts }}
39+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
40+
{{ range $page := $card_posts }}
41+
<article class="white-box overflow-hidden">
42+
<figure class="h-48 w-full">
43+
<a href="{{ .RelPermalink }}">
44+
{{ if .Params.ogimage }}
45+
<img class="size-full object-cover" src="{{ .Params.ogimage.relsrc }}" alt="{{ .Title }}">
46+
{{ else }}
47+
<img class="size-full object-contain bg-primary-l2 p-6" src="/img/logo.svg" alt="{{ .Title }}">
48+
{{ end }}
49+
</a>
50+
</figure>
51+
<div class="p-4">
52+
<p class="text-xs md:text-sm leading-relaxed text-gray-600 mb-1">{{ dateFormat "2006-01-02" .Params.Date }}</p>
53+
<h2 class="font-h2 mb-6">
54+
<a class="text-link" href="{{ .RelPermalink }}">{{ .Title }}</a>
55+
</h2>
56+
<p class="font-p">{{ .Summary }}</p>
57+
</div>
58+
</article>
59+
{{ end }}
60+
</div>
61+
{{ end }}
62+
63+
<!-- Section 3: Remaining 7 Posts (on Page 1) -->
64+
{{ $list_posts_page1 := after 3 $paginator.Pages }}
65+
{{ if $list_posts_page1 }}
66+
<div class="space-y-6 mb-6">
67+
{{ range $page := $list_posts_page1 }}
68+
<article class="white-box grid grid-cols-1 md:grid-cols-[192px_1fr] overflow-hidden mb-6">
69+
<figure class="h-48 w-full md:h-full">
70+
<a href="{{ .RelPermalink }}">
71+
{{ if .Params.ogimage }}
72+
<img class="size-full object-cover" src="{{ .Params.ogimage.relsrc }}" alt="{{ .Title }}">
73+
{{ else }}
74+
<img class="size-full object-contain bg-primary-l2 p-6" src="/img/logo.svg" alt="{{ .Title }}">
75+
{{ end }}
76+
</a>
77+
</figure>
78+
<div class="p-4">
79+
<p class="text-xs md:text-sm leading-relaxed text-gray-600 mb-1">{{ dateFormat "2006-01-02" .Params.Date }}</p>
80+
<h2 class="font-h2 mb-6">
81+
<a class="text-link" href="{{ .RelPermalink }}">{{ .Title }}</a>
82+
</h2>
83+
<p class="font-p">{{ .Summary }}</p>
84+
</div>
85+
</article>
86+
{{ end }}
87+
</div>
88+
{{ end }}
89+
{{ else }}
90+
91+
<!-- Section 3: All 10 Posts (on Subsequent Pages) -->
92+
{{ $list_posts_others := $paginator.Pages }}
93+
{{ if $list_posts_others }}
94+
<div class="space-y-6 mb-6">
95+
{{ range $page := $list_posts_others }}
96+
<article class="white-box grid grid-cols-1 md:grid-cols-[192px_1fr] overflow-hidden mb-6">
97+
<figure class="h-48 w-full md:h-full">
98+
<a href="{{ .RelPermalink }}">
99+
{{ if .Params.ogimage }}
100+
<img class="size-full object-cover" src="{{ .Params.ogimage.relsrc }}" alt="{{ .Title }}">
101+
{{ else }}
102+
<img class="size-full object-contain bg-primary-l2 p-6" src="/img/logo.svg" alt="{{ .Title }}">
103+
{{ end }}
104+
</a>
105+
</figure>
106+
<div class="p-4">
107+
<p class="text-xs md:text-sm leading-relaxed text-gray-600 mb-1">{{ dateFormat "2006-01-02" .Params.Date }}</p>
108+
<h2 class="font-h2 mb-6">
109+
<a class="text-link" href="{{ .RelPermalink }}">{{ .Title }}</a>
110+
</h2>
111+
<p class="font-p">{{ .Summary }}</p>
112+
</div>
113+
</article>
114+
{{ end }}
115+
</div>
116+
{{ end }}
117+
15118
{{ end }}
119+
120+
<!-- Pagination Controls -->
121+
{{ partial "pagination.html" . }}
16122
</div>
17123
{{ end }}

‎layouts/coop/list.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h1 class="font-h1">{{ .Title }}</h1>
66

77
{{ range (.Pages.ByParam "prio") }}
88
<section class="mb-6">
9-
<article class="flex border white-box p-4">
9+
<article class="flex white-box p-4">
1010
<div class="w-1/6 text-center mr-3">
1111
<a href="{{ .RelPermalink }}"><img class="inline-block" src="{{ .Params.Img }}" srcset="{{ .Params.Img }} 1x, {{ .Params.Img2x }} 2x"/></a>
1212
</div>
@@ -21,7 +21,7 @@ <h2 class="font-h2 mb-6"><a class="text-link" href="{{ .RelPermalink }}">{{ .Tit
2121
<hr class="my-8"/>
2222

2323
<section class="mb-6">
24-
<article class="flex border white-box p-4">
24+
<article class="flex white-box p-4">
2525
<div class="w-1/6 text-center mr-3">
2626
<a href="{{ .RelPermalink }}"><i class="fas fa-question-circle text-5xl md:text-7xl text-gray-400"></i></a>
2727
</div>

‎layouts/partials/pagination.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{{ $paginator := .Paginator }}
2+
{{ if gt $paginator.TotalPages 1 }}
3+
<div class="relative">
4+
<div class="flex items-center justify-center">
5+
<!-- Previous Button -->
6+
<div class="absolute left-0">
7+
{{ if $paginator.HasPrev }}
8+
<a href="{{ $paginator.Prev.URL }}" class="inline-block border rounded-sm no-underline text-center text-sm md:text-base px-3 md:px-4 py-2 bg-white border-gray-300 text-gray-700 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
9+
<i class="fas fa-arrow-left text-primary" aria-hidden="true"></i>
10+
<span class="hidden md:inline ml-2">{{ i18n "pagination_previous" }}</span>
11+
<span class="md:hidden sr-only">{{ i18n "pagination_previous" }}</span>
12+
</a>
13+
{{ end }}
14+
</div>
15+
16+
<!-- Page Numbers -->
17+
<nav class="flex border rounded-sm bg-white border-gray-300 text-gray-700 divide-x divide-gray-300 overflow-hidden" aria-label="Pagination">
18+
{{ $currentPage := $paginator.PageNumber }}
19+
{{ $totalPages := $paginator.TotalPages }}
20+
{{ $windowDelta := 1 }}
21+
22+
{{ $windowActualStart := sub $currentPage $windowDelta }}
23+
{{ $windowActualEnd := add $currentPage $windowDelta }}
24+
25+
{{ if lt $windowActualStart 1 }} {{ $windowActualStart = 1 }} {{ end }}
26+
{{ if gt $windowActualEnd $totalPages }} {{ $windowActualEnd = $totalPages }} {{ end }}
27+
28+
<!-- Show Page 1 and potentially left ellipsis -->
29+
{{ if gt $windowActualStart 1 }}
30+
<a href="{{ (index $paginator.Pagers 0).URL }}" class="text-center text-sm md:text-base px-3 md:px-4 py-2 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
31+
1
32+
</a>
33+
{{ $leftEllipsisTarget := sub $windowActualStart 1 }}
34+
{{ if gt $leftEllipsisTarget 1 }}
35+
<a href="{{ (index $paginator.Pagers (sub $leftEllipsisTarget 1)).URL }}" class="text-center text-sm md:text-base px-3 md:px-4 py-2 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
36+
…
37+
</a>
38+
{{ end }}
39+
{{ end }}
40+
41+
<!-- Page numbers in the window -->
42+
{{ range $pager := $paginator.Pagers }}
43+
{{ if and (ge .PageNumber $windowActualStart) (le .PageNumber $windowActualEnd) }}
44+
{{ if eq .PageNumber $currentPage }}
45+
<a href="{{ .URL }}" aria-current="page" class="bg-primary text-white text-center text-sm md:text-base px-3 md:px-4 py-2">
46+
{{ .PageNumber }}
47+
</a>
48+
{{ else }}
49+
<a href="{{ .URL }}" class="text-center text-sm md:text-base px-3 md:px-4 py-2 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
50+
{{ .PageNumber }}
51+
</a>
52+
{{ end }}
53+
{{ end }}
54+
{{ end }}
55+
56+
<!-- Show right ellipsis and potentially Page $totalPages -->
57+
{{ if lt $windowActualEnd $totalPages }}
58+
{{ $rightEllipsisTarget := add $windowActualEnd 1 }}
59+
{{ if lt $rightEllipsisTarget $totalPages }}
60+
<a href="{{ (index $paginator.Pagers (sub $rightEllipsisTarget 1)).URL }}" class="text-center text-sm md:text-base px-3 md:px-4 py-2 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
61+
…
62+
</a>
63+
{{ end }}
64+
<a href="{{ (index $paginator.Pagers (sub $totalPages 1)).URL }}" class="text-center text-sm md:text-base px-3 md:px-4 py-2 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
65+
{{ $totalPages }}
66+
</a>
67+
{{ end }}
68+
</nav>
69+
70+
<!-- Next Button -->
71+
<div class="absolute right-0">
72+
{{ if $paginator.HasNext }}
73+
<a href="{{ $paginator.Next.URL }}" class="inline-block border rounded-sm no-underline text-center text-sm md:text-base px-3 md:px-4 py-2 bg-white border-gray-300 text-gray-700 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700">
74+
<span class="hidden md:inline mr-2">{{ i18n "pagination_next" }}</span>
75+
<i class="fas fa-arrow-right text-primary" aria-hidden="true"></i>
76+
<span class="md:hidden sr-only">{{ i18n "pagination_next" }}</span>
77+
</a>
78+
{{ end }}
79+
</div>
80+
</div>
81+
</div>
82+
{{ end }}

0 commit comments

Comments
 (0)