घटक

Asides

प्रत्येक aside प्रकार अपने डिफ़ॉल्ट शीर्षक के साथ ::: fence सिंटैक्स का उपयोग करता है।

टिप्पणी

यह एक note aside है। यह उस पूरक जानकारी की ओर ध्यान आकर्षित करता है जिसके बारे में पाठक को जानकारी होनी चाहिए।

संकेत

यह एक tip aside है। यह किसी सर्वोत्तम प्रथा या उपयोगी शॉर्टकट को उजागर करता है।

सावधानी

यह एक caution aside है। यह किसी संभावित समस्या या गैर-स्पष्ट व्यवहार के बारे में चेतावनी देता है।

खतरा

यह एक danger aside है। यह किसी विनाशकारी या अपरिवर्तनीय क्रिया को चिह्नित करता है।

कस्टम शीर्षक

Custom Note Title

यह aside कस्टम शीर्षक ओवरराइड के साथ <Aside> घटक का उपयोग करता है।

Pro Tip

आप aside घटकों के अंदर bold, italic, और inline code नेस्ट कर सकते हैं।

Watch Out

निर्भरताएं अपग्रेड करते समय सावधान रहें — पहले changelog जाँचें।

Destructive Action

git reset --hard चलाने से uncommitted changes स्थायी रूप से हट जाएंगे।

Asides के अंदर समृद्ध सामग्री

मिश्रित सामग्री के साथ Aside

यहाँ एक aside के अंदर code block है:

npm install @astrojs/starlight

आइटम की सूची:

• bold text के साथ पहला आइटम
• inline code के साथ दूसरा आइटम
• Starlight docs के लिंक के साथ तीसरा आइटम

Aside CSS

Starlight के अंतर्निहित aside घटकों को rounded corners और layered shadow मिलते हैं:

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

Tabs

मूल Tabs

Overview

यह overview tab की सामग्री है। इसमें मूल tab रेंडरिंग सत्यापित करने के लिए सादा पाठ है।

Details

यह details tab है। Tabs के बीच स्विच करना बिना किसी page reload के तुरंत होना चाहिए।

मिश्रित सामग्री के साथ Tabs

Text

पहले tab में सादा paragraph सामग्री।

Code

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

List

• एक tab के अंदर आइटम एक
• bold text के साथ आइटम दो
• inline code के साथ आइटम तीन

सिंक्रनाइज़ Tabs

ये दो tab groups syncKey="pkg" साझा करते हैं। एक group में tab चुनने से दूसरा अपडेट हो जाना चाहिए।

Install command:

npm

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

pnpm

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

yarn

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

Run command:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Steps

1. रिपॉजिटरी क्लोन करें

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

2. निर्भरताएं इंस्टॉल करें

   npm install

3. dev server शुरू करें

   npm run dev

   साइट http://localhost:4321 पर उपलब्ध होगी।

Cards

एकल Card

Single Card

यह एक icon के साथ standalone card है। Cards प्रमुख जानकारी या सुविधाओं को उजागर करने के लिए उपयोगी हैं।

Card Grid

Performance

Astro तेज़ पेज लोड के लिए डिफ़ॉल्ट रूप से zero-JS देता है।

Customizable

Starlight व्यापक थीमिंग और plugin विकल्प प्रदान करता है।

Accessible

अंतर्निहित accessibility सुविधाएं सुनिश्चित करती हैं कि सामग्री सभी तक पहुँचे।

Documented

व्यापक दस्तावेज़ीकरण शुरुआत करना सरल बनाता है।

Stagger लेआउट

Step One

अपनी project सेटिंग्स और environment variables कॉन्फ़िगर करें।

Step Two

MDX फ़ॉर्मेट का उपयोग करके अपने content pages बनाएं।

Step Three

development server के साथ स्थानीय रूप से preview करें।

Step Four

अपनी पसंद के hosting प्लेटफ़ॉर्म पर deploy करें।

Link Cards

थीम एक LinkCard घटक प्रदान करती है जो icons के साथ या बिना काम करती है। इसे थीम से import करें:

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

Starlight DocumentationStarlight के साथ documentation साइट बनाना सीखें।

Astro Documentationcontent-driven वेबसाइटों के लिए Astro framework का अन्वेषण करें।

Icons के साथ

prefix:name सिंटैक्स का उपयोग करके icon prop जोड़ें। सभी आठ आइकन पैकेज समर्थित हैं — पूर्ण कैटलॉग के लिए आइकन पैकेज दस्तावेज़ देखें।

Lucide (lucide:)

Web App FirewallFirewall नीतियां और कॉन्फ़िगरेशन।

Multi-Cloud NetworkingClouds में साइट कनेक्टिविटी।

Carbon (carbon:)

Security ServicesIBM Carbon सुरक्षा icon सेट।

Cloud ServicesIBM Carbon cloud icon सेट।

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 ब्रांडेड cloud shield icon।

FirewallF5 ब्रांडेड firewall icon।

F5 Distributed Cloud (f5xc:)

ये icons बहु-रंगीन हैं और light/dark mode रंग अनुकूलन के लिए CSS custom properties का उपयोग करते हैं।

App & API ProtectionF5 XC web app और API protection icon।

Bot DefenseF5 XC bot defense icon।

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform icon।

ConsulHashiCorp Consul icon।

Badges

इनलाइन Badge वेरिएंट

सभी छह badge वेरिएंट इनलाइन रेंडर किए गए:

Default Note Danger Success Tip Caution

Badge आकार

Small Medium Large

वेरिएंट के साथ प्रत्येक आकार:

Small Tip Medium Danger Large Success

Heading Badges

निम्नलिखित headings starlight-heading-badges plugin सिंटैक्स का उपयोग करती हैं।

Feature Complete Stable

इस heading में एक success badge है जो दर्शाता है कि सुविधा स्थिर है।

Experimental API Beta

इस heading में एक caution badge है जो दर्शाता है कि API प्रयोगात्मक है।

Legacy System Deprecated

इस heading में एक danger badge है जो deprecation दर्शाता है।

New Feature New

इस heading में एक tip badge है जो नई सुविधा दर्शाता है।

Documentation Updated

इस heading में एक note badge है जो हालिया अपडेट दर्शाता है।

Default Badge Info

इस heading में कोई वेरिएंट निर्दिष्ट नहीं किए गए डिफ़ॉल्ट badge है।

Sidebar Badge

साइडबार जाँचें: इस पेज पर frontmatter के माध्यम से tip वेरिएंट के साथ “New” badge लगाया गया है।

Tables

सरल Table

सुविधा	स्थिति	प्राथमिकता
Dark mode	समर्थित	उच्च
Image zoom	समर्थित	मध्यम
Mermaid diagrams	समर्थित	मध्यम
Heading badges	समर्थित	निम्न

संरेखण और Code के साथ Table

प्रॉपर्टी	प्रकार	डिफ़ॉल्ट	विवरण
title	string	—	header में प्रदर्शित पेज शीर्षक
description	string	""	SEO के लिए meta description
sidebar.order	number	0	sidebar में sort क्रम
sidebar.badge	object	null	sidebar लेबल के पास दिखाया गया badge
template	"doc" | "splash"	"doc"	पेज लेआउट template

Images

नीचे की image starlight-image-zoom plugin का परीक्षण करती है। ज़ूम करने के लिए क्लिक करें।

File Tree

• 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 यह पेज
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Directoryplugins/

    • remark-mermaid.mjs
• Directorystyles/

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

थीम जाँच

• Border-left रंग प्रत्येक aside वेरिएंट के अनुसार अलग होता है (नीला, बैंगनी, पीला, लाल)
• Aside background tint light और dark दोनों modes में दिखाई देती है
• Box-shadow प्रत्येक aside के चारों ओर सूक्ष्म लेकिन दृश्यमान है
• सभी asides पर rounded corners (0.75rem)
• Tab active indicator रंग accent रंग का उपयोग करता है
• Step connector line क्रमांकित steps के बीच दृश्यमान है
• Groups के बीच स्विच करने पर सिंक्रनाइज़ tabs समन्वित रहते हैं
• Tabs के अंदर code blocks उचित syntax highlighting के साथ रेंडर होते हैं
• Card border रंग light और dark modes के बीच अनुकूलित होता है
• Cards पर hover background effect दृश्यमान है
• LinkCard arrow icon रंग accent रंग से मेल खाता है
• Stagger लेआउट वैकल्पिक cards को लंबवत offset करता है
• Icons card headers के अंदर सही रूप से रेंडर होते हैं
• Badge background रंग प्रति वेरिएंट dark और light modes के बीच भिन्न होते हैं
• Dark mode badges गहरे टोन का उपयोग करते हैं (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• Light mode badges हल्के टोन का उपयोग करते हैं (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• Heading badges heading text के साथ इनलाइन संरेखित होते हैं
• Sidebar badge पेज लेबल के पास रेंडर होता है
• Table border रंग light और dark modes के बीच अनुकूलित होते हैं
• Table header row का एक अलग background होता है
• Image zoom overlay क्लिक पर काम करता है (starlight-image-zoom)
• FileTree background थीम-उपयुक्त रंगों का उपयोग करता है
• Icons वर्तमान text रंग inherit करते हैं