Onyx
Configuration

site.config.ts

Toute la configuration du site est centralisée dans un seul fichier à la racine : site.config.ts. C'est le seul fichier à modifier pour adapter le template à votre projet.

Identité

Les champs de base que vous renseignez en premier :

site.config.ts
export const siteConfig = {
  name: "Nom de votre site",
  legalName: "SAS Mon Entreprise",
  description: "Description courte pour le SEO",
  url: "https://votredomaine.fr",
  ogImage: "/images/og-default.jpg",
}

Contact

site.config.ts
  contact: {
    email: "contact@votredomaine.fr",
    phone: "+33 1 23 45 67 89"  
  }

Navigation

Deux tableaux contrôlent la navigation : mainNav pour le header et footerNav pour le pied de page.

mainNav

Pour les liens externes (GitHub, réseaux sociaux…), ajoutez external: true. Le header rendra automatiquement un <a target="_blank">.

site.config.ts
  mainNav: [
    { label: "Blog", href: "/blog" },
    { label: "GitHub", href: "https://github.com/...", external: true },
  ],

footerNav

Le footer accepte un objet dont chaque clé est une colonne et la valeur un tableau de liens :

site.config.ts
  footerNav: {
    Produit: [
      { label: "Fonctionnalités", href: "/features" },
    ],
  }

Design & Couleurs

Les couleurs sont définies en variables CSS dans src/app/globals.css, dans les blocs :root (mode clair) et .dark (mode sombre). Onyx utilise le format OKLCH pour toutes les couleurs du thème.

src/app/globals.css
/* Mode sombre — palette Onyx */
.dark {
  --background: oklch(0.05 0 0);  /* #0A0A0A — onyx */
  --foreground: oklch(0.94 0.008 70);  /* #EEEAE4 — bone */
  --primary: oklch(0.83 0.06 210);   /* #a8d8e8 — refract */
}
Ne modifiez pas les variables dans les fichiers src/components/ui/ — ces composants shadcn lisent automatiquement les tokens CSS définis dans globals.css.

SEO

site.config.ts
  seo: {
    defaultTitle: "Titre par défaut",
    titleTemplate: "%s | Mon Site",
  }

Chaque page exporte son propre objet metadata avec title et description. Le template de titre est appliqué automatiquement par Next.js.

Analytics

Deux intégrations analytics sont disponibles, toutes deux optionnelles :

site.config.ts
  analytics: {
    googleAnalyticsId: "G-XXXXXXXXXX",  /* bloqué jusqu'au consentement */
    plausibleDomain: "votredomaine.fr",    /* cookie-free */
  }
Google Analytics est bloqué par la bannière de consentement RGPD tant que l'utilisateur n'a pas accepté. Plausible est cookie-free et se charge sans consentement.
Précédent← Travailler avec l'IASuivantFormulaire de contact →