dunkirk.sh
the best lightweight web dev stack built on bun
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Tacy Stack</title>
7 <link
8 rel="icon"
9 href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🥞</text></svg>"
10 />
11 <link rel="stylesheet" href="../styles/main.css" />
12 <link rel="stylesheet" href="../styles/index.css" />
13 </head>
14
15 <body>
16 <header>
17 <div class="header-content">
18 <a href="/" class="site-title"> 🥞 Tacy Stack </a>
19 <auth-component></auth-component>
20 </div>
21 </header>
22
23 <main>
24 <h1 class="hero-title">Tacy Stack</h1>
25 <p class="hero-subtitle">
26 The best way to build detailed web apps on top of Bun
27 </p>
28
29 <counter-component count="0"></counter-component>
30
31 <h2>Features</h2>
32 <p>
33 Passkey authentication, user-specific data persistence, reactive UI with
34 Lit web components, fast development with Bun and hot module reloading,
35 type-safe database queries with Drizzle ORM, and a clean, minimal design
36 system.
37 </p>
38 </main>
39
40 <script type="module" src="../components/auth.ts"></script>
41 <script type="module" src="../components/counter.ts"></script>
42 <script type="module">
43 // Load user's counter value and set disabled state
44 async function loadCounter() {
45 try {
46 const authResponse = await fetch("/api/auth/me");
47 const counter = document.querySelector("counter-component");
48
49 if (authResponse.ok) {
50 // User is logged in, load their counter
51 const response = await fetch("/api/counter");
52 if (response.ok) {
53 const data = await response.json();
54 if (counter) {
55 counter.count = data.count;
56 counter.disabled = false;
57 }
58 }
59 } else {
60 // User not logged in, disable counter
61 if (counter) {
62 counter.disabled = true;
63 counter.count = 0;
64 }
65 }
66 } catch (error) {
67 console.error("Failed to load counter:", error);
68 const counter = document.querySelector("counter-component");
69 if (counter) {
70 counter.disabled = true;
71 }
72 }
73 }
74
75 loadCounter();
76 </script>
77 </body>
78</html>