Navigation
Part 3

Configuration

Personnalisez AstroGlass pour correspondre à votre marque.

AstroGlass est configuré via des fichiers dans src/config/ et des propriétés personnalisées CSS standard.

Fichiers de Configuration

  • src/
    • config/
      • themes.ts — Définitions des thèmes (nom, couleurs, sections, indicateur premium)
      • locales.ts — Langues prises en charge et métadonnées locales
      • navigation.ts — Structure de navigation principale du site
      • docs.ts — Configuration de la barre latérale de la documentation et de la version

Stylisation avec Tailwind CSS v4

Ce projet utilise Tailwind CSS v4 via le plugin @tailwindcss/vite. Il n’y a pas de fichier tailwind.config.mjs — toute la configuration se fait via CSS.

Les couleurs et les variables de thème sont définies comme des propriétés personnalisées CSS dans src/styles/global.css et src/styles/_themes.css :

global.css
:root {
  --p: 260 80% 60%;   /* Primaire (HSL) */
  --s: 310 80% 60%;   /* Secondaire */
  --a: 190 90% 60%;   /* Accent */
  --b1: 220 20% 10%;  /* Arrière-plan de base */
  --bc: 220 20% 90%;  /* Contenu de base (texte) */
}
💡
Changer les Couleurs

Pour modifier la palette de couleurs du site, mettez à jour les valeurs HSL dans src/styles/global.css. Les surcharges spécifiques au thème se trouvent dans src/styles/_themes.css en utilisant les sélecteurs [data-theme="..."].

Configuration du Thème

Chaque thème est enregistré dans src/config/themes.ts. Cela centralise toutes les métadonnées du thème :

themes.ts
export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Design fluide, organique avec des animations douces',
  },
  // ... 5 autres thèmes (Glass, Neo, Luxury, Minimal, Aurora)
];

Configuration Régionale (Locales)

Les langues sont gérées dans src/config/locales.ts. Pour ajouter une nouvelle langue, ajoutez une entrée et définissez enabled: true :

locales.ts
export const localesConfig: LocaleConfig[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧', direction: 'ltr', enabled: true },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', direction: 'ltr', enabled: true },
];