Pied de page

Le thème remplace le pied de page Starlight par défaut par un composant Footer.astro personnalisé qui ajoute des liens vers les réseaux sociaux sous le contenu standard du pied de page.

Modèle de composant

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

<Default {...Astro.props}><slot /></Default>

<div class="social-links">
  <!-- social link icons -->
</div>

Ce modèle étend le pied de page par défaut plutôt que de le remplacer entièrement. <Default {...Astro.props}><slot /></Default> restitue le pied de page Starlight original (navigation précédent/suivant), puis les liens vers les réseaux sociaux sont ajoutés en dessous.

Modalités d’enregistrement

La substitution du pied de page est enregistrée par le plugin Starlight dans index.ts. Lors du hook config:setup, il définit la substitution du composant Footer :

updateConfig({
  components: {
    ...config.components,
    Footer: '@f5-sales-demo/docs-theme/components/Footer.astro',
    // ... other component overrides
  },
});

Les référentiels de contenu n’ont pas besoin d’enregistrer le pied de page manuellement — il est appliqué automatiquement lors du chargement du plugin de thème.

Liens vers les réseaux sociaux

Plateforme	URL	Couleur de l’icône	Libellé Aria
Facebook	https://www.facebook.com/f5incorporated	#1877F2 (Bleu Facebook)	Facebook
X	https://x.com/F5	currentColor (héritée)	X
LinkedIn	https://www.linkedin.com/company/f5/	#0A66C2 (Bleu LinkedIn)	LinkedIn
Instagram	https://www.instagram.com/f5.global/	#E4405F (Rose Instagram)	Instagram
YouTube	https://www.youtube.com/user/f5networksinc	#FF0000 (Rouge YouTube)	YouTube

Chaque lien s’ouvre dans un nouvel onglet (target="_blank") avec rel="noopener noreferrer" pour des raisons de Sécurité.

Style CSS

.social-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0 0.5rem;
}

.social-links a {
  display: inline-flex;
  transition: opacity 0.2s ease;
}

.social-links a:hover {
  opacity: 0.7;
}

Les liens sont alignés à droite dans une rangée flexible avec un subtil effet d’opacité au survol.

Personnalisation

Modifier une URL

Modifiez l’attribut href sur la balise <a> correspondante dans components/Footer.astro au sein du package @f5-sales-demo/docs-theme.

Ajouter un lien

Ajoutez un nouvel élément <a> à l’intérieur du div .social-links avec une icône SVG de 24x24. Suivez le modèle existant :

<a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="Platform Name">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#COLOR">
    <path d="..."/>
  </svg>
</a>

Supprimer un lien

Supprimez l’intégralité du bloc <a>...</a> correspondant à la plateforme que vous souhaitez retirer.

Modifier les couleurs des icônes

Modifiez l’attribut fill sur l’élément <svg>. Utilisez currentColor pour hériter de la couleur du texte, ou une valeur hexadécimale spécifique pour les couleurs de marque.

Modifier la mise en page

Modifiez le CSS .social-links dans le bloc <style> :

• Alignement centré : Changez justify-content en center
• Espacement plus large : Augmentez la valeur de gap
• Alignement à gauche : Changez justify-content en flex-start