291 lines
7.8 KiB
PHP
291 lines
7.8 KiB
PHP
|
@extends('layouts.app')
|
||
|
|
|
||
|
|
@section('title', 'JSON API Documentation')
|
||
|
|
|
||
|
|
@push('styles')
|
||
|
|
<style>
|
||
|
|
.endpoint-card {
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-card:hover {
|
||
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-header {
|
||
|
|
background-color: var(--bs-body-bg);
|
||
|
|
border-bottom: 1px solid var(--bs-border-color);
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-method {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
border-radius: 0.25rem;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.method-post {
|
||
|
|
background-color: #49cc90;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-path {
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-body {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.request-example {
|
||
|
|
background-color: var(--bs-body-bg);
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.375rem;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.response-example {
|
||
|
|
background-color: var(--bs-body-bg);
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.375rem;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-section {
|
||
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #6a8eff 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 3rem 0;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.code-block {
|
||
|
|
background-color: var(--bs-body-bg);
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.375rem;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
@endpush
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="hero-section text-center">
|
||
|
|
<h1 class="display-4 fw-bold mb-3">JSON API Documentation</h1>
|
||
|
|
<p class="lead mb-4">Programmatic access to JSON validation and formatting tools</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card shadow-sm mb-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<h2 class="h4 mb-3">Getting Started</h2>
|
||
|
|
<p>Our JSON API provides endpoints for validating, formatting, and comparing JSON documents. All endpoints accept and return JSON data.</p>
|
||
|
|
|
||
|
|
<h3 class="h5 mt-4">Base URL</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
{{ url('/api/json') }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="h5 mt-4">Authentication</h3>
|
||
|
|
<p>Currently, the API is open and does not require authentication. However, rate limiting may be implemented in the future.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="endpoint-card">
|
||
|
|
<div class="endpoint-header">
|
||
|
|
<span class="endpoint-method method-post">POST</span>
|
||
|
|
<span class="endpoint-path">/validate</span>
|
||
|
|
</div>
|
||
|
|
<div class="endpoint-body">
|
||
|
|
<h3 class="h5">Validate JSON</h3>
|
||
|
|
<p>Validates a JSON document and returns the parsed data if valid.</p>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Request</h4>
|
||
|
|
<div class="request-example">
|
||
|
|
<pre><code>{
|
||
|
|
"json": "{\"name\":\"John\",\"age\":30}"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Success)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "success",
|
||
|
|
"message": "Valid JSON",
|
||
|
|
"data": {
|
||
|
|
"name": "John",
|
||
|
|
"age": 30
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Error)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "error",
|
||
|
|
"message": "Invalid JSON",
|
||
|
|
"error": "Syntax error"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="endpoint-card">
|
||
|
|
<div class="endpoint-header">
|
||
|
|
<span class="endpoint-method method-post">POST</span>
|
||
|
|
<span class="endpoint-path">/validate-schema</span>
|
||
|
|
</div>
|
||
|
|
<div class="endpoint-body">
|
||
|
|
<h3 class="h5">Validate JSON Against Schema</h3>
|
||
|
|
<p>Validates a JSON document against a JSON Schema.</p>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Request</h4>
|
||
|
|
<div class="request-example">
|
||
|
|
<pre><code>{
|
||
|
|
"json": "{\"name\":\"John\",\"age\":30}",
|
||
|
|
"schema": "{
|
||
|
|
\"type\":\"object\",
|
||
|
|
\"properties\":{
|
||
|
|
\"name\":{\"type\":\"string\"},
|
||
|
|
\"age\":{\"type\":\"number\"}
|
||
|
|
},
|
||
|
|
\"required\":[\"name\",\"age\"]
|
||
|
|
}"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Success)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "success",
|
||
|
|
"message": "JSON is valid according to the schema",
|
||
|
|
"data": {
|
||
|
|
"name": "John",
|
||
|
|
"age": 30
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Error)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "error",
|
||
|
|
"message": "JSON does not match schema",
|
||
|
|
"errors": [
|
||
|
|
{
|
||
|
|
"instancePath": "/age",
|
||
|
|
"message": "must be a number"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="endpoint-card">
|
||
|
|
<div class="endpoint-header">
|
||
|
|
<span class="endpoint-method method-post">POST</span>
|
||
|
|
<span class="endpoint-path">/format</span>
|
||
|
|
</div>
|
||
|
|
<div class="endpoint-body">
|
||
|
|
<h3 class="h5">Format JSON</h3>
|
||
|
|
<p>Formats a JSON document with specified indentation.</p>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Request</h4>
|
||
|
|
<div class="request-example">
|
||
|
|
<pre><code>{
|
||
|
|
"json": "{\"name\":\"John\",\"age\":30}",
|
||
|
|
"indent": 2
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Success)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "success",
|
||
|
|
"message": "JSON formatted successfully",
|
||
|
|
"data": "{
|
||
|
|
\"name\": \"John\",
|
||
|
|
\"age\": 30
|
||
|
|
}"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="endpoint-card">
|
||
|
|
<div class="endpoint-header">
|
||
|
|
<span class="endpoint-method method-post">POST</span>
|
||
|
|
<span class="endpoint-path">/compare</span>
|
||
|
|
</div>
|
||
|
|
<div class="endpoint-body">
|
||
|
|
<h3 class="h5">Compare JSON Documents</h3>
|
||
|
|
<p>Compares two JSON documents and returns the differences.</p>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Request</h4>
|
||
|
|
<div class="request-example">
|
||
|
|
<pre><code>{
|
||
|
|
"json1": "{\"name\":\"John\",\"age\":30}",
|
||
|
|
"json2": "{\"name\":\"John\",\"age\":31}"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="h6 mt-3">Response (Success)</h4>
|
||
|
|
<div class="response-example">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "success",
|
||
|
|
"message": "JSON comparison completed",
|
||
|
|
"data": {
|
||
|
|
"are_equal": false,
|
||
|
|
"differences": [
|
||
|
|
{
|
||
|
|
"path": ["age"],
|
||
|
|
"old_value": 30,
|
||
|
|
"new_value": 31
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card shadow-sm mt-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<h2 class="h4 mb-3">Example Usage</h2>
|
||
|
|
<p>Here's an example of how to use the API with cURL:</p>
|
||
|
|
|
||
|
|
<div class="code-block">
|
||
|
|
<pre><code># Validate JSON
|
||
|
|
curl -X POST {{ url('/api/json/validate') }} \
|
||
|
|
-H "Content-Type: application/json" \
|
||
|
|
-d '{"json":"{\"name\":\"John\",\"age\":30}"}'
|
||
|
|
|
||
|
|
# Format JSON
|
||
|
|
curl -X POST {{ url('/api/json/format') }} \
|
||
|
|
-H "Content-Type: application/json" \
|
||
|
|
-d '{"json":"{\"name\":\"John\",\"age\":30}","indent":2}'
|
||
|
|
|
||
|
|
# Compare JSON
|
||
|
|
curl -X POST {{ url('/api/json/compare') }} \
|
||
|
|
-H "Content-Type: application/json" \
|
||
|
|
-d '{"json1":"{\"name\":\"John\",\"age\":30}","json2":"{\"name\":\"John\",\"age\":31}"}'</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|