Componentes

Asides

Cada tipo de aside utiliza a sintaxe de cerca ::: com seu título padrão.

Títulos Personalizados

Conteúdo Rico Dentro de Asides

Aqui está um bloco de código dentro de um aside:

npm install @astrojs/starlight

Uma lista de itens:

Primeiro item com texto em negrito
Segundo item com código inline
Terceiro item com um link para a documentação do Starlight

CSS dos Asides

Os componentes aside integrados do Starlight recebem cantos arredondados e uma sombra em camadas:

.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);
}

Abas

Este é o conteúdo da aba de visão geral. Contém texto simples para verificar a renderização básica das abas.

Abas com Conteúdo Misto

Conteúdo em parágrafo simples na primeira aba.

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

Item um dentro de uma aba
Item dois com texto em negrito
Item três com código inline

Abas Sincronizadas

Esses dois grupos de abas compartilham syncKey="pkg". Selecionar uma aba em um grupo deve atualizar o outro.

Comando de instalação:

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

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

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

Comando de execução:

npm run dev

pnpm dev

yarn dev

Passos

Clonar o repositório

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

Instalar dependências
Terminal window
```
npm install
```
Iniciar o servidor de desenvolvimento
Terminal window
```
npm run dev
```
O site estará disponível em http://localhost:4321.

Cards

Card Único

Este é um card independente com um ícone. Cards são úteis para destacar informações ou funcionalidades importantes.

Grade de Cards

Desempenho

O Astro entrega zero JS por padrão para carregamentos de página rápidos.

Personalizável

O Starlight oferece amplas opções de temas e plugins.

Acessível

Recursos de acessibilidade integrados garantem que o conteúdo alcance todos.

Documentado

Uma documentação abrangente torna o início simples e direto.

Layout em Escalonamento

Passo Um

Configure as definições do seu projeto e as variáveis de ambiente.

Passo Dois

Crie suas páginas de conteúdo usando o formato MDX.

Passo Três

Visualize localmente com o servidor de desenvolvimento.

Passo Quatro

Faça o deploy na plataforma de hospedagem de sua escolha.

Cards com Link

O tema fornece um componente LinkCard que funciona com ou sem ícones. Importe-o do tema:

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

Documentação do StarlightAprenda a criar sites de documentação com o Starlight.

Documentação do AstroExplore o framework Astro para sites orientados a conteúdo.

Com Ícones

Adicione uma prop icon usando a sintaxe prefixo:nome. Todos os oito pacotes de ícones são suportados — consulte a documentação de Pacotes de Ícones para o catálogo completo.

Lucide (`lucide:`)

Firewall de Aplicação WebPolíticas e configuração de firewall.

Redes Multi-CloudConectividade de sites entre nuvens.

Carbon (`carbon:`)

Serviços de SegurançaConjunto de ícones de segurança IBM Carbon.

Serviços em NuvemConjunto de ícones de nuvem IBM Carbon.

Material Design Icons (`mdi:`)

Controle de AcessoÍcone de cadeado e escudo do Material Design.

Gerenciamento de DadosÍcone de banco de dados do Material Design.

Phosphor (`phosphor:`)

Defesa contra AmeaçasÍcone de escudo Phosphor.

Rede GlobalÍcone de globo Phosphor.

Tabler (`tabler:`)

Plataforma em NuvemÍcone de nuvem Tabler.

ImplantaçãoÍcone de foguete Tabler.

Marca F5 (`f5-brand:`)

Segurança em NuvemÍcone de escudo em nuvem da marca F5.

FirewallÍcone de firewall da marca F5.

F5 Distributed Cloud (`f5xc:`)

Esses ícones são multicoloridos e utilizam propriedades CSS personalizadas para adaptação de cores nos modos claro/escuro.

Proteção de App e APIÍcone de proteção de aplicação web e API do F5 XC.

Defesa contra BotsÍcone de defesa contra bots do F5 XC.

HashiCorp Flight (`hashicorp-flight:`)

TerraformÍcone HashiCorp Terraform.

ConsulÍcone HashiCorp Consul.

Badges

Variantes de Badge Inline

Todas as seis variantes de badge renderizadas inline:

Padrão Nota Perigo Sucesso Dica Cuidado

Tamanhos de Badge

Pequeno Médio Grande

Cada tamanho com uma variante:

Dica Pequena Perigo Médio Sucesso Grande

Badges em Títulos

Os títulos a seguir utilizam a sintaxe do plugin starlight-heading-badges.

Funcionalidade Completa Estável

Este título possui um badge de sucesso indicando que a funcionalidade é estável.

API Experimental Beta

Este título possui um badge de cuidado indicando que a API é experimental.

Sistema Legado Descontinuado

Este título possui um badge de perigo indicando descontinuação.

Nova Funcionalidade Novo

Este título possui um badge de dica indicando uma nova funcionalidade.

Documentação Atualizado

Este título possui um badge de nota indicando atualizações recentes.

Badge Padrão Info

Este título possui um badge padrão sem variante especificada.

Badge na Barra Lateral

Verifique a barra lateral: esta página possui um badge “Novo” com a variante tip aplicada via frontmatter.

Tabelas

Tabela Simples

Funcionalidade	Status	Prioridade
Modo escuro	Suportado	Alta
Zoom de imagem	Suportado	Média
Diagramas Mermaid	Suportado	Média
Badges em títulos	Suportado	Baixa

Tabela com Alinhamento e Código

Propriedade	Tipo	Padrão	Descrição
`title`	`string`	—	Título da página exibido no cabeçalho
`description`	`string`	`""`	Meta descrição para SEO
`sidebar.order`	`number`	`0`	Ordem de classificação na barra lateral
`sidebar.badge`	`object`	`null`	Badge exibido ao lado do rótulo na barra lateral
`template`	`"doc" \| "splash"`	`"doc"`	Template de layout da página

Imagens

A imagem abaixo testa o plugin starlight-image-zoom. Clique para ampliar.

GitHub Avatar

Árvore de Arquivos

Directorysrc/
- Directorycontent/
  - Directorydocs/
    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 Esta página
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- Directoryplugins/
  - remark-mermaid.mjs
Directorystyles/
- custom.css
astro.config.mjs
package.json

Verificações de Tema

A cor da borda esquerda difere por variante de aside (azul, roxo, amarelo, vermelho)
O matiz de fundo do aside é visível nos modos claro e escuro
A sombra (box-shadow) é sutil, mas visível ao redor de cada aside
Cantos arredondados (0.75rem) em todos os asides
A cor do indicador ativo da aba utiliza a cor de destaque
A linha conectora dos passos é visível entre os passos numerados
As abas sincronizadas permanecem em sincronia ao alternar entre grupos
Os blocos de código dentro das abas são renderizados com realce de sintaxe adequado
A cor da borda dos cards se adapta entre os modos claro e escuro
O efeito de fundo ao passar o mouse é visível nos cards
A cor do ícone de seta do LinkCard corresponde à cor de destaque
O layout em escalonamento desloca os cards alternados verticalmente
Os ícones são renderizados corretamente nos cabeçalhos dos cards
As cores de fundo dos badges por variante diferem entre os modos escuro e claro
Os badges no modo escuro utilizam tons profundos (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
Os badges no modo claro utilizam tons claros (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Os badges nos títulos se alinham inline com o texto do título
O badge da barra lateral é renderizado ao lado do rótulo da página
As cores das bordas das tabelas se adaptam entre os modos claro e escuro
A linha do cabeçalho da tabela possui um fundo distinto
O overlay de zoom de imagem funciona ao clicar (starlight-image-zoom)
O fundo da árvore de arquivos utiliza cores adequadas ao tema
Os ícones herdam a cor do texto atual