feat: ajoute la navigation entre événements et un lien vers tous les albums photos

src/lib/contentful.ts

@@ -106,3 +106,13 @@ export const fetchEvenement = async (slug: string) => {
 
   return evenementFromContentfull(entries.items[0]!)
 }
+
+export const fetchAllEvenements = async () => {
+  const entries = await contentfulClient.getEntries<ContentFulEvenement>({
+      content_type: "evenement",
+  });
+
+  return sortByDate(entries.items)
+      .map(evenementFromContentfull)
+      .reverse() // Plus récents en premier
+}

src/pages/evenements.astro

@@ -31,6 +31,12 @@ const evenementsPassés = await fetchEvenementsPassés()
 				</p>
 			</div>
 		)}
+		
+		<div class="albums-link">
+			<a href="https://www.flickr.com/photos/les-particules/albums/" target="_blank" class="voir-tous-albums">
+				Voir tous nos albums photos →
+			</a>
+		</div>
 	</main>
 </Layout>
 
@@ -64,4 +70,28 @@ const evenementsPassés = await fetchEvenementsPassés()
 		font-weight: 500;
 	}
 	
+	.albums-link {
+		text-align: center;
+		margin: 3rem 0 2rem;
+	}
+	
+	.voir-tous-albums {
+		display: inline-block;
+		padding: 0.75rem 1.5rem;
+		background-color: orange;
+		color: white;
+		text-decoration: none;
+		border: black solid 2px;
+		border-radius: 0.4rem;
+		font-weight: bold;
+		box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.3);
+		transition: all 0.3s ease;
+	}
+	
+	.voir-tous-albums:hover {
+		background-color: darkorange;
+		transform: translateY(-2px);
+		box-shadow: 0.3em 0.3em 0.7em rgba(0,0,0,0.4);
+	}
+	
 </style>

src/pages/evenements/[slug].astro

@@ -1,7 +1,7 @@
 ---
 import type { Document } from '@contentful/rich-text-types';
 import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
-import {fetchEvenement, fetchEvenements} from "../../lib/contentful";
+import {fetchEvenement, fetchAllEvenements} from "../../lib/contentful";
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
 
@@ -9,12 +9,32 @@ export const prerender = false
 
 const {slug} = Astro.params
 
-const { nom, description, date, lieu, lieuUrl, affiche, album } = await fetchEvenement(slug)
+const evenement = await fetchEvenement(slug)
+const { nom, description, date, lieu, lieuUrl, affiche, album } = evenement
+
+// Récupération de tous les événements pour la navigation
+const tousEvenements = await fetchAllEvenements()
+const currentIndex = tousEvenements.findIndex(e => e.slug === slug)
+const evenementPrecedent = currentIndex > 0 ? tousEvenements[currentIndex - 1] : null
+const evenementSuivant = currentIndex < tousEvenements.length - 1 ? tousEvenements[currentIndex + 1] : null
 
 const Wrapper = lieuUrl ? 'a' : 'div'
 
 ---
 <Layout>
+    <div class="navigation-header">
+        {evenementPrecedent && (
+            <a href={`/evenements/${evenementPrecedent.slug}`} class="nav-link nav-prev">
+                ← {evenementPrecedent.nom}
+            </a>
+        )}
+        {evenementSuivant && (
+            <a href={`/evenements/${evenementSuivant.slug}`} class="nav-link nav-next">
+                {evenementSuivant.nom} →
+            </a>
+        )}
+    </div>
+    
     <h1>{nom}</h1>
     <div class="content">
         {affiche && <img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />}
@@ -43,6 +63,19 @@ const Wrapper = lieuUrl ? 'a' : 'div'
             )}
         </div>
     </div>
+    
+    <div class="navigation-header">
+        {evenementPrecedent && (
+            <a href={`/evenements/${evenementPrecedent.slug}`} class="nav-link nav-prev">
+                ← {evenementPrecedent.nom}
+            </a>
+        )}
+        {evenementSuivant && (
+            <a href={`/evenements/${evenementSuivant.slug}`} class="nav-link nav-next">
+                {evenementSuivant.nom} →
+            </a>
+        )}
+    </div>
 </Layout>
 
 <style is:global>
@@ -117,6 +150,55 @@ const Wrapper = lieuUrl ? 'a' : 'div'
         height: auto !important;
     }
 
+    /* Navigation styles */
+    .navigation-header {
+        display: flex;
+        justify-content: space-between;
+        margin: 1rem 0;
+        padding: 0.5rem 0;
+    }
+    
+    .navigation-header:first-of-type {
+        border-bottom: 1px solid rgba(0,0,0,0.1);
+        margin-bottom: 2rem;
+    }
+    
+    .navigation-header:last-of-type {
+        border-top: 1px solid rgba(0,0,0,0.1);
+        margin-top: 2rem;
+    }
+    
+    .nav-link {
+        color: rgb(68,68,68);
+        text-decoration: none;
+        font-size: 0.9rem;
+        opacity: 0.7;
+        transition: all 0.3s;
+        max-width: 45%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .nav-link:hover {
+        opacity: 1;
+        color: orange;
+        transform: translateX(3px);
+    }
+    
+    .nav-prev {
+        margin-right: auto;
+    }
+    
+    .nav-next {
+        margin-left: auto;
+        text-align: right;
+    }
+    
+    .nav-next:hover {
+        transform: translateX(-3px);
+    }
+
     @media (max-width: 48em) {
         .content {
             flex-direction: column;
@@ -124,11 +206,22 @@ const Wrapper = lieuUrl ? 'a' : 'div'
 
         .content > img {
             width: 100%;
+            max-width: 400px;
             border: black solid 0.1em;
             border-radius: 1em;
             margin: 0 auto 1em;
             box-shadow: 0.2em 0.2em 1em black;
         }
+        
+        .navigation-header {
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        
+        .nav-link {
+            max-width: 100%;
+            text-align: center;
+        }
     }