Plan d'intégration — Crédits Footer Starlight & Cloudflare

Document de Référence : GettingStarted/41-plan-starlight-footer-credits.md
Source de Documentation : Documentation officielle Starlight (Overrides Reference & Icon Component)
Méthodologie : Cycle DOC → SPEC → CODE → TEST → INTÉG

1. Synthèse de l’Investigation

L’analyse de la documentation officielle Starlight et du code source @astrojs/starlight@0.42.4 confirme qu’aucun plugin externe n’est nécessaire :

1.1 Limite de l’option native `credits: true`

L’option native credits: true de Starlight injecte uniquement un lien unique : <Icon name="starlight" /> Built with Starlight.
Elle ne permet pas nativement d’ajouter un second crédit personnalisé (« Hosted on Cloudflare ») ni de modifier la structure sans surcharger le composant.

1.2 Disponibilité des Icônes Natives Starlight

Le composant officiel <Icon /> (@astrojs/starlight/components) intègre en standard dans son dictionnaire SVG interne :

name="starlight" (l’étoile Starlight)
name="cloudflare" (le nuage officiel Cloudflare)

1.3 Analyse du pattern officiel dans `starlight-view-modes`

Dans le dépôt cloné ~/astro/starlight-view-modes/docs/src/components/Footer.astro :

Les auteurs surchargent components.Footer = "./src/components/Footer.astro" dans leur astro.config.mjs.
Ils réimportent les composants virtuels Starlight :
- virtual:starlight/components/EditLink
- virtual:starlight/components/LastUpdated
- virtual:starlight/components/Pagination
- virtual:starlight/user-config
- @astrojs/starlight/components pour <Icon />
Ils intègrent un conteneur .kudos.sl-flex avec :
- Le premier lien Starlight (<Icon name="starlight" />)
- Un point séparateur circulaire .dot (width: 0.2rem; height: 0.2rem; border-radius: 50%; background-color: currentColor;)
- Le second lien (Powered by Netlify ou dans notre cas Hosted on Cloudflare avec <Icon name="cloudflare" />)
La couche CSS @layer starlight.core et @layer starlight.components stylise les couleurs d’icônes (var(--sl-color-orange) et #f6821f pour Cloudflare).

1.4 Matrice de Compatibilité

Composant / Plugin	Rôle	Conflit avec `components.Footer`
`SidebarWithAuth`	Surcharge `components.Sidebar`	❌ Aucun conflit
`starlight-view-modes`	Surcharge `SocialIcons`, `Search`, etc.	❌ Aucun conflit
`starlight-giscus`	Surcharge `Pagination`	❌ Aucun conflit
`starlight-scroll-to-top`	Injecte script client	❌ Aucun conflit
`starlight-docsearch`	Recherche Algolia	❌ Aucun conflit

2. Cycle DOC → SPEC → CODE → TEST → INTÉG

Phase 1 : DOC (Documentation préliminaire)

Documentation Starlight : Overriding Components & Overrides Reference - Footer.
Vérification des tokens CSS Starlight (--sl-text-xs, --sl-color-gray-3, --sl-color-orange, --sl-color-white).

Phase 2 : SPEC (Spécification de l’intégration)

Composant cible : apps/web/src/components/starlight/FooterWithCredits.astro
Composant configuré : components.Footer dans apps/web/astro.config.mjs
Style & Ergonomie :
- Discret, centré, adapté au thème sombre et au thème clair.
- Liens externes avec target="_blank" et rel="noopener noreferrer".
- Couleur orange marque Cloudflare (#f6821f) pour l’icône Cloudflare et couleur d’accent Starlight (var(--sl-color-orange)) pour l’icône Starlight.

Phase 3 : CODE (Implémentation)

Création du composant :
- Fichier : apps/web/src/components/starlight/FooterWithCredits.astro
Mise à jour de la configuration Starlight :
- Fichier : apps/web/astro.config.mjs
- Ajout de Footer: './src/components/starlight/FooterWithCredits.astro' dans components.

Phase 4 : TEST (Validation locale)

Validation statique et typage :

pnpm --filter amn-astro run typecheck # (astro check)

Build de production Cloudflare :
Terminal window
```
pnpm --filter amn-astro run build
```
Validation visuelle dans le navigateur :
- Accéder à http://localhost:8787/gettingstarted/01-setup-local/.
- Vérifier au bas de la page :
  - Présence de « Built with Starlight » avec son icône.
  - Présence de « Hosted on Cloudflare » avec son icône.
  - Liens cliquables menant respectivement vers https://starlight.astro.build et https://workers.cloudflare.com.
  - Intégrité conservée de la pagination et de la section Giscus au-dessus.

Phase 5 : INTÉG (Capitalisation & Documentation)

Rédiger la documentation d’intégration dédiée :
docs/L2_Presentation/astro/starlight/Starlight-Footer-Credits.md
Mettre à jour test-docs/starlight-site-update.md (marquer le point 8 comme complété).

3. Matrice de Risques & Atténuations

Risque	Impact	Solution / Atténuation
Perte des éléments natifs du footer (pagination, date)	Régression fonctionnelle	Encapsulation systématique de `<Default><slot /></Default>` avant le bloc des crédits.
Décalage visuel en Zen Mode	Présence indésirable	`zenModeSettings.displayOptions.showFooter: true` est déjà configuré, garantissant un rendu propre et cohérent.
Accessibilité des liens externes	Lecteurs d’écran	Ajout de libellés texte explicites et `rel="noopener noreferrer"`.

4. Prochaine étape

Attendre la confirmation pour créer le composant FooterWithCredits.astro et l’enregistrer dans astro.config.mjs.