Personnaliser votre site.

L'identité visuelle tient dans quelques tokens au début desrc/styles/global.css : couleurs, police de titres. La démonstration part d'une identité « papier » (fond crème, encre profonde, accent rouille, serif Fraunces) — remplacez-la par la vôtre, ou demandez à votre IA une direction : « Propose-moi une palette chaude pour un restaurant de quartier. »

Le reste est du Tailwind ordinaire dans vos composants et vos pages — vous gardez le layout, le Core n'en sait rien.

Vos composants vivent dans le Project (src/components/,src/templates/). Règle d'or : le même template sert au site public et à la preview du back-office. Vous modifiez un seul fichier, les deux suivent — impossible de désynchroniser la preview et le site.

La démonstration en fournit la preuve : ses templates (ArticleContent.astro, CoverPicture.astro…) sont à la fois ses pages publiques et la preview admin. Copiez-les comme point de départ.

Une page est un fichier dans src/pages/, comme dans tout projet Astro. Une page vitrée prerender = true est générée en statique au build — c'est le mode par défaut du site public.

---
export const prerender = true;
---
<!-- structure libre : votre HTML, votre style -->

Une page peut aussi afficher des contenus publiés — c'est exactement ce que font les pages de type [slug].astro de la démonstration, avecgetStaticPaths et createContentReader. Copiez-en une et adaptez-la ; le guide développeur (ouvre GitHub dans un nouvel onglet) montre le modèle complet.

Un type de contenu se déclare en code : sa clé, ses libellés, son espace de routes, ses champs et son template. Le formulaire admin, la validation serveur et la preview naissent de cette seule déclaration.

import { defineContentType, fields } from '@kreiz/core/content';

export const realisationType = defineContentType({
  key: 'realisation',
  label: 'Réalisation',
  labelPlural: 'Réalisations',
  routeNamespace: 'realisations',     // → /realisations/<slug>
  fields: {
    shortDescription: fields.text({
      label: 'Description courte', required: true, maxLength: 300,
    }),
    category: fields.select({
      label: 'Catégorie', required: true,
      choices: [
        { value: 'site-vitrine', label: 'Site vitrine' },
        { value: 'e-commerce', label: 'E-commerce' },
      ],
    }),
  },
  template: 'src/templates/RealisationContent.astro',
});

Trois mouvements, rien de plus :

• déclarer le fichier src/content-types/realisation.ts ;
• l'ajouter à la liste kreiz({ content: { types: [...] } })dans astro.config.ts ;
• créer la page de route qui prérend les contenus publiés — copiezsrc/pages/realisations/[slug].astro de la démonstration, qui contient déjà un type Réalisation complet à imiter.

Ajouter, retirer ou ajuster un champ se fait dans la déclaration du type. Les formulaires admin et la validation serveur suivent automatiquement — vous ne touchez qu'à un endroit. Le vocabulaire V1 est borné, volontairement :

• text, textarea — ligne courte, texte long
• select — choix fermé, déclaré en code
• url, date — liens et dates typés
• metric, list — chiffre clé, liste d'éléments
• richText — l'éditeur riche (titres, listes, citations, images)

Vouloir un champ hors vocabulaire est le signal qu'il faut en parler avant de coder — votre IA saura dire si un type existant suffit.

Un formulaire de contact se déclare comme un type de contenu : champs, page de confirmation, destinataires de la notification. L'endpoint de soumission, l'anti-spam en couches et la boîte de réception dans l'admin sont fournis par le Core — la page publique fonctionne même sans JavaScript.

import { defineContactForm, formFields } from '@kreiz/core/forms';

export const devisForm = defineContactForm({
  key: 'devis',
  label: 'Demande de devis',
  confirmationPath: '/devis/merci',
  fields: {
    name: formFields.text({ label: 'Nom', required: true }),
    email: formFields.email({ label: 'Email', required: true }),
    message: formFields.textarea({ label: 'Votre projet', required: true }),
  },
  notification: {
    recipients: ['bonjour@mon-site.fr'],
    subject: 'Nouvelle demande de devis',
  },
});

Déclarez-le ensuite dans kreiz({ forms: [...] }) et rendez-le dans une page avec renderContactFormHtml — le modèle complet est dansapps/demo/src/forms/contact.ts. Sans relais email branché, les demandes restent visibles dans la boîte de contact de l'admin ; rien ne se perd.

Le Core fournit la mécanique ; le Project la configure et l'intègre à son rendu. Concrètement :

Médias : la médiathèque (/admin/media) gère l'upload, les variantes responsives et l'insertion dans l'éditeur riche. Vous intégrez les images dans vos templates avec des vues prêtes pour un<picture>.

SEO : déclarez une fois votre base canonique (defineSeoSiteConfig), le Core résout titres, canonical, Open Graph, JSON-LD, sitemap et robots.

Analytics : insérez le beacon dans vos pages publiques ; collecte privacy-first, dashboard et rétention sont inclus.