Update READMEs and add Hindi skill files
This commit is contained in:
@@ -30,6 +30,7 @@
|
||||
<!-- 多语言入口 -->
|
||||
<a href="./i18n/zh/README.md"><img src="https://img.shields.io/badge/lang-zh-red?style=for-the-badge" alt="简体中文"></a>
|
||||
<a href="./i18n/en/README.md"><img src="https://img.shields.io/badge/lang-en-lightgrey?style=for-the-badge" alt="English"></a>
|
||||
<a href="./i18n/he/"><img src="https://img.shields.io/badge/lang-he-navy?style=for-the-badge" alt="Hebrew"></a>
|
||||
<a href="./i18n/ar/"><img src="https://img.shields.io/badge/lang-ar-brown?style=for-the-badge" alt="Arabic"></a>
|
||||
<a href="./i18n/bn/"><img src="https://img.shields.io/badge/lang-bn-orange?style=for-the-badge" alt="Bengali"></a>
|
||||
<a href="./i18n/de/"><img src="https://img.shields.io/badge/lang-de-black?style=for-the-badge" alt="Deutsch"></a>
|
||||
@@ -37,7 +38,6 @@
|
||||
<a href="./i18n/fa/"><img src="https://img.shields.io/badge/lang-fa-purple?style=for-the-badge" alt="Farsi"></a>
|
||||
<a href="./i18n/fr/"><img src="https://img.shields.io/badge/lang-fr-blue?style=for-the-badge" alt="Français"></a>
|
||||
<a href="./i18n/ha/"><img src="https://img.shields.io/badge/lang-ha-darkgreen?style=for-the-badge" alt="Hausa"></a>
|
||||
<a href="./i18n/he/"><img src="https://img.shields.io/badge/lang-he-navy?style=for-the-badge" alt="Hebrew"></a>
|
||||
<a href="./i18n/hi/"><img src="https://img.shields.io/badge/lang-hi-darkorange?style=for-the-badge" alt="Hindi"></a>
|
||||
<a href="./i18n/id/"><img src="https://img.shields.io/badge/lang-id-teal?style=for-the-badge" alt="Bahasa Indonesia"></a>
|
||||
<a href="./i18n/it/"><img src="https://img.shields.io/badge/lang-it-green?style=for-the-badge" alt="Italiano"></a>
|
||||
|
||||
243
i18n/hi/skills/claude-skills/SKILL.md
Normal file
243
i18n/hi/skills/claude-skills/SKILL.md
Normal file
@@ -0,0 +1,243 @@
|
||||
---
|
||||
नाम: क्लाउड-कौशल
|
||||
विवरण: "क्लाउड कौशल मेटा-कौशल: डोमेन सामग्री (दस्तावेज़/एपीआई/कोड/स्पेस) को एक पुन: प्रयोज्य कौशल (SKILL.md + संदर्भ/स्क्रिप्ट/संपत्ति) में निकालें, और स्पष्टता, सक्रियण विश्वसनीयता और गुणवत्ता द्वार के लिए मौजूदा कौशल को दोबारा तैयार करें।"
|
||||
---
|
||||
|
||||
#क्लाउडस्किल्स मेटा-स्किल
|
||||
|
||||
बिखरी हुई डोमेन सामग्री को एक ऐसे कौशल में बदलें जो पुन: प्रयोज्य, रखरखाव योग्य और विश्वसनीय रूप से सक्रिय हो:
|
||||
- `SKILL.md` प्रवेश बिंदु के रूप में (ट्रिगर, बाधाएं, पैटर्न, उदाहरण)
|
||||
- दीर्घकालिक साक्ष्य और नेविगेशन के लिए `संदर्भ/`
|
||||
- मचान और टेम्पलेट्स के लिए वैकल्पिक `स्क्रिप्ट/` और `संपत्तियाँ/`
|
||||
|
||||
## इस कौशल का उपयोग कब करना है
|
||||
|
||||
जब आपको आवश्यकता हो तो इस मेटा-कौशल को ट्रिगर करें:
|
||||
- डॉक्स/स्पेक्स/रिपोज़ से शुरू से ही एक नया कौशल बनाएं
|
||||
- मौजूदा कौशल को पुनः सक्रिय करें (बहुत लंबा, अस्पष्ट, असंगत, मिसफायर)
|
||||
- डिज़ाइन विश्वसनीय सक्रियण (फ्रंटमैटर + ट्रिगर्स + सीमाएँ)
|
||||
- बड़ी सामग्री से एक साफ़ त्वरित संदर्भ निकालें
|
||||
- लंबी सामग्री को नेविगेशन योग्य `संदर्भ/` में विभाजित करें
|
||||
- एक गुणवत्ता गेट और एक सत्यापनकर्ता जोड़ें
|
||||
|
||||
## सीमाओं के लिए नहीं
|
||||
|
||||
यह मेटा-कौशल नहीं है:
|
||||
- अपने आप में एक डोमेन कौशल (यह डोमेन कौशल बनाता है)
|
||||
- बाहरी तथ्यों का आविष्कार करने का लाइसेंस (यदि सामग्री इसे साबित नहीं करती है, तो ऐसा कहें और सत्यापन पथ जोड़ें)
|
||||
- आवश्यक इनपुट के लिए एक विकल्प (यदि इनपुट गायब हैं, तो आगे बढ़ने से पहले 1-3 प्रश्न पूछें)
|
||||
|
||||
## त्वरित संदर्भ
|
||||
|
||||
### डिलिवरेबल्स (आपको क्या उत्पादन करना चाहिए)
|
||||
|
||||
आपके आउटपुट में शामिल होना चाहिए:
|
||||
1. एक ठोस निर्देशिका लेआउट (आमतौर पर `skills/<skill-name>/`)
|
||||
2. निर्णय लेने योग्य ट्रिगर्स, सीमाओं और प्रतिलिपि प्रस्तुत करने योग्य उदाहरणों के साथ एक कार्रवाई योग्य `SKILL.md`
|
||||
3. लंबे प्रारूप वाले दस्तावेज़ों को `references/index.md` के साथ `references/` में ले जाया गया
|
||||
4. प्री-डिलीवरी चेकलिस्ट (क्वालिटी गेट)
|
||||
|
||||
### अनुशंसित लेआउट (न्यूनतम -> पूर्ण)
|
||||
|
||||
```
|
||||
skill-name/
|
||||
|-- SKILL.md # Required: entrypoint with YAML frontmatter
|
||||
|-- references/ # Optional: long-form docs/evidence/index
|
||||
| `-- index.md # Recommended: navigation index
|
||||
|-- scripts/ # Optional: helpers/automation
|
||||
`-- assets/ # Optional: templates/configs/static assets
|
||||
```
|
||||
|
||||
वास्तव में न्यूनतम संस्करण सिर्फ `SKILL.md` है (आप बाद में `संदर्भ/` जोड़ सकते हैं)।
|
||||
|
||||
### YAML फ्रंटमैटर (आवश्यक)
|
||||
|
||||
```yaml
|
||||
---
|
||||
name: skill-name
|
||||
description: "What it does + when to use (activation triggers)."
|
||||
---
|
||||
```
|
||||
|
||||
फ्रंटमैटर नियम:
|
||||
- `नाम` `^[a-z][a-z0-9-]*$` से मेल खाना चाहिए और निर्देशिका नाम से मेल खाना चाहिए
|
||||
- `विवरण` निर्णय लेने योग्य होना चाहिए ("एक्स के साथ मदद नहीं") और इसमें ठोस ट्रिगर कीवर्ड शामिल होने चाहिए
|
||||
|
||||
### न्यूनतम `SKILL.md` कंकाल (कॉपी/पेस्ट)
|
||||
|
||||
```markdown
|
||||
---
|
||||
name: my-skill
|
||||
description: "[Domain] capability: includes [capability 1], [capability 2]. Use when [decidable triggers]."
|
||||
---
|
||||
|
||||
# my-skill Skill
|
||||
|
||||
One sentence that states the boundary and the deliverable.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Trigger when any of these applies:
|
||||
- [Trigger 1: concrete task/keyword]
|
||||
- [Trigger 2]
|
||||
- [Trigger 3]
|
||||
|
||||
## Not For / Boundaries
|
||||
|
||||
- What this skill will not do (prevents misfires and over-promising)
|
||||
- Required inputs; ask 1-3 questions if missing
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Common Patterns
|
||||
|
||||
**Pattern 1:** one-line explanation
|
||||
```text
|
||||
[कमांड/स्निपेट आप पेस्ट कर सकते हैं और चला सकते हैं]
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1
|
||||
- Input:
|
||||
- Steps:
|
||||
- Expected output / acceptance:
|
||||
|
||||
### Example 2
|
||||
|
||||
### Example 3
|
||||
|
||||
## References
|
||||
|
||||
- `references/index.md`: navigation
|
||||
- `references/...`: long-form docs split by topic
|
||||
|
||||
## Maintenance
|
||||
|
||||
- Sources: docs/repos/specs (do not invent)
|
||||
- Last updated: YYYY-MM-DD
|
||||
- Known limits: what is explicitly out of scope
|
||||
```
|
||||
|
||||
### संलेखन नियम (परक्राम्य नहीं)
|
||||
|
||||
1. त्वरित संदर्भ संक्षिप्त, सीधे प्रयोग करने योग्य पैटर्न के लिए है
|
||||
- जब संभव हो तो इसे <= 20 पैटर्न रखें।
|
||||
- जिस किसी भी चीज़ को स्पष्टीकरण के पैराग्राफ की आवश्यकता होती है वह `संदर्भ/` में जाती है।
|
||||
2. सक्रियण निर्णय योग्य होना चाहिए
|
||||
- फ्रंटमैटर 'विवरण' में ठोस कीवर्ड के साथ "क्या + कब" लिखा होना चाहिए।
|
||||
- "कब उपयोग करें" में विशिष्ट कार्यों/इनपुट/लक्ष्यों की सूची होनी चाहिए, अस्पष्ट सहायता पाठ की नहीं।
|
||||
- विश्वसनीयता के लिए "नॉट फॉर/बाउंड्रीज़" अनिवार्य है।
|
||||
3. बाहरी विवरणों पर कोई दिखावा नहीं
|
||||
- यदि सामग्री इसे साबित नहीं करती है, तो ऐसा कहें और एक सत्यापन पथ शामिल करें।
|
||||
|
||||
### वर्कफ़्लो (सामग्री -> कौशल)
|
||||
|
||||
चरण न छोड़ें:
|
||||
1. दायरा: लिखना चाहिए/चाहिए/कभी नहीं (कुल तीन वाक्य ठीक हैं)
|
||||
2. पैटर्न निकालें: 10-20 उच्च-आवृत्ति पैटर्न चुनें (कमांड/स्निपेट/प्रवाह)
|
||||
3. उदाहरण जोड़ें: >= 3 आरंभ से अंत तक उदाहरण (इनपुट -> चरण -> स्वीकृति)
|
||||
4. सीमाएं परिभाषित करें: दायरे से बाहर क्या है + आवश्यक इनपुट
|
||||
5. संदर्भों को विभाजित करें: लंबे टेक्स्ट को `references/` में ले जाएं + `references/index.md` लिखें
|
||||
6. गेट लागू करें: चेकलिस्ट और सत्यापनकर्ता चलाएँ
|
||||
|
||||
### गुणवत्ता गेट (प्री-डिलीवरी चेकलिस्ट)
|
||||
|
||||
न्यूनतम जाँच (पूर्ण संस्करण के लिए `references/quality-checklist.md` देखें):
|
||||
1. `नाम` `^[a-z][a-z0-9-]*$` से मेल खाता है और निर्देशिका नाम से मेल खाता है
|
||||
2. `विवरण` ठोस ट्रिगर कीवर्ड के साथ "क्या + कब" बताता है
|
||||
3. निर्णायक ट्रिगर्स के साथ "इस कौशल का उपयोग कब करें" है
|
||||
4. मिसफायर को कम करने के लिए "नॉट फ़ॉर / बाउंड्रीज़" है
|
||||
5. त्वरित संदर्भ <= 20 पैटर्न है और प्रत्येक सीधे प्रयोग योग्य है
|
||||
6. >=3 प्रतिलिपि प्रस्तुत करने योग्य उदाहरण हैं
|
||||
7. लंबी सामग्री `references/` में है और `references/index.md` नेविगेट करने योग्य है
|
||||
8. अनिश्चित दावों में एक सत्यापन पथ शामिल है (कोई झांसा नहीं)
|
||||
9. एक ऑपरेटर के मैनुअल की तरह पढ़ता है, दस्तावेज़ीकरण डंप की तरह नहीं
|
||||
|
||||
स्थानीय रूप से मान्य करें:
|
||||
|
||||
```bash
|
||||
# From repo root (basic validation)
|
||||
./skills/claude-skills/scripts/validate-skill.sh skills/<skill-name>
|
||||
|
||||
# From repo root (strict validation)
|
||||
./skills/claude-skills/scripts/validate-skill.sh skills/<skill-name> --strict
|
||||
|
||||
# From skills/claude-skills/ (basic validation)
|
||||
./scripts/validate-skill.sh ../<skill-name>
|
||||
|
||||
# From skills/claude-skills/ (strict validation)
|
||||
./scripts/validate-skill.sh ../<skill-name> --strict
|
||||
```
|
||||
|
||||
### उपकरण और टेम्पलेट
|
||||
|
||||
एक नया कौशल ढांचा तैयार करें:
|
||||
|
||||
```bash
|
||||
# From repo root (generate into ./skills/)
|
||||
./skills/claude-skills/scripts/create-skill.sh my-skill --full --output skills
|
||||
|
||||
# From skills/claude-skills/ (generate into ../ i.e. ./skills/)
|
||||
./scripts/create-skill.sh my-skill --full --output ..
|
||||
|
||||
# Minimal skeleton
|
||||
./skills/claude-skills/scripts/create-skill.sh my-skill --minimal --output skills
|
||||
```
|
||||
|
||||
टेम्पलेट्स:
|
||||
- `assets/template-minimal.md`
|
||||
- `assets/template-complete.md`
|
||||
|
||||
## उदाहरण
|
||||
|
||||
### उदाहरण 1: डॉक्स से एक कौशल बनाएं
|
||||
|
||||
- इनपुट: एक आधिकारिक दस्तावेज़/विशेषता + 2-3 वास्तविक कोड नमूने + सामान्य विफलता मोड
|
||||
- कदम:
|
||||
1. `create-skill.sh` को `skills/<skill-name>/` को जोड़ने के लिए चलाएँ
|
||||
2. फ्रंटमैटर `विवरण` को "क्या + कब" के रूप में लिखें
|
||||
3. त्वरित संदर्भ में 10-20 उच्च-आवृत्ति पैटर्न निकालें
|
||||
4. स्वीकृति मानदंड के साथ >=3 शुरू से अंत तक उदाहरण जोड़ें
|
||||
5. लंबी सामग्री को `references/` में डालें और `references/index.md` तार करें
|
||||
6. `validate-skill.sh --strict` चलाएँ और पुनरावृत्त करें
|
||||
|
||||
### उदाहरण 2: "डॉक्टर डंप" कौशल को दोबारा तैयार करें
|
||||
|
||||
- इनपुट: लंबे समय से चिपकाए गए दस्तावेज़ के साथ एक मौजूदा `SKILL.md`
|
||||
- कदम:
|
||||
1. पहचानें कि कौन से भाग पैटर्न बनाम दीर्घ-रूप स्पष्टीकरण हैं
|
||||
2. लंबे प्रारूप वाले टेक्स्ट को `संदर्भ/` में ले जाएं (विषय के आधार पर विभाजित)
|
||||
3. त्वरित संदर्भ को संक्षिप्त कॉपी/पेस्ट पैटर्न के रूप में फिर से लिखें
|
||||
4. उदाहरण जोड़ें या ठीक करें जब तक कि वे प्रतिलिपि प्रस्तुत करने योग्य न हो जाएं
|
||||
5. मिसफायर को कम करने के लिए "नॉट फॉर / बाउंड्रीज़" जोड़ें
|
||||
|
||||
### उदाहरण 3: एक कौशल को मान्य करें और प्राप्त करें
|
||||
|
||||
- इनपुट: `कौशल/<कौशल-नाम>/`
|
||||
- कदम:
|
||||
1. चेतावनियाँ प्राप्त करने के लिए `validate-skill.sh` (नॉन-स्ट्रिक्ट) चलाएँ
|
||||
2. फ्रंटमैटर/नाम बेमेल और गायब अनुभागों को ठीक करें
|
||||
3. विशिष्टता लागू करने के लिए `validate-skill.sh --strict` चलाएँ
|
||||
4. शिपिंग से पहले स्कोरिंग रूब्रिक को `references/quality-checklist.md` में चलाएँ
|
||||
|
||||
## सन्दर्भ
|
||||
|
||||
स्थानीय दस्तावेज़:
|
||||
- `संदर्भ/index.md`
|
||||
- `संदर्भ/कौशल-spec.md`
|
||||
- `संदर्भ/गुणवत्ता-चेकलिस्ट.एमडी`
|
||||
- `संदर्भ/एंटी-पैटर्न.एमडी`
|
||||
- `संदर्भ/README.md` (अपस्ट्रीम आधिकारिक संदर्भ)
|
||||
|
||||
बाहरी (आधिकारिक):
|
||||
- https://support.claude.com/en/articles/12512176-what-are-skills
|
||||
- https://support.claude.com/en/articles/12512180-using-skills-in-claude
|
||||
- https://support.claude.com/en/articles/12512198-creating-custom-skills
|
||||
- https://docs.claude.com/en/api/skills-guide
|
||||
|
||||
## रखरखाव
|
||||
|
||||
- स्रोत: `skills/claude-skills/references/` में स्थानीय विशिष्ट फ़ाइलें + `references/README.md` में अपस्ट्रीम आधिकारिक दस्तावेज़
|
||||
- अंतिम अद्यतन: 2025-12-14
|
||||
- ज्ञात सीमाएँ: `validate-skill.sh` अनुमानवादी है; सख्त मोड अनुशंसित अनुभाग शीर्षकों को मानता है
|
||||
274
i18n/hi/skills/snapdom/SKILL.md
Normal file
274
i18n/hi/skills/snapdom/SKILL.md
Normal file
@@ -0,0 +1,274 @@
|
||||
---
|
||||
नाम: स्नैपडोम
|
||||
विवरण: स्नैपडॉम एक तेज़, सटीक डोम-टू-इमेज कैप्चर टूल है जो HTML तत्वों को स्केलेबल एसवीजी छवियों में परिवर्तित करता है। HTML तत्वों को कैप्चर करने, DOM को छवियों (SVG, PNG, JPG, WebP) में परिवर्तित करने, शैलियों, फ़ॉन्ट और छद्म तत्वों को संरक्षित करने के लिए उपयोग करें।
|
||||
---
|
||||
|
||||
#SnapDOMSkill
|
||||
|
||||
HTML तत्वों को स्केलेबल एसवीजी या रैस्टर छवि प्रारूपों में परिवर्तित करने के लिए तेज़, निर्भरता-मुक्त DOM-टू-इमेज कैप्चर लाइब्रेरी।
|
||||
|
||||
## इस कौशल का उपयोग कब करना है
|
||||
|
||||
जब आपको आवश्यकता हो तब SnapDOM का उपयोग करें:
|
||||
- HTML तत्वों को छवियों में बदलें (एसवीजी, पीएनजी, जेपीजी, वेबपी)
|
||||
- छद्म तत्वों और छायाओं के साथ स्टाइल वाले DOM को कैप्चर करें
|
||||
- एम्बेडेड फ़ॉन्ट और आइकन के साथ तत्वों को निर्यात करें
|
||||
- कस्टम आयाम या स्केलिंग के साथ स्क्रीनशॉट बनाएं
|
||||
- प्रॉक्सी फ़ॉलबैक का उपयोग करके CORS-अवरुद्ध संसाधनों को संभालें
|
||||
- प्लगइन्स के साथ कस्टम रेंडरिंग पाइपलाइन लागू करें
|
||||
- बड़े या जटिल तत्वों पर प्रदर्शन का अनुकूलन करें
|
||||
|
||||
## प्रमुख विशेषताऐं
|
||||
|
||||
### सार्वभौमिक निर्यात विकल्प
|
||||
- **एसवीजी** - स्केलेबल वेक्टर प्रारूप, सभी शैलियों को एम्बेड करता है
|
||||
- **पीएनजी, जेपीजी, वेबपी** - विन्यास योग्य गुणवत्ता के साथ रेखापुंज प्रारूप
|
||||
- **कैनवास** - आगे की प्रक्रिया के लिए कच्चा कैनवास तत्व प्राप्त करें
|
||||
- **ब्लॉब** - कस्टम हैंडलिंग के लिए कच्चा बाइनरी डेटा
|
||||
|
||||
###प्रदर्शन
|
||||
- अल्ट्रा-फास्ट कैप्चर (छोटे तत्वों के लिए 1.6 एमएस, 4000×2000 के लिए ~171 एमएस)
|
||||
- **कोई निर्भरता नहीं** - केवल मानक वेब एपीआई का उपयोग करता है
|
||||
- जटिल तत्वों पर html2canvas से 10-40 गुना बेहतर प्रदर्शन करता है
|
||||
|
||||
### शैली समर्थन
|
||||
- एंबेडेड फ़ॉन्ट (आइकन फ़ॉन्ट सहित)
|
||||
- सीएसएस छद्म तत्व (::पहले, ::बाद)
|
||||
- सीएसएस काउंटर
|
||||
- सीएसएस लाइन-क्लैंप
|
||||
- परिवर्तन और छाया प्रभाव
|
||||
- छाया डोम सामग्री
|
||||
|
||||
### उन्नत क्षमताएँ
|
||||
-समान मूल आईफ्रेम समर्थन
|
||||
- अवरुद्ध परिसंपत्तियों के लिए CORS प्रॉक्सी फ़ॉलबैक
|
||||
- कस्टम परिवर्तनों के लिए प्लगइन प्रणाली
|
||||
- परिवर्तनों को सीधा करें (घुमाएँ/अनुवाद हटाएँ)
|
||||
-चयनात्मक तत्व बहिष्करण
|
||||
- चुस्त बाउंडिंग बॉक्स गणना
|
||||
|
||||
## स्थापना
|
||||
|
||||
### एनपीएम/यार्न
|
||||
```bash
|
||||
npm install @zumer/snapdom
|
||||
# or
|
||||
yarn add @zumer/snapdom
|
||||
```
|
||||
|
||||
### सीडीएन (ईएस मॉड्यूल)
|
||||
```html
|
||||
<script type="module">
|
||||
import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
|
||||
</script>
|
||||
```
|
||||
|
||||
### सीडीएन (यूएमडी)
|
||||
```html
|
||||
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
|
||||
```
|
||||
|
||||
## त्वरित प्रारंभ उदाहरण
|
||||
|
||||
### बुनियादी पुन: प्रयोज्य कैप्चर
|
||||
```javascript
|
||||
// Create reusable capture object
|
||||
const result = await snapdom(document.querySelector('#target'));
|
||||
|
||||
// Export to different formats
|
||||
const png = await result.toPng();
|
||||
const jpg = await result.toJpg();
|
||||
const svg = await result.toSvg();
|
||||
const canvas = await result.toCanvas();
|
||||
const blob = await result.toBlob();
|
||||
|
||||
// Use the result
|
||||
document.body.appendChild(png);
|
||||
```
|
||||
|
||||
### एक-चरणीय निर्यात
|
||||
```javascript
|
||||
// Direct export without intermediate object
|
||||
const png = await snapdom.toPng(document.querySelector('#target'));
|
||||
const svg = await snapdom.toSvg(element);
|
||||
```
|
||||
|
||||
### तत्व डाउनलोड करें
|
||||
```javascript
|
||||
// Automatically download as file
|
||||
await snapdom.download(element, 'screenshot.png');
|
||||
await snapdom.download(element, 'image.svg');
|
||||
```
|
||||
|
||||
### विकल्पों के साथ
|
||||
```javascript
|
||||
const result = await snapdom(element, {
|
||||
scale: 2, // 2x resolution
|
||||
width: 800, // Custom width
|
||||
height: 600, // Custom height
|
||||
embedFonts: true, // Include @font-face
|
||||
exclude: '.no-capture', // Hide elements
|
||||
useProxy: true, // Enable CORS proxy
|
||||
straighten: true, // Remove transforms
|
||||
noShadows: false // Keep shadows
|
||||
});
|
||||
|
||||
const png = await result.toPng({ quality: 0.95 });
|
||||
```
|
||||
|
||||
## आवश्यक विकल्प संदर्भ
|
||||
|
||||
| विकल्प | प्रकार | उद्देश्य |
|
||||
|------|------|------|
|
||||
| 'स्केल' | संख्या | स्केल आउटपुट (जैसे, 2x रिज़ॉल्यूशन के लिए 2) |
|
||||
| 'चौड़ाई' | संख्या | पिक्सेल में कस्टम आउटपुट चौड़ाई |
|
||||
| 'ऊंचाई' | संख्या | पिक्सेल में कस्टम आउटपुट ऊंचाई |
|
||||
| `एम्बेडफ़ॉन्ट्स` | बूलियन | गैर-आइकन @ फ़ॉन्ट-फेस नियम शामिल करें |
|
||||
| `प्रॉक्सी का प्रयोग करें` | स्ट्रिंग\|बूलियन | CORS प्रॉक्सी सक्षम करें (डिफ़ॉल्ट के लिए URL या सत्य) |
|
||||
| 'बहिष्कृत' | स्ट्रिंग | तत्वों को छिपाने के लिए सीएसएस चयनकर्ता |
|
||||
| 'सीधा करो' | बूलियन | ट्रांसलेशन/रोटेट ट्रांसफॉर्म हटाएं |
|
||||
| `नोशैडोज़` | बूलियन | पट्टी छाया प्रभाव |
|
||||
|
||||
## सामान्य पैटर्न
|
||||
|
||||
### प्रतिक्रियाशील स्क्रीनशॉट
|
||||
```javascript
|
||||
// Capture at different scales
|
||||
const mobile = await snapdom.toPng(element, { scale: 1 });
|
||||
const tablet = await snapdom.toPng(element, { scale: 1.5 });
|
||||
const desktop = await snapdom.toPng(element, { scale: 2 });
|
||||
```
|
||||
|
||||
### तत्वों को बाहर निकालें
|
||||
```javascript
|
||||
// Hide specific elements from capture
|
||||
const png = await snapdom.toPng(element, {
|
||||
exclude: '.controls, .watermark, [data-no-capture]'
|
||||
});
|
||||
```
|
||||
|
||||
### निश्चित आयाम
|
||||
```javascript
|
||||
// Capture with specific size
|
||||
const result = await snapdom(element, {
|
||||
width: 1200,
|
||||
height: 630 // Standard social media size
|
||||
});
|
||||
```
|
||||
|
||||
### सीओआरएस हैंडलिंग
|
||||
```javascript
|
||||
// Fallback for CORS-blocked resources
|
||||
const png = await snapdom.toPng(element, {
|
||||
useProxy: 'https://cors.example.com/?' // Custom proxy
|
||||
});
|
||||
```
|
||||
|
||||
### प्लगइन सिस्टम (बीटा)
|
||||
```javascript
|
||||
// Extend with custom exporters
|
||||
snapdom.plugins([pluginFactory, { colorOverlay: true }]);
|
||||
|
||||
// Hook into lifecycle
|
||||
defineExports(context) {
|
||||
return {
|
||||
pdf: async (ctx, opts) => { /* generate PDF */ }
|
||||
};
|
||||
}
|
||||
|
||||
// Lifecycle hooks available:
|
||||
// beforeSnap → beforeClone → afterClone →
|
||||
// beforeRender → beforeExport → afterExport
|
||||
```
|
||||
|
||||
## प्रदर्शन तुलना
|
||||
|
||||
SnapDOM html2canvas से काफी बेहतर प्रदर्शन करता है:
|
||||
|
||||
| परिदृश्य | स्नैपडॉम | html2कैनवास | सुधार |
|
||||
|---|---|---|---|
|
||||
| छोटा (200×100) | 1.6ms | 68ms | 42x तेज |
|
||||
| मध्यम (800×600) | 12 एमएस | 280 एमएस | 23 गुना तेज |
|
||||
| बड़ा (4000×2000) | 171 एमएस | 1,800 एमएस | 10 गुना तेज |
|
||||
|
||||
## विकास
|
||||
|
||||
### स्थापित करना
|
||||
```bash
|
||||
git clone https://github.com/zumerlab/snapdom.git
|
||||
cd snapdom
|
||||
npm install
|
||||
```
|
||||
|
||||
### निर्माण
|
||||
```bash
|
||||
npm run compile
|
||||
```
|
||||
|
||||
### परीक्षण
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
|
||||
## ब्राउज़र समर्थन
|
||||
|
||||
- क्रोम/एज 90+
|
||||
- फ़ायरफ़ॉक्स 88+
|
||||
-सफारी 14+
|
||||
- मोबाइल ब्राउज़र (iOS Safari 14+, Chrome मोबाइल)
|
||||
|
||||
## संसाधन
|
||||
|
||||
### दस्तावेज़ीकरण
|
||||
- **आधिकारिक वेबसाइट:** https://snapdom.dev/
|
||||
- **गिटहब रिपॉजिटरी:** https://github.com/zumerlab/snapdom
|
||||
- **एनपीएम पैकेज:** https://www.npmjs.com/package/@zumer/snapdom
|
||||
- **लाइसेंस:** एमआईटी
|
||||
|
||||
### स्क्रिप्ट/
|
||||
स्वचालन के लिए यहां सहायक स्क्रिप्ट जोड़ें, उदाहरण:
|
||||
- `बैच-स्क्रीनशॉट.जेएस` - एकाधिक तत्वों को कैप्चर करें
|
||||
- `pdf-export.js` - स्नैपशॉट को पीडीएफ में बदलें
|
||||
- `तुलना-आउटपुट.जेएस` - एसवीजी बनाम पीएनजी गुणवत्ता की तुलना करें
|
||||
|
||||
### संपत्ति/
|
||||
टेम्पलेट और उदाहरण जोड़ें:
|
||||
- सामान्य कैप्चर परिदृश्यों के लिए HTML टेम्पलेट
|
||||
- सीएसएस फ्रेमवर्क स्नैपडोम के साथ पूर्व-कॉन्फ़िगर किया गया
|
||||
- स्नैपडोम को एकीकृत करने वाली बॉयलरप्लेट परियोजनाएं
|
||||
|
||||
## संबंधित उपकरण
|
||||
|
||||
- **html2canvas** - वैकल्पिक DOM कैप्चर (धीमा लेकिन अधिक संगत)
|
||||
- **ऑर्बिट सीएसएस टूलकिट** - ज़ुमेरलैब द्वारा सहयोगी टूलकिट (https://github.com/zumerlab/orbit)
|
||||
|
||||
## युक्तियाँ एवं सर्वोत्तम प्रथाएँ
|
||||
|
||||
1. **प्रदर्शन**: बेहतर प्रदर्शन के लिए `चौड़ाई`/`ऊंचाई` के बजाय `स्केल` का उपयोग करें
|
||||
2. **फ़ॉन्ट**: यह सुनिश्चित करने के लिए कि कस्टम फ़ॉन्ट सही ढंग से दिखाई दें, `एम्बेडफ़ॉन्ट: सत्य` सेट करें
|
||||
3. **सीओआरएस मुद्दे**: यदि छवियां लोड होने में विफल रहती हैं तो `useProxy: true` का उपयोग करें
|
||||
4. **बड़े तत्व**: जटिल पृष्ठों के लिए छोटे भागों में तोड़ें
|
||||
5. **गुणवत्ता**: पीएनजी/जेपीजी के लिए, सर्वोत्तम गुणवत्ता के लिए `गुणवत्ता: 0.95` का उपयोग करें
|
||||
6. **एसवीजी वेक्टर**: चार्ट और ग्राफिक्स के लिए एसवीजी निर्यात को प्राथमिकता दें
|
||||
|
||||
## समस्या निवारण
|
||||
|
||||
### तत्वों का प्रतिपादन नहीं हो रहा है
|
||||
- जांचें कि क्या तत्व की ऊंचाई/चौड़ाई पर्याप्त है
|
||||
- कैप्चर करने से पहले सत्यापित करें कि सीएसएस पूरी तरह से लोड है
|
||||
- यदि परिवर्तन समस्याएँ पैदा कर रहा है तो `सीधा करें: गलत` आज़माएँ
|
||||
|
||||
### गुम फ़ॉन्ट्स
|
||||
- `एम्बेडफ़ॉन्ट: सत्य` सेट करें
|
||||
- स्नैपडॉम को कॉल करने से पहले सुनिश्चित करें कि फ़ॉन्ट लोड किए गए हैं
|
||||
- फ़ॉन्ट लोडिंग त्रुटियों के लिए ब्राउज़र कंसोल की जाँच करें
|
||||
|
||||
### सीओआरएस मुद्दे
|
||||
- `useProxy: true` सक्षम करें
|
||||
- डिफ़ॉल्ट विफल होने पर कस्टम प्रॉक्सी यूआरएल का उपयोग करें
|
||||
- जांचें कि क्या संसाधन एक ही मूल से हैं
|
||||
|
||||
### प्रदर्शन संबंधी मुद्दे
|
||||
- `स्केल' मान कम करें
|
||||
- छाया प्रतिपादन को छोड़ने के लिए `noShadows: true` का उपयोग करें
|
||||
- बड़े कैप्चर को छोटे खंडों में विभाजित करने पर विचार करें
|
||||
@@ -27,6 +27,34 @@
|
||||
<a href="https://github.com/tukuaiai/vibe-coding-cn"><img src="https://img.shields.io/github/languages/code-size/tukuaiai/vibe-coding-cn?style=for-the-badge" alt="代码大小"></a>
|
||||
<a href="https://github.com/tukuaiai/vibe-coding-cn/graphs/contributors"><img src="https://img.shields.io/github/contributors/tukuaiai/vibe-coding-cn?style=for-the-badge" alt="贡献者"></a>
|
||||
<a href="https://t.me/glue_coding"><img src="https://img.shields.io/badge/chat-telegram-blue?style=for-the-badge&logo=telegram" alt="交流群"></a>
|
||||
<!-- 多语言入口 -->
|
||||
<a href="./i18n/zh/README.md"><img src="https://img.shields.io/badge/lang-zh-red?style=for-the-badge" alt="简体中文"></a>
|
||||
<a href="./i18n/en/README.md"><img src="https://img.shields.io/badge/lang-en-lightgrey?style=for-the-badge" alt="English"></a>
|
||||
<a href="./i18n/he/"><img src="https://img.shields.io/badge/lang-he-navy?style=for-the-badge" alt="Hebrew"></a>
|
||||
<a href="./i18n/ar/"><img src="https://img.shields.io/badge/lang-ar-brown?style=for-the-badge" alt="Arabic"></a>
|
||||
<a href="./i18n/bn/"><img src="https://img.shields.io/badge/lang-bn-orange?style=for-the-badge" alt="Bengali"></a>
|
||||
<a href="./i18n/de/"><img src="https://img.shields.io/badge/lang-de-black?style=for-the-badge" alt="Deutsch"></a>
|
||||
<a href="./i18n/es/"><img src="https://img.shields.io/badge/lang-es-yellow?style=for-the-badge" alt="Español"></a>
|
||||
<a href="./i18n/fa/"><img src="https://img.shields.io/badge/lang-fa-purple?style=for-the-badge" alt="Farsi"></a>
|
||||
<a href="./i18n/fr/"><img src="https://img.shields.io/badge/lang-fr-blue?style=for-the-badge" alt="Français"></a>
|
||||
<a href="./i18n/ha/"><img src="https://img.shields.io/badge/lang-ha-darkgreen?style=for-the-badge" alt="Hausa"></a>
|
||||
<a href="./i18n/hi/"><img src="https://img.shields.io/badge/lang-hi-darkorange?style=for-the-badge" alt="Hindi"></a>
|
||||
<a href="./i18n/id/"><img src="https://img.shields.io/badge/lang-id-teal?style=for-the-badge" alt="Bahasa Indonesia"></a>
|
||||
<a href="./i18n/it/"><img src="https://img.shields.io/badge/lang-it-green?style=for-the-badge" alt="Italiano"></a>
|
||||
<a href="./i18n/ja/"><img src="https://img.shields.io/badge/lang-ja-indigo?style=for-the-badge" alt="日本語"></a>
|
||||
<a href="./i18n/ko/"><img src="https://img.shields.io/badge/lang-ko-slateblue?style=for-the-badge" alt="한국어"></a>
|
||||
<a href="./i18n/ms/"><img src="https://img.shields.io/badge/lang-ms-seagreen?style=for-the-badge" alt="Bahasa Melayu"></a>
|
||||
<a href="./i18n/nl/"><img src="https://img.shields.io/badge/lang-nl-darkred?style=for-the-badge" alt="Nederlands"></a>
|
||||
<a href="./i18n/pl/"><img src="https://img.shields.io/badge/lang-pl-crimson?style=for-the-badge" alt="Polski"></a>
|
||||
<a href="./i18n/pt/"><img src="https://img.shields.io/badge/lang-pt-darkslategray?style=for-the-badge" alt="Português"></a>
|
||||
<a href="./i18n/ru/"><img src="https://img.shields.io/badge/lang-ru-steelblue?style=for-the-badge" alt="Русский"></a>
|
||||
<a href="./i18n/sw/"><img src="https://img.shields.io/badge/lang-sw-forestgreen?style=for-the-badge" alt="Swahili"></a>
|
||||
<a href="./i18n/ta/"><img src="https://img.shields.io/badge/lang-ta-darkmagenta?style=for-the-badge" alt="Tamil"></a>
|
||||
<a href="./i18n/th/"><img src="https://img.shields.io/badge/lang-th-royalblue?style=for-the-badge" alt="ภาษาไทย"></a>
|
||||
<a href="./i18n/tr/"><img src="https://img.shields.io/badge/lang-tr-firebrick?style=for-the-badge" alt="Türkçe"></a>
|
||||
<a href="./i18n/uk/"><img src="https://img.shields.io/badge/lang-uk-cornflowerblue?style=for-the-badge" alt="Українська"></a>
|
||||
<a href="./i18n/ur/"><img src="https://img.shields.io/badge/lang-ur-darkslateblue?style=for-the-badge" alt="Urdu"></a>
|
||||
<a href="./i18n/vi/"><img src="https://img.shields.io/badge/lang-vi-darkgreen?style=for-the-badge" alt="Tiếng Việt"></a>
|
||||
</p>
|
||||
|
||||
[📚 相关文档](#-相关文档与资源)
|
||||
|
||||
Reference in New Issue
Block a user