build/consts_hello_world.qtpl

{%- func helloWorldExample(data *ConstTemplateData) -%}

    {%s= helloWorldExampleSource(data, "@get('/hello-world')") %}

{%- endfunc -%}


{%- func helloWorldExamplePHP(data *ConstTemplateData) -%}

    {%s= helloWorldExampleSource(data, "@get('/hello-world.php')") %}

{%- endfunc -%}


{%- func helloWorldExampleSource(data *ConstTemplateData, action string) -%}

<!-- {%s data.DoNotEdit %} -->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Datastar SDK Demo</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v{%s data.Version %}/bundles/datastar.js"></script>
</head>
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
    <div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
        <div class="flex justify-between items-center">
            <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">
                Datastar SDK Demo
            </h1>
            <img src="https://data-star.dev/static/images/rocket.png" alt="Rocket" width="64" height="64"/>
        </div>
        <p class="mt-2">
            SSE events will be streamed from the backend to the frontend.
        </p>
        <div class="space-x-2">
            <label for="delay">
                Delay in milliseconds
            </label>
            <input data-bind-delay id="delay" type="number" step="100" min="0" class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" />
        </div>
        <button data-on-click="{%s action %}" class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer">
            Start
        </button>
    </div>
    <div class="my-16 text-8xl font-bold text-transparent" style="background: linear-gradient(to right in oklch, red, orange, yellow, green, blue, blue, violet); background-clip: text">
        <div id="message">Hello, world!</div>
    </div>
</body>
</html>

{%- endfunc -%}