chore: Clean behind, choose images, iterate

.cursor/rules/no-global-css.mdc

+---
+description: 
+globs: *.css
+alwaysApply: false
+---
+# AVoid global css:
+Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
+

next/content/lives/2024/CookieCollectiveCompilation.md

+---
+title: "[CCC] Cookie Collective Compilation Release Party"
+date: "2024-10-25"
+time: "XX:XX"
+location: "Lieu tenu secret"
+address: "Paris, France"
+description: ""
+# ctaURL: "https://nech.pl/algorave-lyon"
+# ctaText: "Plus d'infos"
+# teasing1: |
+#   # AlgoRave preparation
+  
+#   ```tidal
+#   d1 $ degradeBy 0.25 $ sound "jungle:45"
+#   d2 $ every 3 (fast 2) $ sound "cp"
+#   ```
+  
+#   Set in preparation for Lyon
+  
+# teasing2: |
+#   # Week countdown...
+  
+#   ```tidal
+#   d8 $ chop 16 $ loopAt 2 $ sound "jungle_breaks:45"
+#   ```
+  
+#   Details coming soon
+  
+# teasing3: |
+#   # Final call
+  
+#   ```tidal
+#   d1 $ stack [sound "cp", sound "ho:3"]
+#   ```
+  
+#   Tonight @ Lyon
+  
+# video: ""
+# audio: ""
+# archive: ""
+# tags: ["livecoding", "algorave", "lyon", "tidal"]
+# ---
+
+# # AlgoRave Lyon 2025
+
+# Détails à venir...

next/content/lives/2025/algorave-lyon-2025-XX-XX.md → next/content/lives/2025/algorave-lyon.md

 ---
 title: "AlgoRave Lyon 2025"
-date: "2025-XX-XX"
+date: "2025-05-25"
 time: "XX:XX"
 location: "Venue TBD"
 address: "Lyon, France"
 description: "Live algorithmic performance"
-ctaURL: "https://nech.pl/lyon"
+ctaURL: "https://nech.pl/algorave-lyon"
 ctaText: "Plus d'infos"
 teasing1: |
   # AlgoRave preparation

next/content/lives/2025/ensad-2025-05-22.md → next/content/lives/2025/ensad.md

@@ -6,7 +6,7 @@ location: "ENSAD Paris"
 address: "20 cours Saint Vincent, Issy"
 description: "breakbeat.nujazz.hybrid()"
 ctaURL: "https://nech.pl/ensad"
-ctaText: "En savoir plus"
+ctaText: "Sur inscription gratuite"
 teasing1: |
   # Session en préparation...
   

next/content/strategie-web.md

+# Stratégie Web ParVagues - Mai 2025
+
+## Vue d'ensemble
+
+Mise en place d'un système complet de gestion d'événements live sur le site ParVagues avec :
+- Landing page redessinée (cyberpunk aesthetic)
+- Pages d'événements dynamiques avec countdown
+- Système de teasings programmés
+- Galerie de photos automatique
+
+## Architecture Implémentée
+
+### Structure des Fichiers
+```
+next/
+├── pages/
+│   ├── parvagues.js (nouvelle landing)
+│   └── parvagues/live/[id].js (pages événements)
+├── components/
+│   └── ImageGallery.js (gallery masonry)
+├── lib/
+│   └── livesData.js (logique de chargement)
+├── content/lives/
+│   ├── 2025/
+│   │   ├── ensad-2025-05-22.md
+│   │   └── algorave-lyon-2025-XX-XX.md
+│   └── _template.md
+└── public/images/parvagues/lives/
+    └── [year]/[event-slug]/
+```
+
+### Fonctionnalités Clés
+
+#### 1. Système d'Events Live
+- **URL pattern**: `/parvagues/live/[slug]`
+- **Countdown dynamique** : J-14, J-7, J-3 avec teasings différents
+- **Mode pre/post** : Affichage conditionnel selon la date
+- **Metadata YAML** : title, date, location, teasings, etc.
+
+#### 2. Landing Page
+- **Cyberpunk design** : Dark theme + purple/pink gradients
+- **Rain effects** : Animations canvas pour atmosphère
+- **Code samples** : Syntax highlighting TidalCycles
+- **Events sidebar** : Liste des événements à venir/passés
+
+#### 3. Galerie de Photos
+- **Masonry layout** : Disposition automatique des images
+- **Lightbox** : Vue agrandie des photos
+- **Auto-detection** : Scan du dossier pour images
+
+## Événements Programmés
+
+### ENSAD Paris - 22 Mai 2025
+- **Date**: 2025-05-22, 18:30-20:00
+- **URL**: `/parvagues/live/ensad-2025-05-22`
+- **Short link**: `nech.pl/ensad`
+- **Teasings**: 3 phases programmées avec code TidalCycles
+
+### AlgoRave Lyon - Date TBD
+- **URL**: `/parvagues/live/algorave-lyon-2025-XX-XX`
+- **Short link**: `nech.pl/lyon`  
+- **Status**: Template créé, à finaliser
+
+## Workflow d'Utilisation
+
+### Ajouter un Nouvel Événement
+1. **Créer le fichier markdown**:
+   ```bash
+   cp content/lives/_template.md content/lives/2025/mon-event-YYYY-MM-DD.md
+   ```
+
+2. **Ajouter les images**:
+   ```bash
+   mkdir -p public/images/parvagues/lives/2025/mon-event-YYYY-MM-DD/
+   # Puis copier les photos (jpg/png/gif/webp)
+   ```
+
+3. **Configurer l'URL courte**:
+   - Créer `nech.pl/monlien` → `/parvagues/live/mon-event-YYYY-MM-DD`
+
+## Stratégie de Communication
+
+### Timeline Promo ENSAD
+- **J-7**: Post Instagram avec teasing1 + lien nech.pl/ensad
+- **J-3**: Stories avec countdown
+- **J-DAY**: Live updates sur Instagram/Bluesky/Mastodon
+
+### Content Strategy
+- **Pre-event**: Focus sur l'attente, mystery, code samples
+- **Post-event**: Archives, photos, liens streaming
+- **Teasings**: Progression narrative avec révélations
+
+## Next Steps
+
+### Technique
+1. **Installer dépendances**:
+   ```bash
+   npm install marked prismjs react-masonry-css
+   ```
+
+2. **Remplacer placeholders** par vraies images
+3. **Setup URL shortener** pour nech.pl/{ensad,lyon,parvagues}
+
+### Content
+1. **Photos ENSAD**: Préparer visuels pour le 22 mai
+2. **Code samples**: Sélectionner meilleurs exemples TidalCycles
+3. **Bio/description**: Finaliser texte de présentation
+
+### Marketing
+1. **Cross-platform**: Instagram → Mastodon → Bluesky
+2. **Tracking**: Mesurer trafic via URL courtes
+3. **Community**: Engager Cookie collective
+
+## Architecture Technique
+
+### Frontend
+- **Next.js** : Static generation avec revalidation
+- **Prism.js** : Syntax highlighting pour code Haskell
+- **Masonry CSS** : Layout gallery responsive
+- **Canvas animations** : Effets cyberpunk
+
+### Data Flow
+1. Pages pre-renders avec getStaticProps
+2. Countdown updates côté client
+3. Images chargées dynamiquement
+4. Revalidation toutes les minutes
+
+## Optimisations SEO
+
+### Meta Tags
+- Title dynamique par événement
+- Description basée sur metadata
+- Open Graph pour partage social
+
+### Performance
+- Images lazy loading
+- Static generation
+- Minimal JavaScript
+
+## Maintenance
+
+### Ajout d'Événement
+- Simple : Copier template + ajouter images
+- Auto-détection par filesystem
+- Zero config pour nouveaux événements
+
+### Archivage
+- Passage auto pre→post event
+- Photos visibles immédiatement
+- Teasings cachés mais accessibles
+
+---
+
+**Status**: Prêt pour déploiement  
+**Last Update**: 11 Mai 2025  
+**Dependencies**: `marked prismjs react-masonry-css`

next/package-lock.json

@@ -24,7 +24,8 @@
         "react-player": "^2.14.1",
         "react-syntax-highlighter": "^15.5.0",
         "remark": "^14.0.0",
-        "remark-html": "^15.0.0"
+        "remark-html": "^15.0.0",
+        "swiper": "^11.2.6"
       },
       "devDependencies": {
         "@types/react": "^18.2.61",
@@ -3271,6 +3272,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
+      "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",

next/package.json

@@ -27,7 +27,8 @@
     "react-player": "^2.14.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark": "^14.0.0",
-    "remark-html": "^15.0.0"
+    "remark-html": "^15.0.0",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
     "@types/react": "^18.2.61",

next/pages/_app.js

 import 'bootstrap/dist/css/bootstrap.css'
 import '../styles/main.css'
+import '../styles/masonry.css'
 
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

next/pages/parvagues/live/[id].js

 import { useEffect, useState } from 'react';
 import { getAllLives, getLiveData, getLivesImages } from '../../../lib/livesData';
 import ImageGallery from '../../../components/ImageGallery';
-import '../../../styles/masonry.css';
 import Head from 'next/head';
 import Link from 'next/link';
-import Image from 'next/image';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-haskell';
@@ -50,7 +48,7 @@ export default function Live({ data, slug, images }) {
   }, [data.frontmatter.date]);
   
   const renderMarkdown = (content) => {
-    if (!content) return '';
+    if (!content) return { __html: '' };
     const html = marked(content);
     return { __html: html };
   };

next/public/images/parvagues/code-sample-1.png

-# Placeholder for code sample screenshot
\ No newline at end of file

next/public/images/parvagues/live-placeholder.jpg

-# This is a placeholder - replace with actual live performance image
\ No newline at end of file

next/public/images/parvagues/setup-placeholder.jpg

-# Placeholder for live setup photo
\ No newline at end of file