Skip to content

Commit 2fc92e8

Browse files
jviottijviotti
authored
Update the std product hero content (#13)
Signed-off-by: Juan Cruz Viotti <[email protected]>
1 parent 2879bf7 commit 2fc92e8

File tree

1 file changed

+303
-77
lines changed

1 file changed

+303
-77
lines changed

‎content/products/std/_index.html‎

Lines changed: 303 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -126,90 +126,316 @@ <h1 class="display-6 d-lg-none fw-bold text-dark mb-4">
126126
</div>
127127
</div>
128128

129-
<div class="row g-4 mt-4">
130-
<div class="col-12 col-lg-6">
131-
<div class="d-flex flex-column h-100">
132-
<div class="d-flex align-items-center mb-3">
133-
<div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
134-
<i class="bi bi-x-lg"></i>
135-
</div>
136-
<h3 class="h4 mb-0 fw-bold">Before</h3>
129+
<div class="mt-5">
130+
<h3 class="h4 fw-bold text-center mb-2">What's Inside: Some Sample Schemas from the Library</h3>
131+
<p class="text-center text-muted mb-4">
132+
<small>Hint: Your OpenAPI specs in YAML format can directly reference these schemas in JSON format using <a href="https://www.learnjsonschema.com/2020-12/core/ref"><code>$ref</code></a></small>
133+
</p>
134+
135+
<style>
136+
.schema-editor-window {
137+
border-radius: 12px;
138+
overflow: hidden;
139+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
140+
}
141+
.schema-tab {
142+
background: #1e1e1e;
143+
color: #858585;
144+
border: none;
145+
border-right: 1px solid #3c3c3c;
146+
border-bottom: 2px solid transparent;
147+
padding: 0.75rem 1.5rem;
148+
font-size: 0.875rem;
149+
cursor: pointer;
150+
transition: background 0.2s, color 0.2s;
151+
}
152+
.schema-tab:hover {
153+
background: #2d2d2d;
154+
color: #ffffff;
155+
}
156+
.schema-tab.active {
157+
background: #2d2d2d;
158+
color: #ffffff;
159+
border-bottom-color: #007acc;
160+
}
161+
.line-numbers {
162+
color: #858585;
163+
user-select: none;
164+
text-align: right;
165+
padding-right: 1rem;
166+
border-right: 1px solid #3c3c3c;
167+
min-width: 3.5rem;
168+
width: 3.5rem;
169+
}
170+
.tab-line-count {
171+
font-size: 0.75rem;
172+
color: #666;
173+
font-weight: normal;
174+
}
175+
.browse-link {
176+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
177+
color: #ffffff;
178+
font-weight: 600;
179+
border-right: none;
180+
text-decoration: none;
181+
display: inline-block;
182+
}
183+
.browse-link:hover {
184+
background: linear-gradient(135deg, #5568d3 0%, #6a4193 100%);
185+
color: #ffffff;
186+
transform: translateY(-1px);
187+
}
188+
</style>
189+
190+
<div class="schema-editor-window">
191+
<!-- Window Controls -->
192+
<div class="d-flex align-items-center px-3 py-2" style="background: #2d2d2d;">
193+
<div class="d-flex gap-1 me-3">
194+
<div class="rounded-circle" style="width: 12px; height: 12px; background: #ff5f56;"></div>
195+
<div class="rounded-circle" style="width: 12px; height: 12px; background: #ffbd2e;"></div>
196+
<div class="rounded-circle" style="width: 12px; height: 12px; background: #27c93f;"></div>
197+
</div>
198+
<span class="small text-white-50" id="schema-filename">jsonrpc/v2.0/request.json</span>
199+
</div>
200+
201+
<!-- Tabs -->
202+
<div class="d-flex" style="background: #1e1e1e;">
203+
<button class="schema-tab active" data-schema="jsonrpc">
204+
JSON-RPC Request <span class="tab-line-count" id="tab-jsonrpc"></span>
205+
</button>
206+
<button class="schema-tab" data-schema="currency">
207+
ISO Currency <span class="tab-line-count" id="tab-currency"></span>
208+
</button>
209+
<button class="schema-tab" data-schema="xbrl">
210+
XBRL Monetary <span class="tab-line-count" id="tab-xbrl"></span>
211+
</button>
212+
<button class="schema-tab" data-schema="uri">
213+
URI Reference <span class="tab-line-count" id="tab-uri"></span>
214+
</button>
215+
<a href="https://schemas.sourcemeta.com/sourcemeta/std" class="schema-tab browse-link" target="_blank" rel="noopener noreferrer">
216+
<i class="bi bi-box-arrow-up-right me-1"></i> Browse All 300+ Schemas
217+
</a>
218+
</div>
219+
220+
<!-- Editor Content -->
221+
<div style="max-height: 600px; background: #1e1e1e; overflow-y: auto;">
222+
<div class="d-flex" style="font-size: 0.875rem; line-height: 1.6;">
223+
<pre class="m-0 p-3 line-numbers" id="line-numbers">1</pre>
224+
<pre class="m-0 p-3 flex-grow-1"><code id="schema-content" class="language-json text-white-50">Loading schema...</code></pre>
137225
</div>
138-
{{< editor filename="openapi.yaml" type="fail" language="yaml" details="100+ lines of repetitive validation code|Broken regex patterns copied from ChatGPT|Incomplete or incorrect enumerations|No standards compliance guarantees" >}}openapi: 3.1.0
139-
paths:
140-
/users:
141-
post:
142-
requestBody:
143-
content:
144-
application/json:
145-
schema:
146-
type: object
147-
properties:
148-
email:
149-
type: string
150-
pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
151-
description: Email address
152-
country:
153-
type: string
154-
pattern: '^[A-Z]{2}$'
155-
description: ISO 3166-1 alpha-2 country code
156-
currency:
157-
type: string
158-
enum: [ AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT,
159-
BGN, BHD, BIF, BMD, BND, BOB, BRL, BSD, BTN, BWP, BYN, BZD, CAD,
160-
CDF, CHF, CLP, CNY, COP, CRC, CUP, CVE, CZK, DJF, DKK, DOP, DZD,
161-
EGP, ERN, ETB, EUR, FJD, FKP, FOK, GBP, GEL, GGP, GHS, GIP, GMD,
162-
GNF, GTQ, GYD, HKD, HNL, HRK, HTG, HUF, IDR, ILS, IMP, INR, IQD,
163-
IRR, ISK, JEP, JMD, JOD, JPY, KES, KGS, KHR, KID, KMF, KRW, KWD,
164-
KYD, KZT, LAK, LBP, LKR, LRD, LSL ]
165-
description: ISO 4217 currency code
166-
website:
167-
type: string
168-
pattern: '^https'
169-
description: Website URL
170-
created_at:
171-
type: string
172-
pattern: '^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$'
173-
description: ISO 8601 datetime
174-
language:
175-
type: string
176-
pattern: '^[a-z]{2}(-[A-Z]{2})?$'
177-
description: Language code{{< /editor >}}
178226
</div>
179-
</div>
180227

181-
<div class="col-12 col-lg-6">
182-
<div class="d-flex flex-column h-100">
183-
<div class="d-flex align-items-center mb-3">
184-
<div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
185-
<i class="bi bi-check-lg"></i>
228+
<!-- Footer -->
229+
<div style="background: #252526; border-top: 1px solid #3c3c3c;">
230+
<div class="px-3 py-2" style="background: #2d2d30; border-bottom: 1px solid #3c3c3c;">
231+
<small class="text-white-50 text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
232+
<i class="bi bi-info-circle-fill text-info me-2"></i>About This Schema
233+
</small>
234+
</div>
235+
<div class="p-3" id="schema-description">
236+
<div class="d-flex align-items-start mb-2">
237+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
238+
<span class="small text-white-50">Implements the official JSON-RPC 2.0 specification for remote procedure calls</span>
239+
</div>
240+
<div class="d-flex align-items-start mb-2">
241+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
242+
<span class="small text-white-50">Validates request structure, method names, and parameter formats</span>
243+
</div>
244+
<div class="d-flex align-items-start">
245+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
246+
<span class="small text-white-50">Used by thousands of APIs for standardized RPC communication</span>
186247
</div>
187-
<h3 class="h4 mb-0 fw-bold">After</h3>
188248
</div>
189-
{{< editor filename="openapi.yaml" type="success" language="yaml" details="Clean and readable OpenAPI definitions|Standards-backed validation (IETF RFC's, ISO, etc)|Guaranteed schema correctness|Took 5 minutes to write" >}}openapi: 3.1.0
190-
paths:
191-
/users:
192-
post:
193-
requestBody:
194-
content:
195-
application/json:
196-
schema:
197-
type: object
198-
properties:
199-
email:
200-
$ref: './std/ietf/email/address.json'
201-
country:
202-
$ref: './std/iso/country/2020/alpha-2.json'
203-
currency:
204-
$ref: './std/iso/currency/2015/alpha-code.json'
205-
website:
206-
$ref: './std/ietf/uri/url.json'
207-
created_at:
208-
$ref: './std/iso/datetime/2019/datetime/calendar-extended.json'
209-
language:
210-
$ref: './std/ietf/language/tag.json'{{< /editor >}}
211249
</div>
212250
</div>
251+
252+
<script>
253+
(function() {
254+
const schemas = {
255+
jsonrpc: {
256+
url: 'https://schemas.sourcemeta.com/sourcemeta/std/v0/jsonrpc/v2.0/request.json?bundle=1',
257+
filename: 'jsonrpc/v2.0/request.json',
258+
description: `
259+
<div class="d-flex align-items-start mb-2">
260+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
261+
<span class="small text-white-50">Implements the official JSON-RPC 2.0 specification for remote procedure calls</span>
262+
</div>
263+
<div class="d-flex align-items-start mb-2">
264+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
265+
<span class="small text-white-50">Validates request structure, method names, and parameter formats</span>
266+
</div>
267+
<div class="d-flex align-items-start">
268+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
269+
<span class="small text-white-50">Critical for JSON-RPC based APIs like MCP (Model Context Protocol)</span>
270+
</div>
271+
`,
272+
data: null
273+
},
274+
currency: {
275+
url: 'https://schemas.sourcemeta.com/sourcemeta/std/v0/iso/currency/2015/alpha-code.json?bundle=1',
276+
filename: 'iso/currency/2015/alpha-code.json',
277+
description: `
278+
<div class="d-flex align-items-start mb-2">
279+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
280+
<span class="small text-white-50">Based on ISO 4217 standard for currency codes</span>
281+
</div>
282+
<div class="d-flex align-items-start mb-2">
283+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
284+
<span class="small text-white-50">Covers currencies, funds, and precious metals like gold and silver</span>
285+
</div>
286+
<div class="d-flex align-items-start">
287+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
288+
<span class="small text-white-50">Essential for financial APIs and e-commerce platforms</span>
289+
</div>
290+
`,
291+
data: null
292+
},
293+
xbrl: {
294+
url: 'https://schemas.sourcemeta.com/sourcemeta/std/v0/xbrl/instance/2003/monetary-item-type.json?bundle=1',
295+
filename: 'xbrl/instance/2003/monetary-item-type.json',
296+
description: `
297+
<div class="d-flex align-items-start mb-2">
298+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
299+
<span class="small text-white-50">Implements the XBRL financial reporting standard</span>
300+
</div>
301+
<div class="d-flex align-items-start mb-2">
302+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
303+
<span class="small text-white-50">Commonly used for accountancy and financial disclosures</span>
304+
</div>
305+
<div class="d-flex align-items-start">
306+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
307+
<span class="small text-white-50">Widely adopted by regulatory bodies and financial authorities worldwide</span>
308+
</div>
309+
`,
310+
data: null
311+
},
312+
uri: {
313+
url: 'https://schemas.sourcemeta.com/sourcemeta/std/v0/ietf/uri/uri-reference.json?bundle=1',
314+
filename: 'ietf/uri/uri-reference.json',
315+
description: `
316+
<div class="d-flex align-items-start mb-2">
317+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
318+
<span class="small text-white-50">Implements IETF RFC 3986 for URI validation</span>
319+
</div>
320+
<div class="d-flex align-items-start mb-2">
321+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
322+
<span class="small text-white-50">Validates URLs, URNs, and all URI formats correctly</span>
323+
</div>
324+
<div class="d-flex align-items-start">
325+
<i class="bi bi-check-circle-fill text-success me-2" style="font-size: 0.85rem; margin-top: 2px;"></i>
326+
<span class="small text-white-50">Fully supports both relative and absolute URIs</span>
327+
</div>
328+
`,
329+
data: null
330+
}
331+
};
332+
333+
const contentElement = document.getElementById('schema-content');
334+
const lineNumbersElement = document.getElementById('line-numbers');
335+
const filenameElement = document.getElementById('schema-filename');
336+
const descriptionElement = document.getElementById('schema-description');
337+
const tabs = document.querySelectorAll('.schema-tab[data-schema]');
338+
339+
function syntaxHighlight(json) {
340+
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
341+
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
342+
let cls = 'text-warning';
343+
if (/^"/.test(match)) {
344+
if (/:$/.test(match)) {
345+
cls = 'text-info';
346+
} else {
347+
cls = 'text-success';
348+
}
349+
} else if (/true|false/.test(match)) {
350+
cls = 'text-primary';
351+
} else if (/null/.test(match)) {
352+
cls = 'text-secondary';
353+
}
354+
return '<span class="' + cls + '">' + match + '</span>';
355+
});
356+
}
357+
358+
function updateLineNumbers(text) {
359+
const lineCount = text.split('\n').length;
360+
lineNumbersElement.textContent = Array.from({length: lineCount}, (_, i) => i + 1).join('\n');
361+
}
362+
363+
function updateTabLineCount(schemaKey, lineCount) {
364+
const tabElement = document.getElementById('tab-' + schemaKey);
365+
if (tabElement) {
366+
tabElement.textContent = '(' + lineCount + ' lines)';
367+
}
368+
}
369+
370+
function loadSchema(schemaKey) {
371+
const schema = schemas[schemaKey];
372+
373+
if (schema.data) {
374+
contentElement.innerHTML = schema.data.highlighted;
375+
updateLineNumbers(schema.data.formatted);
376+
filenameElement.textContent = schema.filename;
377+
descriptionElement.innerHTML = schema.description;
378+
} else {
379+
contentElement.textContent = 'Loading schema...';
380+
lineNumbersElement.textContent = '1';
381+
fetch(schema.url)
382+
.then(response => response.json())
383+
.then(data => {
384+
const formatted = JSON.stringify(data, null, 2);
385+
const highlighted = syntaxHighlight(formatted);
386+
const lineCount = formatted.split('\n').length;
387+
schema.data = { formatted, highlighted, lineCount };
388+
contentElement.innerHTML = highlighted;
389+
updateLineNumbers(formatted);
390+
updateTabLineCount(schemaKey, lineCount);
391+
filenameElement.textContent = schema.filename;
392+
descriptionElement.innerHTML = schema.description;
393+
})
394+
.catch(error => {
395+
contentElement.textContent = 'Error loading schema: ' + error.message;
396+
contentElement.classList.add('text-danger');
397+
lineNumbersElement.textContent = '1';
398+
});
399+
}
400+
}
401+
402+
tabs.forEach(tab => {
403+
tab.addEventListener('click', function() {
404+
const schemaKey = this.getAttribute('data-schema');
405+
406+
tabs.forEach(t => t.classList.remove('active'));
407+
this.classList.add('active');
408+
409+
loadSchema(schemaKey);
410+
});
411+
});
412+
413+
// Preload all schemas
414+
Object.keys(schemas).forEach(schemaKey => {
415+
const schema = schemas[schemaKey];
416+
fetch(schema.url)
417+
.then(response => response.json())
418+
.then(data => {
419+
const formatted = JSON.stringify(data, null, 2);
420+
const highlighted = syntaxHighlight(formatted);
421+
const lineCount = formatted.split('\n').length;
422+
schema.data = { formatted, highlighted, lineCount };
423+
updateTabLineCount(schemaKey, lineCount);
424+
425+
// If this is the first schema, display it
426+
if (schemaKey === 'jsonrpc') {
427+
contentElement.innerHTML = highlighted;
428+
updateLineNumbers(formatted);
429+
filenameElement.textContent = schema.filename;
430+
descriptionElement.innerHTML = schema.description;
431+
}
432+
})
433+
.catch(error => {
434+
console.error('Error preloading schema ' + schemaKey + ':', error);
435+
});
436+
});
437+
})();
438+
</script>
213439
</div>
214440
{{< /blueprint >}}
215441

0 commit comments

Comments
 (0)