Merge pull request #245 from cnumr/cms

chore: sync avec origin/main

Author: hrenaud

.changeset/fix-card-accessibility-button-tooltip.md

@@ -1,5 +1,28 @@
 # gen-referentiel-core
 
+## 0.8.2
+
+### Patch Changes
+
+- 4e7e24b: Corrige l'erreur de build avec isomorphic-dompurify en ajoutant jsdom aux externals webpack côté serveur. jsdom lisait `default-stylesheet.css` via `__dirname` qui pointait vers `.next/server/` quand bundlé par webpack au lieu du répertoire du package.
+
+## 0.8.1
+
+### Patch Changes
+
+- 1eac934: fix: améliore l'accessibilité des cards et corrige le tooltip du bouton info
+
+  - Déplace le lien de la card entière vers le titre uniquement (card-view.tsx) pour respecter les bonnes pratiques a11y (un lien ne doit pas englober toute une card interactive)
+  - Ajoute un overlay invisible (`aria-hidden`, `tabIndex=-1`) pour maintenir la surface de clic sur toute la card
+  - Déplace le lien sur le titre dans FicheCard (Card.tsx) avec `z-10` pour rester au-dessus de l'overlay
+  - Corrige l'affichage du tooltip natif du bouton (i) en ajoutant `pointer-events-none` sur le SVG enfant, permettant au navigateur de cibler le `<button>` et d'afficher son attribut `title`
+
+- e19a972: fix: corrige l'affichage des cards, le rendu HTML dans MDX et le chargement du .env dans build-local
+
+  - **Card (#53)** : supprime la fonction `cleanImpact` (regexp cassée sur des clés de traduction) et conditionne l'affichage de `priority_implementation` / `environmental_impact` aux feature flags du référentiel actif ; corrige le séparateur `: ` pour MESURE_ON_5
+  - **MDX HTML (#54)** : ajoute les handlers `html` et `html_inline` dans `getMdxComponents` pour rendre le HTML brut inséré dans les fiches ; sanitisation via `isomorphic-dompurify` avec liste blanche de balises courantes
+  - **build-local (#55)** : charge les variables du fichier `.env` (pattern `set -a / source / set +a`) avant le build, afin que `NEXT_PUBLIC_REF_NAME` et les autres variables soient correctement transmises
+
 ## 0.8.0
 
 ### Minor Changes

CHANGELOG.md

@@ -19,21 +19,24 @@ pnpm build-local  # Build local sans MongoDB
 
 Appliquer systématiquement la méthode **APEX** pour chaque tâche :
 
-| Phase | Action |
-|-------|--------|
+| Phase       | Action                                                                    |
+| ----------- | ------------------------------------------------------------------------- |
 | **A**nalyze | Lire/explorer le code concerné, comprendre le contexte et les contraintes |
-| **P**lan | Présenter le plan d'action et attendre validation avant d'implémenter |
-| **E**xecute | Implémenter la solution uniquement après accord |
-| e**X**amine | Tester/valider le résultat, vérifier qu'il n'y a pas de régression |
+| **P**lan    | Présenter le plan d'action et attendre validation avant d'implémenter     |
+| **E**xecute | Implémenter la solution uniquement après accord                           |
+| e**X**amine | Tester/valider le résultat, vérifier qu'il n'y a pas de régression        |
 
 **Règles :**
+
 - Ne jamais coder sans avoir d'abord analysé et planifié
 - Toujours attendre la validation du plan avant d'exécuter
 - Toujours vérifier le résultat après implémentation
 - **Ne JAMAIS faire de commit sans demande explicite de l'utilisateur**
 - **Quand l'utilisateur demande un commit, toujours demander s'il veut aussi créer un changeset et une PR**
+- **Quand l'utilisateur demande une PR, vérifier si des fichiers `.changeset/*.md` existent (hors `README.md`) — si oui, lancer `pnpm release` avant de créer la PR**
 
 **Commandes de validation (eXamine) :**
+
 ```bash
 pnpm check-types  # Vérifier les types TypeScript
 pnpm lint         # Vérifier le linting
@@ -45,6 +48,7 @@ pnpm build-local  # Vérifier que le build fonctionne
 This is a **generic multi-referential platform** for eco-design best practices, maintained by the Collectif Green IT (CNUMR). It's a Next.js web application that uses TinaCMS as a headless CMS to manage eco-design best practices content in MDX format.
 
 The codebase serves as a shared core (`gen-referentiel-core`) that can be configured for different referentials (RWP, RWEB, REIPRO, RIA, etc.) via environment variables:
+
 - `NEXT_PUBLIC_REF_NAME` - Used by Next.js at runtime
 - `TINA_PUBLIC_REF_NAME` - Used by TinaCMS at build time
 
@@ -110,8 +114,8 @@ pnpm doc            # Start documentation server
 - **fiches/**: Best practice sheets organized by language (fr/, en/, es/)
   - Files follow naming: `RWP_<category>.<number>-<slug>.mdx`
   - Categories: 1 (Installation), 2 (Fonctionnalités), 3 (Design), 4 (Code), 5 (Médias), 6 (Mesure), 7 (Serveur), 8 (Maintenance)
-- **lexique/**: Glossary entries by language *(optionnel)*
-- **personas/**: User personas by language *(optionnel)*
+- **lexique/**: Glossary entries by language _(optionnel)_
+- **personas/**: User personas by language _(optionnel)_
 - **home/**: Homepage content by language
 - **mentionsLegales/**: Legal notices by language
 
@@ -120,6 +124,7 @@ pnpm doc            # Start documentation server
 ### App Structure (`app/`)
 
 Uses Next.js App Router with dynamic `[lang]` segment for i18n:
+
 - `app/[lang]/page.tsx` - Homepage
 - `app/[lang]/fiches/` - Best practices listing and detail pages
 - `app/[lang]/lexique/` - Glossary
@@ -134,6 +139,7 @@ Uses Next.js App Router with dynamic `[lang]` segment for i18n:
 ### Multi-Referential Configuration
 
 The codebase supports multiple referentials via `referentiel-config.ts`:
+
 - **RWEB** (Web eco-design) - Default referential if not configured
 - **RWP** (WordPress eco-design)
 - **REIPRO** (Software integration - Intégration de progiciels)
@@ -152,16 +158,17 @@ The active referential is set via `NEXT_PUBLIC_REF_NAME` and `TINA_PUBLIC_REF_NA
 
 Les schémas YAML valident le frontmatter des fichiers MDX via `pnpm lint:md`. Le schéma utilisé dépend de `NEXT_PUBLIC_REF_NAME` :
 
-| Schéma | Référentiels | Particularités |
-|--------|--------------|----------------|
-| `fiche.schema.yaml` | RWEB, REIPRO, RIA (défaut) | `environmental_impact`/`priority_implementation` = number, `scope` optionnel |
-| `fiche.schema.rwp.yaml` | RWP | `environmental_impact`/`priority_implementation` = string, `scope` requis |
+| Schéma                  | Référentiels               | Particularités                                                               |
+| ----------------------- | -------------------------- | ---------------------------------------------------------------------------- |
+| `fiche.schema.yaml`     | RWEB, REIPRO, RIA (défaut) | `environmental_impact`/`priority_implementation` = number, `scope` optionnel |
+| `fiche.schema.rwp.yaml` | RWP                        | `environmental_impact`/`priority_implementation` = string, `scope` requis    |
 
 La sélection est faite dynamiquement dans `.remarkrc.mjs` selon la variable d'environnement.
 
 ## Content Editing
 
 Content can be edited:
+
 1. **Locally**: Direct MDX file editing in `src/content/`
 2. **Via TinaCMS Admin**: Access at `/admin` when running dev server
 
@@ -172,9 +179,11 @@ Le projet utilise [Changesets](https://github.com/changesets/changesets) pour g
 ### Workflow
 
 1. **Après un changement significatif**, créer un changeset :
+
    ```bash
    pnpm changeset
    ```
+
    Cela crée un fichier dans `.changeset/` décrivant le changement (patch/minor/major).
 
 2. **Pour publier une nouvelle version** :
@@ -185,11 +194,11 @@ Le projet utilise [Changesets](https://github.com/changesets/changesets) pour g
 
 ### Types de versions
 
-| Type | Quand l'utiliser |
-|------|------------------|
-| `patch` | Bug fixes, corrections mineures |
+| Type    | Quand l'utiliser                            |
+| ------- | ------------------------------------------- |
+| `patch` | Bug fixes, corrections mineures             |
 | `minor` | Nouvelles fonctionnalités rétro-compatibles |
-| `major` | Breaking changes, modifications majeures |
+| `major` | Breaking changes, modifications majeures    |
 
 ### Vérifier la synchronisation
 
@@ -202,12 +211,14 @@ Format: `<type>(<scope>): <description>`
 Types: `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `chore`, `ci`, `build`, `revert`
 
 Rules:
+
 - Write in French
 - Use imperative present tense (ajoute, corrige, améliore)
 - Max 200 characters
 - No final period
 
 Examples:
+
 - `feat: ajoute authentification OAuth2`
 - `fix(auth): corrige la validation du token JWT`
 - `docs: met à jour la documentation API`
@@ -241,5 +252,6 @@ Examples:
 **Après modification** : Régénérer le lockfile avec `trash node_modules pnpm-lock.yaml && pnpm install`
 
 **Références** :
+
 - https://github.com/tinacms/tina-self-hosted-demo/issues/131
 - https://github.com/udecode/plate/issues/1609

CLAUDE.md

@@ -1,3 +1,4 @@
+import DOMPurify from 'isomorphic-dompurify';
 import Image, { ImageProps, getImageProps } from 'next/image';
 
 // https://tina.io/docs/editing/markdown/
@@ -16,6 +17,66 @@ import { ui } from '../../i18n/ui';
 
 type Lang = keyof typeof ui;
 
+const HTML_SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    'b',
+    'strong',
+    'i',
+    'em',
+    'u',
+    's',
+    'del',
+    'ins',
+    'sup',
+    'sub',
+    'small',
+    'mark',
+    'abbr',
+    'cite',
+    'code',
+    'kbd',
+    'samp',
+    'var',
+    'br',
+    'span',
+    'a',
+    'p',
+    'ul',
+    'ol',
+    'li',
+    'blockquote',
+    'pre',
+    'hr',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'td',
+    'th',
+    'caption',
+    'figure',
+    'figcaption',
+  ],
+  ALLOWED_ATTR: [
+    'href',
+    'title',
+    'lang',
+    'class',
+    'id',
+    'aria-label',
+    'aria-hidden',
+    'aria-describedby',
+    'role',
+    'colspan',
+    'rowspan',
+    'scope',
+  ],
+};
+
+const sanitizeHtml = (html: string) =>
+  DOMPurify.sanitize(html, HTML_SANITIZE_CONFIG);
+
 const CodeBlock = ({ language, value }) => {
   return (
     <SyntaxHighlighter
@@ -45,6 +106,12 @@ export const getMdxComponents = (lang: Lang = 'fr') => ({
   h6: HeadingsStrong,
   PositionableImage: PositionableImage,
   code_block: CodeBlock,
+  html: ({ value }: { value: string }) => (
+    <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }} />
+  ),
+  html_inline: ({ value }: { value: string }) => (
+    <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(value) }} />
+  ),
   ...(getRefConfig().featuresEnabled.lexique_tooltips
     ? {
         p: (props: any) => (
@@ -92,7 +159,10 @@ export const getMdxComponents = (lang: Lang = 'fr') => ({
       <>
         <picture>
           <source srcSet={image} />
-          <img alt={alt} {...rest} />
+          <img
+            alt={alt}
+            {...rest}
+          />
         </picture>
         {props.caption && (
           <figcaption className="text-center text-sm text-gray-500">

components/mdx/mdx-components.tsx

@@ -39,23 +39,6 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
 
   const t = useTranslations(lang);
 
-  function cleanImpact(meta) {
-    // TODO: replace with a proper translation
-    let regexp: RegExp;
-    switch (lang) {
-      case 'es':
-        regexp = /t("Fort")|t("Moyen")|t("Faible")/gi;
-        break;
-      case 'en':
-        regexp = /t("High")|t("Medium")|t("Low")/gi;
-        break;
-      default:
-        regexp = /t("Fuerte")|t("Medio")|t("Débil")/gi;
-        break;
-    }
-    return fiche[`${meta}`]?.replace(regexp, ' ') || 'TBD';
-  }
-
   const getDataFilters = () => {
     let filters = {};
     if (getRefConfig().featuresEnabled.lifecycle) {
@@ -129,9 +112,7 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
     }
     if (getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_3) {
       metas.push(
-        t('Impact environnemental') +
-          ': ' +
-          t(cleanImpact('environmental_impact'))
+        t('Impact environnemental') + ': ' + t(fiche.environmental_impact)
       );
     }
     if (getRefConfig().featuresEnabled.lifecycle) {
@@ -200,50 +181,54 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
       </h2>
       <div className="flex w-full flex-col gap-2">
         <div className="flex flex-row items-center justify-start gap-2">
-          {typeof fiche[`priority_implementation`] === 'number' ? (
+          {getRefConfig().featuresEnabled.priority_implementation ===
+            MESURE_ON_5 && (
             <span
               title={t("Priorité d'implémentation")}
               aria-label={`${t("Priorité d'implémentation")} : ${
-                fiche[`priority_implementation`]
+                fiche.priority_implementation
               }`}
               role="img"
               className="text-base">
               {t("Priorité d'implémentation") +
-                ' ' +
-                fiche[`priority_implementation`]}
+                ': ' +
+                fiche.priority_implementation}
             </span>
-          ) : (
+          )}
+          {getRefConfig().featuresEnabled.priority_implementation ===
+            MESURE_ON_3 && (
             <span
               title={t("Priorité d'implémentation")}
-              aria-label={`${t("Priorité d'implémentation")} : ${
-                fiche[`priority_implementation`]
-              }`}
+              aria-label={`${t("Priorité d'implémentation")} : ${t(
+                fiche.priority_implementation
+              )}`}
               role="img">
-              {t(cleanImpact('priority_implementation'))}
+              {t(fiche.priority_implementation)}
             </span>
           )}
-          <span>|</span>
+          {getRefConfig().featuresEnabled.priority_implementation &&
+            getRefConfig().featuresEnabled.environmental_impact && (
+              <span aria-hidden="true">|</span>
+            )}
           {getRefConfig().featuresEnabled.environmental_impact ===
             MESURE_ON_3 && (
             <span
               title={t('Impact environnemental')}
-              aria-label={`${t('Impact environnemental')} : ${
-                fiche[`environmental_impact`]
-              }`}>
-              {t(cleanImpact('environmental_impact'))}
+              aria-label={`${t('Impact environnemental')} : ${t(
+                fiche.environmental_impact
+              )}`}>
+              {t(fiche.environmental_impact)}
             </span>
           )}
           {getRefConfig().featuresEnabled.environmental_impact ===
             MESURE_ON_5 && (
             <span
               title={t('Impact environnemental')}
               aria-label={`${t('Impact environnemental')} : ${t(
-                fiche[`environmental_impact`]
+                fiche.environmental_impact
               )}`}
               className="text-base">
-              {`${t('Impact environnemental')}: ${
-                fiche[`environmental_impact`]
-              }`}
+              {`${t('Impact environnemental')}: ${fiche.environmental_impact}`}
             </span>
           )}
         </div>