[Simplifions] Initie un système d'articles et crée les 3 premiers

[DorineLam]

Cette PR vise à ajouter un système d'articles dans Simplifions :

• template d'un article et d'une "carte article" (depuis les index)
• template d'un dossier et d'une "carte dossier" (depuis les index)
• page guides et recommandations, index des articles et dossiers
• section sur la page d'accueil affichant une sélection d'articles
• Système de composants permettant d'afficher les cas d'usages et les solutions (et leurs informations) en utilisant leur slug

Création de 2 articles supplémentaires :

• Qu'est-ce qu'une API ?
• Guide de base pour les petites collectivités

Exemple d'article

Index des articles et dossiers

Page d'accueil

[abulte]

/deploy simplifions

[abulte]

Pretty neat articles :-) The PR is huge, so I used an LLM to help me write the review below. Overall, I think multiple things can be made simpler, and I flagged critical issues that need to be addressed.

Unnecessary complexity (global remarks)

Custom carousels (2×)
SimplifionsArticleCarousel and SimplifionsArticleTopicsCarousel each implement their own ResizeObserver, onScroll tracking, and prev/next button logic — nearly identical, not shared. The prev/next buttons are hidden on desktop (v-show="hasOverflow") so this complexity exists purely for mobile, where native swipe already works. The horizontal scroll is pure CSS; all the JS is only there for buttons that are invisible on wide screens.

Topics registry (provider/inject)
useArticleTopicsRegistry + articleTopicsRegistryKey + provideArticleTopicsRegistry + injectArticleTopicsRegistry — ~40 lines of infrastructure so that inline TopicSpotlight components can self-register and auto-populate the bottom carousel. For static content, passing an explicit relatedSlugs prop to the layout would be simpler and more predictable. The current approach creates invisible coupling and random shuffling on every render.

buildSimplifionsGradientImage
Parses hex colors from a CSS gradient string with a regex, generates an SVG, encodes it as a data URL — just to produce a placeholder image for article cards. A plain CSS background-color on the card would do the same job.

Custom CSS instead of DSFR utilities
New components use raw rem, clamp(), rgba(), hardcoded hex values throughout, while the rest of the app uses DSFR spacing utilities (fr-mt-4w etc.) and design tokens.

_templates/ in src/ — Copy-paste starter files for future article authors, not imported anywhere, referenced only in a README. Files inside src/ will drift silently as the real components evolve and give a false sense of being maintained. Either delete them and point to an existing article as the example to copy, or move the guidance outside src/ (docs folder, wiki).

Critical precise issues

pnpm run typecheck does not pass, many type errors

pnpm run lint does not pass, many lint errors

App.vue — Removes class="fr-mt-16w" from DsfrFooter and adds a global .fr-footer { margin-top: 0 !important; }. Affects all pages, fights DSFR with !important, reason unclear.

SimplifionsArticleTopicsCarousel — ResizeObserver created in onMounted but never disconnected. Memory leak on route change.

topicBySlug() cast — Can return undefined but is immediately cast as TopicSolution / as TopicCasUsage. Silent crash if a topic fails to load.

ArticleChronologieJuridiqueDLNUF.vue — Added to the repo and imported in routes.ts despite being commented out. Contains lorem ipsum, href="lien", and empty <time> entries. Should probably be removed.

SimplifionsArticleSection.vue — background-color: rgb(167, 212, 205); padding: 2px 4px hardcoded on section titles. Should use a DSFR color token.

TOC IntersectionObserver — Legitimate if a bit complex feature, but the implementation is finicky in Safari at least (wrong section highlights).

Commented-out code shipped — formatRelativeIfRecentDate in SimplifionsCasDusageCard.vue commented out but import kept; ditesLeNousUneFois commented out in routes.

[DorineLam]

Pretty neat articles :-) The PR is huge, so I used an LLM to help me write the review below. Overall, I think multiple things can be made simpler, and I flagged critical issues that need to be addressed.

Merci ! Et désolée, j'aurai sûrement dû décomposer mieux ma PR... et m'occuper des tests !

Custom carousels (2×) SimplifionsArticleCarousel and SimplifionsArticleTopicsCarousel each implement their own ResizeObserver, onScroll tracking, and prev/next button logic — nearly identical, not shared. The prev/next buttons are hidden on desktop (v-show="hasOverflow") so this complexity exists purely for mobile, where native swipe already works. The horizontal scroll is pure CSS; all the JS is only there for buttons that are invisible on wide screens.

✅ J'ai renommé les composants car objectivement ils n'ont pas du tout la même fonctionnalité, le premier est un carrousel, d'articles que je peux choisir. Le second est une sélection automatique de tous les cas d'usages et de solutions d'un article

Nouveaux noms : SimplifionsArticlesSelection, et SimplifionsArticleRelatedTopics dans ce commit : 9147865

Topics registry (provider/inject) useArticleTopicsRegistry + articleTopicsRegistryKey + provideArticleTopicsRegistry + injectArticleTopicsRegistry — ~40 lines of infrastructure so that inline TopicSpotlight components can self-register and auto-populate the bottom carousel. For static content, passing an explicit relatedSlugs prop to the layout would be simpler and more predictable. The current approach creates invisible coupling and random shuffling on every render.

🤔 Ici, je suis embêtée, je veux garder le fonctionnement actuel, c'est à dire que le composant va chercher automatiquement les solutions et cas d'usages cités dans l'article. La proposition qui semble être faite ici est de copier/coller à la main une deuxième fois les slugs, déjà renseignés dans l'article.
✅ Par contre, du coup j'ai simplifié le code en en réduisant la taille. Dans ce commit : 2a31a4d

buildSimplifionsGradientImage Parses hex colors from a CSS gradient string with a regex, generates an SVG, encodes it as a data URL — just to produce a placeholder image for article cards. A plain CSS background-color on the card would do the same job.

✅ Vu : simplifié ici => 04e1a48

Custom CSS instead of DSFR utilities New components use raw rem, clamp(), rgba(), hardcoded hex values throughout, while the rest of the app uses DSFR spacing utilities (fr-mt-4w etc.) and design tokens.

✅ Corrigé dans f31f328

_templates/ in src/ — Copy-paste starter files for future article authors, not imported anywhere, referenced only in a README. Files inside src/ will drift silently as the real components evolve and give a false sense of being maintained. Either delete them and point to an existing article as the example to copy, or move the guidance outside src/ (docs folder, wiki).

✅ Ok j'ai supprimé les templates et complété de façon détaillé le fichier README-Articles.md. Fait dans : c19b702

pnpm run typecheck does not pass, many type errors
pnpm run lint does not pass, many lint errors

✅ Fait

App.vue — Removes class="fr-mt-16w" from DsfrFooter and adds a global .fr-footer { margin-top: 0 !important; }. Affects all pages, fights DSFR with !important, reason unclear.

✅ Retiré dans f31f328

SimplifionsArticleTopicsCarousel — ResizeObserver created in onMounted but never disconnected. Memory leak on route change.

⚙️ Fixé ici mais pas certaine du fix (je veux bien ta revue à ce sujet) : 1bb3643

topicBySlug() cast — Can return undefined but is immediately cast as TopicSolution / as TopicCasUsage. Silent crash if a topic fails to load.

⚙️ Fixé ici mais pas certaine du fix (je veux bien ta revue à ce sujet) : e5799d0

ArticleChronologieJuridiqueDLNUF.vue — Added to the repo and imported in routes.ts despite being commented out. Contains lorem ipsum, href="lien", and empty <time> entries. Should probably be removed.

🤔 Oui c'est un article en brouillon, je pourrais surement le déplacer dans une branche séparée et ne pas le merger mais je crains de faire une erreur de manip dans git.

SimplifionsArticleSection.vue — background-color: rgb(167, 212, 205); padding: 2px 4px hardcoded on section titles. Should use a DSFR color token.

🤔 Je sais que ce n'est pas une class DSFR mais j'utilise déjà la couleur sur toutes les fiches cas d'usages et solutions donc à ce stade je préfère laisser comme ça.

TOC IntersectionObserver — Legitimate if a bit complex feature, but the implementation is finicky in Safari at least (wrong section highlights).

✅ Fait ici 9b0034f

Commented-out code shipped — formatRelativeIfRecentDate in SimplifionsCasDusageCard.vue commented out but import kept; ditesLeNousUneFois commented out in routes.

✅ Fait ici 92ab212