# Phase 6: Blog Pages - Discussion Log

> **Audit trail only.** Do not use as input to planning, research, or execution agents.
> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.

**Date:** 2026-04-22
**Phase:** 06-blog-pages
**Areas discussed:** Layout listing /blog, Chrome article (TOC + header), Nav prev/next article, Visibilité blog & article de test

---

## Layout listing /blog

### Q1 — Format de la liste

| Option | Description | Selected |
|--------|-------------|----------|
| Grille de cards | Pattern /projects, 1/2/3 col responsive | ✓ |
| Liste verticale pleine largeur | Cards larges empilées, style éditorial | |
| Hybride : hero + grille | Dernier article en hero, suivants en grille | |

**User's choice:** Grille de cards (recommended)

### Q2 — Infos par card (multi-select)

| Option | Description | Selected |
|--------|-------------|----------|
| Titre + description + date | Minimum vital | ✓ |
| Tags (UBadge) | Visuels seulement, non-cliquables | ✓ |
| Image cover (frontmatter `image`) | 16/9 ou 3/2 via NuxtImg | ✓ |
| Reading time | Calculé depuis word count | ✓ |

**User's choice:** Tous les 4

### Q3 — Fallback image cover

| Option | Description | Selected |
|--------|-------------|----------|
| Pas de fallback, pas d'image | Cards sans image si absent | ✓ |
| Gradient branded générique | Bloc coloré avec titre overlay | |
| og-image.png branded du site | Réutiliser l'OG existant | |

**User's choice:** Pas de fallback (recommended)

### Q4 — Hero section en haut de /blog

| Option | Description | Selected |
|--------|-------------|----------|
| Hero comme /projects | Slogan + H1 + subtitle + stats | ✓ |
| Header minimal | H1 + subtitle uniquement | |
| Aucun header | Direct sur la grille | |

**User's choice:** Hero comme /projects (recommended)

---

## Chrome article (TOC + header)

### Q1 — Placement TOC (premier essai)

**User's choice (free text):** "what table des matières c'est quoi ???" — demande d'explication, pas un choix.

### Q1bis — Placement TOC après explication vulgarisée

| Option | Description | Selected |
|--------|-------------|----------|
| Sidebar sticky droite + drawer mobile | Pattern blog dev moderne, tutos longs | ✓ |
| Inline en haut de l'article, dépliable | Plus simple SSR pur | |
| Pas de TOC | Retire la feature (⚠ roadmap criterion) | |

**User's choice:** Sidebar sticky droite + drawer mobile (recommended)

**Notes:** l'utilisateur ne connaissait pas le terme "Table des matières". Explication fournie avec exemple concret (tuto Hytale à 5 sections) avant de présenter le choix.

### Q2 — Header article (multi-select)

| Option | Description | Selected |
|--------|-------------|----------|
| Titre H1 + date + tags badges | Minimum vital | ✓ |
| Image cover en hero | Aspect 21/9 si frontmatter `image` | ✓ |
| Reading time | Cohérent avec listing | ✓ |
| Breadcrumb visuel (Accueil > Blog > Titre) | UBreadcrumb Nuxt UI | ✓ |

**User's choice:** Tous les 4

### Q3 — Largeur max body markdown

| Option | Description | Selected |
|--------|-------------|----------|
| max-w-3xl (~768px) | Déjà en place, standard | ✓ |
| max-w-4xl (~896px) | Plus large pour blocs code | |

**User's choice:** max-w-3xl (recommended)

### Q4 — Highlight heading courant au scroll

| Option | Description | Selected |
|--------|-------------|----------|
| Oui, IntersectionObserver | Heading visible surligné brand-500 | ✓ |
| Non, liens d'ancre statiques | Plus simple, moins JS | |

**User's choice:** Oui, IntersectionObserver (recommended)

---

## Nav prev/next article

### Q1 — Style des liens prev/next

| Option | Description | Selected |
|--------|-------------|----------|
| Cards riches : titre + date + flèche | Pattern docs Nuxt/Stripe | ✓ |
| Liens texte simples | Minimaliste | |
| Cards avec image cover | Plus visuel mais cassé si pas d'image | |

**User's choice:** Cards riches (recommended)

### Q2 — Comment déterminer prev/next

| Option | Description | Selected |
|--------|-------------|----------|
| surround() de @nuxt/content | Helper officiel, zero logique custom | ✓ |
| Query custom triée par date | Plus verbeux mais contrôle total | |

**User's choice:** surround() (recommended)

### Q3 — Ordre des articles

| Option | Description | Selected |
|--------|-------------|----------|
| Date frontmatter descendant | Plus récent en premier | ✓ |
| Alphabetic par titre | Style docs/références | |
| Ordre de fichier | Alphabétique slug | |

**User's choice:** Date descendant (recommended)

### Q4 — Edge cases (pas de voisin)

| Option | Description | Selected |
|--------|-------------|----------|
| Afficher seul le lien existant | Case vide à droite ou gauche | ✓ |
| Lien de fallback vers /blog | Toujours 2 actions | |
| Cacher la section si 1 seul article | Pas de section du tout | |

**User's choice:** Afficher seul le lien existant (recommended)

---

## Visibilité blog & article de test

### Q1 — Que faire de `test-kotlin-syntax.md`

| Option | Description | Selected |
|--------|-------------|----------|
| Masquer via `draft: true` | Pattern standard @nuxt/content | ✓ |
| Déplacer vers `content/_drafts/` | Ignoré complètement, 404 URL | |
| Le garder visible dans /blog | Risque blog vide/démo | |
| Renommer en article réel "Guide Markdown" | Contenu permanent | |

**User's choice:** draft: true (recommended)

### Q2 — Lien "Blog" dans AppHeader.vue

| Option | Description | Selected |
|--------|-------------|----------|
| Oui, entre 'Hytale' et 'Projects' | Blog = levier SEO majeur | ✓ |
| Oui, en fin de nav (après Fiverr) | Moins proéminent | |
| Non, accessible via footer uniquement | Nav épurée | |

**User's choice:** Oui, entre Hytale et Projects (recommended)

### Q3 — Empty state listing /blog

| Option | Description | Selected |
|--------|-------------|----------|
| "Articles à venir" + CTA contact | Pattern /projects noResults | ✓ |
| Rediriger /blog vers / si vide | Cache le blog | |
| Page 404 si vide | Dur sur SEO | |

**User's choice:** "Articles à venir" + CTA contact (recommended)

### Q4 — Structure URLs finale

| Option | Description | Selected |
|--------|-------------|----------|
| /fr/blog + /en/blog + slugs, pas d'alias | Pattern phase 5, pas de changement | ✓ |
| Ajouter /fr/articles alias | Scope creep | |

**User's choice:** Pattern phase 5 (recommended)

---

## Claude's Discretion

- Nom exact du composable reading time
- Structure interne du composant TOC (UDrawer vs `<details>`)
- Format exact de la date i18n
- Classes Tailwind exactes du hero cover (21/9 vs 16/9)
- Emplacement exact du breadcrumb

## Deferred Ideas

- Filtrage par tag cliquable (backlog)
- Recherche full-text blog (backlog)
- Pagination / infinite scroll (backlog)
- JSON-LD Article + BreadcrumbList (Phase 7)
- useSeoMeta enrichi par article (Phase 7)
- Sitemap étendu (Phase 7)
- OG image generator (backlog SEO-06)
- Articles Hytale réels + cocon /hytale (Phase 8)
- Alias /articles, tags page, RSS feed (backlog)