Tilo15
/
Spry


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

/**
 * CardComponent: A wrapper component that accepts content via spry-content.
 *
 * The <spry-content/> tag acts as a placeholder where parent components
 * can inject their own content. When a parent uses:
 *
 *   <spry-component name="CardComponent" sid="my-card">
 *     ...content here...
 *   </spry-component>
 *
 * The nested content replaces the <spry-content/> tag in the rendered output.
 */
class CardComponent : Component {
    public override string markup { get {
        return """
        <div class="card" style="border: 2px solid #3b82f6; border-radius: 8px; padding: 20px; margin: 16px 0; background-color: #f8fafc;">
            <spry-content/>
        </div>
        """;
    }}
}

/**
 * AlertComponent: Another wrapper component styled for warnings/info.
 *
 * This demonstrates that spry-content can be used in multiple components
 * with different styling. The content injection works the same way -
 * whatever is nested inside the spry-component tag gets placed where
 * <spry-content/> appears.
 */
class AlertComponent : Component {
    public override string markup { get {
        return """
        <div class="alert" style="border-left: 4px solid #f59e0b; background-color: #fffbeb; padding: 16px; margin: 16px 0; border-radius: 4px;">
            <spry-content/>
        </div>
        """;
    }}
}

/**
 * PageComponent: The main page layout that uses CardComponent and AlertComponent.
 *
 * This component demonstrates content injection by nesting different content
 * inside each wrapper component. The nested HTML (headings, paragraphs, etc.)
 * will be injected where <spry-content/> appears in each child component.
 */
class PageComponent : Component {
    public override string markup { get {
        return """
        <!DOCTYPE html>
        <html>
        <head>
            <title>Content Injection Example</title>
            <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
            <style>
                body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
                h1 { color: #1e293b; }
            </style>
        </head>
        <body>
            <h1>Spry Content Injection Example</h1>
            <p>This page demonstrates the <code>spry-content</code> tag for injecting content into child components.</p>

            <!-- Card with welcome content -->
            <spry-component name="CardComponent" sid="welcome-card">
                <h2 style="margin-top: 0; color: #1e40af;">Welcome!</h2>
                <p>This content is injected into the CardComponent. The blue border and padding come from the component's styling.</p>
                <p>Any HTML can be placed here - forms, images, other components, etc.</p>
            </spry-component>

            <!-- Alert with info message -->
            <spry-component name="AlertComponent" sid="info-alert">
                <span><strong>Notice:</strong> This is an informational alert. The yellow styling and left border come from AlertComponent.</span>
            </spry-component>

            <!-- Another card with different content -->
            <spry-component name="CardComponent" sid="features-card">
                <h2 style="margin-top: 0; color: #1e40af;">Features</h2>
                <ul>
                    <li>Components can be reused with different content</li>
                    <li>Styling is encapsulated in the wrapper component</li>
                    <li>Content is flexible and parent-controlled</li>
                </ul>
            </spry-component>

            <!-- Alert with warning -->
            <spry-component name="AlertComponent" sid="warning-alert">
                <span><strong>Warning:</strong> This demonstrates another use of AlertComponent with completely different content.</span>
            </spry-component>
        </body>
        </html>
        """;
    }}
}

/**
 * HomePageEndpoint: Serves the PageComponent.
 */
class HomePageEndpoint : Object, Endpoint {

    private PageComponent page_component = inject<PageComponent>();

    public async Astralis.HttpResult handle_request(Astralis.HttpContext http_context, Astralis.RouteContext route_context) throws Error {
        return yield page_component.to_result();
    }
}


void main(string[] args) {
    int port = args.length > 1 ? int.parse(args[1]) : 8080;

    try {
        var application = new WebApplication(port);

        application.use_compression();

        application.add_module<SpryModule>();

        application.add_transient<CardComponent>();
        application.add_transient<AlertComponent>();
        application.add_transient<PageComponent>();

        application.add_endpoint<HomePageEndpoint>(new EndpointRoute("/"));

        application.run();

    } catch (Error e) {
        printerr("Error: %s\n", e.message);
        Process.exit(1);
    }
}