Configurateur — Gestion des pages

Le panneau Pages du Configurateur affiche un arbre organisé par dossiers de toutes les pages HTML du site. Il permet de créer, renommer, supprimer, dupliquer et organiser les pages dans des dossiers indépendants, ainsi que de gérer leurs métadonnées (SEO, statut, code personnalisé, etc.).

Vue d'ensemble

Le panneau Pages est accessible depuis la barre latérale gauche du Configurateur. Il présente l'ensemble des pages du site sous forme d'arbre organisé par dossiers, reflétant la structure physique du projet. Chaque page est un fichier .html référencé dans le registre pages.json.

Gestionnaire de pages — arborescence et aperçu

Sélectionnez une page (simple clic) pour afficher son panneau de métadonnées à droite.

Arbre par dossiers

Les pages sont stockées dans le dossier pages/ du projet. L'arbre reflète cette structure :

index.html — page d'accueil (toujours en premier, verrouillée)
blog.html — page à la racine
confidentialite.html — page à la racine
Ícône dossier blog/ — dossier indépendant
- blog/article.html — page dans le dossier blog/ (template)

Les dossiers sont indépendants des pages : le dossier blog/ existe indépendamment de blog.html. On peut avoir un dossier legal/ sans que legal.html n'existe, et vice versa. C'est le même principe que dans VSCode.

La hiérarchie se déduit uniquement du chemin physique des fichiers : blog/article.html est dans le dossier blog/ car son chemin contient blog/.

Drag & drop des pages

L'arbre supporte le drag & drop pour réorganiser les pages :

Glisser sur un dossier : déplace la page dans ce dossier
Glisser sur une page (moitié haute) : insérer avant la cible
Glisser sur une page (moitié basse) : insérer après la cible

Si la cible est dans un dossier différent, le fichier HTML est physiquement déplacé sur le disque et ses chemins relatifs sont automatiquement ajustés selon la nouvelle profondeur.

La page d'accueil est verrouillée : elle ne peut être ni déplacée, ni imbriquée. Les pages templates sont également non-déplaçables.

Pages et dossiers protégés

Certaines pages et dossiers bénéficient de protections supplémentaires :

blog/article.html est protégé : impossible de le supprimer, de le renommer ou de le déplacer par drag & drop
Le dossier blog/ est verrouillé : il est impossible d'y déplacer des pages (le drag & drop est bloqué visuellement et fonctionnellement)

Drag & drop des dossiers

Les dossiers sont également draggables et peuvent être :

Glissés sur un autre dossier : le dossier est imbriqué dans le dossier cible (ex : blog/ glissé sur services/ → services/blog/)
Glissés entre des éléments : le dossier est déplacé à la même profondeur que la cible

Lors du déplacement d'un dossier, toutes les pages et sous-dossiers qu'il contient sont déplacés avec lui, et les chemins relatifs dans les fichiers HTML sont automatiquement ajustés selon la nouvelle profondeur.

Garde-fou : il est impossible de déplacer un dossier dans lui-même ou dans un de ses sous-dossiers.

Dossiers

Les dossiers apparaissent dans l'arbre avec une icône de dossier et un chevron pour expand/collapse. Ils sont :

Cliquables pour sélectionner et afficher le panneau de propriétés à droite (le chevron gère l'expand/collapse)
Draggables : peuvent être déplacés par drag & drop dans l'arbre
Droppables : glisser une page ou un dossier dessus le déplace dans le dossier
Imbriquables : les sous-dossiers sont supportés (ex : services/consulting/)

Sélectionnez un dossier (simple clic) pour afficher son panneau de propriétés à droite. Ce panneau permet de :

Modifier le nom d'affichage — champ éditable, sauvegarde au blur ou Entrée
Modifier le slug — champ éditable avec vérification de doublon en temps réel. Le changement déplace physiquement les fichiers.
Créer un sous-dossier — bouton dans la toolbar du panneau
Supprimer le dossier — bouton dans la toolbar (désactivé si le dossier n'est pas vide)

Les dossiers vides ne sont pas automatiquement supprimés.

Opérations CRUD

Créer une page

Cliquez sur le bouton + Nouvelle page dans la toolbar. Une modale apparaît pour saisir le nom du fichier. L'extension .html est ajoutée automatiquement.

// Exemple : saisir "contact" crée pages/contact.html
// Exemple : saisir "services/consulting" crée pages/services/consulting.html

Créer un dossier

Cliquez sur le bouton dossier+ dans la toolbar. Une modale apparaît avec deux champs :

Nom du dossier : nom d'affichage libre (accents, espaces, majuscules autorisés)
Slug : chemin technique, généré automatiquement à partir du nom (ex : « Études de cas » → etudes-de-cas). Modifiable manuellement.

Une vérification de doublon en temps réel est effectuée sur le slug : si un dossier avec le même slug existe déjà, un message d'erreur s'affiche et le bouton Créer est désactivé.

Créer un sous-dossier

Clic droit sur un dossier existant → « Nouveau sous-dossier ». La même modale avec champs nom + slug apparaît, avec vérification de doublon en temps réel dans le contexte du dossier parent.

Nom et slug des dossiers

Chaque dossier possède deux identifiants :

Nom (name) : nom d'affichage libre (accents, espaces, majuscules autorisés)
Slug : chemin technique sur le disque (généré automatiquement à partir du nom). L'utilisateur peut modifier le slug manuellement dans la modale.

Les deux peuvent être modifiés indépendamment via le panneau de propriétés (clic sur le dossier).

Renommer un dossier

Le panneau de propriétés (clic sur le dossier) permet deux types de renommage :

Nom d'affichage : champ éditable en haut du panneau. Sauvegarde au blur ou Entrée. Aucun fichier n'est déplacé.
Slug : champ éditable avec vérification de doublon en temps réel. Le changement déplace physiquement les fichiers et ajuste les chemins HTML.

Renommer une page

Modifiez le champ Slug dans le panneau de métadonnées pour changer l'URL de la page.

Supprimer une page

Bouton Supprimer (icône poubelle) dans le panneau de métadonnées. Une modale de confirmation apparaît. Les pages protégées (index.html, 404.html) ne peuvent pas être supprimées.

Supprimer un dossier

Clic droit sur un dossier dans l'arbre → « Supprimer le dossier ». Uniquement possible si le dossier est vide.

Dupliquer une page

Crée une copie du fichier HTML avec un nouveau nom et les mêmes métadonnées.

Déplacer une page

En plus du drag & drop, le panneau de métadonnées affiche un champ Dossier en lecture seule avec un bouton Déplacer. Celui‑ci ouvre un select listant les dossiers existants (pas d’input texte libre) : cela évite la création accidentelle de dossiers. Les dossiers verrouillés (comme blog/) sont exclus du select.

Panneau de métadonnées

Quand une page est sélectionnée (simple clic), un panneau de métadonnées s'affiche à droite :

Champ	Type	Description
Titre de la page	Texte	Titre affiché de la page (balise `<title>`)
Slug	Texte	URL propre de la page (ex : `/blog/article`)
Dossier	Lecture seule + bouton	Dossier actuel de la page + bouton « Déplacer »
Meta title	Texte	Titre SEO
Meta description	Texte	Description SEO
Image à la une	Fichier	Image principale de la page
Statut	Bouton	`published` ou `draft`
noindex	Checkbox	Exclure des moteurs de recherche
Code <head>	Textarea	Code HTML injecté dans `<head>`
Code <body>	Textarea	Code HTML injecté avant `</body>`

Pages en lecture seule

Certaines pages sont marquées comme readOnly dans le registre. Ces pages sont protégées et ne peuvent pas être supprimées ou renommées. Cela concerne typiquement les pages système comme 404.html.

Pages template

Les pages templates sont gérées via le registre pages.json (champ isTemplate). Elles apparaissent avec une icône code </> et un badge « Template ». Elles ne peuvent pas être déplacées.

Registre `pages.json`

Le fichier pages.json est le registre central. Les chemins sont stockés relativement au dossier pages/.

Structure du registre

{
  "version": 2,
  "homepage": "index.html",
  "folders": {
    "blog": { "order": 0, "collapsed": false }
  },
  "pages": {
    "index.html": {
      "title": "Accueil",
      "slug": "index",
      "status": "published",
      "order": 0,
      "readOnly": false,
      "isTemplate": false
    },
    "blog/article.html": {
      "title": "Article",
      "slug": "blog/article",
      "status": "published",
      "order": 0,
      "readOnly": false,
      "isTemplate": true
    }
  }
}

Propriétés top-level

Propriété	Type	Description
`version`	Number	Version du registre (actuellement `2`)
`homepage`	String	Chemin de la page d'accueil
`folders`	Object	Dossiers enregistrés (clé = chemin, valeur = `{ order, collapsed }`)
`pages`	Object	Pages enregistrées (clé = chemin relatif à `pages/`)

Propriétés d'une page

Propriété	Type	Description
`title`	String	Titre de la page
`slug`	String	URL propre
`metaTitle`	String	Titre SEO (override)
`metaDescription`	String	Description SEO (override)
`featuredImage`	String	Chemin de l'image à la une
`status`	String	`published` ou `draft`
`noindex`	Boolean	Exclure des moteurs de recherche
`order`	Number	Position dans son dossier
`customHead`	String	Code HTML dans `<head>`
`customBody`	String	Code HTML avant `</body>`
`readOnly`	Boolean	Page protégée
`isTemplate`	Boolean	Page servant de modèle

Propriétés d'un dossier

Propriété	Type	Description
`name`	String	Nom d'affichage du dossier (accents, espaces autorisés)
`order`	Number	Position dans l'arbre
`collapsed`	Boolean	État expand/collapse

Module JavaScript

La logique est gérée par configurateur-pages.js :

Arbre organisé par dossiers (buildFolderTree())
Opérations CRUD de pages et dossiers
Drag & drop de pages et de dossiers (réordonnement, déplacement, imbrication)
Renommage de dossiers avec mise à jour en cascade du registre
Création de sous-dossiers imbriqués
Synchronisation registre/filesystem
Panneau de métadonnées

Undo / Redo

Le raccourci Ctrl+Z (ou Cmd+Z) annule la dernière action, et Ctrl+Y (ou Cmd+Shift+Z) la rétablit. L'undo/redo est scopé au panel actif :

Panel Pages : undo/redo pour la création, la suppression (avec contenu HTML restauré) et le déplacement de pages
Panel Guide de style : undo/redo pour les tokens et les palettes
Panel Formulaires : undo/redo existant pour le constructeur de formulaires
Autres panels : pas de undo (no‑op silencieux)