# Composants de contenu

Les composants de contenu rendent du texte et de la prose. Ils couvrent le texte enrichi et le markdown, les blocs de code avec coloration syntaxique, les accordéons repliables, les encarts stylisés, les citations, une table des matières générée automatiquement et l'interface de recherche au niveau de la page. Tous les composants de contenu prennent en charge la substitution de variables dans leur `content` (`$record.*`, `$vars.*`, `$t:key`) et acceptent l'ensemble partagé `props`, ainsi que les modules `visibility`, `responsive` et `i18n`.

```yaml
components:
  - type: text
    tag: h1
    content: Getting Started
  - type: text
    content: '$record.body'
    props: { format: markdown }
  - type: alert
    props: { variant: info, dismissible: true }
    content: 'Heads up — this is a callout.'
```

## `text`

Le composant de contenu principal. Rend du texte inline, un élément sémantique (titre, paragraphe, citation) ou du markdown complet. Le même type `text` couvre les titres, paragraphes, blocs de code et citations via son `tag`/`props`.

| Propriété           | Description                                                                                                                 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `content`           | Source texte ou markdown (prend en charge `$record.*`, `$vars.*`, `$t:key`).                                                |
| `tag`               | Élément sémantique : `h1`–`h6`, `p`, `span`, `blockquote`, `code`, etc.                                                     |
| `props.format`      | Définir sur `markdown` pour rendre `content` comme HTML assaini (titres, gras, italique, liens, images, listes imbriquées). |
| `props.language`    | Lorsque `tag: code`, la langue pour la coloration syntaxique.                                                               |
| `props.lineNumbers` | Lorsque `tag: code`, définir sur `true` pour afficher les numéros de ligne.                                                 |
| `props.cite`        | Lorsque `tag: blockquote`, l'URL de la source de citation.                                                                  |
| `props`             | Attributs HTML supplémentaires (p. ex. `className`).                                                                        |

La sortie markdown est assainie pour prévenir les attaques XSS (pas de balises `<script>` ni d'attributs gestionnaires d'événements). Les blocs de code incluent un bouton de copie vers le presse-papiers.

## `code`

Un bloc de code autonome (équivalent à `text` avec `tag: code`, exposé comme type propre pour plus de clarté).

| Propriété           | Description                                                         |
| ------------------- | ------------------------------------------------------------------- |
| `content`           | La source du code.                                                  |
| `props.language`    | Langue pour la coloration syntaxique (p. ex. `ts`, `yaml`, `bash`). |
| `props.lineNumbers` | Afficher les numéros de ligne à côté du code.                       |
| `props`             | Attributs HTML supplémentaires.                                     |

## `toc`

Génère automatiquement une table des matières à partir de la hiérarchie de titres de la page. Cliquer sur un lien fait défiler en douceur jusqu'à l'ancre du titre ; la section active est mise en évidence selon la position de défilement.

| Propriété      | Description                                                                                 |
| -------------- | ------------------------------------------------------------------------------------------- |
| `props.sticky` | Définir sur `true` pour garder la table des matières fixée à la fenêtre lors du défilement. |
| `props`        | Attributs HTML supplémentaires (p. ex. `className`).                                        |

## `accordion`

Sections de contenu repliables, chacune avec un déclencheur de résumé et un panneau de détail.

| Propriété           | Description                                                                                                  |
| ------------------- | ------------------------------------------------------------------------------------------------------------ |
| `children`          | Éléments d'accordéon (chacun avec un libellé de résumé et un contenu de détail).                             |
| `props.mode`        | `single` replie les autres sections quand l'une s'ouvre ; `multiple` permet d'en ouvrir plusieurs à la fois. |
| `props.defaultOpen` | Définir sur `true` pour rendre une section développée au chargement de la page.                              |
| `props`             | Attributs HTML supplémentaires.                                                                              |

## `blockquote`

Un bloc de citation stylisé (équivalent à `text` avec `tag: blockquote`). Les citations imbriquées sont rendues avec une indentation croissante.

| Propriété    | Description                     |
| ------------ | ------------------------------- |
| `content`    | Le texte cité.                  |
| `props.cite` | URL de la source de citation.   |
| `props`      | Attributs HTML supplémentaires. |

## `alert`

Un bloc d'encart stylisé pour mettre en évidence des informations.

| Propriété           | Description                                                                                                                        |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `content`           | Le message d'alerte (prend en charge la substitution).                                                                             |
| `props.variant`     | Style visuel : `info`, `warning`, `error`, ou `success` — chacun sélectionne automatiquement une icône et une couleur appropriées. |
| `props.dismissible` | Définir sur `true` pour rendre un bouton de fermeture qui masque l'alerte.                                                         |
| `props`             | Attributs HTML supplémentaires.                                                                                                    |

## `searchInput`

Un contrôle de champ de recherche au niveau de la page qui pilote le filtrage côté client d'une liste ou d'une table liée. (La configuration du _moteur_ plein texte — indexation, poids, recherche publique — se trouve dans la section [Recherche](/fr/docs/search-overview) ; ceci est le bloc de construction de l'interface.)

| Propriété           | Description                                                                                                            |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `props.placeholder` | Texte indicatif affiché dans le champ de recherche.                                                                    |
| `props.debounceMs`  | Délai d'anti-rebond avant le déclenchement de la recherche (les résultats se mettent à jour en direct après le délai). |
| `props.minLength`   | Longueur minimale de requête avant la recherche (empêche les recherches vides/courtes).                                |
| `dataSource`        | Liaison optionnelle lorsque le champ filtre une source de données en mode `search`.                                    |

## `pageSearch`

Une expérience de recherche à portée de page composée d'un champ et d'une région de résultats, liée à une table consultable. À utiliser pour le filtrage d'enregistrements au sein de la page.

| Propriété           | Description                                                                   |
| ------------------- | ----------------------------------------------------------------------------- |
| `dataSource`        | Liaison de table en mode `search` (`searchFields`, `debounce`, `maxResults`). |
| `props.placeholder` | Texte indicatif pour le champ de recherche.                                   |
| `children`          | Composants optionnels de modèle de résultat.                                  |

:::callout
**Contenu markdown vs. pages markdown.** Un composant `text` avec `props.format: markdown` rend un _fragment_ de markdown inline. Pour rendre une page _entière_ à partir d'un fichier markdown (avec frontmatter, mise en page et table des matières), utilisez la propriété `markdown` au niveau de la page — voir [Présentation des pages → Pages markdown](/fr/docs/pages-overview#pages-markdown).
:::

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — structure de page et substitution de variables.
- [Composants de mise en page](/fr/docs/layout-components) — conteneurs, grilles, cartes.
- [Composants média](/fr/docs/media-components) — images, vidéo, icônes, intégrations.
- [Recherche](/fr/docs/search-overview) — moteur de recherche plein texte et recherche publique.
- [Composants de recherche](/fr/docs/search-components) — blocs de construction de l'interface de recherche (dans la section Recherche).
- [SEO et métadonnées](/fr/docs/seo-meta) — en-tête de document et données structurées.