From f44de39be5cbabdc8f5eaddbfc40175597f7ed35 Mon Sep 17 00:00:00 2001
From: Martin Leduc <31558169+DecimalTurn@users.noreply.github.com>
Date: Wed, 25 Jun 2025 23:20:41 -0400
Subject: [PATCH 1/4] Add JSONC validator functionality and styles to
 index.markdown and style.scss

---
 assets/css/style.scss | 120 +++++++++++++++++++++++++++++++++++++++++-
 index.markdown        | 110 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 228 insertions(+), 2 deletions(-)

diff --git a/assets/css/style.scss b/assets/css/style.scss
index f500ff8..c4e0f66 100644
--- a/assets/css/style.scss
+++ b/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;
-  }
\ No newline at end of file
+}
+
+/* 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;
+}
\ No newline at end of file
diff --git a/index.markdown b/index.markdown
index 3d5b81f..d3456d0 100644
--- a/index.markdown
+++ b/index.markdown
@@ -68,6 +68,116 @@ 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...
+{
+  // This is a comment
+  &quot;name&quot;: &quot;Example&quot;,
+  &quot;version&quot;: &quot;1.0.0&quot;
+}" rows="10"></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 src="https://unpkg.com/jsonc-parser@3.2.0/lib/umd/main.js"></script>
+<script>
+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 {
+    // Parse the JSONC using microsoft/node-jsonc-parser
+    const parseErrors = [];
+    const parsed = 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',
+    3: 'Invalid string',
+    4: 'Invalid character',
+    5: 'Unexpected end of comment',
+    6: 'Unexpected end of string',
+    7: 'Unexpected end of number',
+    8: 'Invalid character in string escape sequence',
+    9: 'Invalid Unicode escape sequence',
+    10: 'Invalid escape character',
+    11: 'Unexpected end of file',
+    12: 'Property name expected',
+    13: 'Value expected',
+    14: 'Colon expected',
+    15: 'Comma expected',
+    16: 'Closing bracket expected',
+    17: 'Closing brace expected'
+  };
+  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.
 

From 5dac9c33ff218020d92a8cc48e12329f14238a86 Mon Sep 17 00:00:00 2001
From: Martin Leduc <31558169+DecimalTurn@users.noreply.github.com>
Date: Wed, 25 Jun 2025 23:59:47 -0400
Subject: [PATCH 2/4] Fix var name

---
 index.markdown | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.markdown b/index.markdown
index d3456d0..b0bed76 100644
--- a/index.markdown
+++ b/index.markdown
@@ -108,7 +108,7 @@ function validateJSONC() {
   try {
     // Parse the JSONC using microsoft/node-jsonc-parser
     const parseErrors = [];
-    const parsed = jsoncParser.parse(jsoncText, parseErrors);
+    const parsed = jsonc.parse(jsoncText, parseErrors);
     
     if (parseErrors.length > 0) {
       let errorMessages = parseErrors.map(error => {

From c69b3fda8a817aeb77658d1c2eeb705acfc9ab80 Mon Sep 17 00:00:00 2001
From: Martin Leduc <31558169+DecimalTurn@users.noreply.github.com>
Date: Thu, 26 Jun 2025 00:16:55 -0400
Subject: [PATCH 3/4] Refactor JSONC validation script to use ES module

---
 index.markdown | 51 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/index.markdown b/index.markdown
index b0bed76..d52c4e9 100644
--- a/index.markdown
+++ b/index.markdown
@@ -88,9 +88,14 @@ Try out JSONC validation directly in your browser:
   <div id="validation-result" class="validation-result"></div>
 </div>
 
-<script src="https://unpkg.com/jsonc-parser@3.2.0/lib/umd/main.js"></script>
+<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>
-function validateJSONC() {
+async function validateJSONC() {
   const input = document.getElementById('jsonc-input');
   const result = document.getElementById('validation-result');
   const validateBtn = document.getElementById('validate-btn');
@@ -106,9 +111,16 @@ function validateJSONC() {
   validateBtn.disabled = true;
   
   try {
-    // Parse the JSONC using microsoft/node-jsonc-parser
+    // 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 = jsonc.parse(jsoncText, parseErrors);
+    const parsed = window.jsoncParser.parse(jsoncText, parseErrors);
     
     if (parseErrors.length > 0) {
       let errorMessages = parseErrors.map(error => {
@@ -151,22 +163,21 @@ function clearValidator() {
 function getErrorMessage(errorCode) {
   const errorMessages = {
     1: 'Invalid symbol',
-    2: 'Invalid number',
-    3: 'Invalid string',
-    4: 'Invalid character',
-    5: 'Unexpected end of comment',
-    6: 'Unexpected end of string',
-    7: 'Unexpected end of number',
-    8: 'Invalid character in string escape sequence',
-    9: 'Invalid Unicode escape sequence',
-    10: 'Invalid escape character',
-    11: 'Unexpected end of file',
-    12: 'Property name expected',
-    13: 'Value expected',
-    14: 'Colon expected',
-    15: 'Comma expected',
-    16: 'Closing bracket expected',
-    17: 'Closing brace expected'
+    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}`;
 }

From b7c44a854431967ffb08e92e14df38709893184b Mon Sep 17 00:00:00 2001
From: Martin Leduc <31558169+DecimalTurn@users.noreply.github.com>
Date: Thu, 26 Jun 2025 00:22:47 -0400
Subject: [PATCH 4/4] Adjust JSONC input window

---
 index.markdown | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/index.markdown b/index.markdown
index d52c4e9..2dd750e 100644
--- a/index.markdown
+++ b/index.markdown
@@ -73,12 +73,35 @@ or
 Try out JSONC validation directly in your browser:
 
 <div class="jsonc-validator">
-  <textarea id="jsonc-input" placeholder="Enter your JSONC data here...
-{
-  // This is a comment
-  &quot;name&quot;: &quot;Example&quot;,
-  &quot;version&quot;: &quot;1.0.0&quot;
-}" rows="10"></textarea>
+  <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>