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

Compare commits

base: kbe:75d235c17ed4988104c7beb8d1ea6c5124c37af0
Branches Tags
kbe:main kbe:develop kbe:feat/tailwindcss kbe:feat/seo kbe:feat/theme
...
compare: kbe:d4a151df9be4fa2ff86b2a473a69e7eb8c55fa7d
Branches Tags
kbe:main kbe:develop kbe:feat/tailwindcss kbe:feat/seo kbe:feat/theme

3 Commits
75d235c17e ... d4a151df9b

Author SHA1 Message Date
kbe
d4a151df9b Working paginator 2025-08-20 20:00:44 +02:00
kbe
f926c7fcf6 Better single post display 2025-08-20 15:45:42 +02:00
kbe
41805da339 Working on first page with pagination 2025-08-20 15:39:07 +02:00
5 changed files with 458 additions and 85 deletions
Expand all files Collapse all files

1
assets/css/app.css
View File

@@ -1,6 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@import "header.css"; @import "header.css";
@import "wordpress.css";
/* Modern Design System */ /* Modern Design System */
:root { :root {

68
layouts/_default/single.html
View File

@@ -11,20 +11,14 @@
{{ end }} {{ end }}
</div> </div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1> <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
<p class="text-xl text-gray-700 mb-8">{{ .Summary }}</p>
<div class="flex items-center justify-center space-x-4 text-gray-600"> <div class="flex items-center justify-center space-x-4 text-gray-600">
<div class="flex items-center"> <div class="flex items-center">
{{ if .Params.author_image }} <a href="/author/{{ .Params.author | urlize }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-600 hover:decoration-blue-800 transition-colors">{{ .Params.author | default "Auteur" }}</a>
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full mr-2 w-10 h-10">
{{ else }}
<img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2 w-10 h-10">
{{ end }}
<span>{{ .Params.author | default "Author Name" }}</span>
</div> </div>
<span>•</span> <span>•</span>
<span>{{ .Date.Format "October 16, 2024" }}</span> <span>{{ .Date.Format "2 janvier 2006" }}</span>
<span>•</span> <span>•</span>
<span>{{ .ReadingTime }} min read</span> <span>{{ .ReadingTime }} min de lecture</span>
</div> </div>
</div> </div>
</div> </div>
@@ -33,46 +27,30 @@
<!-- Article Content --> <!-- Article Content -->
<article class="py-12 md:py-16"> <article 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">
<div class="max-w-3xl mx-auto prose"> <div class="max-w-3xl mx-auto">
{{ if .Params.featured_image }}
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-auto rounded-lg mb-8">
{{ end }}
<div class="prose">
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>
</div>
</article> </article>
<!-- Tags Section -->
<div class="py-8 border-t border-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
<div class="flex flex-wrap gap-3">
{{ with .Params.tags }}
{{ range . }}
<a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">{{ . }}</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</div>
<!-- Author Bio --> <!-- Author Bio -->
<div class="py-12 bg-gray-50"> <div class="py-12 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">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<div class="flex items-start space-x-6"> <div class="flex items-start space-x-6">
{{ if .Params.author_image }}
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full w-20 h-20">
{{ else }}
<img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
{{ end }}
<div> <div>
<h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Author Name" }}</h3> <h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Auteur" }}</h3>
<p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p> <p class="text-blue-600 font-medium mb-4">Rédacteur technologique & chercheur sur le futur du travail</p>
<p class="text-gray-700">{{ .Params.author_bio | default "Author bio goes here." }}</p> <p class="text-gray-700">{{ .Params.author_bio | default "Biographie de l'auteur ici." }}</p>
<div class="flex space-x-4 mt-4"> <div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a> <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-medium"></i></a>
</div> </div>
</div> </div>
</div> </div>
@@ -83,7 +61,7 @@
<!-- Related Articles --> <!-- Related Articles -->
<div class="py-12"> <div class="py-12">
<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-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2> <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Articles connexes</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{{ range first 3 (where .Site.RegularPages "Type" "post") }} {{ range first 3 (where .Site.RegularPages "Type" "post") }}
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow"> <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
@@ -101,13 +79,13 @@
{{ end }} {{ end }}
</span> </span>
<h3 class="text-xl font-semibold mt-2 mb-3"> <h3 class="text-xl font-semibold mt-2 mb-3">
<a href="{{ .Permalink }}">{{ .Title }}</a> <a href="{{ .Permalink }}" class="text-gray-900 hover:text-blue-600 transition-colors">{{ .Title }}</a>
</h3> </h3>
<p class="text-gray-600">{{ .Summary | truncate 100 }}</p> <p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
<div class="flex items-center mt-4 text-sm text-gray-500"> <div class="flex items-center mt-4 text-sm text-gray-500">
<span>{{ .Date.Format "Jan 2, 2006" }}</span> <span>{{ .Date.Format "2 janvier 2006" }}</span>
<span class="mx-2">•</span> <span class="mx-2">•</span>
<span>{{ .ReadingTime }} min read</span> <span>{{ .ReadingTime }} min de lecture</span>
</div> </div>
</div> </div>
</div> </div>
@@ -120,11 +98,11 @@
<div class="py-12 bg-blue-50"> <div class="py-12 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-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2> <h2 class="text-2xl font-bold text-gray-900 mb-4">Rejoignez la newsletter</h2>
<p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</p> <p class="text-gray-700 mb-6">Restez informé des dernières actualités sur la technologie et le futur du travail.</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" 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">Subscribe</button> <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">S'abonner</button>
</form> </form>
</div> </div>
</div> </div>

84
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">
{{ if .Params.categories }}
{{ range first 1 .Params.categories }} {{ 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> <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 }}

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

@@ -0,0 +1,89 @@
{{ $paginator := . }}
{{ $currentPage := .PageNumber }}
{{ $totalPages := .TotalPages }}
{{ if gt $totalPages 1 }}
<nav aria-label="Pagination" class="bg-white shadow-lg rounded-lg p-6 sm:p-8 my-4">
<div class="flex items-center justify-center">
<div class="flex items-center space-x-2 sm:space-x-3">
<!-- Previous Button -->
{{ if .HasPrev }}
<a href="{{ .Prev.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
<span class="sr-only">Précédent</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-1 hidden sm:inline">Précédent</span>
</a>
{{ else }}
<span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-1 hidden sm:inline">Précédent</span>
</span>
{{ end }}
<!-- First Page -->
{{ if gt $totalPages 1 }}
<a href="{{ .First.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage 1 }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
1
</a>
{{ end }}
<!-- Ellipsis after first page if current page > 4 -->
{{ if gt $currentPage 4 }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Pages around current page -->
{{ range .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 px-4 py-2 rounded-lg {{ if eq $pageNumber $currentPage }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
{{ $pageNumber }}
</a>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<!-- Ellipsis before last page if current page < totalPages - 3 -->
{{ if lt $currentPage (sub $totalPages 3) }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Last Page -->
{{ if gt $totalPages 1 }}
<a href="{{ .Last.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg {{ if eq $currentPage $totalPages }}bg-blue-600 text-white shadow-sm{{ else }}bg-gray-100 text-gray-700 hover:bg-gray-200{{ end }} text-sm font-medium transition-colors duration-150">
{{ $totalPages }}
</a>
{{ end }}
<!-- Next Button -->
{{ if .HasNext }}
<a href="{{ .Next.URL }}" class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150">
<span class="mr-1 hidden sm:inline">Suivant</span>
<span class="sr-only">Suivant</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
{{ else }}
<span class="relative inline-flex items-center px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
<span class="mr-1 hidden sm:inline">Suivant</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
{{ end }}
</div>
</div>
</nav>
{{ end }}

293
static/builds/app.css
View File

@@ -49,6 +49,7 @@
--color-white: #fff; --color-white: #fff;
--spacing: 0.25rem; --spacing: 0.25rem;
--container-xl: 36rem; --container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem; --container-3xl: 48rem;
--container-4xl: 56rem; --container-4xl: 56rem;
--text-xs: 0.75rem; --text-xs: 0.75rem;
@@ -75,6 +76,7 @@
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
--leading-relaxed: 1.625; --leading-relaxed: 1.625;
--radius-md: 0.375rem;
--radius-lg: 0.5rem; --radius-lg: 0.5rem;
--radius-xl: 0.75rem; --radius-xl: 0.75rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -368,6 +370,9 @@
.mt-8 { .mt-8 {
margin-top: calc(var(--spacing) * 8); margin-top: calc(var(--spacing) * 8);
} }
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mr-1 { .mr-1 {
margin-right: calc(var(--spacing) * 1); margin-right: calc(var(--spacing) * 1);
} }
@@ -428,6 +433,12 @@
.inline-flex { .inline-flex {
display: inline-flex; display: inline-flex;
} }
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-10 { .h-10 {
height: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10);
} }
@@ -458,6 +469,15 @@
.min-h-screen { .min-h-screen {
min-height: 100vh; min-height: 100vh;
} }
.w-0 {
width: calc(var(--spacing) * 0);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-10 { .w-10 {
width: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10);
} }
@@ -470,6 +490,9 @@
.w-full { .w-full {
width: 100%; width: 100%;
} }
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl { .max-w-3xl {
max-width: var(--container-3xl); max-width: var(--container-3xl);
} }
@@ -485,6 +508,9 @@
.max-w-xl { .max-w-xl {
max-width: var(--container-xl); max-width: var(--container-xl);
} }
.flex-1 {
flex: 1;
}
.flex-shrink-0 { .flex-shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@@ -505,6 +531,9 @@
.transform { .transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
} }
.cursor-not-allowed {
cursor: not-allowed;
}
.list-inside { .list-inside {
list-style-position: inside; list-style-position: inside;
} }
@@ -538,6 +567,9 @@
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.justify-end {
justify-content: flex-end;
}
.gap-2 { .gap-2 {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
} }
@@ -616,6 +648,9 @@
.rounded-lg { .rounded-lg {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-xl { .rounded-xl {
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -852,6 +887,12 @@
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
.underline {
text-decoration-line: underline;
}
.decoration-blue-600 {
text-decoration-color: var(--color-blue-600);
}
.antialiased { .antialiased {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -898,6 +939,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-150 { .duration-150 {
--tw-duration: 150ms; --tw-duration: 150ms;
transition-duration: 150ms; transition-duration: 150ms;
@@ -906,6 +952,10 @@
--tw-duration: 200ms; --tw-duration: 200ms;
transition-duration: 200ms; transition-duration: 200ms;
} }
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.ease-in { .ease-in {
--tw-ease: var(--ease-in); --tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in); transition-timing-function: var(--ease-in);
@@ -995,6 +1045,20 @@
} }
} }
} }
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.hover\:decoration-blue-800 {
&:hover {
@media (hover: hover) {
text-decoration-color: var(--color-blue-800);
}
}
}
.hover\:shadow-lg { .hover\:shadow-lg {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -1315,6 +1379,235 @@
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-weight: 700;
line-height: 1.25;
margin-top: 2em;
margin-bottom: 1em;
color: var(--gray-900);
}
.prose h1 {
font-size: 2.5em;
}
.prose h2 {
font-size: 2em;
}
.prose h3 {
font-size: 1.75em;
}
.prose h4 {
font-size: 1.5em;
}
.prose h5 {
font-size: 1.25em;
}
.prose h6 {
font-size: 1em;
color: var(--gray-600);
}
.prose p {
margin-bottom: 1.5em;
line-height: 1.75;
color: var(--gray-700);
}
.prose ul,
.prose ol {
margin-bottom: 1.5em;
padding-left: 2em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
.prose li {
margin-bottom: 0.5em;
line-height: 1.75;
color: var(--gray-700);
}
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
margin-bottom: 0;
margin-top: 0.5em;
}
.prose a {
color: var(--primary-blue);
text-decoration: underline;
text-decoration-color: var(--primary-blue);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose a:hover {
color: var(--primary-blue-dark);
text-decoration-color: var(--primary-blue-dark);
}
.prose img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.prose figure {
margin: 2em 0;
text-align: center;
}
.prose figcaption {
font-size: 0.875em;
color: var(--gray-600);
margin-top: 0.5em;
text-align: center;
font-style: italic;
}
.prose table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5em;
border: 1px solid var(--gray-300);
}
.prose th,
.prose td {
padding: 0.75em 1em;
text-align: left;
border-bottom: 1px solid var(--gray-300);
}
.prose th {
background-color: var(--gray-100);
font-weight: 600;
color: var(--gray-900);
}
.prose tbody tr:nth-child(even) {
background-color: var(--gray-50);
}
.prose blockquote {
border-left: 4px solid var(--primary-blue);
padding-left: 1.5rem;
margin: 2em 0;
font-style: italic;
color: var(--gray-600);
background-color: var(--gray-50);
padding: 1.5rem;
border-radius: 0.25rem;
}
.prose blockquote p:last-child {
margin-bottom: 0;
}
.prose code {
background-color: var(--gray-100);
color: var(--gray-800);
padding: 0.25em 0.5em;
border-radius: 0.25rem;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
.prose pre {
background-color: var(--gray-900);
color: var(--gray-50);
padding: 1.5em;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1.5em;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
.prose pre code {
background-color: transparent;
color: inherit;
padding: 0;
border-radius: 0;
}
.prose iframe,
.prose video,
.prose audio {
max-width: 100%;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.prose .wp-block-embed {
margin: 2em 0;
}
.prose hr {
border: none;
height: 1px;
background-color: var(--gray-300);
margin: 2em 0;
}
.prose .wp-caption {
background-color: var(--gray-50);
border: 1px solid var(--gray-200);
padding: 1em;
border-radius: 0.5rem;
text-align: center;
}
.prose .wp-caption-text {
font-size: 0.875em;
color: var(--gray-600);
margin-top: 0.5em;
font-style: italic;
}
.prose .alignleft {
float: left;
margin: 0.5em 1.5em 0.5em 0;
}
.prose .alignright {
float: right;
margin: 0.5em 0 0.5em 1.5em;
}
.prose .aligncenter {
display: block;
margin: 1.5em auto;
}
@media (max-width: 768px) {
.prose .alignleft,
.prose .alignright {
float: none;
display: block;
margin: 1.5em auto;
clear: both;
}
}
.prose .wp-block-gallery {
margin: 2em 0;
}
.prose .wp-block-gallery .blocks-gallery-item {
margin: 0.5em;
}
.prose .wp-block-quote {
border-left: 4px solid var(--primary-blue);
padding-left: 1.5rem;
margin: 2em 0;
font-style: italic;
color: var(--gray-600);
background-color: var(--gray-50);
padding: 1.5rem;
border-radius: 0.25rem;
}
.prose .wp-block-pullquote {
border-top: 4px solid var(--primary-blue);
border-bottom: 4px solid var(--primary-blue);
padding: 2em;
margin: 2em 0;
text-align: center;
font-style: italic;
color: var(--gray-700);
}
.prose .wp-block-code {
background-color: var(--gray-900);
color: var(--gray-50);
padding: 1.5em;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1.5em;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 0.875em;
}
:root { :root {
--primary-blue: #3b82f6; --primary-blue: #3b82f6;
--primary-blue-dark: #2563eb; --primary-blue-dark: #2563eb;