Astro कॉन्फ़िगरेशन

कंटेंट रिपॉजिटरी अपना स्वयं का astro.config.mjs नहीं रखतीं। इसके बजाय, वे @f5-sales-demo/docs-theme npm पैकेज से एक कॉन्फ़िगरेशन फ़ैक्टरी आयात करती हैं जो Starlight, आठ बंडल किए गए प्लगइन और सभी थीम डिफ़ॉल्ट के साथ एक पूर्ण Astro कॉन्फ़िग लौटाती है।

थीम का उपयोग करना

कंटेंट रिपो का astro.config.mjs (Docker बिल्डर द्वारा प्रदान किया गया) एक पतला आवरण है:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig();

सभी अनुकूलन विकल्प ऑब्जेक्ट या एनवायरनमेंट वेरिएबल के माध्यम से किए जाते हैं — प्लगइन वायरिंग, CSS आयात, या घटक ओवरराइड को छूने की कोई आवश्यकता नहीं है।

कॉन्फ़िगरेशन विकल्प

createF5xcDocsConfig एक F5xcDocsConfigOptions ऑब्जेक्ट स्वीकार करता है। प्रत्येक फ़ील्ड वैकल्पिक है; एनवायरनमेंट वेरिएबल और उचित डिफ़ॉल्ट अंतराल को भरते हैं।

interface F5xcDocsConfigOptions {
  site?: string;
  base?: string;
  title?: string;
  description?: string;
  githubRepository?: string;
  llmsOptionalLinks?: Array<{ title: string; url: string }>;
  additionalIntegrations?: AstroIntegration[];
  additionalRemarkPlugins?: Array<unknown>;
  megaMenuItems?: MegaMenuItem[];
  head?: HeadEntry[];
  logo?: { src: string } | { light: string; dark: string };
}

विकल्प	डिफ़ॉल्ट / Env फ़ॉलबैक	उद्देश्य
`site`	`DOCS_SITE` या `https://f5-sales-demo.github.io`	कैनोनिकल बेस URL
`base`	`DOCS_BASE` या `/`	प्रोजेक्ट साइट्स के लिए URL बेस पाथ
`title`	`DOCS_TITLE` या `Documentation`	हेडर और ब्राउज़र टैब में साइट शीर्षक
`description`	`DOCS_DESCRIPTION` या रिक्त स्ट्रिंग	मेटाडेटा और llms.txt के लिए साइट विवरण
`githubRepository`	`GITHUB_REPOSITORY` या रिक्त स्ट्रिंग	एडिट लिंक और GitHub सोशल आइकन सक्षम करता है
`llmsOptionalLinks`	`LLMS_OPTIONAL_LINKS` (JSON) या `[]`	llms.txt प्लगइन के लिए अतिरिक्त लिंक
`additionalIntegrations`	`[]`	जोड़ने के लिए अतिरिक्त Astro इंटीग्रेशन
`additionalRemarkPlugins`	`[]`	remark-mermaid के बाद जोड़े गए अतिरिक्त remark प्लगइन
`megaMenuItems`	अंतर्निहित Products/Solutions/Docs/Support मेनू	शीर्ष-स्तरीय मेगा मेनू प्रविष्टियाँ
`head`	Mermaid CDN `<script>` टैग	कस्टम `<head>` प्रविष्टियाँ
`logo`	`@f5-sales-demo/docs-theme/assets/github-avatar.png`	साइडबार लोगो (एकल src या light/dark जोड़ी)

बंडल किए गए Starlight प्लगइन

फ़ैक्टरी स्वचालित रूप से आठ Starlight प्लगइन को जोड़ता है:

प्लगइन	उद्देश्य
`starlight-mega-menu`	ग्रिड/लिस्ट लेआउट के साथ शीर्ष नेविगेशन मेगा मेनू
`starlight-videos`	दस्तावेज़ीकरण पृष्ठों में वीडियो एम्बेड करना
`starlight-image-zoom`	छवियों पर क्लिक-टू-ज़ूम
`@f5-sales-demo/docs-theme` (स्वयं)	CSS इंजेक्शन, घटक ओवरराइड, रूट मिडलवेयर
`starlight-scroll-to-top`	प्रोग्रेस रिंग के साथ स्क्रॉल-टू-टॉप बटन
`starlight-heading-badges`	हेडिंग पर बैज एनोटेशन
`starlight-page-actions`	पृष्ठ क्रिया बटन
`starlight-plugin-icons`	Starlight में आइकन समर्थन
`starlight-llms-txt`	LLM उपयोग के लिए `llms.txt` और `llms-full.txt` उत्पन्न करता है

ये config.ts के अंदर क्रम में पंजीकृत हैं। थीम प्लगइन (@f5-sales-demo/docs-theme) स्वयं एक Starlight प्लगइन है जो इस सूची में चलता है।

थीम प्लगइन हुक

थीम प्लगइन index.ts में परिभाषित है और ऊपर बंडल किए गए प्लगइन के बीच पंजीकृत है। इसका config:setup हुक तीन काम करता है:

CSS इंजेक्ट करता है — Starlight के customCss सरणी में fonts/font-face.css और styles/custom.css को पहले जोड़ता है
घटकों को ओवरराइड करता है — पाँच Starlight घटकों को बदलता है:
- Banner — एडिट लिंक के साथ ब्रेडक्रम्ब नेविगेशन
- EditLink — जानबूझकर खाली (एडिट लिंक Banner में रहता है)
- Footer — डिफ़ॉल्ट फ़ुटर के नीचे सोशल मीडिया लिंक जोड़े गए
- SiteTitle — होम लिंक के साथ लोगो
- MarkdownContent — वीडियो और इमेज ज़ूम सक्षम करने वाला आवरण
रूट मिडलवेयर जोड़ता है — route-middleware.ts पंजीकृत करता है जो साइडबार से इंडेक्स पृष्ठों को फ़िल्टर करता है और इंडेक्स पृष्ठों पर सामग्री तालिका को दबाता है

// index.ts — Starlight plugin entry point
export default function f5xcDocsTheme(): StarlightPlugin {
  return {
    name: '@f5-sales-demo/docs-theme',
    hooks: {
      'config:setup'({ config, updateConfig, addRouteMiddleware }) {
        addRouteMiddleware({
          entrypoint: '@f5-sales-demo/docs-theme/route-middleware',
          order: 'pre',
        });
        updateConfig({
          customCss: [
            ...(config.customCss ?? []),
            '@f5-sales-demo/docs-theme/fonts/font-face.css',
            '@f5-sales-demo/docs-theme/styles/custom.css',
          ],
          components: {
            ...config.components,
            Banner: '@f5-sales-demo/docs-theme/components/Banner.astro',
            EditLink: '@f5-sales-demo/docs-theme/components/EditLink.astro',
            Footer: '@f5-sales-demo/docs-theme/components/Footer.astro',
            SiteTitle: '@f5-sales-demo/docs-theme/components/SiteTitle.astro',
            MarkdownContent: '@f5-sales-demo/docs-theme/components/MarkdownContent.astro',
          },
        });
      },
    },
  };
}

सभी पाथ npm पैकेज स्पेसिफायर का उपयोग करते हैं (जैसे, @f5-sales-demo/docs-theme/styles/custom.css) जो package.json में exports मैप के माध्यम से रिज़ॉल्व होते हैं।

अन्य इंटीग्रेशन

Starlight और इसके प्लगइन से परे, फ़ैक्टरी इन्हें भी पंजीकृत करता है:

@astrojs/react — MDX पृष्ठों में React घटक समर्थन सक्षम करता है
remark-mermaid — कस्टम remark प्लगइन जो ```mermaid कोड ब्लॉक को रेंडर किए गए डायग्राम में परिवर्तित करता है

additionalIntegrations और additionalRemarkPlugins विकल्पों के माध्यम से अतिरिक्त इंटीग्रेशन और remark प्लगइन जोड़े जा सकते हैं।

साइडबार

कोई कस्टम साइडबार परिभाषित नहीं है। Starlight docs/ में फ़ाइल संरचना से साइडबार स्वचालित रूप से उत्पन्न करता है, प्रत्येक पृष्ठ के title फ्रंटमैटर को लिंक टेक्स्ट के रूप में और क्रम के लिए sidebar.order का उपयोग करता है। रूट मिडलवेयर स्वचालित रूप से साइडबार से इंडेक्स पृष्ठों को फ़िल्टर करता है।