Skip to content
AMN Docs

Starlight Footer Credits

Starlight Footer Credits

Intégration des crédits personnalisés 'Built with Starlight' et 'Powered by Cloudflare' avec icônes natives

Méthode : Surcharge de composant Starlight native (components.Footer)
Starlight : @astrojs/starlight@0.42.4
Intégré le : 2026-10-13
Inspiration : Dépôt officiel starlight-view-modes (docs/src/components/Footer.astro)

1. Objectif

Afficher de façon élégante, sobre et centrée les crédits de la plateforme au bas de chaque page de documentation :

  • Built with Starlight (accompagné de l’étoile officielle Starlight)
  • Point séparateur médian (puce ronde .dot)
  • Powered by Cloudflare (accompagné du nuage officiel Cloudflare en orange #f6821f)

Aucun plugin externe n’est requis : Starlight fournit nativement le mécanisme d’override de composants et les glyphes SVG dans son composant <Icon />.

2. Composant personnalisé FooterWithCredits.astro1/2

Le composant est créé dans apps/web/src/components/starlight/FooterWithCredits.astro :

2. Composant personnalisé FooterWithCredits.astro2/2

---
import Default from '@astrojs/starlight/components/Footer.astro';
import { Icon } from '@astrojs/starlight/components';
---


<Default>
  <slot />
</Default>


<div class="kudos sl-flex">
  <a class="sl-flex" href="https://starlight.astro.build" target="_blank" rel="noopener noreferrer">
    <Icon name="starlight" /> Built with Starlight
  </a>
  <span class="dot" aria-hidden="true" />
  <a class="sl-flex cloudflare" href="https://workers.cloudflare.com" target="_blank" rel="noopener noreferrer">
    <Icon name="cloudflare" />
    Powered by Cloudflare
  </a>
</div>


<style>
  @layer starlight.core {
    .kudos {
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5em;
      margin: 2.5rem auto 2rem auto;
      font-size: var(--sl-text-xs);
      color: var(--sl-color-gray-3);
    }
    .kudos a {
      align-items: center;
      gap: 0.5em;
      text-decoration: none;
      color: inherit;
    }
    .kudos a:hover {
      color: var(--sl-color-white);
    }
    .dot {
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      background-color: currentColor;
    }
  }


  @layer starlight.components {
    .kudos :global(svg) {
      color: var(--sl-color-orange);
    }
    .kudos .cloudflare :global(svg) {
      color: #f6821f;
    }
  }
</style>

3. Configuration dans astro.config.mjs

Dans apps/web/astro.config.mjs, le composant est enregistré dans components :

starlight({
  // ...
  components: {
    Sidebar: './src/components/starlight/SidebarWithAuth.astro',
    Footer: './src/components/starlight/FooterWithCredits.astro',
  },
})

4. Architecture & Cohérence avec les autres fonctionnalités1/2

  • Préservation des métadonnées et pagination : En important Default from '@astrojs/starlight/components/Footer.astro', le composant conserve fidèlement :
    • Le lien d’édition GitHub (EditLink)
    • La date de dernière modification (LastUpdated)
    • La pagination précédente/suivante (Pagination), qui embarque également les commentaires Giscus.

4. Architecture & Cohérence avec les autres fonctionnalités2/2

  • Thèmes clair et sombre : Utilise les tokens officiels Starlight (var(--sl-text-xs), var(--sl-color-gray-3), var(--sl-color-white)), garantissant un contraste optimal sur tous les thèmes.
  • Zéro régression TypeScript : Évite les modules virtuels internes non déclarés (virtual:starlight/*) au profit de l’export stable public @astrojs/starlight/components/Footer.astro.

5. Tests de Validation1/2

  • Compilation TypeScript (pnpm run typecheck / astro check) : 0 erreurs, 0 warnings
  • Build de production Cloudflare (pnpm run build) : Succès (code 0)

5. Tests de Validation2/2

  • Dans le navigateur (http://localhost:8787/gettingstarted/01-setup-local/) :
    • La barre de crédits apparaît proprement en bas de page sous la pagination.
    • Les liens pointent vers les cibles respectives avec target="_blank".
    • Le séparateur point .dot et les deux icônes colorées sont bien alignés.
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare