kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on first page with pagination

Browse Source
This commit is contained in:
kbe
2025-08-20 15:39:07 +02:00
parent 75d235c17e
commit 41805da339
2 changed files with 148 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
layouts/index.html
View File

@@ -6,18 +6,18 @@
<section class="gradient-bg py-12 md:py-16 lg:py-20"> <section class="gradient-bg py-12 md:py-16 lg:py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto text-center"> <div class="max-w-4xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Exploring Technology's Impact on Work & Life</h1> <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Explorer l'Impact de la Technologie sur le Travail et la Vie</h1>
<p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p> <p class="text-xl text-gray-700 mb-8">Perspectives, analyses et tendances sur la manière dont la technologie façonne notre avenir</p>
<div class="flex flex-wrap justify-center gap-3 mb-10"> <div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">AI</span> <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">IA</span>
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span> <span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Télétravail</span>
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span> <span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivité</span>
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span> <span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
<span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span> <span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
</div> </div>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Get Updates</button> <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Recevoir les mises à jour</button>
</form> </form>
</div> </div>
</div> </div>
@@ -26,10 +26,10 @@
<!-- Featured Articles --> <!-- Featured Articles -->
<section class="py-12 md:py-16"> <section class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2> <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles en Vedette</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
{{ range first 2 $.Site.RegularPages }} {{ range first 2 (where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured")) }}
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card"> <div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
<div class="featured-article"> <div class="featured-article">
<a href="{{ .RelPermalink }}"> <a href="{{ .RelPermalink }}">
@@ -60,10 +60,10 @@
</p> </p>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center text-sm text-gray-500"> <div class="flex items-center text-sm text-gray-500">
<img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2"> {{/* <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2"> */}}
<a href="/author/{{ .Params.author | urlize }}" class="hover:underline">{{ .Params.author }}</a> <a href="/author/{{ .Params.author | urlize }}" class="hover:underline">{{ .Params.author }}</a>
<span class="mx-2">•</span> <span class="mx-2">•</span>
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span> <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
</div> </div>
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a> <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
</div> </div>
@@ -73,21 +73,26 @@
</div> </div>
<div class="text-center"> <div class="text-center">
<a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> <a href="#latest-articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
View all articles Voir plus d'articles
<i class="fas fa-arrow-right ml-2"></i> <i class="fas fa-arrow-down ml-2"></i>
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<!-- Latest Articles --> <!-- Latest Articles -->
<section class="py-12 md:py-16 bg-gray-50"> <section id="latest-articles" class="py-12 md:py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2> <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Derniers Articles</h2>
{{ $featuredPosts := where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured") }}
{{ $regularPosts := where $.Site.RegularPages "Type" "!=" "page" }}
{{ $nonFeaturedPosts := complement $featuredPosts $regularPosts }}
{{ $paginator := .Paginate $nonFeaturedPosts 9 }}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
{{ range first 6 (after 2 $.Site.RegularPages) }} {{ range $paginator.Pages }}
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card"> <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
<a href="{{ .RelPermalink }}"> <a href="{{ .RelPermalink }}">
{{ if .Params.featured_image }} {{ if .Params.featured_image }}
@@ -98,11 +103,13 @@
</a> </a>
<div class="p-6"> <div class="p-6">
<div class="flex flex-wrap gap-2 mb-3"> <div class="flex flex-wrap gap-2 mb-3">
{{ range first 1 .Params.categories }} {{ if .Params.categories }}
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a> {{ range first 1 .Params.categories }}
<a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
{{ end }}
{{ end }} {{ end }}
</div> </div>
<h3 class="text-lg font-bold text-gray-900 mb-3">{{ .Title }}</h3> <h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<p class="text-gray-600 text-sm mb-4"> <p class="text-gray-600 text-sm mb-4">
{{ if .Params.excerpt }} {{ if .Params.excerpt }}
{{ .Params.excerpt }} {{ .Params.excerpt }}
@@ -113,48 +120,49 @@
{{ end }} {{ end }}
</p> </p>
<div class="flex items-center justify-between text-sm text-gray-500"> <div class="flex items-center justify-between text-sm text-gray-500">
<span>{{ .Date | time.Format "Jan 2, 2006" }}</span> <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
<a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a> <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
</div> </div>
</div> </div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="text-center"> <!-- Pagination -->
<a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> <div class="flex justify-center mt-12">
View all articles {{ if gt .Paginator.TotalPages 1 }}
<i class="fas fa-arrow-right ml-2"></i> {{ partial "pagination-tailwind.html" .Paginator }}
</a> {{ end }}
</div> </div>
</div> </div>
</section> </section>
{{/*
<!-- Popular Topics --> <!-- Popular Topics -->
<section class="py-12 md:py-16"> <section class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2> <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explorer les Thèmes</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"> <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-robot text-blue-600 text-xl"></i> <i class="fas fa-robot text-blue-600 text-xl"></i>
</div> </div>
<span class="text-sm font-medium text-gray-900">AI</span> <span class="text-sm font-medium text-gray-900">IA</span>
</a> </a>
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"> <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3"> <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-laptop-house text-green-600 text-xl"></i> <i class="fas fa-laptop-house text-green-600 text-xl"></i>
</div> </div>
<span class="text-sm font-medium text-gray-900">Remote Work</span> <span class="text-sm font-medium text-gray-900">Télétravail</span>
</a> </a>
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"> <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3"> <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-tachometer-alt text-purple-600 text-xl"></i> <i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
</div> </div>
<span class="text-sm font-medium text-gray-900">Productivity</span> <span class="text-sm font-medium text-gray-900">Productivité</span>
</a> </a>
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"> <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
@@ -168,7 +176,7 @@
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3"> <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
<i class="fas fa-code text-red-600 text-xl"></i> <i class="fas fa-code text-red-600 text-xl"></i>
</div> </div>
<span class="text-sm font-medium text-gray-900">Development</span> <span class="text-sm font-medium text-gray-900">Développement</span>
</a> </a>
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"> <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
@@ -181,31 +189,35 @@
<div class="text-center"> <div class="text-center">
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
Browse all topics Parcourir tous les thèmes
<i class="fas fa-arrow-right ml-2"></i> <i class="fas fa-arrow-right ml-2"></i>
</a> </a>
</div> </div>
</div> </div>
</section> </section>
*/}}
{{/*
<!-- Newsletter Section --> <!-- Newsletter Section -->
<section class="py-12 md:py-16 bg-blue-50"> <section class="py-12 md:py-16 bg-blue-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center"> <div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2> <h2 class="text-3xl font-bold text-gray-900 mb-4">Restez Informé</h2>
<p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p> <p class="text-gray-700 mb-6">Rejoignez notre newsletter et recevez les dernières perspectives sur la technologie et l'avenir du travail directement dans votre boîte mail.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" <input type="email"
placeholder="Your email address" placeholder="Votre adresse email"
class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" <button type="submit"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium"> class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
Subscribe S'abonner
</button> </button>
</form> </form>
<p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p> <p class="text-sm text-gray-500 mt-4">Pas de spam. Désabonnez-vous à tout moment.</p>
</div> </div>
</div> </div>
</section> </section>
*/}}
</div> </div>
{{ end }} {{ end }}

96
layouts/partials/pagination-tailwind.html Normal file
View File

@@ -0,0 +1,96 @@
<!-- Tailwind CSS Pagination -->
{{ $paginator := . }}
{{ if gt $paginator.TotalPages 1 }}
<nav class="bg-white rounded-lg shadow-lg mx-auto max-w-2xl my-8 px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex w-0 flex-1">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
Précédent
</a>
{{ else }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
Précédent
</span>
{{ end }}
</div>
<!-- Desktop pagination - hidden on mobile -->
<div class="hidden md:flex items-center space-x-1">
{{ $currentPage := $paginator.PageNumber }}
{{ $totalPages := $paginator.TotalPages }}
<!-- Always show first page -->
<a href="{{ $paginator.First.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage 1 }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
1
</a>
<!-- Show ellipsis if current page is > 4 -->
{{ if gt $currentPage 4 }}
<span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Show pages around current page -->
{{ range $paginator.Pagers }}
{{ $pageNumber := .PageNumber }}
{{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
{{ if ne $pageNumber 1 }}
{{ if ne $pageNumber $totalPages }}
<a href="{{ .URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $pageNumber $currentPage }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
{{ $pageNumber }}
</a>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<!-- Show ellipsis if current page is < totalPages - 3 -->
{{ if lt $currentPage (sub $totalPages 3) }}
<span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Always show last page -->
{{ if gt $totalPages 1 }}
<a href="{{ $paginator.Last.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage $totalPages }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
{{ $totalPages }}
</a>
{{ end }}
</div>
<!-- Mobile current page display -->
<div class="md:hidden">
<span class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium text-white bg-blue-600 rounded-full">
{{ $paginator.PageNumber }}
</span>
</div>
<div class="flex w-0 flex-1 justify-end">
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
Suivant
<svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
{{ else }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
Suivant
<svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</span>
{{ end }}
</div>
</div>
</nav>
{{ end }}