घटक

Asides

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

कस्टम शीर्षक

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

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

npm install @astrojs/starlight

आइटम्स की एक सूची:

बोल्ड टेक्स्ट के साथ पहला आइटम
inline code के साथ दूसरा आइटम
Starlight docs के लिए लिंक के साथ तीसरा आइटम

Aside CSS

Starlight के अंतर्निहित aside घटकों में गोल कोने और एक स्तरित छाया मिलती है:

.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

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

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

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

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

एक tab के अंदर आइटम एक
बोल्ड टेक्स्ट के साथ आइटम दो
inline code के साथ आइटम तीन

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

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

इंस्टॉल कमांड:

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

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

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

रन कमांड:

npm run dev

pnpm dev

yarn dev

Steps

रिपॉज़िटरी क्लोन करें
Terminal window
```
git clone https://github.com/example/repo.git
cd repo
```
निर्भरताएं इंस्टॉल करें
Terminal window
```
npm install
```
dev सर्वर शुरू करें
Terminal window
```
npm run dev
```
साइट http://localhost:4321 पर उपलब्ध होगी।

Cards

एकल Card

Single Card

यह एक आइकन के साथ एक स्वतंत्र card है। Cards मुख्य जानकारी या फ़ीचर को उजागर करने के लिए उपयोगी होते हैं।

Card Grid

Performance

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

Customizable

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

Accessible

अंतर्निहित accessibility फ़ीचर यह सुनिश्चित करते हैं कि सामग्री सभी तक पहुंचे।

Documented

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

Stagger लेआउट

Step One

अपने प्रोजेक्ट सेटिंग्स और एनवायरनमेंट वेरिएबल्स कॉन्फ़िगर करें।

Step Two

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

Step Three

डेवलपमेंट सर्वर के साथ लोकली प्रीव्यू करें।

Step Four

अपनी पसंद के होस्टिंग प्लेटफ़ॉर्म पर डिप्लॉय करें।

Link Cards

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

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

Starlight DocumentationStarlight के साथ दस्तावेज़ीकरण साइट बनाना सीखें।

Astro Documentationकंटेंट-संचालित वेबसाइटों के लिए Astro फ्रेमवर्क एक्सप्लोर करें।

आइकन के साथ

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

Lucide (`lucide:`)

Web App Firewallफ़ायरवॉल नीतियाँ और कॉन्फ़िगरेशन।

Multi-Cloud Networkingक्लाउड के पार साइट कनेक्टिविटी।

Carbon (`carbon:`)

Security ServicesIBM Carbon सुरक्षा आइकन सेट।

Cloud ServicesIBM Carbon क्लाउड आइकन सेट।

Material Design Icons (`mdi:`)

Access ControlMaterial Design shield lock आइकन।

Data ManagementMaterial Design database आइकन।

Phosphor (`phosphor:`)

Threat DefensePhosphor shield आइकन।

Global NetworkPhosphor globe आइकन।

Tabler (`tabler:`)

Cloud PlatformTabler cloud आइकन।

DeploymentTabler rocket आइकन।

F5 Brand (`f5-brand:`)

Cloud SecurityF5 ब्रांडेड cloud shield आइकन।

FirewallF5 ब्रांडेड firewall आइकन।

F5 Distributed Cloud (`f5xc:`)

ये आइकन मल्टी-कलर हैं और लाइट/डार्क मोड रंग अनुकूलन के लिए CSS कस्टम प्रॉपर्टीज़ का उपयोग करते हैं।

App & API ProtectionF5 XC web app और API सुरक्षा आइकन।

Bot DefenseF5 XC bot defense आइकन।

HashiCorp Flight (`hashicorp-flight:`)

TerraformHashiCorp Terraform आइकन।

ConsulHashiCorp Consul आइकन।

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 प्लगइन सिंटैक्स का उपयोग करती हैं।

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 है।

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

Tables

सरल Table

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

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

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

Images

नीचे दी गई छवि starlight-image-zoom प्लगइन का परीक्षण करती है। ज़ूम करने के लिए क्लिक करें।

GitHub Avatar

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

थीम जांच

प्रत्येक aside वेरिएंट के लिए border-left रंग अलग-अलग होता है (नीला, बैंगनी, पीला, लाल)
Aside पृष्ठभूमि टिंट लाइट और डार्क दोनों मोड में दिखाई देती है
Box-shadow प्रत्येक aside के चारों ओर सूक्ष्म लेकिन दृश्यमान है
सभी asides पर गोल कोने (0.75rem)
Tab सक्रिय संकेतक रंग accent रंग का उपयोग करता है
Step connector रेखा क्रमांकित steps के बीच दृश्यमान है
Groups के बीच स्विच करते समय सिंक्रोनाइज़्ड tabs सिंक में रहते हैं
Tabs के अंदर code blocks उचित syntax highlighting के साथ रेंडर होते हैं
Card border रंग लाइट और डार्क मोड के बीच अनुकूलित होता है
Cards पर hover background प्रभाव दृश्यमान है
LinkCard arrow आइकन रंग accent रंग से मेल खाता है
Stagger लेआउट वैकल्पिक cards को लंबवत ऑफ़सेट करता है
Card headers के अंदर आइकन सही तरह से रेंडर होते हैं
वेरिएंट के अनुसार Badge पृष्ठभूमि रंग डार्क और लाइट मोड के बीच भिन्न होते हैं
डार्क मोड badges गहरे टोन का उपयोग करते हैं (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
लाइट मोड badges हल्के टोन का उपयोग करते हैं (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Heading badges heading टेक्स्ट के साथ इनलाइन संरेखित होते हैं
Sidebar badge पेज लेबल के बगल में रेंडर होता है
Table border रंग लाइट और डार्क मोड के बीच अनुकूलित होते हैं
Table header पंक्ति में एक अलग पृष्ठभूमि होती है
Image zoom overlay क्लिक पर काम करता है (starlight-image-zoom)
FileTree पृष्ठभूमि थीम-उपयुक्त रंगों का उपयोग करती है
आइकन वर्तमान टेक्स्ट रंग इनहेरिट करते हैं