feat: change alternated and add docs

.eslintrc.js

@@ -197,7 +197,7 @@ const config = {
       },
     },
     {
-      files: ["src/pages/**/*.ts?(x)", `src/app/**/+(${nextFiles}).ts?(x)`],
+      files: ["src/pages/**/*.ts?(x)", `src/app/**/+(${nextFiles}).ts?(x)`, "next.config.mjs"],
       rules: {
         "import/no-default-export": "off",
       },

content/.editorconfig

@@ -0,0 +1,4 @@
+[*.md*]
+indent_size = 2
+trim_trailing_whitespace = false
+insert_final_newline = false

content/landing/blocs/01/title.mdx

@@ -0,0 +1,11 @@
+---
+type: single-image
+image:
+  src: /img/placeholder.svg
+  alt: Placeholder
+  position: left
+cta:
+  source: produit-bio-durable
+---
+
+## Les produits bio durables enfin accessibles

content/landing/blocs/02/title.mdx

@@ -0,0 +1,14 @@
+---
+type: alternated
+images:
+  - src: /img/placeholder.svg
+    alt: Placeholder
+  - src: /img/placeholder.svg
+    alt: Placeholder
+  - src: /img/placeholder.svg
+    alt: Placeholder
+cta:
+  source: utiliser-carte-verte
+---
+
+## Utiliser Carte Verte c'est simple

content/landing/blocs/03/title.mdx

@@ -0,0 +1,14 @@
+---
+type: alternated
+images:
+  - src: /img/placeholder.svg
+    alt: Placeholder
+  - src: /img/placeholder.svg
+    alt: Placeholder
+  - src: /img/placeholder.svg
+    alt: Placeholder
+cta:
+  source: comment-sinscrire
+---
+
+## Comment s'inscrire ?

content/landing/blocs/04/title.mdx

@@ -0,0 +1,7 @@
+---
+type: text-only
+cta:
+  source: sur-quels-criteres
+---
+
+## Sur quels critères la sélection est-elle réalisée ?

content/landing/faq/01.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Qu'est-ce que la Carte Verte ?"
-}
+---
+question: "Qu'est-ce que la Carte Verte ?"
+---
 
 Carte Verte est un dispositif de l'Ademe construit en sur la méthode béta.gouv.fr.

content/landing/faq/02.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Est-ce un service payant ou gratuit ?",
-}
+---
+question: "Est-ce un service payant ou gratuit ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/03.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Dans quels magasins puis-je régler mes achats avec Carte Verte ?",
-}
+---
+question: "Dans quels magasins puis-je régler mes achats avec Carte Verte ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/04.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Quels sont les produits éligibles ?",
-}
+---
+question: "Quels sont les produits éligibles ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/05.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "La récompense dépend-elle du montant dépensé ?",
-}
+---
+question: "La récompense dépend-elle du montant dépensé ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/06.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Pourquoi récompenser les achats bio et durables ?",
-}
+---
+question: "Pourquoi récompenser les achats bio et durables ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/07.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Quel est le but de l'expérimentation Carte Verte ?",
-}
+---
+question: "Quel est le but de l'expérimentation Carte Verte ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/08.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Pourquoi 300 inscrits seulement ?",
-}
+---
+question: "Pourquoi 300 inscrits seulement ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/09.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Mes données seront-elles sécurisées et anonymisées ?",
-}
+---
+question: "Mes données seront-elles sécurisées et anonymisées ?"
+---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/landing/faq/10.mdx

@@ -1,5 +1,5 @@
-export const metadata = {
-    question: "Qui contacter en cas de problème ou de questions ?",
-}
+---
+question: "Qui contacter en cas de problème ou de questions ?"
+---
 
 Si vous n'avez pas trouvé de réponses à vos questions, contactez-nous à [carte-verte@beta.gouv.fr](mailto:carte-verte@beta.gouv.fr)

content/landing/hero_title.mdx

@@ -1,7 +1,11 @@
-export const metadata = {
-    cta: {
-        source: "hero",
-    },
-}
+---
+cta:
+  ## Source visible comme propriété Matomo lors du clic
+  source: hero
+  ## url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
+  # href:
+  ## Texte du bouton. Si vide, "Je souhaite recevoir ma Carte Verte" est utilisé.
+  # title: En savoir plus
+---
 
 ## La solution de paiement de l'Ademe qui récompense vos achats durables à **Angers**.

docs/content.md

@@ -1 +1,73 @@
-TBD
+# Ajouter du contenu
+Le contenu du site sont des fichiers markdown (extensions `.md` et `.mdx`) situés dans le dossier `content`.
+
+Un fichier markdown peut des fois être accompagné de métadonnées, qui sont des informations supplémentaires sur le contenu du fichier. Ces métadonnées sont situées en haut du fichier, entre deux lignes de trois tirets (`---`).
+
+Le format markdown est un format de texte qui permet de mettre en forme du texte. Il est très simple à utiliser, et permet de mettre en forme du texte sans avoir à utiliser des balises HTML. Il est par exemple utilisé dans Mattermost. Pour plus d'informations sur le format markdown, vous pouvez consulter [cette page](https://github.github.com/gfm/).
+
+## Pages autres que la landing (ex: cgu)
+Les pages autres que la landing sont directement éditables dans à la racine du dossier `content`. Ces pages ne contiennent pas de métadonnées.
+
+## Landing
+Sur la landing, les blocs de contenu sont éditables dans le dossier `content/landing`. La landing est découpé en 3 parties, la section "hero", le contenu qui contient dynamiquement la liste des blocs de contenu, et la FAQ en guise de footer.
+
+### Hero
+Le contenu de la section "hero" est découpé en 2 fichiers, `hero_title.mdx` et `hero_bloc.mdx`. Le premier contient le titre ainsi que des métadonnées pour gérer le CTA. Le second contient le contenu du bloc.
+
+**Métadonnées**
+- `cta`: les propriétés du CTA
+- `cta.source`: Source utilisée comme propriété Matomo lors du clic
+- `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
+- `cta.title`: Texte du bouton. Si vide, "Je souhaite recevoir ma Carte Verte" est utilisé.
+
+### Blocs de contenu
+Les blocs de contenu sont des fichiers markdown situés dans le dossier `content/landing/blocs`. Ils contiennent des métadonnées pour gérer le titre, le contenu, et l'image du bloc si besoin.
+
+Chaque bloc doit être dans un dossier numéroté. Le numéro du dossier est utilisé pour ordonner les blocs sur la landing.
+
+Il existe 3 types de blocs.
+- `single-image`: bloc avec une seule image
+- `alternated`: bloc avec des images alternées sur desktop et en colonne sur mobile
+- `text-only`: bloc avec du texte uniquement
+
+#### Single image
+Un bloc `single-image` est découpé en 2 fichiers, `bloc.mdx` et `title.mdx`. Le premier contient le contenu du bloc, et le second contient le titre du bloc et ses métadonnées.
+
+**Métadonnées**
+- `type`: doit être `single-image`
+- `image`: les propriétés de l'image
+- `image.src`: url de l'image. Soit une url, soit le nom d'un fichier situé dans le dossier `public/`
+- `image.alt`: texte alternatif de l'image (pour l'accessibilité)
+- `image.position`: position de l'image. Soit `left` soit `right`. (`left` par défaut)
+- `cta`: les propriétés du CTA
+- `cta.source`: Source utilisée comme propriété Matomo lors du clic
+- `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
+- `cta.title`: Texte du bouton. Si vide, "Je souhaite recevoir ma Carte Verte" est utilisé.
+
+#### Alternated
+Un bloc `alternated` est découpé en plusieurs fichiers, `title.mdx` qui contient le titre du bloc et ses métadonnées, et un fichier par colonne, `bloc_XX.mdx`. Les blocs sont ordonnés par numéro de fichier (`bloc_01.mdx` en premier, `bloc_02.mdx` en second, etc).
+
+Un maximum de 12 blocs est autorisé.
+
+**Métadonnées**
+- `type`: doit être `alternated`
+- `images`: un tableau de propriétés d'images
+    - `src`: url de l'image. Soit une url, soit le nom d'un fichier situé dans le dossier `public/`
+    - `alt`: texte alternatif de l'image (pour l'accessibilité)
+- `cta`: les propriétés du CTA
+- `cta.source`: Source utilisée comme propriété Matomo lors du clic
+- `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
+- `cta.title`: Texte du bouton. Si vide, "Je souhaite recevoir ma Carte Verte" est utilisé.
+
+#### Text only
+Un bloc `text-only` est découpé en 2 fichiers, `bloc.mdx` et `title.mdx`. Le premier contient le contenu du bloc, et le second contient le titre du bloc et ses métadonnées.
+
+**Métadonnées**
+- `type`: doit être `text-only`
+- `cta`: les propriétés du CTA
+- `cta.source`: Source utilisée comme propriété Matomo lors du clic
+- `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
+- `cta.title`: Texte du bouton. Si vide, "Je souhaite recevoir ma Carte Verte" est utilisé.
+
+### FAQ
+La FAQ est un ensemble de fichiers markdown numérotés situés dans le dossier `content/landing/faq`. Chaque fichier correspond à une question. La question est configurée dans les métadonnées du fichier, et le contenu du fichier est utilisé comme réponse. Le numéro du fichier est utilisé pour ordonner les questions sur la landing.

global.d.ts

@@ -14,12 +14,8 @@ declare type CarteVerteMDXLandingMetadata = CarteVerteHeroMDXMetadata &
         type: "single-image";
       }
     | {
-        images: {
-          first: CarteVerteMDXImage;
-          second: CarteVerteMDXImage;
-          third: CarteVerteMDXImage;
-        };
-        type: "3-alternated";
+        images: CarteVerteMDXImage[];
+        type: "alternated";
       }
     | {
         type: "text-only";
@@ -40,7 +36,7 @@ declare type CarteVerteFAQMDXMetadata = CarteVerteHeroMDXMetadata & {
 
 declare type MDXContent = typeof import("*.mdx").default;
 
-declare module "@__content/landing/content/*/title.mdx" {
+declare module "@__content/landing/blocs/*/title.mdx" {
   const MDXContent: MDXContent;
   export default MDXContent;
   export const metadata: CarteVerteMDXLandingMetadata;