michael/michaelschiemer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Production): Complete production deployment infrastructure

Browse Source 
- 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.
This commit is contained in:
Michael Schiemer
2025-10-25 19:18:37 +02:00
parent caa85db796
commit fc3d7e6357
83016 changed files with 378904 additions and 20919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/views/components/simple-form.view.php Normal file
View File

@@ -0,0 +1,18 @@
<div class="simple-form-wrapper" data-live-component="{{component_id}}">
<div class="alert alert-success" role="alert" if="success_message">
{{success_message}}
</div>
<div class="alert alert-error" role="alert" if="errors">
<ul>
<for items="errors" as="error">
<li>{{error}}</li>
</for>
</ul>
</div>
<!-- Form wird hier per RequestFormGenerator eingefügt -->
<div id="form-container-{{component_id}}">
<!-- Placeholder - wird vom Controller gefüllt -->
</div>
</div>

208
resources/views/test/livecomponents.view.php Normal file
View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiveComponents Test</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
background: #f5f5f5;
margin: 0;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
margin: 0 0 0.5rem 0;
color: #333;
}
.header p {
margin: 0;
color: #666;
}
.test-section {
background: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.test-section h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 0.5rem;
}
.feature-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.feature-list li {
padding: 0.5rem 0;
display: flex;
align-items: center;
}
.feature-list li:before {
content: "";
color: #28a745;
font-weight: bold;
margin-right: 0.5rem;
}
.code-example {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
border-left: 4px solid #007bff;
margin: 1rem 0;
font-family: monospace;
font-size: 0.875rem;
}
.instructions {
background: #e3f2fd;
border: 1px solid #2196f3;
border-radius: 4px;
padding: 1rem;
margin: 1rem 0;
}
.instructions h3 {
margin-top: 0;
color: #1976d2;
}
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
}
.status-success {
background: #d4edda;
color: #155724;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>><EFBFBD> LiveComponents Test Suite</h1>
<p>Zero-Dependency Interactive Components</p>
<span class="status status-success">System Active</span>
</div>
<div class="test-section">
<h2>=<EFBFBD> Test Component: Counter</h2>
<div class="instructions">
<h3>Test Instructions:</h3>
<ul>
<li>Click <strong>+ Increment</strong> to increase counter</li>
<li>Click <strong>- Decrement</strong> to decrease counter</li>
<li>Click <strong>Reset</strong> to set counter to 0</li>
<li>Enter a number and click <strong>Add Amount</strong> to add custom value</li>
<li>Watch for auto-polling updates every 10 seconds</li>
</ul>
</div>
{!! counter.toHtml() !!}
<div style="margin-top: 2rem;">
<h3>Features Demonstrated:</h3>
<ul class="feature-list">
<li>Action Handling (increment, decrement, reset)</li>
<li>Form Submission (addAmount with parameter)</li>
<li>State Management (count, last_update)</li>
<li>Polling (auto-updates every 10 seconds)</li>
<li>DOM Updates (live HTML replacement)</li>
</ul>
</div>
<div class="code-example">
<strong>Component ID:</strong> {!! counter.getId() !!}<br>
<strong>Template:</strong> Framework/LiveComponents/Templates/counter.view.php<br>
<strong>Class:</strong> App\Application\Components\CounterComponent
</div>
</div>
<div class="test-section">
<h2>=<EFBFBD> Technical Details</h2>
<h3>Architecture:</h3>
<div class="code-example">
final readonly class CounterComponent implements LiveComponentContract, Pollable
{
use LiveComponentTrait;
public function render(): string { /* ... */ }
public function increment(): array { /* ... */ }
public function poll(): array { /* ... */ }
}
</div>
<h3>Routes:</h3>
<ul class="feature-list">
<li>POST /live-component/{id} - Action Handler</li>
<li>POST /live-component/{id}/upload - Upload Handler</li>
<li>GET /test/livecomponents - This page</li>
</ul>
<h3>JavaScript:</h3>
<ul class="feature-list">
<li>/public/js/live-components.js (~3KB)</li>
<li>/public/js/sse-client.js (~2KB)</li>
<li>Zero external dependencies</li>
</ul>
</div>
<div class="test-section">
<h2>=<EFBFBD> Browser Console</h2>
<p>Open your browser's Developer Console (F12) to see:</p>
<ul class="feature-list">
<li>Component initialization logs</li>
<li>Action execution traces</li>
<li>Polling activity</li>
<li>State updates</li>
</ul>
</div>
</div>
<!-- LiveComponents JavaScript -->
<script src="/js/live-components.js"></script>
<script src="/js/sse-client.js"></script>
<script>
// Log component initialization
console.log('LiveComponents Test Suite Loaded');
console.log('Available:', {
liveComponents: window.liveComponents,
sseManager: window.sseManager
});
// Custom event listener example
document.addEventListener('component:updated', (e) => {
console.log('Component updated:', e.detail);
});
</script>
</body>
</html>

264
resources/views/x-component-demo.view.php Normal file
View File

@@ -0,0 +1,264 @@
<!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>&lt;x-*&gt;</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>&lt;x-counter id="demo-counter" initialValue="0" /&gt;</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>&lt;x-datatable id="users-table" page="1" pageSize="10" /&gt;</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>&lt;x-search id="main-search" placeholder="Search..." /&gt;</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>&lt;x-button variant="primary"&gt;Primary Button&lt;/x-button&gt;</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>&lt;x-badge variant="success"&gt;Active&lt;/x-badge&gt;</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>&lt;x-card title="User Profile"&gt;...&lt;/x-card&gt;</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>&lt;x-card title="User Statistics"&gt;
&lt;p&gt;Current users online:&lt;/p&gt;
&lt;x-counter id="online-users" initialValue="42" /&gt;
&lt;x-button variant="primary"&gt;Refresh Stats&lt;/x-button&gt;
&lt;x-button variant="secondary"&gt;Export Data&lt;/x-button&gt;
&lt;/x-card&gt;</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>&lt;x-name id="..." /&gt;</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>&lt;x-name&gt;content&lt;/x-name&gt;</code></td>
<td style="padding: 0.5rem; border: 1px solid #dee2e6;">Static HTML (buttons, badges, cards)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>