Skip to content
AMN Docs

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

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

Plan détaillé pour l'affichage des crédits 'Built with Starlight' et 'Hosted on Cloudflare' avec icônes natives dans le footer

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-modes1/2

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 />

1.3 Analyse du pattern officiel dans starlight-view-modes2/2

  • 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)

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)

  1. Création du composant :
    • Fichier : apps/web/src/components/starlight/FooterWithCredits.astro
  2. 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)

  1. Validation statique et typage :
    Terminal window
    pnpm --filter amn-astro run typecheck # (astro check)
  2. Build de production Cloudflare :
    Terminal window
    pnpm --filter amn-astro run build
  3. 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.

Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare