Category page ok

assets/css/wordpress.css

@@ -0,0 +1,289 @@
+/* Wordpress Content Styles */
+
+/* General Prose Styles (already in app.css, but can be extended here if needed) */
+.prose {
+    /* max-width: none; */ /* Already handled by Tailwind's prose plugin or app.css */
+}
+
+/* Headings */
+.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);
+}
+
+/* Paragraphs */
+.prose p {
+    margin-bottom: 1.5em;
+    line-height: 1.75;
+    color: var(--gray-700);
+}
+
+/* Lists */
+.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;
+}
+
+/* Links */
+.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);
+}
+
+/* Images */
+.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;
+}
+
+/* Tables */
+.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);
+}
+
+/* Blockquotes */
+.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;
+}
+
+/* Code Blocks */
+.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;
+}
+
+/* Embeds */
+.prose iframe,
+.prose video,
+.prose audio {
+    max-width: 100%;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+
+.prose .wp-block-embed {
+    margin: 2em 0;
+}
+
+/* Separators */
+.prose hr {
+    border: none;
+    height: 1px;
+    background-color: var(--gray-300);
+    margin: 2em 0;
+}
+
+/* WordPress Specific Classes */
+.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;
+}
+
+/* Responsive adjustments for images */
+@media (max-width: 768px) {
+    .prose .alignleft,
+    .prose .alignright {
+        float: none;
+        display: block;
+        margin: 1.5em auto;
+        clear: both;
+    }
+}
+
+/* WordPress Gutenberg Block Styles */
+.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;
+}

hugo.toml

@@ -16,7 +16,7 @@ enableRobotsTXT = true
 
 # SEO Configuration
 [params.seo]
-  description = "Mistergeek - Tutoriels et guides en informatique et technologie en français"
+  description = "Tutoriels et guides en informatique et technologie en français"
   keywords = ["tutoriel informatique", "guide technologie", "solutions informatiques", "développement web", "technologies", "innovation", "mistergeek"]
   author = "Mistergeek"
   theme_color = "#007bff"

layouts/_default/list.html

@@ -1,63 +1,83 @@
 {{ define "main" }}
-
 <!-- layouts/_default/list.html -->
-<div class="section-sm bg-gray-lighter">
-  <div class="container text-center">
-    <h1 class="font-family-playfair">{{ .Site.Title }}</h1>
-  </div><!-- end container -->
-</div>
+<div class="min-h-screen bg-white">
+    
+    <!-- Hero Section with Category Title -->
+    <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="max-w-4xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
+                    {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}
+                </h1>
+                {{ if .Description }}
+                <p class="text-xl text-gray-700 mb-8">{{ .Description }}</p>
+                {{ else if and (eq .Kind "taxonomy") .Data.Term }}
+                <p class="text-xl text-gray-700 mb-8">{{ .Data.Term | humanize }}</p>
+                {{ else if .Site.Params.seo.description }}
+                <!-- <p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p> -->
+                {{ end }}
+                
+                <!-- Category tags if this is a taxonomy page -->
+                {{ if eq .Kind "taxonomy" }}
+                <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">{{ .Title }}</span>
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </section>
 
-<!-- Blog section  -->
-<div class="section">
-    <div class="container">
-        <div class="row g-4">
-            <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
-                {{ $paginationLimit := 10 }}
-                {{ if .Site.Params.paginationLimit }}{{ $paginationLimit = .Site.Params.paginationLimit }}{{ end }}
-                {{ $paginator := .Paginator $paginationLimit }}
+    <!-- Latest Articles Section -->
+    <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">
+            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles</h2>
+            
+            {{ $paginator := .Paginate .Pages 9 }}
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                 {{ range $paginator.Pages }}
-                <!-- Blog Post box -->
-                <div class="mb-5">
-                    <div class="img-link-box">
-                        <a href="{{ .RelPermalink }}">
-                            {{ if .Params.featured_image }}
-                            <img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
-                            {{ else }}
-                            <img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
-                            {{ end }}
-                        </a>
-                    </div>
-                    <div class="mt-4">
-                        <div class="d-flex justify-content-between mb-2">
-                            <!-- Display  category -->
-                            {{ partial "categories-first.html" . }}
-                            
-                            <div class="d-inline-flex">
-                                <span class="font-small">{{ .Date.Format "02/07/2006" }}</span>
-                            </div>
-                        </div>
-                        <h2><a class="text-link-1" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
-                        {{ if .Params.excerpt }}
-                        <p>{{ .Params.excerpt }}</p>
-                        {{ else if .Summary }}
-                        <p>{{ .Summary }}</p>
+                <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
+                    <a href="{{ .RelPermalink }}">
+                        {{ if .Params.featured_image }}
+                        <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
                         {{ else }}
-                        <p>{{ truncate 200 .Content }}</p>
+                        <img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-48 object-cover">
                         {{ end }}
-                        <div class="mt-3">
-                            <a class="button-text-1" href="{{ .RelPermalink }}">Lire la suite</a>
+                    </a>
+                    <div class="p-6">
+                        <div class="flex flex-wrap gap-2 mb-3">
+                            {{ if .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>
+                                {{ end }}
+                            {{ end }}
+                        </div>
+                        <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">
+                            {{ if .Params.excerpt }}
+                            {{ .Params.excerpt }}
+                            {{ else if .Summary }}
+                            {{ .Summary }}
+                            {{ else }}
+                            {{ truncate 200 .Content }}
+                            {{ end }}
+                        </p>
+                        <div class="flex items-center justify-between text-sm text-gray-500">
+                            <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
+                            <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
                         </div>
                     </div>
                 </div>
-                <!-- End Blog Post box -->
                 {{ end }}
-                
-                <!-- Pagination -->
-                {{ partial "pagination.html" (dict "Paginator" .Paginator "Page" .) }}
             </div>
-        </div><!-- end row -->
-    </div><!-- end container -->
+            
+            <!-- Pagination -->
+            <div class="flex justify-center mt-12">
+                {{ if gt .Paginator.TotalPages 1 }}
+                    {{ partial "pagination-tailwind.html" .Paginator }}
+                {{ end }}
+            </div>
+        </div>
+    </section>
 </div>
-<!-- end Blog section -->
 {{ end }}
-

layouts/categories/list.html

@@ -1,34 +0,0 @@
-{{ define "main" }}
-{{ $defaultCategory := "General" }}
-{{ if .Site.Params.defaultCategory }}{{ $defaultCategory = .Site.Params.defaultCategory }}{{ end }}
-
-<div class="section-sm bg-gray-lighter">
-  <div class="container text-center">
-    <h1 class="font-family-playfair">{{ .Title }}</h1>
-    <p class="mt-3">Cette page répertorie toutes les catégories de notre site, offrant une vue d'ensemble structurée de notre contenu.</p>
-  </div><!-- end container -->
-</div>
-
-<!-- Blog section  -->
-<div class="section">
-  <div class="container">
-    <div class="row g-4">
-      <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
-        {{ range $.Site.Data.wordpress.categories }}
-        <div class="mb-5">
-          <div class="mt-4">
-            <h2><a class="text-link-1" href="{{ .link | relURL }}">{{ .name }}</a></h2>
-            <p>{{ .description | safeHTML }}</p>
-            <div class="mt-3">
-              <a class="button-text-1" href="{{ .link | relURL }}">Voir la catégorie</a>
-            </div>
-          </div>
-        </div>
-        {{ if not .IsLast }}<hr class="my-5">{{ end }}
-        {{ end }}
-      </div>
-    </div><!-- end row -->
-  </div><!-- end container -->
-</div>
-<!-- end Blog section -->
-{{ end }}

layouts/index.html

@@ -6,19 +6,21 @@
     <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="max-w-4xl mx-auto text-center">
-                    <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">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">
-                        <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">Télétravail</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-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
-                    </div>
-                    <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
-                        <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">Recevoir les mises à jour</button>
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">{{ .Site.Title }}</h1>
+                <p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p>
+                <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">IA</span>
+                    <span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Programmation</span>
+                    <span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Photo</span>
+                    <span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Vidéo</span>
+                    <span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
+                </div>
+                {{/* 
+                <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
+                    <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">Recevoir les mises à jour</button>
                 </form>
+                */}}
             </div>
         </div>
     </section>