Architecture - ProbatioVault Site¶

Architecture technique du site vitrine Astro

Vue d'ensemble¶

Le site ProbatioVault est un site statique généré avec Astro, optimisé pour la performance et le SEO. Il ne contient aucun JavaScript côté client hormis le menu mobile.

┌─────────────────────────────────────────────────────────────┐
│                     GitLab Pages                            │
│                  probatiovault.com                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐                │
│  │    FR    │   │    EN    │   │  Assets  │                │
│  │  /fr/*   │   │  /en/*   │   │  /og/*   │                │
│  └──────────┘   └──────────┘   └──────────┘                │
│                                                             │
│  HTML statique + CSS + Images OpenGraph                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
              ┌───────────────────────┐
              │     GitLab CI/CD      │
              │   npm build → Pages   │
              └───────────────────────┘
                           │
                           ▼
              ┌───────────────────────┐
              │    OVH DNS (CNAME)    │
              │   Terraform managed   │
              └───────────────────────┘

Stack technique¶

Framework : Astro 5.x¶

Astro génère du HTML statique pur avec :

Zero JS par défaut : Pas de bundle JavaScript côté client
Islands Architecture : Composants interactifs isolés (non utilisé ici)
i18n natif : Routage multilingue intégré
SSG : Static Site Generation pour des performances optimales

Choix d'architecture¶

Aspect	Décision	Justification
Framework	Astro	SSG performant, SEO-first
CSS	Natif (variables)	Pas de dépendance, bundle minimal
JavaScript	Vanilla (menu)	~500 bytes vs 45KB React
Fonts	@fontsource (self-hosted)	Pas de dépendance externe, RGPD
Images	PNG 1200x630	Standard OpenGraph

Structure des pages¶

Routage i18n¶

/                   → Redirect 302 → /fr/
/fr/                → Homepage FR
/fr/product         → Page produit FR
/fr/use-cases       → Cas d'usage FR
/fr/pricing         → Tarification FR
/fr/faq             → FAQ FR
/fr/about           → À propos FR
/fr/contact         → Contact FR
/fr/legal/*         → Pages légales FR

/en/                → Homepage EN
/en/product         → Product page EN
/en/use-cases       → Use cases EN
/en/pricing         → Pricing EN
/en/faq             → FAQ EN
/en/about           → About EN
/en/contact         → Contact EN
/en/legal/*         → Legal pages EN

Configuration i18n¶

// astro.config.mjs
export default defineConfig({
  site: 'https://probatiovault.com',
  i18n: {
    defaultLocale: 'fr',
    locales: ['fr', 'en'],
    routing: {
      prefixDefaultLocale: true  // /fr/ explicite
    }
  }
});

Composants¶

Hiérarchie¶

BaseLayout.astro
├── Header.astro
│   └── LangSwitcher.astro
├── <slot /> (contenu page)
└── Footer.astro

Composants UI¶

Composant	Usage	Props
`Hero`	Bannière principale	title, subtitle, ctaText, ctaLink, comingSoon
`FeatureCard`	Carte fonctionnalité	icon, title, description
`UseCaseCard`	Carte cas d'usage	icon, title, description
`CallToAction`	Section CTA	title, description, buttonText, buttonLink
`TrustBanner`	Bandeau confiance	items[]
`CredibilityBanner`	Bandeau crédibilité	content
`NewsletterCTA`	Formulaire newsletter	lang, variant

Assets statiques¶

Images OpenGraph¶

public/og/
├── home-fr.png        (1200x630)
├── home-en.png        (1200x630)
├── product-fr.png     (1200x630)
├── product-en.png     (1200x630)
├── use-cases-fr.png   (1200x630)
├── use-cases-en.png   (1200x630)
├── pricing-fr.png     (1200x630)
├── pricing-en.png     (1200x630)
├── faq-fr.png         (1200x630)
├── faq-en.png         (1200x630)
├── about-fr.png       (1200x630)
├── about-en.png       (1200x630)
├── contact-fr.png     (1200x630)
└── contact-en.png     (1200x630)

Autres assets¶

public/
├── logo.png           # Logo principal
├── favicon.svg        # Favicon vectoriel
├── robots.txt         # Directives crawlers
├── sitemap.xml        # Plan du site
└── styles.css         # Styles globaux

Décap CMS¶

Interface d'administration pour l'édition de contenu :

public/admin/
├── index.html         # Interface CMS
└── config.yml         # Configuration collections

Authentification : OAuth GitLab Stockage : Commits Git automatiques

Diagramme de build¶

┌─────────────────┐
│   src/pages/    │
│   src/layouts/  │───────┐
│   src/components│       │
└─────────────────┘       │
                          ▼
                 ┌─────────────────┐
                 │   Astro Build   │
                 │   npm run build │
                 └────────┬────────┘
                          │
          ┌───────────────┼───────────────┐
          ▼               ▼               ▼
    ┌──────────┐   ┌──────────┐   ┌──────────┐
    │  dist/   │   │  dist/   │   │  dist/   │
    │  fr/*.html│   │  en/*.html│   │  *.css   │
    └──────────┘   └──────────┘   └──────────┘
                          │
                          ▼
              ┌───────────────────────┐
              │   GitLab Pages        │
              │   mv dist → public    │
              └───────────────────────┘

Performance¶

Optimisations appliquées¶

Optimisation	Impact
HTML statique	TTFB < 100ms
Pas de JS framework	Bundle 0KB
CSS variables	1 fichier CSS
Fonts self-hosted	Pas de requête externe
Images optimisées	LCP < 2.5s

Métriques cibles¶

LCP (Largest Contentful Paint) : < 2.5s
FID (First Input Delay) : < 100ms
CLS (Cumulative Layout Shift) : < 0.1
TTFB (Time to First Byte) : < 200ms

Sécurité¶

Headers HTTP (via GitLab Pages)¶

X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin

Blocage crawlers IA¶

# robots.txt
User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

User-agent: anthropic-ai
Disallow: /

User-agent: Claude-Web
Disallow: /

User-agent: CCBot
Disallow: /

User-agent: Google-Extended
Disallow: /

Évolutions prévues¶

Formulaire contact backend (EmailJS ou API)
Analytics RGPD-friendly (Plausible/Matomo)
Page 404 personnalisée
Self-hosted fonts (@fontsource)
Lazy loading images below-the-fold
FAQPage JSON-LD schema (/fr/faq, /en/faq)
BreadcrumbList (non prioritaire - structure plate)

← Retour INDEX