Add JSONC validator functionality

assets/css/style.scss

@@ -1,7 +1,7 @@
 ---
 ---
 
-@import 'jekyll-theme-cayman';
+@import "jekyll-theme-cayman";
 
 /* Custom Highlight.js Styles */
 .hljs-error {
@@ -10,4 +10,120 @@
     background-color: rgba(255, 0, 0, 0.2);
     border-radius: 3px;
     padding: 2px 4px;
-  }
+}
+
+/* JSONC Validator Styles */
+.jsonc-validator {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    border: 2px solid #e1e4e8;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+}
+
+.jsonc-validator textarea {
+    width: 100%;
+    min-height: 200px;
+    padding: 1rem;
+    border: 1px solid #d1d5da;
+    border-radius: 6px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 14px;
+    line-height: 1.45;
+    background-color: #ffffff;
+    resize: vertical;
+    box-sizing: border-box;
+}
+
+.jsonc-validator textarea:focus {
+    outline: none;
+    border-color: #0366d6;
+    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+}
+
+.validator-controls {
+    margin: 1rem 0;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.validator-controls button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#validate-btn {
+    background-color: #28a745;
+    color: white;
+}
+
+#validate-btn:hover {
+    background-color: #218838;
+}
+
+#validate-btn:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
+
+#clear-btn {
+    background-color: #6c757d;
+    color: white;
+}
+
+#clear-btn:hover {
+    background-color: #5a6268;
+}
+
+.validation-result {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 6px;
+    min-height: 50px;
+}
+
+.validation-result .success {
+    background-color: #d4edda;
+    border: 1px solid #c3e6cb;
+    color: #155724;
+    padding: 1rem;
+    border-radius: 6px;
+}
+
+.validation-result .error {
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    color: #721c24;
+    padding: 1rem;
+    border-radius: 6px;
+}
+
+.validation-result details {
+    margin-top: 1rem;
+}
+
+.validation-result summary {
+    cursor: pointer;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+.validation-result pre {
+    background-color: #f6f8fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    padding: 1rem;
+    overflow-x: auto;
+    font-size: 12px;
+    margin: 0;
+}
+
+.validation-result code {
+    background-color: transparent;
+    padding: 0;
+}

index.markdown

@@ -68,6 +68,150 @@ or
 - Configuration Files: JSONC is useful for configuration files where comments can provide explanations or instructions.
 - Data Annotation: JSONC allows developers to annotate JSON data with comments for better understanding and maintenance.
 
+## JSONC Validator
+
+Try out JSONC validation directly in your browser:
+
+<div class="jsonc-validator">
+  <textarea id="jsonc-input" placeholder="Enter your JSONC data here..." rows="15" style="width: 100%; box-sizing: border-box; font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace; font-size: 14px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical;">{
+  // JSONC Example - JSON with Comments
+  "name": "My Project",
+  "version": "1.0.0",
+  "description": "A sample project demonstrating JSONC features",
+
+  // Configuration settings
+  "config": {
+    "port": 3000,
+    "host": "localhost",
+    /* 
+     * Database configuration
+     * Support for multiple environments
+     */
+    "database": {
+      "type": "postgresql",
+      "host": "localhost",
+      "port": 5432,
+      "name": "myapp_db"
+    }
+  },
+
+  // Feature flags
+  "features": {
+    "enableLogging": true,
+    "enableCache": false,
+    "maxRetries": 3
+  }
+}</textarea>
+
+  <div class="validator-controls">
+    <button id="validate-btn" onclick="validateJSONC()">Validate JSONC</button>
+    <button id="clear-btn" onclick="clearValidator()">Clear</button>
+  </div>
+
+  <div id="validation-result" class="validation-result"></div>
+</div>
+
+<script type="module">
+import * as jsoncParser from 'https://cdn.skypack.dev/jsonc-parser@3.2.0';
+
+// Make the parser available globally for the onclick handlers
+window.jsoncParser = jsoncParser;
+</script>
+<script>
+async function validateJSONC() {
+  const input = document.getElementById('jsonc-input');
+  const result = document.getElementById('validation-result');
+  const validateBtn = document.getElementById('validate-btn');
+
+  const jsoncText = input.value.trim();
+
+  if (!jsoncText) {
+    result.innerHTML = '<div class="error">Please enter some JSONC data to validate.</div>';
+    return;
+  }
+
+  validateBtn.textContent = 'Validating...';
+  validateBtn.disabled = true;
+
+  try {
+    // Wait for the ES module to be loaded
+    if (!window.jsoncParser) {
+      result.innerHTML = '<div class="error">JSONC parser library is still loading. Please try again in a moment.</div>';
+      validateBtn.textContent = 'Validate JSONC';
+      validateBtn.disabled = false;
+      return;
+    }
+
+    const parseErrors = [];
+    const parsed = window.jsoncParser.parse(jsoncText, parseErrors);
+
+    if (parseErrors.length > 0) {
+      let errorMessages = parseErrors.map(error => {
+        const line = jsoncText.substring(0, error.offset).split('\n').length;
+        const column = error.offset - jsoncText.lastIndexOf('\n', error.offset - 1);
+        return `Line ${line}, Column ${column}: ${getErrorMessage(error.error)}`;
+      }).join('<br>');
+
+      result.innerHTML = `<div class="error">
+        <strong>❌ Invalid JSONC</strong><br>
+        ${errorMessages}
+      </div>`;
+    } else {
+      const jsonString = JSON.stringify(parsed, null, 2);
+      result.innerHTML = `<div class="success">
+        <strong>✅ Valid JSONC!</strong><br>
+        Successfully parsed ${Object.keys(parsed || {}).length} top-level properties.
+        <details>
+          <summary>Parsed JSON (click to expand)</summary>
+          <pre><code>${escapeHtml(jsonString)}</code></pre>
+        </details>
+      </div>`;
+    }
+  } catch (error) {
+    result.innerHTML = `<div class="error">
+      <strong>❌ Parsing Error</strong><br>
+      ${escapeHtml(error.message)}
+    </div>`;
+  }
+
+  validateBtn.textContent = 'Validate JSONC';
+  validateBtn.disabled = false;
+}
+
+function clearValidator() {
+  document.getElementById('jsonc-input').value = '';
+  document.getElementById('validation-result').innerHTML = '';
+}
+
+function getErrorMessage(errorCode) {
+  const errorMessages = {
+    1: 'Invalid symbol',
+    2: 'Invalid number format',
+    3: 'Property name expected',
+    4: 'Value expected',
+    5: 'Colon expected',
+    6: 'Comma expected',
+    7: 'Closing brace expected',
+    8: 'Closing bracket expected',
+    9: 'End of file expected',
+    10: 'Invalid comment token',
+    11: 'Unexpected end of comment',
+    12: 'Unexpected end of string',
+    13: 'Unexpected end of number',
+    14: 'Invalid Unicode',
+    15: 'Invalid escape character',
+    16: 'Invalid character'
+  };
+  return errorMessages[errorCode] || `Error code ${errorCode}`;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+</script>
+
 ## Tools and Libraries
 Several tools and libraries support JSONC, enabling developers to parse and generate JSONC data easily.