Spry/website/Pages/EcosystemPage.vala

using Astralis;
using Invercargill;
using Invercargill.DataStructures;
using Inversion;
using Spry;

/**
 * EcosystemPage - Overview of the framework ecosystem
 * 
 * Showcases Astralis, Inversion, and Spry working together
 */
public class EcosystemPage : PageComponent {
    
    public const string ROUTE = "/ecosystem";
    
    public override string markup { get {
        return """
        <div sid="ecosystem-page" class="section">
            <div class="container">
                <!-- Header -->
                <div class="section-header">
                    <h1>The Ecosystem</h1>
                    <p>Three powerful libraries working together to make web development in Vala a joy</p>
                </div>

                <!-- Ecosystem Overview -->
                <div class="ecosystem-grid">
                    <!-- Astralis -->
                    <div class="ecosystem-card astralis">
                        <h3>
                            <div class="ecosystem-logo">A</div>
                            Astralis
                        </h3>
                        <p>The high-performance web server foundation. Astralis provides the HTTP server, routing, compression, and static file serving that powers Spry applications.</p>
                        
                        <div style="margin-top: var(--space-4);">
                            <span class="tag">HTTP Server</span>
                            <span class="tag">Routing</span>
                            <span class="tag">Compression</span>
                            <span class="tag">Fast Resources</span>
                            <span class="tag">Middleware</span>
                        </div>
                        
                        <div class="code-block" style="margin-top: var(--space-6);">
                            <div class="code-header">
                                <div class="code-dots">
                                    <div class="code-dot red"></div>
                                    <div class="code-dot yellow"></div>
                                    <div class="code-dot green"></div>
                                </div>
                                <span class="code-lang">Vala</span>
                            </div>
                            <pre><code>var app = new WebApplication(8080);
app.use_compression();
app.add_endpoint<MyEndpoint>(
    new EndpointRoute("/api")
);
app.run();</code></pre>
                        </div>
                    </div>

                    <!-- Inversion -->
                    <div class="ecosystem-card inversion">
                        <h3>
                            <div class="ecosystem-logo">I</div>
                            Inversion
                        </h3>
                        <p>A lightweight dependency injection container. Inversion manages your services, stores, and component lifecycles with elegant IoC patterns.</p>
                        
                        <div style="margin-top: var(--space-4);">
                            <span class="tag">IoC Container</span>
                            <span class="tag">DI</span>
                            <span class="tag">Lifecycles</span>
                            <span class="tag">Factories</span>
                            <span class="tag">Modules</span>
                        </div>
                        
                        <div class="code-block" style="margin-top: var(--space-6);">
                            <div class="code-header">
                                <div class="code-dots">
                                    <div class="code-dot red"></div>
                                    <div class="code-dot yellow"></div>
                                    <div class="code-dot green"></div>
                                </div>
                                <span class="code-lang">Vala</span>
                            </div>
                            <pre><code>// Register services
container.add_singleton<Database>();
container.add_scoped<UserSession>();
container.add_transient<EmailService>();

// Inject anywhere
var db = inject<Database>();</code></pre>
                        </div>
                    </div>

                    <!-- Spry -->
                    <div class="ecosystem-card spry">
                        <h3>
                            <div class="ecosystem-logo">S</div>
                            Spry
                        </h3>
                        <p>The component-based web framework. Spry brings reactive templates, HTMX integration, and a delightful developer experience to Vala web development.</p>
                        
                        <div style="margin-top: var(--space-4);">
                            <span class="tag">Components</span>
                            <span class="tag">HTMX</span>
                            <span class="tag">Templates</span>
                            <span class="tag">Outlets</span>
                            <span class="tag">Actions</span>
                        </div>
                        
                        <div class="code-block" style="margin-top: var(--space-6);">
                            <div class="code-header">
                                <div class="code-dots">
                                    <div class="code-dot red"></div>
                                    <div class="code-dot yellow"></div>
                                    <div class="code-dot green"></div>
                                </div>
                                <span class="code-lang">Vala</span>
                            </div>
                            <pre><code>class MyComponent : Component {
    public override string markup {
        owned get {
            return "<div sid='root'>
                <button spry-action=':Click'>
                    Click me!
                </button>
            </div>";
        }
    }
}</code></pre>
                        </div>
                    </div>
                </div>

                <!-- How They Work Together -->
                <section class="demo-section" style="margin-top: var(--space-12);">
                    <h2>🔗 How They Work Together</h2>
                    <p>The three libraries form a complete stack for building web applications:</p>
                    
                    <div class="features-grid" style="margin-top: var(--space-6);">
                        <div class="feature-card">
                            <div class="feature-icon blue">1</div>
                            <h3>Astralis Handles HTTP</h3>
                            <p>Receives requests, routes them to the right handler, and sends responses with compression.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">2</div>
                            <h3>Inversion Manages Dependencies</h3>
                            <p>Creates and injects services, stores, and components with the right lifecycle.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon purple">3</div>
                            <h3>Spry Renders UI</h3>
                            <p>Components handle requests, render templates, and respond with HTML for HTMX.</p>
                        </div>
                    </div>
                </section>

                <!-- Architecture Diagram -->
                <section class="demo-section" style="margin-top: var(--space-8);">
                    <h2>🏗 Architecture Overview</h2>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot red"></div>
                                <div class="code-dot yellow"></div>
                                <div class="code-dot green"></div>
                            </div>
                            <span class="code-lang">Request Flow</span>
                        </div>
                        <pre><code>┌─────────────────────────────────────────────────────────────┐
│                        Browser                               │
│                     (HTMX + HTML)                            │
└─────────────────────────┬───────────────────────────────────┘
                          │ HTTP Request
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                      Astralis                                │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   Server    │→ │   Router    │→ │ Compression │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────┬───────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                      Inversion                               │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Container  │→ │  Factories  │→ │   Scopes    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│           ↓ inject() into components                        │
└─────────────────────────┬───────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                        Spry                                  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ Components  │→ │  Templates  │→ │   Actions   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│           ↓ HTML Response with HTMX attributes              │
└─────────────────────────────────────────────────────────────┘</code></pre>
                    </div>
                </section>

                <!-- CTA -->
                <div class="text-center" style="margin-top: var(--space-12);">
                    <h2>Experience the Power</h2>
                    <p style="margin-bottom: var(--space-6);">See the ecosystem in action with our interactive demo.</p>
                    <div class="hero-actions" style="justify-content: center;">
                        <a href="/demo" class="btn btn-primary">Try Live Demo</a>
                        <a href="/features" class="btn btn-secondary">View Features</a>
                    </div>
                </div>
            </div>
        </div>
        """;
    }}
}