Skip to content

Commit 0e3c662

Browse files
DecimalTurnDecimalTurn
committed
Add JSONC validator functionality and styles to index.markdown and style.scss
1 parent dfca729 commit 0e3c662

File tree

2 files changed

+228
-2
lines changed

2 files changed

+228
-2
lines changed

‎assets/css/style.scss‎

Lines changed: 118 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
---
33

4-
@import 'jekyll-theme-cayman';
4+
@import "jekyll-theme-cayman";
55

66
/* Custom Highlight.js Styles */
77
.hljs-error {
@@ -10,4 +10,120 @@
1010
background-color: rgba(255, 0, 0, 0.2);
1111
border-radius: 3px;
1212
padding: 2px 4px;
13-
}
13+
}
14+
15+
/* JSONC Validator Styles */
16+
.jsonc-validator {
17+
margin: 2rem 0;
18+
padding: 1.5rem;
19+
border: 2px solid #e1e4e8;
20+
border-radius: 8px;
21+
background-color: #f8f9fa;
22+
}
23+
24+
.jsonc-validator textarea {
25+
width: 100%;
26+
min-height: 200px;
27+
padding: 1rem;
28+
border: 1px solid #d1d5da;
29+
border-radius: 6px;
30+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
31+
font-size: 14px;
32+
line-height: 1.45;
33+
background-color: #ffffff;
34+
resize: vertical;
35+
box-sizing: border-box;
36+
}
37+
38+
.jsonc-validator textarea:focus {
39+
outline: none;
40+
border-color: #0366d6;
41+
box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
42+
}
43+
44+
.validator-controls {
45+
margin: 1rem 0;
46+
display: flex;
47+
gap: 0.5rem;
48+
}
49+
50+
.validator-controls button {
51+
padding: 0.75rem 1.5rem;
52+
border: none;
53+
border-radius: 6px;
54+
font-size: 14px;
55+
font-weight: 500;
56+
cursor: pointer;
57+
transition: all 0.2s ease;
58+
}
59+
60+
#validate-btn {
61+
background-color: #28a745;
62+
color: white;
63+
}
64+
65+
#validate-btn:hover {
66+
background-color: #218838;
67+
}
68+
69+
#validate-btn:disabled {
70+
background-color: #6c757d;
71+
cursor: not-allowed;
72+
}
73+
74+
#clear-btn {
75+
background-color: #6c757d;
76+
color: white;
77+
}
78+
79+
#clear-btn:hover {
80+
background-color: #5a6268;
81+
}
82+
83+
.validation-result {
84+
margin-top: 1rem;
85+
padding: 1rem;
86+
border-radius: 6px;
87+
min-height: 50px;
88+
}
89+
90+
.validation-result .success {
91+
background-color: #d4edda;
92+
border: 1px solid #c3e6cb;
93+
color: #155724;
94+
padding: 1rem;
95+
border-radius: 6px;
96+
}
97+
98+
.validation-result .error {
99+
background-color: #f8d7da;
100+
border: 1px solid #f5c6cb;
101+
color: #721c24;
102+
padding: 1rem;
103+
border-radius: 6px;
104+
}
105+
106+
.validation-result details {
107+
margin-top: 1rem;
108+
}
109+
110+
.validation-result summary {
111+
cursor: pointer;
112+
font-weight: 500;
113+
margin-bottom: 0.5rem;
114+
}
115+
116+
.validation-result pre {
117+
background-color: #f6f8fa;
118+
border: 1px solid #e1e4e8;
119+
border-radius: 6px;
120+
padding: 1rem;
121+
overflow-x: auto;
122+
font-size: 12px;
123+
margin: 0;
124+
}
125+
126+
.validation-result code {
127+
background-color: transparent;
128+
padding: 0;
129+
}

‎index.markdown‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,116 @@ or
6868
- Configuration Files: JSONC is useful for configuration files where comments can provide explanations or instructions.
6969
- Data Annotation: JSONC allows developers to annotate JSON data with comments for better understanding and maintenance.
7070

71+
## JSONC Validator
72+
73+
Try out JSONC validation directly in your browser:
74+
75+
<div class="jsonc-validator">
76+
<textarea id="jsonc-input" placeholder="Enter your JSONC data here...
77+
{
78+
// This is a comment
79+
&quot;name&quot;: &quot;Example&quot;,
80+
&quot;version&quot;: &quot;1.0.0&quot;
81+
}" rows="10"></textarea>
82+
83+
<div class="validator-controls">
84+
<button id="validate-btn" onclick="validateJSONC()">Validate JSONC</button>
85+
<button id="clear-btn" onclick="clearValidator()">Clear</button>
86+
</div>
87+
88+
<div id="validation-result" class="validation-result"></div>
89+
</div>
90+
91+
<script src="https://unpkg.com/[email protected]/lib/umd/main.js"></script>
92+
<script>
93+
function validateJSONC() {
94+
const input = document.getElementById('jsonc-input');
95+
const result = document.getElementById('validation-result');
96+
const validateBtn = document.getElementById('validate-btn');
97+
98+
const jsoncText = input.value.trim();
99+
100+
if (!jsoncText) {
101+
result.innerHTML = '<div class="error">Please enter some JSONC data to validate.</div>';
102+
return;
103+
}
104+
105+
validateBtn.textContent = 'Validating...';
106+
validateBtn.disabled = true;
107+
108+
try {
109+
// Parse the JSONC using microsoft/node-jsonc-parser
110+
const parseErrors = [];
111+
const parsed = jsoncParser.parse(jsoncText, parseErrors);
112+
113+
if (parseErrors.length > 0) {
114+
let errorMessages = parseErrors.map(error => {
115+
const line = jsoncText.substring(0, error.offset).split('\n').length;
116+
const column = error.offset - jsoncText.lastIndexOf('\n', error.offset - 1);
117+
return `Line ${line}, Column ${column}: ${getErrorMessage(error.error)}`;
118+
}).join('<br>');
119+
120+
result.innerHTML = `<div class="error">
121+
<strong>❌ Invalid JSONC</strong><br>
122+
${errorMessages}
123+
</div>`;
124+
} else {
125+
const jsonString = JSON.stringify(parsed, null, 2);
126+
result.innerHTML = `<div class="success">
127+
<strong>✅ Valid JSONC!</strong><br>
128+
Successfully parsed ${Object.keys(parsed || {}).length} top-level properties.
129+
<details>
130+
<summary>Parsed JSON (click to expand)</summary>
131+
<pre><code>${escapeHtml(jsonString)}</code></pre>
132+
</details>
133+
</div>`;
134+
}
135+
} catch (error) {
136+
result.innerHTML = `<div class="error">
137+
<strong>❌ Parsing Error</strong><br>
138+
${escapeHtml(error.message)}
139+
</div>`;
140+
}
141+
142+
validateBtn.textContent = 'Validate JSONC';
143+
validateBtn.disabled = false;
144+
}
145+
146+
function clearValidator() {
147+
document.getElementById('jsonc-input').value = '';
148+
document.getElementById('validation-result').innerHTML = '';
149+
}
150+
151+
function getErrorMessage(errorCode) {
152+
const errorMessages = {
153+
1: 'Invalid symbol',
154+
2: 'Invalid number',
155+
3: 'Invalid string',
156+
4: 'Invalid character',
157+
5: 'Unexpected end of comment',
158+
6: 'Unexpected end of string',
159+
7: 'Unexpected end of number',
160+
8: 'Invalid character in string escape sequence',
161+
9: 'Invalid Unicode escape sequence',
162+
10: 'Invalid escape character',
163+
11: 'Unexpected end of file',
164+
12: 'Property name expected',
165+
13: 'Value expected',
166+
14: 'Colon expected',
167+
15: 'Comma expected',
168+
16: 'Closing bracket expected',
169+
17: 'Closing brace expected'
170+
};
171+
return errorMessages[errorCode] || `Error code ${errorCode}`;
172+
}
173+
174+
function escapeHtml(text) {
175+
const div = document.createElement('div');
176+
div.textContent = text;
177+
return div.innerHTML;
178+
}
179+
</script>
180+
71181
## Tools and Libraries
72182
Several tools and libraries support JSONC, enabling developers to parse and generate JSONC data easily.
73183

0 commit comments

Comments
 (0)