1---
2// Tailwind is wired through astro.config.ts (@tailwindcss/vite) — Alchemy
3// loads the project's own config natively, so the utilities below compile.
4import "../styles/global.css";
5import Card from "../components/Card.astro";
6
7// Server-rendered on every request inside the Neon Functions runtime.
8// Environment values declared in alchemy.run.ts are available on
9// `process.env`.
10const greeting = process.env.GREETING ?? "Hello!";
11const now = new Date().toISOString();
12---
13
14<html lang="en">
15 <head>
16 <meta charset="utf-8" />
17 <meta name="viewport" content="width=device-width, initial-scale=1" />
18 <title>Astro on Neon</title>
19 </head>
20 <body class="bg-slate-50 p-8 text-slate-900">
21 <h1 class="text-3xl font-bold">{greeting}</h1>
22 <Card
23 title="Styled with Tailwind CSS"
24 body="This card is an Astro component styled with Tailwind utilities."
25 />
26 <p class="mt-4 text-slate-600">
27 This page is server-rendered in a Neon Functions runtime at {now}.
28 </p>
29 <p class="mt-2">
30 <a href="/about/" class="text-blue-600 underline">A prerendered page</a>
31 </p>
32 <button type="button" id="counter">count: 0</button>
33 <button type="button" id="load-greeting">Load greeting</button>
34 <p role="status" id="response-greeting"></p>
35 <script>
36 let count = 0;
37 const counter = document.querySelector<HTMLButtonElement>("#counter")!;
38 counter.addEventListener("click", () => {
39 counter.textContent = `count: ${++count}`;
40 });
41 const result = document.querySelector<HTMLElement>("#response-greeting")!;
42 document.querySelector("#load-greeting")!.addEventListener("click", async () => {
43 try {
44 const response = await fetch("/api/hello?name=browser");
45 if (!response.ok) throw new Error(`HTTP ${response.status}`);
46 const body = (await response.json()) as { greeting: string };
47 result.textContent = body.greeting;
48 } catch {
49 result.textContent = "Could not load the greeting. Try again.";
50 }
51 });
52 </script>
53 </body>
54</html>