§3.1DemoMount — जीवंत

काम का बँटवारा पैकेज का जाना-पहचाना ही है: माउंट-मार्कअप (मंच, controls-slot, caption-slot) पैकेज में आता है; डेमो-मॉड्यूल और उसका लोडर साइट के हैं। यह साइट अपना लोडर src/lib/demo-loader.ts में रखती है और लेआउट से एक बार mountAllDemos() पुकारती है; पुकार हर पन्ने पर चलती है, पर डेमो-मॉड्यूल का chunk सिर्फ़ उसी पन्ने के लिए मँगाया जाता है जिस पर कोई [data-demo] माउंट हो।

जो डेमो अपने canvas पर पॉइंटर-इनपुट लेता है, वह interactive भेजता है — तब मंच स्पर्श-इशारों पर दावा करता है और crosshair दिखाता है। यह वाला निष्क्रिय है (सिर्फ़ रेंडर), इसलिए झंडा नहीं भेजता और canvas पर उँगली फिराने से पन्ना ही स्क्रॉल होता है। यह पन्ने के अपने स्याही-टोकन से दो-स्रोत तरंग-व्यतिकरण खींचता है, इसलिए थीम के पीछे-पीछे चलता है:

डेमो · दो-स्रोत तरंग-व्यतिकरण

डेमो · दो-स्रोत तरंग-व्यतिकरण

दो बिंदु-स्रोत गोलाकार तरंगें छोड़ते हैं; जहाँ शिखर से शिखर मिलता है वहाँ स्याही जम जाती है, जहाँ शिखर से गर्त — वहाँ काग़ज़ झाँकता है। थीम पलटिए — डेमो जीवित टोकनों से खुद को नई स्याही में रँग लेता है।

मॉड्यूल-अनुबंध एक default export है — mount(ctx), जो सफ़ाई करने वाला फ़ंक्शन लौटाता है; waves/interference जैसी मॉड्यूल-id को लोडर जैसे चाहे हल करे (यहाँ import.meta.glob से)।

§3.2पन्ने का साज़ो-सामान

बाक़ी कंपोनेंट नोट को भरते नहीं, चौखट देते हैं:

• Hero नोट खोलता है: kicker, डिस्प्ले-शीर्षक, पूरी Markdown पाइपलाइन से गुज़रने वाला आमुख, एक मेटा-पंक्ति, और वैकल्पिक tocLabel जो साइडबार में बिना-क्रमांक की "भूमिका" पंक्ति जोड़ देता है। नोट के frontmatter का title छोटा प्रामाणिक नाम ही रहता है — <title> और कार्डों के लिए; हीरो का शीर्षक लंबा हो सकता है।
• PartHero हब का अध्याय खोलता है — इसी पन्ने का सिर। उसका kicker कभी हाथ से नहीं लिखा जाता: रूट अध्याय का "भाग III · …" लेबल props.partLabel बनाकर भेजता है।
• Part लंबे एक-पन्ना नोट को भागों में काटता है; क्रमांकन-प्रीसेट उसे साइडबार की "भाग II · …" जैसी समूह-पंक्तियाँ बना देता है। kitchen-sink इसी तरह कटा है।
• HubCard और .hub-grid हब के लैंडिंग-कार्ड हैं; .path उसका पढ़ने-का-रास्ता बक्सा — दोनों इस गैलरी के अवलोकन पर।
• LocalToc पन्ना-भीतर जंप-लिस्ट रेंडर करता है; दोनों क्रमांकन-प्रीसेटों के ToC-आकार स्वीकारता है, और तय-योग्य न्यूनतम से नीचे खुद छिप जाता है। नीचे जीवंत — इसी अध्याय के अपने ToC पर।
• SidebarMemory स्क्रॉल होने वाले साइडबार को पन्ना बदलने पर वहीं रखता है जहाँ पाठक छोड़ गया था, और मौजूदा प्रविष्टि (डिफ़ॉल्ट [aria-current="page"]) जब भी नज़र से बाहर होती, उसे बीच में ले आता है। साइडबार के स्क्रॉल-बॉक्स के भीतर, नेविगेशन-मार्कअप के बाद रखिए; यह पहले paint से पहले चलता है, इसलिए साइडबार कभी ऊपर से झिलमिलाकर शुरू नहीं होता। डेमो का अपना साइडबार इसे ढोता है।
• LineageSvg बिना शब्दों वाले SVG — वंश-वृक्ष, वर्गीकरण — को कार्ड की तरह घेरता है; शब्दों वाला आरेख FlowDiagram है, नीचे।
• PageFooter नोट के पैर की महीन छपाई है — यहाँ हर नोट के नीचे की पंक्ति।
• ब्राउज़ के हिस्से विकी अध्याय में रहते हैं; गैलरी का Markdown-पक्ष kitchen-sink है।

§3.3LocalToc और FlowDiagram, जीवंत

LocalToc को इसी पन्ने का बिल्ड-समय ToC थमाया गया — वही डेटा जो साइडबार बरतता है, नोट को props.toc के रूप में मिला हुआ:

वही चित्र FlowDiagram के रूप में — बक्से HTML हैं जो अपने शब्दों के अनुसार आकार लेते हैं, तीर लेआउट के बाद मापे जाते हैं, इसलिए किसी भी फ़ॉन्ट में कुछ भी बक्से से बाहर नहीं जाता:

tokens.css

base.cssपढ़ने का स्तंभ

browse.cssब्राउज़ शेल्फ़

componentsदोनों का उपयोग

§3.4FlowDiagram — शब्दों के नाप के बक्से

शब्दों वाला आरेख FlowDiagram होता है (या mermaid ब्लॉक)। हाथ से रखे <text> वाला <svg> एक फ़ॉन्ट के लिए बनता है और अगले चौड़े फ़ॉन्ट में टूट जाता है — और हर साइट अपने फ़ॉन्ट से रेंडर करती है; LineageSvg उस SVG के लिए है जिसमें ऐसा कोई पाठ नहीं जिसे फ़ॉन्ट आकार से बाहर धकेल सके। विनिर्देश डेटा है: cols, nodes (col / row / span, tone, lines, tag, बिंदीदार नोट के लिए ghost, पथों के लिए mono), edges (label, dashed, टूटे संबंध के लिए off), वैकल्पिक lanes और heads:

लेखक

समीक्षा

बिल्ड

लिखनाएक नोट या एक घटक

PR खोलनाएक शाखा

समीक्षास्वीकृति या प्रश्न

बिल्ड और डिप्लॉयमर्ज पर

§3.5बिना कंपोनेंट का साज़ो-सामान

कुछ हिस्से base.css की सादी क्लासें हैं — उन साइटों के लिए जो उन्हें अपने लेआउट से रेंडर करती हैं या गद्य में HTML लिख देती हैं: