384 lines
12 KiB
PHP
384 lines
12 KiB
PHP
|
@extends('layouts.app')
|
||
|
|
|
||
|
|
@section('title', 'JSON Templates - Common JSON Formats and Examples')
|
||
|
|
|
||
|
|
@push('styles')
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.2/dist/jsoneditor.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
.template-card {
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-card .card-body {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-card .card-footer {
|
||
|
|
background: transparent;
|
||
|
|
border-top: 1px solid var(--bs-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-preview {
|
||
|
|
background-color: var(--bs-body-bg);
|
||
|
|
border: 1px solid var(--bs-border-color);
|
||
|
|
border-radius: 0.375rem;
|
||
|
|
padding: 1rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-icon {
|
||
|
|
font-size: 2rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-category {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-category h2 {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
border-bottom: 2px solid var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn:hover {
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn.copied {
|
||
|
|
color: var(--bs-success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-section {
|
||
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #6a8eff 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 3rem 0;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
@endpush
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="hero-section text-center">
|
||
|
|
<h1 class="display-4 fw-bold mb-3">JSON Templates</h1>
|
||
|
|
<p class="lead mb-4">Common JSON formats and examples for various use cases</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="template-category">
|
||
|
|
<h2 class="h4">API Responses</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-cloud-arrow-down template-icon"></i>
|
||
|
|
<h3 class="h5">REST API Response</h3>
|
||
|
|
<p class="text-muted">Standard REST API response with status, data, and pagination</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"status": "success",
|
||
|
|
"code": 200,
|
||
|
|
"message": "Data retrieved successfully",
|
||
|
|
"data": {
|
||
|
|
"items": [
|
||
|
|
{
|
||
|
|
"id": 1,
|
||
|
|
"name": "Item 1",
|
||
|
|
"description": "Description of item 1"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": 2,
|
||
|
|
"name": "Item 2",
|
||
|
|
"description": "Description of item 2"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"pagination": {
|
||
|
|
"total": 100,
|
||
|
|
"per_page": 10,
|
||
|
|
"current_page": 1,
|
||
|
|
"last_page": 10
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="rest-api">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-graph-up template-icon"></i>
|
||
|
|
<h3 class="h5">GraphQL Response</h3>
|
||
|
|
<p class="text-muted">GraphQL API response with nested data structure</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"data": {
|
||
|
|
"user": {
|
||
|
|
"id": "1",
|
||
|
|
"name": "John Doe",
|
||
|
|
"email": "john@example.com",
|
||
|
|
"posts": [
|
||
|
|
{
|
||
|
|
"id": "101",
|
||
|
|
"title": "First Post",
|
||
|
|
"content": "Content of the first post",
|
||
|
|
"comments": [
|
||
|
|
{
|
||
|
|
"id": "1001",
|
||
|
|
"text": "Great post!",
|
||
|
|
"author": {
|
||
|
|
"id": "2",
|
||
|
|
"name": "Jane Smith"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="graphql">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="template-category">
|
||
|
|
<h2 class="h4">Configuration Files</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-gear template-icon"></i>
|
||
|
|
<h3 class="h5">Application Config</h3>
|
||
|
|
<p class="text-muted">Common application configuration settings</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"app": {
|
||
|
|
"name": "My Application",
|
||
|
|
"version": "1.0.0",
|
||
|
|
"environment": "production",
|
||
|
|
"debug": false
|
||
|
|
},
|
||
|
|
"database": {
|
||
|
|
"host": "localhost",
|
||
|
|
"port": 3306,
|
||
|
|
"name": "mydb",
|
||
|
|
"username": "user",
|
||
|
|
"password": "secret"
|
||
|
|
},
|
||
|
|
"logging": {
|
||
|
|
"level": "info",
|
||
|
|
"file": "app.log",
|
||
|
|
"max_size": "10MB"
|
||
|
|
},
|
||
|
|
"api": {
|
||
|
|
"base_url": "https://api.example.com",
|
||
|
|
"timeout": 30,
|
||
|
|
"retry_attempts": 3
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="app-config">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-box template-icon"></i>
|
||
|
|
<h3 class="h5">Package.json</h3>
|
||
|
|
<p class="text-muted">Node.js package configuration</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"name": "my-package",
|
||
|
|
"version": "1.0.0",
|
||
|
|
"description": "A sample Node.js package",
|
||
|
|
"main": "index.js",
|
||
|
|
"scripts": {
|
||
|
|
"start": "node index.js",
|
||
|
|
"test": "jest",
|
||
|
|
"build": "webpack"
|
||
|
|
},
|
||
|
|
"dependencies": {
|
||
|
|
"express": "^4.17.1",
|
||
|
|
"lodash": "^4.17.21"
|
||
|
|
},
|
||
|
|
"devDependencies": {
|
||
|
|
"jest": "^27.0.6",
|
||
|
|
"webpack": "^5.50.0"
|
||
|
|
},
|
||
|
|
"author": "John Doe",
|
||
|
|
"license": "MIT"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="package-json">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="template-category">
|
||
|
|
<h2 class="h4">Data Structures</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-person template-icon"></i>
|
||
|
|
<h3 class="h5">User Profile</h3>
|
||
|
|
<p class="text-muted">User profile data structure</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"id": "user123",
|
||
|
|
"username": "johndoe",
|
||
|
|
"email": "john@example.com",
|
||
|
|
"profile": {
|
||
|
|
"firstName": "John",
|
||
|
|
"lastName": "Doe",
|
||
|
|
"age": 30,
|
||
|
|
"gender": "male",
|
||
|
|
"location": {
|
||
|
|
"country": "USA",
|
||
|
|
"city": "New York"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"preferences": {
|
||
|
|
"theme": "dark",
|
||
|
|
"notifications": true,
|
||
|
|
"language": "en"
|
||
|
|
},
|
||
|
|
"createdAt": "2023-01-01T00:00:00Z",
|
||
|
|
"lastLogin": "2023-06-15T14:30:00Z"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="user-profile">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 mb-4">
|
||
|
|
<div class="card template-card">
|
||
|
|
<div class="card-body">
|
||
|
|
<i class="bi bi-cart template-icon"></i>
|
||
|
|
<h3 class="h5">E-commerce Order</h3>
|
||
|
|
<p class="text-muted">E-commerce order data structure</p>
|
||
|
|
<div class="template-preview">
|
||
|
|
<pre><code>{
|
||
|
|
"orderId": "ORD-2023-001",
|
||
|
|
"customer": {
|
||
|
|
"id": "CUST-001",
|
||
|
|
"name": "John Doe",
|
||
|
|
"email": "john@example.com",
|
||
|
|
"shippingAddress": {
|
||
|
|
"street": "123 Main St",
|
||
|
|
"city": "New York",
|
||
|
|
"state": "NY",
|
||
|
|
"zipCode": "10001",
|
||
|
|
"country": "USA"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"items": [
|
||
|
|
{
|
||
|
|
"productId": "PROD-001",
|
||
|
|
"name": "Product 1",
|
||
|
|
"quantity": 2,
|
||
|
|
"price": 29.99,
|
||
|
|
"total": 59.98
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"productId": "PROD-002",
|
||
|
|
"name": "Product 2",
|
||
|
|
"quantity": 1,
|
||
|
|
"price": 49.99,
|
||
|
|
"total": 49.99
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"subtotal": 109.97,
|
||
|
|
"tax": 10.99,
|
||
|
|
"shipping": 5.99,
|
||
|
|
"total": 126.95,
|
||
|
|
"status": "processing",
|
||
|
|
"createdAt": "2023-06-15T10:30:00Z"
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<button class="btn btn-link copy-btn" data-template="ecommerce-order">
|
||
|
|
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@push('scripts')
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const copyButtons = document.querySelectorAll('.copy-btn');
|
||
|
|
|
||
|
|
copyButtons.forEach(button => {
|
||
|
|
button.addEventListener('click', function() {
|
||
|
|
const template = this.getAttribute('data-template');
|
||
|
|
const templateContent = this.closest('.card').querySelector('pre code').textContent;
|
||
|
|
|
||
|
|
navigator.clipboard.writeText(templateContent).then(() => {
|
||
|
|
const originalText = this.innerHTML;
|
||
|
|
this.innerHTML = '<i class="bi bi-check2 me-2"></i>Copied!';
|
||
|
|
this.classList.add('copied');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.innerHTML = originalText;
|
||
|
|
this.classList.remove('copied');
|
||
|
|
}, 2000);
|
||
|
|
}).catch(err => {
|
||
|
|
console.error('Failed to copy text: ', err);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
@endpush
|