# Présentation des pages Les pages sont rendues côté serveur (SSR) à l'aide d'un arbre de composants déclaratif. Chaque page déclare un `name`, un `path`, des métadonnées SEO `meta` optionnelles et un tableau `components` de composants imbriqués. Les pages affichent les enregistrements de vos tables, hébergent des formulaires qui y écrivent, intègrent des îlots interactifs et exposent du contenu public — le tout à partir de la configuration, sans React personnalisé requis. Une page nécessite au minimum un `name` et un `path`. Tout le reste — métadonnées, contrôle d'accès, scripts, routes de collection dynamiques, contenu markdown, transitions de vue et toasts par page — est optionnel et superposé. ```yaml pages: - name: Home path: / meta: title: Welcome description: The fastest way to ship internal tools. components: - type: hero content: Build apps from config - type: container children: - { type: text, content: 'Get started in minutes.' } ``` ## Propriétés de page Chaque entrée du tableau `pages` accepte les propriétés suivantes. | Propriété | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | Identifiant unique optionnel de la page. Généré automatiquement s'il est omis. | | `name` | Nom de page lisible (utilisé dans la navigation et les listes d'administration). | | `path` | Route URL. Statique (`/about`), racine (`/`), ou dynamique avec un segment `:param` (`/blog/:slug`). Voir [Routage](#routage). | | `meta` | Métadonnées SEO et d'en-tête de document : titre, description, Open Graph, cartes Twitter, favicons, données structurées. Voir [SEO et métadonnées](/fr/docs/seo-meta). | | `components` | Tableau de définitions de composants formant l'arbre de rendu de la page. Voir [le modèle de composants](#le-modèle-de-composants). | | `access` | Contrôle d'accès : `'all'` (public), `'authenticated'`, un tableau de rôles `['admin']`, ou `{ require, redirectTo }`. Par défaut `'all'`. | | `collection` | Configuration de modèle qui génère une route par enregistrement de table (pages dynamiques). Voir [Pages de collection](#pages-de-collection). | | `markdown` | Rend tout le corps de la page à partir d'un fichier markdown ou d'une chaîne inline, avec options de mise en page et de table des matières. Voir [Pages markdown](#pages-markdown). | | `source` | Source de contenu basée sur fichier (`source.file`) pour un composant `content` — charge le markdown depuis le disque avec frontmatter. Mutuellement exclusif avec `content`. | | `layout` | Sections de mise en page nommées (p. ex. une `sidebar` liée à des données) entourant le corps de la page. Voir [Mises en page et barres latérales](#mises-en-page-et-barres-latérales). | | `scripts` | Scripts côté client, indicateurs de fonctionnalités, dépendances externes et données de config injectés dans la page. Voir [Interactivité et scripts](/fr/docs/interactivity-scripts). | | `vars` | Variables à portée de page (paires `key`/`value`) référençables via `$vars.*` dans les modèles de composants. | | `toasts` | Configuration des notifications toast au niveau de la page (position, durée par défaut). | | `viewTransition` | Animation de navigation de page : `fade`, `slide` (avec `direction`), ou `none`, plus `duration`. | | `sitemap` | Entrée de sitemap par page (priorité, fréquence de modification) ou `false` pour exclure la page du sitemap. | | `rss` | Active un flux RSS pour une page de collection — `true` pour les valeurs par défaut, ou `{ limit }` pour limiter le nombre d'éléments. | ```yaml pages: - name: About path: /about access: all meta: { title: 'About Us' } viewTransition: { type: fade, duration: 200 } components: - { type: text, tag: h1, content: 'About' } ``` ## Routage La propriété `path` déclare l'URL où une page est servie. | Forme de chemin | Exemple | Description | | ------------------- | ------------- | ---------------------------------------------------------------------------------------------- | | Racine | `/` | La page d'accueil. | | Statique | `/about` | Une route fixe. | | Statique imbriquée | `/checkout` | Un nombre quelconque de segments statiques. | | Dynamique | `/blog/:slug` | Un segment `:param` capture une valeur disponible pour la page en tant que paramètre de route. | | Id d'enregistrement | `/tasks/$id` | Les routes de détail dynamiques résolvent l'enregistrement correspondant dans `$record.*`. | Les routes dynamiques sont le plus souvent associées à un bloc `collection` afin qu'une seule définition de page génère une route par enregistrement. Voir [Pages de collection](#pages-de-collection). ## Le modèle de composants Le tableau `components` d'une page est un arbre. Chaque composant a un `type` (parmi ~80 types de composants intégrés) et un ensemble de propriétés. Les composants se composent à travers un système de modules partagé, de sorte que les mêmes propriétés transversales sont disponibles presque partout : | Propriété partagée | Disponible sur | Description | | ------------------ | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `props` | Presque tous les composants | Ensemble clé-valeur d'attributs de style/config rendus comme attributs HTML (p. ex. `className`, `variant`). | | `content` | Composants de contenu/mise en page | Texte ou markdown inline ; prend en charge la substitution `$record.*`, `$vars.*` et `$t:key` (traduction). | | `children` | Composants de type conteneur | Définitions de composants enfants imbriqués. | | `dataSource` | Composants liés à des données | Lie le composant à une table (filtre, tri, pagination, mode unique/recherche). Voir [Liaison de données](#liaison-de-données). | | `visibility` | La plupart des composants | Affichage conditionnel basé sur l'état d'authentification — rendu côté serveur, masqué côté client lorsque les conditions ne sont pas remplies. | | `responsive` | La plupart des composants | Surcharges par point de rupture pour un comportement responsive. | | `interactions` | Composants interactifs | Actions de clic, effets de survol et animations d'entrée. Voir [Interactivité et scripts](/fr/docs/interactivity-scripts). | | `action` | Composants formulaire/bouton | Comportement à exécuter lors d'une interaction — `crud`, `auth`, `navigate`, `automation`, avec gestionnaires `onSuccess`/`onError`. | | `i18n` | Composants de contenu | Variantes de contenu localisées par langue. | :::callout **Substitution de variables.** Les valeurs de `content` et `props` des composants résolvent trois familles de références au moment du rendu : `$record.` (enregistrement de la source de données courante), `$vars.` / `$currentUser.` (contexte de page et de session), et `$t:key` (clés de traduction, avec repli). La source `markdown` au niveau de la page expose en plus `$frontmatter.*`. ::: Les composants sont regroupés en catégories, chacune documentée sur sa propre page : | Catégorie | Exemples | | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | [Mise en page](/fr/docs/layout-components) | hero, container, flex, grid, responsiveGrid, card, sidebar, modal, tab-panel | | [Contenu](/fr/docs/content-components) | text, code, toc, accordion, blockquote, alert, custom-html | | [Données](/fr/docs/data-components) | data-table, list, gallery, kanban, calendar, chart, kpi, timeline | | [Contrôles de formulaire](/fr/docs/form-controls) | input, textarea, select, checkbox, radio, switch, slider, date-picker, file-upload, number-input | | [Superpositions](/fr/docs/overlay-components) | dialog, drawer, popover, tooltip, hover-card, alert-dialog, toast, progress, skeleton | | [Navigation](/fr/docs/navigation-components) | navigation-menu, dropdown-menu, breadcrumb, tabs, pagination, toggle, button-group, menubar | | [Média](/fr/docs/media-components) | image, icon, video, audio, iframe, carousel, aspect-ratio | | [Affichage](/fr/docs/display-components) | static-table, command, empty-state, resizable, scroll-area, speech-bubble, status-indicator | | [Retour d'information](/fr/docs/feedback-components) | progress, spinner, skeleton | | [Interactif](/fr/docs/interactive-components) | button, link, alert, badge, button-group | | [Spécialité](/fr/docs/specialty-components) | wizard, reorderable-list, language-switcher, comments, ai-chat | | [Social](/fr/docs/social-components) | comments, commentCount, ai-chat, sharing | | [SEO et métadonnées](/fr/docs/seo-meta) | title, description, Open Graph, cartes Twitter, JSON-LD, favicons | | [Interactivité et scripts](/fr/docs/interactivity-scripts) | scripts, interactions, auto-save, custom-html | ## Liaison de données Liez n'importe quel composant de données (ou conteneur) à une table avec `dataSource`. Les enregistrements liés exposent leurs champs aux descendants via des références `$record.`. | Propriété `dataSource` | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | `table` | Nom de la table à lier (validé contre `app.tables`). | | `fields` | Champs spécifiques à récupérer (omettre pour tout récupérer). | | `filter` | Tableau de conditions `{ field, operator, value }` combinées par AND. Opérateurs : `eq`, `neq`, `contains`, `gt`, `lt`, `gte`, `lte`. | | `sort` | Tableau de règles `{ field, direction }` appliquées dans l'ordre (primaire, secondaire). | | `pagination` | `{ pageSize, style }` — `style: numbered` rend une navigation par pages ; `style: loadMore` rend un bouton Charger plus. | | `mode` | `single` résout un seul enregistrement par un `param` de route ; `search` filtre sur `searchFields` avec `debounce` et `maxResults`. | | `id` | Identifiant pour les références de source de données entre composants. | ```yaml - type: data-table dataSource: table: tasks filter: - { field: status, operator: neq, value: archived } sort: - { field: created_at, direction: desc } pagination: { pageSize: 25, style: numbered } ``` :::callout **Cadrage par utilisateur courant.** `$currentUser.*` se résout par requête durant le SSR (jamais mis en cache entre utilisateurs) : `$currentUser.id`, `$currentUser.role`, `$currentUser.email`, `$currentUser.isUnrestricted` (contournement administrateur global) et `$currentUser.assignments.` (ids d'enregistrements aplatis auxquels l'utilisateur est affecté). Les pages utilisant `$currentUser` renvoient `401` lorsqu'elles sont consultées sans authentification. ::: ## Pages de collection Un bloc `collection` transforme une seule définition de page en une route par enregistrement de table. Le `path` de la page doit inclure un segment dynamique `:param` correspondant à `slugField`. | Propriété `collection` | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------- | | `table` | Nom de la table à partir de laquelle générer les pages de collection (doit exister dans `app.tables`). | | `slugField` | Champ dont la valeur devient le paramètre URL (p. ex. `slug`, `id`). | | `filter` | Conditions `{ field, operator, value }` optionnelles limitant quels enregistrements génèrent des pages. | ```yaml pages: - name: Blog Post path: /blog/:slug collection: table: posts slugField: slug filter: - { field: published, operator: eq, value: true } rss: { limit: 20 } components: - { type: text, tag: h1, content: '$record.title' } - { type: text, content: '$record.body', props: { format: markdown } } ``` Une requête vers `/blog/123` qui ne correspond à aucun enregistrement renvoie un `404`. ## Pages markdown Rendez une page entière à partir de markdown — soit inline, soit à partir d'un fichier — avec frontmatter, mise en page et table des matières générée automatiquement. | Propriété `markdown` | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `content` | Chaîne markdown inline. | | `file` | Chemin vers un fichier markdown (p. ex. `content/docs.md`), résolu depuis la racine du projet. Mutuellement exclusif avec `content`. | | `layout` | Style d'encadrement : `prose` (défaut), `docs`, `full`, ou `none`. | | `toc` | Config de table des matières — `true` pour les valeurs par défaut, ou `{ maxDepth, position }` (`inline` ou `sidebar`). | Le frontmatter YAML (entre les délimiteurs `---`) est analysé et exposé comme `$frontmatter.*` dans `meta` et les propriétés frères. Le HTML markdown est assaini pour prévenir les attaques XSS (cohérent avec les composants de contenu `text`/`alert`). ```yaml pages: - name: Docs Home path: /docs markdown: file: content/docs/home.md layout: docs toc: { maxDepth: 3, position: sidebar } ``` Pour la collection `contentDir` (une page par fichier markdown dans un répertoire, avec une barre latérale dérivée), utilisez un composant `content` avec une source `contentDir` : | Propriété `contentDir` | Description | | ---------------------- | -------------------------------------------------------------------------------------- | | `directory` | Répertoire contenant les fichiers de contenu markdown. | | `slugFrom` | Dérive le slug URL depuis `filename` ou `filepath`. | | `include` | Motif glob pour filtrer les fichiers (p. ex. `*.md`). | | `sort` | `{ field, order }` — trie par un champ de frontmatter (p. ex. `date`, `desc`). | | `filter` | Conditions de filtre sur les champs de frontmatter. | | `nav` | Config de barre latérale dérivée de la collection : `{ enabled, groupBy, labelFrom }`. | ## Mises en page et barres latérales La propriété `layout` encadre le corps de la page dans des sections nommées. La plus courante est une `sidebar` liée à des données rendue à l'intérieur du `
` rend une entrée par enregistrement affecté ; un administrateur global (`isUnrestricted=true`) voit tous les enregistrements. ## Contrôle d'accès La propriété `access` protège une page : | Forme | Signification | | ---------------------------------------------------- | ----------------------------------------------------------------------- | | `'all'` | Tout le monde, y compris les visiteurs non authentifiés (défaut). | | `'authenticated'` | Tout utilisateur connecté. | | `['admin', 'editor']` | Noms de rôles spécifiques. | | `{ require: 'authenticated', redirectTo: '/login' }` | Redirige les utilisateurs non autorisés au lieu de renvoyer une erreur. | ## Pages connexes - [Composants de mise en page](/fr/docs/layout-components) — blocs de construction structurels. - [Composants de contenu](/fr/docs/content-components) — texte, code, encarts, accordéons. - [Composants de données](/fr/docs/data-components) — tables, listes, graphiques, KPI liés à vos données. - [Contrôles de formulaire](/fr/docs/form-controls) — entrées, sélecteurs, sélecteurs de date, bascules. - [SEO et métadonnées](/fr/docs/seo-meta) — en-tête de document, cartes sociales, données structurées. - [Interactivité et scripts](/fr/docs/interactivity-scripts) — actions, animations, sauvegarde automatique. - [Présentation des tables](/fr/docs/tables-overview) — les modèles de données que les pages rendent. - [Formulaires](/fr/docs/forms-overview) — définitions de formulaires autonomes. - [Recherche](/fr/docs/search-overview) — configuration de recherche plein texte et publique. - [Thème](/fr/docs/theme) — jetons de design consommés par le style des composants.