コンポーネント

アサイド

各アサイドタイプは、デフォルトのタイトルとともに ::: フェンス構文を使用します。

ノート

これは note（注記） アサイドです。読者が知っておくべき補足情報に注意を促します。

ヒント

これは tip（ヒント） アサイドです。ベストプラクティスや便利なショートカットを強調します。

注意

これは caution（注意） アサイドです。潜在的な落とし穴や非自明な動作について警告します。

危険

これは danger（危険） アサイドです。破壊的または取り消し不可能なアクションを示します。

カスタムタイトル

カスタム注記タイトル

このアサイドは、カスタムタイトルを上書きした <Aside> コンポーネントを使用しています。

プロのヒント

アサイドコンポーネント内に 太字、斜体、インラインコード をネストできます。

注意してください

依存関係をアップグレードする際は注意が必要です — まず変更履歴を確認してください。

破壊的なアクション

git reset --hard を実行すると、コミットされていない変更が永続的に破棄されます。

アサイド内のリッチコンテンツ

混合コンテンツを含むアサイド

アサイド内のコードブロックの例:

npm install @astrojs/starlight

アイテムのリスト:

• 太字テキストを含む最初のアイテム
• インラインコードを含む2番目のアイテム
• Starlight ドキュメントへのリンクを含む3番目のアイテム

アサイドの CSS

Starlight の組み込みアサイドコンポーネントには、角丸とレイヤードシャドウが適用されます:

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

タブ

基本タブ

概要

これは概要タブのコンテンツです。基本的なタブのレンダリングを確認するためのプレーンテキストが含まれています。

詳細

これは詳細タブです。タブ間の切り替えは、ページのリロードなしに即座に行われます。

混合コンテンツを含むタブ

テキスト

最初のタブのプレーンな段落コンテンツ。

コード

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

リスト

• タブ内のアイテム1
• 太字テキストを含むアイテム2
• インラインコードを含むアイテム3

同期タブ

これら2つのタブグループは syncKey="pkg" を共有しています。一方のグループでタブを選択すると、もう一方も更新されます。

インストールコマンド:

npm

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

pnpm

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

yarn

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

実行コマンド:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

ステップ

1. リポジトリをクローン

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

2. 依存関係をインストール

   npm install

3. 開発サーバーを起動

   npm run dev

   サイトは http://localhost:4321 で利用可能になります。

カード

単一カード

単一カード

これはアイコン付きのスタンドアロンカードです。カードは重要な情報や機能を強調するのに役立ちます。

カードグリッド

パフォーマンス

Astro はデフォルトでゼロ JS を提供し、高速なページ読み込みを実現します。

カスタマイズ可能

Starlight は豊富なテーマ設定とプラグインオプションを提供します。

アクセシブル

組み込みのアクセシビリティ機能により、コンテンツがすべての人に届きます。

ドキュメント充実

包括的なドキュメントにより、スムーズに始めることができます。

スタガーレイアウト

ステップ1

プロジェクトの設定と環境変数を構成します。

ステップ2

MDX 形式を使用してコンテンツページを作成します。

ステップ3

開発サーバーを使用してローカルでプレビューします。

ステップ4

お好みのホスティングプラットフォームにデプロイします。

リンクカード

テーマはアイコンありまたはなしで動作する LinkCard コンポーネントを提供します。テーマからインポートしてください:

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

Starlight DocumentationLearn how to build documentation sites with Starlight.

Astro DocumentationExplore the Astro framework for content-driven websites.

アイコン付き

prefix:name 構文を使用して icon プロップを追加します。8つのアイコンパックすべてがサポートされています — 完全なカタログについては アイコンパッケージ ドキュメントをご覧ください。

Lucide (lucide:)

Web App FirewallFirewall policies and configuration.

Multi-Cloud NetworkingSite connectivity across clouds.

Carbon (carbon:)

Security ServicesIBM Carbon security icon set.

Cloud ServicesIBM Carbon cloud icon set.

Material Design Icons (mdi:)

Access ControlMaterial Design shield lock icon.

Data ManagementMaterial Design database icon.

Phosphor (phosphor:)

Threat DefensePhosphor shield icon.

Global NetworkPhosphor globe icon.

Tabler (tabler:)

Cloud PlatformTabler cloud icon.

DeploymentTabler rocket icon.

F5 Brand (f5-brand:)

Cloud SecurityF5 branded cloud shield icon.

FirewallF5 branded firewall icon.

F5 Distributed Cloud (f5xc:)

これらのアイコンはマルチカラーで、ライト/ダークモードの色適応に CSS カスタムプロパティを使用します。

App & API ProtectionF5 XC web app and API protection icon.

Bot DefenseF5 XC bot defense icon.

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform icon.

ConsulHashiCorp Consul icon.

バッジ

インラインバッジのバリアント

インラインでレンダリングされた6つのバッジバリアント:

デフォルト 注記 危険 成功 ヒント 注意

バッジのサイズ

小 中 大

バリアント付きの各サイズ:

小ヒント 中危険 大成功

見出しバッジ

以下の見出しは starlight-heading-badges プラグイン構文を使用しています。

機能完成 安定版

この見出しには、機能が安定していることを示す成功バッジがあります。

実験的 API ベータ

この見出しには、API が実験的であることを示す注意バッジがあります。

レガシーシステム 非推奨

この見出しには、非推奨であることを示す危険バッジがあります。

新機能 新規

この見出しには、新機能であることを示すヒントバッジがあります。

ドキュメント 更新済み

この見出しには、最近の更新を示す注記バッジがあります。

デフォルトバッジ 情報

この見出しには、バリアント指定なしのデフォルトバッジがあります。

サイドバーバッジ

サイドバーを確認してください: このページには、フロントマターで適用された tip バリアントの「New」バッジがあります。

テーブル

シンプルなテーブル

機能	ステータス	優先度
ダークモード	サポート済み	高
画像ズーム	サポート済み	中
Mermaid ダイアグラム	サポート済み	中
見出しバッジ	サポート済み	低

配置とコードを含むテーブル

プロパティ	型	デフォルト	説明
title	string	—	ヘッダーに表示されるページタイトル
description	string	""	SEO 用のメタ説明
sidebar.order	number	0	サイドバーの並び順
sidebar.badge	object	null	サイドバーラベルの横に表示されるバッジ
template	"doc" | "splash"	"doc"	ページレイアウトテンプレート

画像

以下の画像は starlight-image-zoom プラグインをテストします。クリックしてズームしてください。

ファイルツリー

• ディレクトリsrc/

  • ディレクトリcontent/

    • ディレクトリdocs/

      • 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 このページ
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • ディレクトリplugins/

    • remark-mermaid.mjs
• ディレクトリstyles/

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

テーマチェック

• アサイドバリアントごとに左ボーダーの色が異なる（青、紫、黄、赤）
• アサイドの背景色がライトモードとダークモードの両方で視認できる
• ボックスシャドウが各アサイドの周囲に微妙だが視認できる形で表示される
• すべてのアサイドに角丸（0.75rem）が適用されている
• タブのアクティブインジケーターの色がアクセントカラーを使用している
• ナンバー付きステップ間にステップコネクターラインが表示されている
• 同期タブがグループ間で切り替え時に同期を維持する
• タブ内のコードブロックが適切なシンタックスハイライトでレンダリングされる
• カードのボーダーカラーがライトモードとダークモード間で適応する
• カードでホバー背景エフェクトが視認できる
• LinkCard の矢印アイコンの色がアクセントカラーと一致する
• スタガーレイアウトが交互のカードを垂直方向にオフセットする
• アイコンがカードヘッダー内で正しくレンダリングされる
• バリアントごとのバッジ背景色がダークモードとライトモードで異なる
• ダークモードのバッジは深いトーン（red-4、jade-4、tangerine-4、eggplant-4、bay-4）を使用する
• ライトモードのバッジは薄いトーン（red-1、jade-1、tangerine-1、eggplant-1、bay-1）を使用する
• 見出しバッジが見出しテキストとインラインで揃っている
• サイドバーバッジがページラベルの横にレンダリングされる
• テーブルのボーダーカラーがライトモードとダークモード間で適応する
• テーブルのヘッダー行に明確な背景がある
• 画像ズームオーバーレイがクリックで機能する（starlight-image-zoom）
• FileTree の背景がテーマに適した色を使用している
• アイコンが現在のテキストカラーを継承する