Configuration du Layout via Facility Data

Ce document détaille les paramètres de configuration du layout disponibles dans facility.data_general (Directus) et leurs effets sur l'affichage de l'application.

Architecture de Consolidation

Pour simplifier le data layer et éviter la multiplication des clés, toutes les variables de layout sont consolidées dans un objet JSON unique sous la clé _SYS_LAYOUT_OVERRIDES.

Exemple de structure dans data_general :

[
  {
    "key": "_SYS_LAYOUT_OVERRIDES",
    "value": {
      "darkmode": true,
      "hero_height_rem": "13rem",
      "overlay_show": true
    }
  }
]

L'application supporte toujours la lecture des anciennes clés individuelles (_SYS_LAYOUT_*) pour assurer la compatibilité avec les configurations existantes (fallback), mais toute nouvelle sauvegarde depuis le CMS migrera les données vers le format consolidé.

Paramètres système (Short Keys)

Ces paramètres permettent de personnaliser l'interface utilisateur dynamiquement sans déploiement de code.

hero_height_rem

Contrôle la hauteur de la section "Hero" (carrousel publicitaire) sur la page d'accueil.

• Ancienne clé : _SYS_LAYOUT_hero_height_rem
• Type : string | number
• Valeur par défaut : 13rem
• Effet : Définit la hauteur de la zone publicitaire. Si la valeur ne finit pas par rem, l'unité est ajoutée automatiquement.
• Utilisation : Utilisé dans src/routes/+page.svelte pour calculer la hauteur du Container hero.

_SYS_LAYOUT_display_favorite_label

Contrôle l'affichage du titre "Favoris" au-dessus du carrousel des favoris.

• Type : string (booleen)
• Valeurs possibles :
  • "false" (ou false) : Masque le label.
  • "true" (ou true) : Affiche le label (comportement par défaut).
• Effet : Active ou désactive la propriété showLabel du TagCarousel dédié aux favoris.
• Utilisation : Configuré dans src/routes/+page.svelte.

_SYS_LAYOUT_display_readmore_label

Contrôle l'affichage du titre "En savoir plus" sur la page de contenu.

• Type : string (booleen)
• Valeurs possibles :
  • "false" (ou false) : Masque le label.
  • "true" (ou true) : Affiche le label (comportement par défaut).
• Effet : Masque le header du carrousel de boutons sur la page contentfull.
• Utilisation : Configuré dans src/routes/contentfull/+page.svelte.

_SYS_LAYOUT_content_style

Personnalise le style inline de la zone de contenu textuel sur la page de contenu.

• Type : string (déclarations CSS inline)
• Effet : Applique la valeur fournie sur la div #content de la page contentfull.
• Exemple : width: 40%;
• Utilisation : Configuré dans src/routes/contentfull/+page.svelte.

_SYS_LAYOUT_contentfull_hero_height_rem

Surcharge l'espace réservé au hero sur la page de contenu.

• Type : string | number
• Valeur par défaut : 13rem
• Effet : Définit la hauteur du Container principal avec height: calc(100vh - valeur). Si la valeur ne finit pas par rem, l'unité est ajoutée automatiquement.
• Exemple : 10rem ou 10
• Utilisation : Configuré dans src/routes/contentfull/+page.svelte.

_SYS_LAYOUT_overlay_top_show

Contrôle l'affichage de l'overlay dégradé en haut de page (dans le header). S'applique uniquement sur la page d'accueil.

• Type : string (booleen)
• Valeurs possibles :
  • "false" (ou false) : Masque l'overlay.
  • "true" (ou true) : Affiche l'overlay (comportement par défaut).
• Utilisation : Configuré dans src/lib/components/header/HeaderLogo.svelte.

_SYS_LAYOUT_overlay_bottom_show

Contrôle l'affichage de l'overlay dégradé en bas de la section Hero. S'applique uniquement sur la page d'accueil.

• Type : string (booleen)
• Valeurs possibles :
  • "false" (ou false) : Masque l'overlay.
  • "true" (ou true) : Affiche l'overlay (comportement par défaut).
• Utilisation : Configuré dans src/lib/heroCarousel/HeroCarousel.svelte.

_SYS_LAYOUT_overlay_bottom_override

Personnalise le style de l'overlay du bas (Hero). S'applique uniquement sur la page d'accueil.

• Type : string (valeur CSS background)
• Valeur par défaut : Dégradé vertical transparent vers secondary-900.
• Effet : Remplace le dégradé par défaut par la valeur fournie. Permet par exemple de créer un masque horizontal.
• Exemple : linear-gradient(90deg,#F8B90D 0%,#F8B90D 50%,transparent 50%,transparent 100%); (Masque jaune sur la moitié gauche).
• Utilisation : Configuré dans src/lib/heroCarousel/HeroCarousel.svelte.

_SYS_LAYOUT_background_style

Personnalise le style de fond de la zone sous le carrousel Hero. S'applique uniquement sur la page d'accueil.

• Type : string (valeur CSS background)
• Valeur par défaut : Couleur secondary-900 (définie dans Tailwind).
• Effet : Remplace la couleur de fond par défaut par la valeur fournie.
• Exemple : red; ou #FF0000;
• Utilisation : Configuré dans src/lib/heroCarousel/HeroCarousel.svelte.

_SYS_LAYOUT_darkmode

Contrôle le mode sombre de l'application via la configuration facility. S'applique globalement.

• Type : string (booleen)
• Valeur par défaut : absent, l'application utilise son réglage local, qui est dark par défaut.
• Valeurs possibles :
  • absent : laisse l'application utiliser son réglage local (dark par défaut).
  • "true" (ou true) : force le mode sombre.
  • "false" (ou false) : force le mode clair.
• Effet : Si défini, ignore le choix du thème dans les paramètres de l'application.
• Utilisation : Configuré dans src/routes/+layout.svelte et src/routes/settings/+page.svelte.

_SYS_LAYOUT_sidebar_always_open

Force l'affichage permanent du volet latéral de navigation. S'applique globalement aux pages qui affichent la sidebar.

• Type : string (booleen)
• Valeurs possibles :
  • "true" (ou true) : Garde la sidebar ouverte en permanence.
  • "false" (ou absent) : Conserve le comportement par défaut, avec ouverture au focus/hover.
• Effet : Affiche les labels et le fond de la sidebar, puis ajoute un padding gauche au contenu principal (pl-96) pour éviter qu'il passe dessous. La sidebar reste en fixed, et les couches visuelles plein écran (backgrounds, overlays) continuent à couvrir tout l'écran sous la sidebar.
• Utilisation : Configuré dans src/lib/sidebar/Sidebar.svelte et src/lib/detachedPage/DetachedPage.svelte.

_SYS_LAYOUT_sidebar_focus_on_load

Place le focus initial sur le volet latéral au chargement. S'applique uniquement lorsque _SYS_LAYOUT_sidebar_always_open est activé.

• Type : string (booleen)
• Valeurs possibles :
  • "true" (ou true) : Donne le focus initial au premier élément navigable de la sidebar.
  • "false" (ou absent) : Conserve le focus initial par défaut sur le contenu principal.
• Valeur par défaut : absent / false.
• Effet : Quand le volet latéral est toujours ouvert, le focus est placé sur Home si ce bouton est visible, sinon sur le premier item du volet latéral. Le focus est appliqué via le système Selectable après le montage des éléments de navigation et n'est appliqué qu'une seule fois pour éviter les reprises de focus lors du chargement cache/live ou d'un changement de locale.
• Utilisation : Configuré dans src/lib/sidebar/Sidebar.svelte.

_SYS_LAYOUT_tagcarousel_bouton_color

Définit la couleur des icônes dans les carrousels de tags (TagCarousel).

• Type : string (valeur CSS color)
• Effet : Applique la couleur spécifiée aux icônes des cartes dans le carrousel.
• Exemple : #F8B90D ou red
• Utilisation : Configuré dans src/lib/components/TagCarousel.svelte.

_SYS_LAYOUT_focus_ring

Surcharge la couleur de la bordure de focus (ring) pour les éléments sélectionnables.

• Type : string (valeur CSS color)
• Valeur par défaut : $theme.primary
• Effet : Définit la variable CSS --color-focus-ring utilisée pour le focus.
• Exemple : #FF0000 ou yellow
• Utilisation : Configuré dans src/routes/+layout.svelte.

_SYS_LAYOUT_overlay_show

Contrôle global de l'affichage des deux overlays (haut et bas). S'applique uniquement sur la page d'accueil.

• Type : string (booleen)
• Valeurs possibles :
  • "false" (ou false) : Masque les deux overlays, quel que soit leur paramètre individuel.
  • "true" (ou true) : Laisse les paramètres individuels décider (comportement par défaut).
• Utilisation : Configuré dans src/lib/components/header/HeaderLogo.svelte et src/lib/heroCarousel/HeroCarousel.svelte.

_SYS_LAYOUT_card_background

Personnalise le fond de l'overlay des cartes (par défaut un dégradé). S'applique sur toutes les pages.

• Type : string (valeur CSS background)
• Valeur par défaut : Dégradé transparent vers noir/blanc (selon le thème).
• Effet : Remplace le dégradé par la valeur fournie (par exemple une couleur #ff0000 ou un autre dégradé).
• Utilisation : Configuré dans src/lib/components/Card/Card.svelte.

Implémentation technique

La récupération de ces valeurs se fait via la fonction réactive getGeneralData dans les composants Svelte, qui gère à la fois le format tableau (Directus) et le format objet.

$: getGeneralData = (key: string) =>
	Array.isArray(dataGeneral)
		? dataGeneral.find((item: any) => item.key === key)?.value
		: (dataGeneral as any)?.[key];