sanskrit-html

v1.0.5

Published

2 months ago

A Sanskrit-flavored HTML-like markup language with Devanagari script elements and full HTML compatibility

0High
0Medium
0Low

sanskrit-html

html sanskrit devanagari markup transpiler i18n localization web compiler

SanskritHTML 🕉️

A Sanskrit-flavored HTML-like markup language that uses Devanagari script for element names and attributes while maintaining full compatibility with standard HTML, CSS, and JavaScript.

🌟 Features

Sanskrit-First Approach: All element names and attributes use Sanskrit terms in Devanagari script
Full HTML5 Compatibility: Transpiles to standard HTML for universal browser support
Semantic Preservation: Maintains HTML5 semantic meaning and accessibility features
Source Map Support: Debug in original Sanskrit source with full DevTools integration
Bidirectional Conversion: Convert both ways between SanskritHTML and standard HTML
Accessibility First: Complete ARIA support with Sanskrit attribute names
Developer Tools: Browser extension and CLI tools for seamless development experience

📖 Quick Start

Installation

# Install globally for CLI usage
npm install -g sanskrit-html

# Or install locally for your project
npm install sanskrit-html

Basic Usage

Create a SanskritHTML file (index.shtml):

<!DOCTYPE एचटीएमएल>
<एचटीएमएल भाषा="hi">
<शीर्ष>
    <मेटा वर्णसेट="UTF-8">
    <शीर्षक>नमस्ते विश्व</शीर्षक>
</शीर्ष>
<देह>
    <मुखपट्ट>
        <शीर्षक१>SanskritHTML में आपका स्वागत है</शीर्षक१>
    </मुखपट्ट>
    <मुख्य>
        <विभाग वर्ग="कंटेनर">
            <अनुच्छेद>यह एक SanskritHTML उदाहरण है।</अनुच्छेद>
            <छवि स्रोत="logo.png" वैकल्पिक="SanskritHTML लोगो">
        </विभाग>
    </मुख्य>
</देह>
</एचटीएमएल>

Compile to standard HTML:

sanskrit-html compile index.shtml -o index.html

Output (index.html):

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <title>नमस्ते विश्व</title>
</head>
<body>
    <header>
        <h1>SanskritHTML में आपका स्वागत है</h1>
    </header>
    <main>
        <div class="कंटेनर">
            <p>यह एक SanskritHTML उदाहरण है।</p>
            <img src="logo.png" alt="SanskritHTML लोगो">
        </div>
    </main>
</body>
</html>

🏗️ Element Mapping

Common Elements

| HTML | SanskritHTML | Meaning | |------|--------------|---------| | <div> | <विभाग> | Division/Section | | <span> | <खंड> | Span/Fragment | | <p> | <अनुच्छेद> | Paragraph | | <h1>-<h6> | <शीर्षक१>-<शीर्षक६> | Headings 1-6 | | <header> | <मुखपट्ट> | Header | | <footer> | <चरणपट्ट> | Footer | | <nav> | <नेविगेशन> | Navigation | | <main> | <मुख्य> | Main content | | <section> | <अनुभाग> | Section | | <article> | <लेख> | Article | | <aside> | <पार्श्व> | Sidebar |

Form Elements

| HTML | SanskritHTML | Meaning | |------|--------------|---------| | <form> | <प्रपत्र> | Form | | <input> | <निवेश> | Input | | <button> | <बटन> | Button | | <textarea> | <पाठक्षेत्र> | Text area | | <select> | <चयन> | Select dropdown | | <option> | <विकल्प> | Option | | <label> | <लेबल> | Label | | <fieldset> | <क्षेत्रसमूह> | Field group |

Attributes

| HTML | SanskritHTML | Meaning | |------|--------------|---------| | id | पहचान | Identifier | | class | वर्ग | Class | | style | शैली | Style | | href | हरेफ | Hyperlink reference | | src | स्रोत | Source | | alt | वैकल्पिक | Alternative text | | title | शीर्षक | Title | | name | नाम | Name | | value | मूल्य | Value | | type | प्रकार | Type | | required | आवश्यक | Required | | disabled | अक्षम | Disabled |

🛠️ CLI Commands

Compile SanskritHTML to HTML

# Basic compilation
sanskrit-html compile input.shtml -o output.html

# With validation and formatting
sanskrit-html compile input.shtml -o output.html --validate --format

# Watch mode for development
sanskrit-html compile input.shtml --watch

# Compile all files in directory
sanskrit-html compile src/*.shtml

Decompile HTML to SanskritHTML

# Convert existing HTML to SanskritHTML
sanskrit-html decompile input.html -o output.shtml

Validation

# Validate SanskritHTML syntax
sanskrit-html validate input.shtml

# JSON output for tooling integration
sanskrit-html validate input.shtml --json

Project Initialization

# Create new SanskritHTML project
sanskrit-html init my-project

# With specific template
sanskrit-html init my-project --template webapp

Development Server

# Start development server with live compilation
sanskrit-html serve -p 3000 -d ./src

📚 JavaScript API

Node.js Usage

import SanskritHTMLTranspiler from 'sanskrit-html';

const transpiler = new SanskritHTMLTranspiler({
    generateSourceMaps: true,
    preserveComments: true,
    validateSyntax: true
});

// Convert SanskritHTML to HTML
const result = transpiler.sanskritToHtml(sanskritContent, 'source.shtml');
console.log(result.html);
console.log(result.sourceMap);

// Convert HTML to SanskritHTML  
const sanskrit = transpiler.htmlToSanskrit(htmlContent);
console.log(sanskrit);

// Validate SanskritHTML
const validation = transpiler.validate(content);
if (!validation.valid) {
    console.error('Validation errors:', validation.errors);
}

Browser Usage with DOM Helpers

<script src="js/sanskrit-dom-helpers.js"></script>
<script>
    // Use Sanskrit DOM helpers
    const element = संस्कृत.पहचानद्वारा('मुख्य-शीर्षक');
    संस्कृत.पाठसेट(element, 'नया शीर्षक');
    
    // Add event listeners
    संस्कृत.घटनासुनें('.बटन', 'click', function() {
        संस्कृत.सूचना('बटन दबाया गया!', 'success');
    });
    
    // Work with forms
    const formData = संस्कृत.प्रपत्र.डेटाप्राप्त('#संपर्क-प्रपत्र');
    console.log(formData);
</script>

🎯 Accessibility Support

SanskritHTML maintains full accessibility with Sanskrit ARIA attributes:

<बटन भूमिका="tab" 
       एरिया-चयनित="false" 
       एरिया-नियंत्रण="panel1"
       एरिया-लेबल="मेनू खोलें">
    मेनू
</बटन>

<विभाग भूमिका="tabpanel"
        एरिया-लेबल="सामग्री पैनल"
        एरिया-छुपा="false">
    <अनुच्छेद>पैनल की सामग्री</अनुच्छेद>
</विभाग>

🧪 Testing

Run the test suite:

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run specific test file
npm test tests/transpiler.test.js

# Generate coverage report
npm run test:coverage

🌐 Browser DevTools Extension

Install the browser extension to see Sanskrit element names in DevTools:

Userscript Installation (Tampermonkey)

Install Tampermonkey
Install the SanskritHTML DevTools script
Open any webpage and press Ctrl+Shift+S to see Sanskrit overlays

Features

Element Inspector: See Sanskrit names in DevTools Elements panel
Live Translation: Toggle between HTML and Sanskrit element names
Accessibility Info: View ARIA attributes in Sanskrit
Usage Statistics: Track Sanskrit element usage on pages

Keyboard Shortcuts

Ctrl+Shift+S: Toggle control panel
Ctrl+Shift+I: Start element inspector
Escape: Stop inspector

🔧 Configuration

Create a .sanskritrc.json file in your project root:

{
    "transpiler": {
        "generateSourceMaps": true,
        "preserveComments": true,
        "validateSyntax": true,
        "indentSize": 2
    },
    "validation": {
        "requireDoctype": true,
        "requireCharset": true,
        "checkAccessibility": true
    },
    "output": {
        "format": true,
        "minify": false
    },
    "fileExtensions": {
        "input": [".shtml", ".sanskrit.html"],
        "output": ".html"
    }
}

🐍 Python Support

Use the Python converter for integration with Python projects:

from sanskrit_html import SanskritHTMLConverter

converter = SanskritHTMLConverter()

# Convert file
success = converter.convert_file(
    'input.shtml', 
    'output.html',
    format_output=True,
    validate=True
)

# Convert string content
html = converter.sanskrit_to_html(sanskrit_content)
sanskrit = converter.html_to_sanskrit(html_content)

# Validate content
validation = converter.validate_sanskrit_html(content)
print(validation['errors'])
print(validation['warnings'])

Command line usage:

python converter.py input.shtml output.html
python converter.py --reverse input.html output.shtml
python converter.py --no-format --no-validate input.shtml output.html

📋 Examples

1. Simple Static Page

<!DOCTYPE एचटीएमएल>
<एचटीएमएल भाषा="hi">
<शीर्ष>
    <मेटा वर्णसेट="UTF-8">
    <शीर्षक>सरल पृष्ठ</शीर्षक>
</शीर्ष>
<देह>
    <मुखपट्ट वर्ग="मुख्य-हेडर">
        <शीर्षक१>मेरी वेबसाइट</शीर्षक१>
        <नेविगेशन>
            <असंख्यसूची>
                <सूचीतत्व><लिंक हरेफ="#home">गृह</लिंक></सूचीतत्व>
                <सूचीतत्व><लिंक हरेफ="#about">परिचय</लिंक></सूचीतत्व>
            </असंख्यसूची>
        </नेविगेशन>
    </मुखपट्ट>
    
    <मुख्य>
        <अनुच्छेद>स्वागत है मेरी वेबसाइट पर!</अनुच्छेद>
        <छवि स्रोत="welcome.jpg" वैकल्पिक="स्वागत चित्र">
    </मुख्य>
</देह>
</एचटीएमएल>

2. Form with Accessibility

<प्रपत्र पहचान="संपर्क-प्रपत्र" क्रिया="/submit" विधि="post">
    <क्षेत्रसमूह>
        <शीर्षक>संपर्क जानकारी</शीर्षक>
        
        <लेबल के_लिए="name">नाम (आवश्यक):</लेबल>
        <निवेश प्रकार="text" 
               पहचान="name" 
               नाम="name" 
               आवश्यक
               एरिया-describedby="name-help">
        <छोटा पहचान="name-help">कृपया अपना पूरा नाम दें</छोटा>
        
        <लेबल के_लिए="email">ईमेल:</लेबल>
        <निवेश प्रकार="email" 
               पहचान="email" 
               नाम="email" 
               आवश्यक>
               
        <लेबल के_लिए="message">संदेश:</लेबल>
        <पाठक्षेत्र पहचान="message" 
                    नाम="message" 
                    पंक्तियां="4"
                    स्थानधारक="अपना संदेश यहाँ लिखें..."></पाठक्षेत्र>
                    
        <बटन प्रकार="submit">भेजें</बटन>
    </क्षेत्रसमूह>
</प्रपत्र>

3. Dynamic Page with JavaScript

<!DOCTYPE एचटीएमएल>
<एचटीएमएल>
<शीर्ष>
    <स्क्रिप्ट स्रोत="sanskrit-dom-helpers.js"></स्क्रिप्ट>
</शीर्ष>
<देह>
    <विभाग पहचान="काउंटर-ऐप">
        <शीर्षक२>काउंटर ऐप</शीर्षक२>
        <अनुच्छेद>वर्तमान गिनती: <खंड पहचान="count">0</खंड></अनुच्छेद>
        <बटन पहचान="increment">बढ़ाएं</बटन>
        <बटन पहचान="decrement">घटाएं</बटन>
    </विभाग>
    
    <स्क्रिप्ट>
        let count = 0;
        
        संस्कृत.घटनासुनें('#increment', 'click', () => {
            count++;
            संस्कृत.पाठसेट('#count', count);
        });
        
        संस्कृत.घटनासुनें('#decrement', 'click', () => {
            count--;
            संस्कृत.पाठसेट('#count', count);
        });
    </स्क्रिप्ट>
</देह>
</एचटीएमएल>

🚀 Build Integration

Webpack Integration

// webpack.config.js
const SanskritHTMLPlugin = require('sanskrit-html/webpack-plugin');

module.exports = {
    plugins: [
        new SanskritHTMLPlugin({
            sourceMap: true,
            validate: true
        })
    ],
    module: {
        rules: [
            {
                test: /\.shtml$/,
                use: 'sanskrit-html-loader'
            }
        ]
    }
};

Vite Integration

// vite.config.js
import { defineConfig } from 'vite';
import sanskritHTML from 'sanskrit-html/vite-plugin';

export default defineConfig({
    plugins: [
        sanskritHTML({
            include: '**/*.shtml',
            generateSourceMaps: true
        })
    ]
});

GitHub Actions CI

# .github/workflows/sanskrit-html.yml
name: SanskritHTML CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Validate SanskritHTML files
      run: sanskrit-html validate src/*.shtml
      
    - name: Build project
      run: |
        sanskrit-html compile src/index.shtml -o dist/index.html
        sanskrit-html compile src/about.shtml -o dist/about.html
        
    - name: Run tests
      run: npm test

🌍 Internationalization

Language Support

SanskritHTML separates code structure from content language:

<!-- Element names in Sanskrit, content in Hindi -->
<विभाग भाषा="hi">
    <अनुच्छेद>यह हिंदी में सामग्री है</अनुच्छेद>
</विभाग>

<!-- Element names in Sanskrit, content in English -->
<विभाग भाषा="en">
    <अनुच्छेद>This is content in English</अनुच्छेद>
</विभाग>

<!-- Element names in Sanskrit, content in Sanskrit -->
<विभाग भाषा="sa">
    <अनुच्छेद>एष संस्कृत भाषायाम् सामग्री अस्ति</अनुच्छेद>
</विभाग>

Font Recommendations

For best Devanagari display in code editors:

/* VS Code settings.json */
{
    "editor.fontFamily": "'Noto Sans Devanagari', 'Mangal', Consolas, monospace",
    "editor.fontSize": 14
}

🤝 Contributing

We welcome contributions! Please read our Contributing Guide and Code of Conduct.

Development Setup

# Clone the repository
git clone https://github.com/sanskrit-html/sanskrit-html.git
cd sanskrit-html

# Install dependencies
npm install

# Run tests
npm test

# Start development mode
npm run dev

# Build for production
npm run build

Adding New Elements

Add mapping to src/mapping.json
Add tests in tests/transpiler.test.js
Update documentation
Run validation: npm run validate-mapping

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Devanagari Unicode Consortium for script standardization
Sanskrit scholars and linguists for terminology guidance
Web accessibility community for inclusive design principles
Open source contributors who made this project possible

🔗 Links

Documentation: https://sanskrit-html.org/docs
Examples: https://sanskrit-html.org/examples
Playground: https://sanskrit-html.org/playground
API Reference: https://sanskrit-html.org/api
Community Forum: https://discuss.sanskrit-html.org

📊 Stats

Elements Supported: 100+ HTML5 elements
Attributes Supported: 150+ HTML5 attributes
ARIA Support: Full ARIA specification
Browser Support: All modern browsers
Node.js Support: 14.x and higher
File Size: < 50KB minified

Made with ❤️ and 🕉️ by the SanskritHTML community