From 7d713e4cda5963703ba58df5e085b91ec1a40159 Mon Sep 17 00:00:00 2001
From: Atharva <atharvapise19@gmail.com>
Date: Sun, 9 Feb 2025 11:16:03 +0530
Subject: [PATCH] i18n(hi): update `astro-components.mdx`

---
 .../docs/hi/basics/astro-components.mdx       | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/content/docs/hi/basics/astro-components.mdx b/src/content/docs/hi/basics/astro-components.mdx
index 80bcb3d2e1556..0ec2192ad0712 100644
--- a/src/content/docs/hi/basics/astro-components.mdx
+++ b/src/content/docs/hi/basics/astro-components.mdx
@@ -1,17 +1,26 @@
 ---
 title: अवयव
-description: .astro अवयव सिंटैक्स का परिचय।
+description: Astro अवयव का परिचय।
 i18nReady: true
 ---
 
-**Astro अवयव** किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है। आप Astro अवयव को उसके फ़ाइल एक्सटेंशन `.astro` द्वारा देख सकते हैं।
+import ReadMore from '~/components/ReadMore.astro';
+
+**Astro अवयव** किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है और वे `.astro` फ़ाइल एक्सटेंशन `.astro` का उपयोग करते हैं।
+
+:::note
+यदि आप HTML जानते हैं, तो आप अपना पहला Astro अवयव लिखने के लिए पहले से ही पर्याप्त जानते हैं।
+
+<ReadMore>[Astro सिंटैक्स संदर्भ](/hi/reference/astro-syntax/) में अधिक जानें</ReadMore>
+:::
 
-Astro अवयव अत्यंत लचीले हैं। अक्सर, Astro अवयव में पेज पर कुछ **पुन: प्रयोज्य UI** शामिल होगा, जैसे हेडर या प्रोफाइल कार्ड। अन्य समय में, Astro अवयव में HTML का एक छोटा सा स्निपेट हो सकता है, जैसे सामान्य `<meta>` टैग का संग्रह जो SEO के साथ काम करना आसान बनाता है। Astro अवयवों में संपूर्ण पेज लेआउट भी शामिल हो सकता है।
+Astro अवयव अत्यंत लचीले होते हैं। Astro अवयव HTML के स्निपेट जितना छोटा हो सकता है, जैसे कि सामान्य `<meta>` टैग का संग्रह जो SEO को काम करने में आसान बनाता है। अवयव पुन: उपयोग करने योग्य UI तत्व हो सकते हैं, जैसे हेडर या प्रोफ़ाइल कार्ड। Astro अवयव में संपूर्ण पृष्ठ लेआउट भी हो सकता है या, जब विशेष `src/pages/` फ़ोल्डर में स्थित हो, तो वह स्वयं एक संपूर्ण पृष्ठ हो सकता है।
 
-Astro अवयवों के बारे में जानने वाली सबसे महत्वपूर्ण बात यह है कि वे **ग्राहक पर प्रस्तुत नहीं होते हैं**। वे [सर्वर-साइड रेंडरिंग (SSR)](/hi/guides/on-demand-rendering/) का उपयोग करके बिल्ड-समय या ऑन-डिमांड पर HTML को प्रस्तुत करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़र पर भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।
+Astro अवयवों के बारे में जानने के लिए सबसे महत्वपूर्ण बात यह है कि वे **ग्राहक पर रेंडर नहीं करते हैं**। वे बिल्ड-टाइम या ऑन-डिमांड पर HTML में रेंडर करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़रों को भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।
 
 जब आपके Astro अवयव को क्लाइंट-साइड अन्तरक्रियाशीलता की आवश्यकता होती है, तो आप [मानक HTML `<script>` टैग](/hi/guides/client-side-scripts/) या [UI फ्रेमवर्क अवयव](/hi/guides/framework-components/#hydrating-interactive-components) जोड़ सकते हैं।
 
+ऐसे अवयवों के लिए जिन्हें वैयक्तिकृत या गतिशील सामग्री प्रस्तुत करने की आवश्यकता है, आप [सर्वर निर्देश](/hi/reference/directives-reference/#server-directives) जोड़कर उनके सर्वर रेंडरिंग को स्थगित कर सकते हैं। ये "सर्वर द्वीप समूह" अपनी सामग्री को तब प्रस्तुत करेंगे जब वह उपलब्ध होगी, पूरे पृष्ठ लोड में देरी किए बिना।
 
 ## अवयव संरचना
 
@@ -54,7 +63,9 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
 कोड बाड़ को यह गारंटी देने के लिए डिज़ाइन किया गया है कि आप इसमें जो JavaScript लिखते हैं वह "फेंस इन" है। यह आपके फ्रंटएंड एप्लिकेशन में नहीं बचेगा, या आपके उपयोगकर्ता के हाथों में नहीं आएगा। आप यहां सुरक्षित रूप से वह कोड लिख सकते हैं जो महंगा या संवेदनशील है (जैसे आपके निजी डेटाबेस पर कॉल) बिना इसके आपके उपयोगकर्ता के ब्राउज़र में समाप्त होने की चिंता किए।
 
 :::tip
-आप अपनी अवयव स्क्रिप्ट में TypeScript भी लिख सकते हैं!
+Astro अवयव स्क्रिप्ट TypeScript है, जो आपको संपादक टूलिंग और त्रुटि जाँच के लिए JavaScript में अतिरिक्त सिंटैक्स जोड़ने की अनुमति देता है।
+
+<ReadMore>Astro के [बिल्ट-इन TypeScript समर्थन](/hi/guides/typescript/) के बारे में और पढ़ें।</ReadMore>
 :::
 
 ### अवयव टेम्पलेट
@@ -69,6 +80,7 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
 ---
 // आपकी अवयव स्क्रिप्ट यहाँ!
 import Banner from '../components/Banner.astro';
+import Avatar from '../components/Avatar.astro';
 import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
 const myFavoritePokemon = [/* ... */];
 const { title } = Astro.props;
@@ -82,6 +94,11 @@ const { title } = Astro.props;
 <!-- अवयव स्क्रिप्ट से प्रॉप्स और अन्य चर का उपयोग करें: -->
 <p>{title}</p>
 
+<!-- Delay component rendering and provide fallback loading content: -->
+<Avatar server:defer>
+  <svg slot="fallback" class="generic-avatar" transition:name="avatar">...</svg>
+</Avatar>
+
 <!-- हाइड्रेट करने के लिए `client:` निर्देश के साथ अन्य UI फ्रेमवर्क अवयवों को शामिल करें: -->
 <ReactPokemonComponent client:visible />
 
@@ -371,7 +388,6 @@ import HomeLayout from '../layouts/HomeLayout.astro';
 </HomeLayout>
 ```
 
-
 ## HTML अवयव
 
 Astro `.html` फ़ाइलों को अवयवों के रूप में आयात करने और उपयोग करने या इन फ़ाइलों को `src/pages/` उपनिर्देशिका में पेजों के रूप में रखने का समर्थन करता है। यदि आप किसी फ्रेमवर्क के बिना निर्मित मौजूदा साइट से कोड का पुन: उपयोग कर रहे हैं, या यदि आप यह सुनिश्चित करना चाहते हैं कि आपके अवयव में कोई गतिशील विशेषताएं नहीं हैं, तो आप HTML अवयवों का उपयोग करना चाह सकते हैं।
@@ -387,6 +403,4 @@ HTML अवयव के अंदर एक [`<slot />` तत्व](/hi/basic
 
 ## अगले कदम
 
-import ReadMore from '~/components/ReadMore.astro';
-
 <ReadMore>अपने Astro परियोजना में [UI फ्रेमवर्क अवयवों](/hi/guides/framework-components/) का उपयोग करने के बारे में और पढ़ें।</ReadMore>