Composants

Encadrés

Chaque type d’encadré utilise la syntaxe de délimitation ::: avec son titre par défaut.

Note

Ceci est un encadré de type note. Il attire l’attention sur des informations complémentaires dont le lecteur doit être conscient.

Astuce

Ceci est un encadré de type conseil. Il met en avant une bonne pratique ou un raccourci utile.

Attention

Ceci est un encadré de type avertissement. Il prévient d’un piège potentiel ou d’un comportement non évident.

Danger

Ceci est un encadré de type danger. Il signale une action destructrice ou irréversible.

Titres personnalisés

Custom Note Title

Cet encadré utilise le composant <Aside> avec un titre personnalisé.

Pro Tip

Vous pouvez imbriquer du texte en gras, en italique et du code en ligne à l’intérieur des composants d’encadré.

Watch Out

Soyez prudent lors de la mise à jour des dépendances — vérifiez d’abord le journal des modifications.

Destructive Action

L’exécution de git reset --hard supprimera définitivement les modifications non validées.

Contenu enrichi dans les encadrés

Encadré avec contenu mixte

Voici un bloc de code à l’intérieur d’un encadré :

npm install @astrojs/starlight

Une liste d’éléments :

• Premier élément avec du texte en gras
• Deuxième élément avec du code en ligne
• Troisième élément avec un lien vers la documentation Starlight

CSS des encadrés

Les composants d’encadré intégrés de Starlight ont des coins arrondis et une ombre superposée :

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

Onglets

Onglets de base

Overview

Voici le contenu de l’onglet Vue d’ensemble. Il contient du texte brut pour vérifier le rendu de base des onglets.

Details

Voici l’onglet Détails. Le passage d’un onglet à l’autre doit être instantané, sans rechargement de la page.

Onglets avec contenu mixte

Text

Contenu de paragraphe brut dans le premier onglet.

Code

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

List

• Premier élément dans un onglet
• Deuxième élément avec du texte en gras
• Troisième élément avec du code en ligne

Onglets synchronisés

Ces deux groupes d’onglets partagent syncKey="pkg". La sélection d’un onglet dans un groupe doit mettre à jour l’autre.

Commande d’installation :

npm

npm install @f5-sales-demo/docs-theme

pnpm

pnpm add @f5-sales-demo/docs-theme

yarn

yarn add @f5-sales-demo/docs-theme

Commande d’exécution :

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Étapes

1. Cloner le dépôt

   git clone https://github.com/example/repo.git
   cd repo

2. Installer les dépendances

   npm install

3. Démarrer le serveur de développement

   npm run dev

   Le site sera disponible à l’adresse http://localhost:4321.

Cartes

Carte unique

Single Card

Voici une carte autonome avec une icône. Les cartes sont utiles pour mettre en évidence des informations ou des fonctionnalités clés.

Grille de cartes

Performance

Astro ne génère aucun JavaScript par défaut pour des chargements de pages rapides.

Customizable

Starlight offre de nombreuses options de thématisation et d’extension.

Accessible

Les fonctionnalités d’accessibilité intégrées garantissent que le contenu est accessible à tous.

Documented

Une documentation complète facilite la prise en main.

Disposition décalée

Step One

Configurez les paramètres de votre projet et les variables d’environnement.

Step Two

Créez vos pages de contenu au format MDX.

Step Three

Prévisualisez localement avec le serveur de développement.

Step Four

Déployez sur la Plateforme d’hébergement de votre choix.

Cartes avec liens

Le thème fournit un composant LinkCard qui fonctionne avec ou sans icônes. Importez-le depuis le thème :

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight DocumentationApprenez à créer des sites de documentation avec Starlight.

Astro DocumentationExplorez le framework Astro pour les sites orientés contenu.

Avec des icônes

Ajoutez une propriété icon en utilisant la syntaxe prefix:name. Les huit packs d’icônes sont pris en charge — consultez la documentation des Paquets d’icônes pour le catalogue complet.

Lucide (lucide:)

Web App FirewallPolitiques et configuration du pare-feu applicatif.

Multi-Cloud NetworkingConnectivité des sites entre les clouds.

Carbon (carbon:)

Services de SécuritéJeu d'icônes de sécurité IBM Carbon.

Services CloudJeu d'icônes cloud IBM Carbon.

Material Design Icons (mdi:)

Contrôle d'accèsIcône verrou de bouclier Material Design.

Gestion des donnéesIcône base de données Material Design.

Phosphor (phosphor:)

Défense contre les menacesIcône bouclier Phosphor.

Réseau mondialIcône globe Phosphor.

Tabler (tabler:)

Plateforme CloudIcône cloud Tabler.

DéploiementIcône fusée Tabler.

F5 Brand (f5-brand:)

Sécurité CloudIcône bouclier cloud de la marque F5.

Pare-feuIcône pare-feu de la marque F5.

F5 Distributed Cloud (f5xc:)

Ces icônes sont multicolores et utilisent des propriétés CSS personnalisées pour l’adaptation des couleurs en mode clair/sombre.

Protection des applications et des APIIcône de protection des applications web et des API F5 XC.

Bot DefenseIcône de défense bot F5 XC.

HashiCorp Flight (hashicorp-flight:)

TerraformIcône HashiCorp Terraform.

ConsulIcône HashiCorp Consul.

Badges

Variantes de badges en ligne

Les six variantes de badges rendues en ligne :

Default Note Danger Success Tip Caution

Tailles de badges

Small Medium Large

Chaque taille avec une variante :

Small Tip Medium Danger Large Success

Badges dans les titres

Les titres suivants utilisent la syntaxe du plugin starlight-heading-badges.

Fonctionnalité complète Stable

Ce titre comporte un badge de succès indiquant que la fonctionnalité est stable.

API expérimentale Beta

Ce titre comporte un badge d’avertissement indiquant que l’API est expérimentale.

Système hérité Deprecated

Ce titre comporte un badge de danger indiquant une dépréciation.

Nouvelle fonctionnalité New

Ce titre comporte un badge de conseil indiquant une nouvelle fonctionnalité.

Documentation Updated

Ce titre comporte un badge de note indiquant des mises à jour récentes.

Badge par défaut Info

Ce titre comporte un badge par défaut sans variante spécifiée.

Badge dans la barre latérale

Vérifiez la barre latérale : cette page possède un badge « New » avec la variante tip appliquée via le frontmatter.

Tableaux

Tableau simple

Fonctionnalité	Statut	Priorité
Mode sombre	Pris en charge	Haute
Zoom d’image	Pris en charge	Moyenne
Diagrammes Mermaid	Pris en charge	Moyenne
Badges dans les titres	Pris en charge	Basse

Tableau avec alignement et code

Propriété	Type	Défaut	Description
title	string	—	Titre de la page affiché dans l’en-tête
description	string	""	Méta-description pour le référencement
sidebar.order	number	0	Ordre de tri dans la barre latérale
sidebar.badge	object	null	Badge affiché à côté du libellé dans la barre latérale
template	"doc" | "splash"	"doc"	Modèle de mise en page de la page

Images

L’image ci-dessous teste le plugin starlight-image-zoom. Cliquez pour zoomer.

Arborescence de fichiers

• Répertoiresrc/

  • Répertoirecontent/

    • Répertoiredocs/

      • index.mdx
      • 01-environment-variables.mdx
      • 02-build-pipeline.mdx
      • 03-astro-config.mdx
      • 04-logo.mdx
      • 05-colors.mdx
      • 07-typography.mdx
      • 08-code-blocks.mdx
      • 09-components.mdx Cette page
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Répertoireplugins/

    • remark-mermaid.mjs
• Répertoirestyles/

  • custom.css
• astro.config.mjs
• package.json

Vérifications du thème

• La couleur de la bordure gauche diffère selon la variante d’encadré (bleu, violet, jaune, rouge)
• La teinte de fond de l’encadré est visible en mode clair et en mode sombre
• L’ombre portée est subtile mais visible autour de chaque encadré
• Coins arrondis (0.75rem) sur tous les encadrés
• La couleur de l’indicateur d’onglet actif utilise la couleur d’accent
• La ligne de connexion des étapes est visible entre les étapes numérotées
• Les onglets synchronisés restent synchronisés lors du passage d’un groupe à l’autre
• Les blocs de code à l’intérieur des onglets s’affichent avec la coloration syntaxique appropriée
• La couleur de bordure des cartes s’adapte entre le mode clair et le mode sombre
• L’effet de fond au survol est visible sur les cartes
• La couleur de l’icône de flèche des LinkCard correspond à la couleur d’accent
• La disposition décalée décale les cartes alternées verticalement
• Les icônes s’affichent correctement dans les en-têtes de cartes
• Les couleurs de fond des badges par variante diffèrent entre le mode sombre et le mode clair
• Les badges en mode sombre utilisent des tons profonds (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• Les badges en mode clair utilisent des tons clairs (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• Les badges dans les titres sont alignés en ligne avec le texte du titre
• Le badge de la barre latérale s’affiche à côté du libellé de la page
• Les couleurs de bordure des tableaux s’adaptent entre le mode clair et le mode sombre
• La ligne d’en-tête du tableau a un fond distinct
• Le zoom d’image avec superposition fonctionne au clic (starlight-image-zoom)
• Le fond de l’arborescence de fichiers utilise des couleurs adaptées au thème
• Les icônes héritent de la couleur de texte courante