1---
2import Layout from "../components/Layout.astro";
3---
4
5<Layout title="Counter">
6 <h1 id="title">Counter</h1>
7 <p id="mode">static</p>
8 <!-- Client-side island: the HTML is prerendered with a "not hydrated"
9 marker; the bundled <script> (a real client asset produced by the
10 build) flips it and wires up the button. Proves client JS is served
11 and executes from the static deploy. -->
12 <p id="hydrated">no</p>
13 <p id="count">0</p>
14 <button id="increment" type="button">Increment</button>
15 <script>
16 const count = document.getElementById("count")!;
17 const hydrated = document.getElementById("hydrated")!;
18 let value = 0;
19 document.getElementById("increment")!.addEventListener("click", () => {
20 value += 1;
21 count.textContent = String(value);
22 });
23 hydrated.textContent = "yes";
24 </script>
25</Layout>