Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
265 lines
9.8 KiB
PHP
265 lines
9.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>X-Component Syntax Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
background: #f5f5f5;
|
|
}
|
|
.demo-section {
|
|
background: white;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.demo-section h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.component-example {
|
|
border: 1px solid #dee2e6;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
}
|
|
.component-example h3 {
|
|
margin-top: 0;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
code {
|
|
background: #e9ecef;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
.badge-live { background: #d4edda; color: #155724; }
|
|
.badge-html { background: #cce5ff; color: #004085; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 X-Component Syntax Demo</h1>
|
|
<p>
|
|
This page demonstrates the <strong>unified <code><x-*></code> syntax</strong> that works with
|
|
both LiveComponents (interactive) and HTML Components (static).
|
|
</p>
|
|
|
|
<!-- LiveComponents Section -->
|
|
<div class="demo-section">
|
|
<h2>
|
|
<span class="badge badge-live">LiveComponents</span>
|
|
Interactive & Stateful
|
|
</h2>
|
|
<p>
|
|
LiveComponents are <strong>interactive</strong> and maintain <strong>state</strong>.
|
|
They support actions, real-time updates, and server-sent events.
|
|
</p>
|
|
|
|
<div class="demo-grid">
|
|
<!-- Counter Component -->
|
|
<div class="component-example">
|
|
<h3>Counter Component</h3>
|
|
<p>Simple counter with increment/decrement actions.</p>
|
|
<x-counter id="demo-counter" initialValue="0" />
|
|
<br>
|
|
<code><x-counter id="demo-counter" initialValue="0" /></code>
|
|
</div>
|
|
|
|
<!-- DataTable Component -->
|
|
<div class="component-example">
|
|
<h3>DataTable Component</h3>
|
|
<p>Interactive data table with pagination and sorting.</p>
|
|
<x-datatable id="users-table" page="1" pageSize="10" />
|
|
<br>
|
|
<code><x-datatable id="users-table" page="1" pageSize="10" /></code>
|
|
</div>
|
|
|
|
<!-- Search Component -->
|
|
<div class="component-example">
|
|
<h3>Search Component</h3>
|
|
<p>Live search with debouncing and results.</p>
|
|
<x-search id="main-search" placeholder="Search..." />
|
|
<br>
|
|
<code><x-search id="main-search" placeholder="Search..." /></code>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Type Coercion Examples</h3>
|
|
<p>LiveComponents automatically convert attribute values to proper types:</p>
|
|
<ul>
|
|
<li><code>page="1"</code> → <code>int: 1</code></li>
|
|
<li><code>enabled="true"</code> → <code>bool: true</code></li>
|
|
<li><code>filters='["active"]'</code> → <code>array: ["active"]</code></li>
|
|
<li><code>config='{"limit":10}'</code> → <code>object: {limit: 10}</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- HTML Components Section -->
|
|
<div class="demo-section">
|
|
<h2>
|
|
<span class="badge badge-html">HTML Components</span>
|
|
Static & Fast
|
|
</h2>
|
|
<p>
|
|
HTML Components are <strong>stateless</strong> and render to <strong>static HTML</strong>.
|
|
Perfect for simple UI elements like buttons, badges, and cards.
|
|
</p>
|
|
|
|
<div class="demo-grid">
|
|
<!-- Button Component -->
|
|
<div class="component-example">
|
|
<h3>Button Component</h3>
|
|
<p>Styled buttons with variants.</p>
|
|
<x-button variant="primary">Primary Button</x-button>
|
|
<x-button variant="secondary">Secondary</x-button>
|
|
<x-button variant="danger">Danger</x-button>
|
|
<br><br>
|
|
<code><x-button variant="primary">Primary Button</x-button></code>
|
|
</div>
|
|
|
|
<!-- Badge Component -->
|
|
<div class="component-example">
|
|
<h3>Badge Component</h3>
|
|
<p>Small status indicators.</p>
|
|
<x-badge variant="success">Active</x-badge>
|
|
<x-badge variant="warning">Pending</x-badge>
|
|
<x-badge variant="danger">Error</x-badge>
|
|
<br><br>
|
|
<code><x-badge variant="success">Active</x-badge></code>
|
|
</div>
|
|
|
|
<!-- Card Component -->
|
|
<div class="component-example">
|
|
<h3>Card Component</h3>
|
|
<p>Content containers.</p>
|
|
<x-card title="User Profile">
|
|
This is a card with a title and content.
|
|
</x-card>
|
|
<br>
|
|
<code><x-card title="User Profile">...</x-card></code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mixed Usage Section -->
|
|
<div class="demo-section">
|
|
<h2>🔗 Mixed Usage</h2>
|
|
<p>
|
|
You can <strong>combine both types</strong> in the same template!
|
|
The XComponentProcessor automatically detects which type to use.
|
|
</p>
|
|
|
|
<div class="component-example">
|
|
<h3>Real-World Example</h3>
|
|
<p>A typical dashboard widget combining static and interactive components:</p>
|
|
|
|
<x-card title="User Statistics">
|
|
<p>Current users online:</p>
|
|
<x-counter id="online-users" initialValue="42" />
|
|
|
|
<br><br>
|
|
|
|
<x-button variant="primary">Refresh Stats</x-button>
|
|
<x-button variant="secondary">Export Data</x-button>
|
|
</x-card>
|
|
|
|
<br>
|
|
<pre><code><x-card title="User Statistics">
|
|
<p>Current users online:</p>
|
|
<x-counter id="online-users" initialValue="42" />
|
|
|
|
<x-button variant="primary">Refresh Stats</x-button>
|
|
<x-button variant="secondary">Export Data</x-button>
|
|
</x-card></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits Section -->
|
|
<div class="demo-section">
|
|
<h2>✨ Benefits</h2>
|
|
<div class="demo-grid">
|
|
<div>
|
|
<h3>🚀 Modern Syntax</h3>
|
|
<p>Clean, Laravel/Tempest-inspired syntax that's familiar to modern developers.</p>
|
|
</div>
|
|
<div>
|
|
<h3>🔄 Auto-Detection</h3>
|
|
<p>Automatically determines if component is LiveComponent or HTML Component.</p>
|
|
</div>
|
|
<div>
|
|
<h3>⚡ Type Safety</h3>
|
|
<p>Automatic type coercion and prop validation for LiveComponents.</p>
|
|
</div>
|
|
<div>
|
|
<h3>🎯 Single Syntax</h3>
|
|
<p>One syntax for both stateful and stateless components.</p>
|
|
</div>
|
|
<div>
|
|
<h3>🛡️ Error Handling</h3>
|
|
<p>Helpful error messages in development, graceful failures in production.</p>
|
|
</div>
|
|
<div>
|
|
<h3>📝 IDE Support</h3>
|
|
<p>Easy to autocomplete and syntax highlight in modern editors.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation Section -->
|
|
<div class="demo-section">
|
|
<h2>📚 Documentation</h2>
|
|
<p>
|
|
For complete documentation, see
|
|
<code>docs/claude/x-component-syntax.md</code>
|
|
</p>
|
|
|
|
<h3>Quick Reference</h3>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="background: #f8f9fa;">
|
|
<th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Component Type</th>
|
|
<th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Syntax</th>
|
|
<th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Use Case</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">LiveComponent</td>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code><x-name id="..." /></code></td>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Interactive UI (datatables, forms, counters)</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">HTML Component</td>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code><x-name>content</x-name></code></td>
|
|
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Static HTML (buttons, badges, cards)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|