Configurateur — Vue d'ensemble

Le Configurateur Beely Framework est un outil d'administration zero-dependency pour gérer les pages, la configuration du site, la médiathèque et les icônes.

Introduction

Le Configurateur est une interface d'administration conçue pour gérer un projet Beely Framework sans écrire de code manuellement. Il respecte la philosophie zero-dependency du framework : pas de npm, pas de build tools, juste du vanilla JS et un backend Python utilisant uniquement la bibliothèque standard.

Le Configurateur permet de :

• Gérer les pages du projet (création, suppression, métadonnées SEO, arborescence)
• Configurer les design tokens via le configurateur intégré
• Gérer la médiathèque (images, dossiers, upload)
• Parcourir les 324 icônes Heroicons avec recherche et copie rapide
• Déployer et versionner avec git

Lancement

Le Configurateur repose sur un serveur Python léger (configurator-server.py) qui tourne sur un port dynamique entre 5555 et 5599, calculé automatiquement à partir du nom du dossier projet.

Lancer le configurateur

1. Ouvrir VSCode avec votre projet
2. Ouvrir le terminal intégré : Terminal → Nouveau terminal (ou Ctrl + `)
3. Taper cette commande et appuyer Entrée :

   python3 configurateur/configurator-server.py

4. Le terminal affiche Serving on port XXXX — le serveur tourne (le numéro de port est propre à votre projet)
5. Ouvrir votre navigateur (Chrome recommandé)
6. Aller à l'adresse : http://localhost:XXXX/configurateur/ (remplacer XXXX par le port affiché dans le terminal)
7. Le configurateur s'affiche avec le dashboard

Pour arrêter le serveur : revenir dans le terminal et appuyer Ctrl + C.

Prérequis : Python 3 doit être installé. Vérifier avec python3 --version dans le terminal. Si non installé :

• Mac : brew install python3 (ou installer Xcode Command Line Tools)
• Windows : télécharger sur python.org/downloads

Le serveur utilise uniquement la bibliothèque standard Python (pas de pip install nécessaire). Le Configurateur se charge comme une SPA (Single Page Application) avec navigation par panels.

Architecture

Le Configurateur suit une architecture client-serveur simple :

Le backend Python sert de proxy fichier : il gère le registre des pages (pages.json), les opérations CRUD sur les pages et les médias, et fournit l'API de configuration. Le frontend gère toute l'interface utilisateur.

Structure des fichiers

Le dossier configurateur/ contient l'ensemble du code :

Panels

Le Configurateur est organisé en 7 panels :

Accueil (Dashboard)

Vue d'accueil. Affiche un résumé du projet : nombre de pages, accès rapides aux actions fréquentes (créer une page, ouvrir le configurateur, déployer).

Pages

Gestionnaire de pages du projet. Permet de :

• Visualiser l'arborescence complète des pages (dossiers, sous-pages)
• Créer, renommer, dupliquer et supprimer des pages
• Modifier les métadonnées (titre, description SEO, slug, statut publié/brouillon)
• Réordonner les pages par glisser-déposer

Configuration

Interface visuelle pour configurer tout le projet, organisée en 2 onglets : Site (identité, mentions légales, analytics et CORS) et Blog (connexion Baserow et options d’affichage). Les fichiers config-site.js et .env sont générés automatiquement. La configuration SSH est dans la modale Publish.

Médiathèque

Gestionnaire d'images du site avec :

• Upload par drag & drop ou sélection de fichier
• Organisation en dossiers (création, navigation, breadcrumb)
• Popup d'édition (renommer, alt text, déplacer entre dossiers)
• Infos fichier (type, poids, chemin)
• Copie rapide du chemin d'une image

Icônes

324 icônes Heroicons (outline + solid) avec recherche et copie rapide du code data-icon.

Guide de style

Référence visuelle complète du design system du projet. Affiche dynamiquement :

• Couleurs : les 5 palettes (primary, secondary, tertiary, accent, neutral) avec les 19 variantes générées automatiquement (L1-L6, D1-D6, T1-T6), les couleurs sémantiques (success, warning, error), les couleurs de texte et de fond, et l'échelle de gris.
• Typographie : polices (body, heading, mono), échelle de tailles (xs à 5xl), graisses
• Espacements & layout : échelle d'espacement, rayons de bordure, ombres, transitions (avec animation au survol), breakpoints et container max
• Boutons : variantes primary, secondary, disabled
• Formulaires : champs texte, textarea, custom select, radio group, checkbox group — tous fonctionnels
• Éléments interactifs : tabs, accordéon, popup/modal, tooltip, slider/carousel — tous fonctionnels

Chaque élément est accompagné d'un snippet HTML copiable prêt à coller dans VSCode.

Édition des tokens

Cliquez sur n'importe quel token (couleur, taille, espacement, etc.) pour afficher un menu contextuel :

• Copier : copie la variable CSS (var(--primary), var(--space-4), etc.)
• Modifier : ouvre un éditeur inline pour changer la valeur en temps réel

Pour les couleurs, un color picker natif s'affiche. Pour les autres valeurs, un champ texte. Les modifications sont appliquées en live et sauvegardées dans core/css/tokens.css via le serveur Python.

Palettes personnalisées

En plus des 5 palettes de base, vous pouvez créer des palettes custom :

• Ajouter une couleur : ouvre une modale avec un champ nom (vérification de doublon en live), un color picker, un input hex/rgb éditable (supporte #RGB et #RRGGBB) et un aperçu live des variantes générées
• Supprimer : bouton « × » sur les palettes custom uniquement (les palettes de base sont protégées)
• Renommer : clic droit → « Renommer » sur les palettes custom
• Undo/redo : la création et la suppression de palettes sont annulables via Ctrl+Z / Ctrl+Y

Badges px et presets

Pour faciliter la lecture des valeurs en rem, un badge px s'affiche à côté de chaque token rem (espacement, taille de texte, radius, containers).

Des selects de presets permettent de basculer rapidement entre des jeux de valeurs prédéfinis pour les tokens d'espacement, de texte, de radius et de container‑max.

Undo / Redo

Deux boutons ↶ / ↷ en bas de la navigation permettent d'annuler ou rétablir les modifications de tokens. Raccourcis clavier :

• Ctrl+Z (ou Cmd+Z) : annuler
• Ctrl+Y (ou Cmd+Shift+Z) : rétablir

L'historique conserve les 50 dernières modifications.

Framework

Panel de maintenance du framework (section « Maintenance » dans la sidebar). Permet de :

• Version courante : affiche la version (tag git), le commit, la branche et la date de dernière mise à jour
• Versions disponibles : liste toutes les versions tagées du framework avec possibilité d'installer n'importe quelle version en un clic (upgrade ou downgrade)
• Diagnostic du projet : vérifie la santé complète du projet (25 checks) — symlinks, fichiers de configuration, secrets, core CSS/JS, API PHP, composants, icônes, identité Git, remote origin, valeurs .deploy.env, token Baserow, et connexion à l’API Baserow. Chaque check échoué affiche une astuce de correction (→ commande ou action à faire) directement sous l’item en rouge, pour un débogage immédiat sans documentation à consulter
• Sitemap & robots.txt : génère sitemap.xml et robots.txt à la racine du projet. L'URL de production est pré-remplie depuis .deploy.env. Exécute generate-sitemap.js via Node.js côté serveur.

Barre d'état (topbar)

Cinq gellules d'état s'affichent en permanence dans la barre supérieure du configurateur. Elles se rafraîchissent automatiquement au chargement, toutes les 60 secondes, et immédiatement après chaque sauvegarde de .env ou .deploy.env.

Cliquer sur une gellule navigue vers le panel concerné (Framework ou Configuration).

Bouton Configurateur (accès rapide)

Un bouton flottant en bas à droite de l'écran apparaît automatiquement sur toutes les pages du site en local uniquement (localhost, 127.0.0.1, file://). Ce bouton ouvre le Configurateur dans un nouvel onglet.

Comportement

• Si le serveur Python tourne → le bouton est actif (accenté en bleu) et redirige vers le port dynamique du projet
• Si le serveur n'est pas lancé → une popup stylisée s'affiche avec la commande à exécuter
• Le bouton n'apparaît jamais en production (uniquement sur les hosts locaux)

Popup de démarrage

Quand le serveur n'est pas détecté, la popup affiche :

• La commande python3 configurateur/configurator-server.py avec un bouton Copier
• Un disclaimer expliquant où exécuter la commande (terminal, racine du projet)
• Un bouton Démarrer qui poll le serveur toutes les 500ms pendant 8s, et ouvre automatiquement le configurateur dès qu'il répond
• Un bouton Annuler pour fermer (ou clic sur l'overlay, ou touche Escape)

Écran de démarrage (server blocker)

Si le configurateur est ouvert sans que le serveur Python ne tourne, un écran plein s'affiche avec la commande à copier :

python3 configurateur/configurator-server.py

• Un bouton « Copier et lancer » copie la commande dans le presse‑papier et poll le serveur pendant 2 minutes
• Le configurateur se charge automatiquement dès que le serveur répond (pas besoin de recharger la page)

Constructeurs

Le panel Constructeurs de la sidebar regroupe 10 outils visuels pour générer du code HTML prêt à copier-coller. Chaque constructeur offre un aperçu live et un bouton Copier.

Formulaires

Le constructeur le plus complet. Interface en 3 zones (étapes | éditeur visuel | panneau latéral) pour créer des formulaires multi-steps avec :

• Types de champs : texte, email, téléphone, textarea, select, radio, checkbox, number, date, fichier, hidden
• Configuration par champ : label, placeholder, nom, validation, largeur (1/1, 1/2, 1/3), logique conditionnelle, option « Autre »
• Options réordonnables : drag & drop des options select/radio/checkbox avec indicateur bleu
• Icônes Heroicons : sur les options et les boutons, position gauche/droite
• Multi-steps : ajout/réordonnement d'étapes, navigation séquentielle/goto/auto-advance, navigation conditionnelle
• Boutons personnalisés : prev/next/submit par étape avec texte, icône et conditions
• Barre de progression : activable/désactivable dans les paramètres
• Undo/Redo : Ctrl+Z / Ctrl+Y
• Menu contextuel : clic droit pour dupliquer, supprimer, déplacer un champ

Voir la documentation complète des formulaires pour les détails.

Grilles

Générateur de layouts CSS Grid : type de grille (classique, bento, masonry), colonnes, gap, breakpoints responsive, configuration par item.

Animations

3 onglets (Scroll, Clic, Texte) pour configurer les animations du framework : type, durée, easing, délai, direction, mode sortie.

Tabs

Générateur de composant tabs : nombre d'onglets, labels, contenu, variante de style.

Accordéons

Générateur de composant accordéons : nombre de sections, labels, contenu, mode exclusif.

Popup / Modal

Générateur de popup : trigger, contenu, taille, overlay, animation d'entrée/sortie.

Slider / Carousel

Générateur de carousel : nombre de slides, navigation (flèches, dots), autoplay, boucle.

Tooltip

Générateur de tooltips : texte, position (top, bottom, left, right), trigger (hover, click).

Interactions

Constructeur de micro-interactions : événements déclencheurs, animations de réponse, ciblage d'éléments.

Icônes

Explorateur des 324 icônes Heroicons avec recherche, filtres (outline/solid), animation, et options de copie (HTML, data-icon).

Registry (pages.json)

Le fichier pages.json est le registre central de toutes les pages du projet. Il stocke :

• Les chemins des fichiers HTML
• Les métadonnées de chaque page (titre, description, slug, statut)
• L'arborescence et la hiérarchie des pages

Déploiement

Le panel de publication permet de :

• Déployer en production ou pré-production via deploy.sh
• Gérer les commits git (voir les changements, commiter, pousser)