Componentes

Avisos

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

Títulos Personalizados

Conteúdo Rico Dentro de Avisos

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

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 Avisos

Os componentes de aviso 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 de 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

Etapas

Clonar o repositório

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

Instalar as 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.

Cartões

Cartão Único

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

Grade de Cartões

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 chegue a todos.

Documentado

A documentação abrangente torna o início fácil e direto.

Layout Escalonado

Etapa Um

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

Etapa Dois

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

Etapa Três

Visualize localmente com o servidor de desenvolvimento.

Etapa Quatro

Implante na plataforma de hospedagem de sua escolha.

Cartões 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ções WebPolíticas e configuração de firewall.

Redes Multi-NuvemConectividade 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 Material Design.

Gerenciamento de DadosÍcone de banco de dados 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 usam propriedades CSS personalizadas para adaptação de cores nos modos claro/escuro.

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

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

HashiCorp Flight (`hashicorp-flight:`)

TerraformÍcone do Terraform HashiCorp.

ConsulÍcone do Consul HashiCorp.

Emblemas

Variantes de Emblemas Inline

Todas as seis variantes de emblemas renderizadas inline:

Padrão Nota Perigo Sucesso Dica Cuidado

Tamanhos de Emblemas

Pequeno Médio Grande

Cada tamanho com uma variante:

Dica Pequena Perigo Médio Sucesso Grande

Emblemas em Títulos

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

Funcionalidade Completa Estável

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

API Experimental Beta

Este título tem um emblema de cuidado indicando que a API é experimental.

Sistema Legado Descontinuado

Este título tem um emblema de perigo indicando descontinuação.

Nova Funcionalidade Novo

Este título tem um emblema de dica indicando uma nova funcionalidade.

Documentação Atualizado

Este título tem um emblema de nota indicando atualizações recentes.

Emblema Padrão Info

Este título tem um emblema padrão sem variante especificada.

Emblema na Barra Lateral

Verifique a barra lateral: esta página tem um emblema “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
Emblemas 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`	Emblema exibido ao lado do rótulo da barra lateral
`template`	`"doc" \| "splash"`	`"doc"`	Modelo 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 do Tema

A cor da borda esquerda difere por variante de aviso (azul, roxo, amarelo, vermelho)
O tom de fundo do aviso é visível nos modos claro e escuro
A sombra é sutil, mas visível ao redor de cada aviso
Cantos arredondados (0,75rem) em todos os avisos
A cor do indicador de aba ativa usa a cor de destaque
A linha conectora das etapas é visível entre as etapas numeradas
As abas sincronizadas permanecem sincronizadas ao alternar entre grupos
Os blocos de código dentro das abas são renderizados com realce de sintaxe adequado
A cor da borda do cartão se adapta entre os modos claro e escuro
O efeito de fundo ao passar o cursor é visível nos cartões
A cor do ícone de seta do LinkCard corresponde à cor de destaque
O layout escalonado desloca verticalmente os cartões alternados
Os ícones são renderizados corretamente dentro dos cabeçalhos dos cartões
As cores de fundo dos emblemas por variante diferem entre os modos escuro e claro
Os emblemas no modo escuro usam tons profundos (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
Os emblemas no modo claro usam tons claros (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Os emblemas em títulos se alinham inline com o texto do título
O emblema 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 de cabeçalho da tabela tem um fundo distinto
O overlay de zoom de imagem funciona ao clicar (starlight-image-zoom)
O fundo da árvore de arquivos usa cores apropriadas ao tema
Os ícones herdam a cor do texto atual