[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_324":325,"_326":327},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_242":-5,"_20":243,"_22":244,"_245":246,"_247":248,"_26":249,"_24":250,"_251":-5,"_252":-5,"_253":51,"_254":255,"_256":43,"_257":-5,"_258":-5,"_259":260},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","konnnitiha","name","magic-link-blog","branchName","main","version","path","README.md","project",{"_33":184,"_13":14,"_44":185,"_186":-5,"_187":51,"_188":189,"_190":189,"_191":192,"_193":-5,"_194":195,"_196":60,"_197":43,"_198":-5,"_199":-5,"_200":46,"_201":202,"_203":204,"_205":206,"_207":208,"_209":-5,"_210":211,"_212":211,"_213":214,"_215":214,"_216":214,"_217":211,"_218":211,"_219":220,"_221":222,"_223":224,"_225":51},"tree",[54,55,56,57],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","b52977e4-55af-4b36-8200-09227b5d3bcf","fileId","01a06fec-b7fb-75ad-bf57-3366e614e1ec","parentId","branchId","79a6d797-44aa-4fad-9b91-83dbcaaafebe","branchVersion",1,"latest",true,"createdAt",["D",1788584179632],0,"fileType","content","# Better Auth Starter\n\nMagic-link authentication for Val Town, powered by\n[Better Auth](https://better-auth.com). Click **Remix** and you have a working\nauth-protected app — no setup required.\n\nIt uses [Val Town SQLite](https://docs.val.town/std/sqlite/) for the\nuser/session database and [Val Town Email](https://docs.val.town/std/email/) to\nsend the magic links. **Sending magic links to anyone other than yourself\nrequires [Val Town Pro](https://www.val.town/pricing).**\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Browser -->|\"/api/auth/*\"| BA[\"Better Auth
handler\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|useSession| Client[\"auth-client.ts\"]\n Client -->|fetch| BA\n BA -->|reads/writes| SQLite[(\"std/sqlite\")]\n BA -->|sends magic link| Email[\"std/email\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono entrypoint; mounts Better Auth at /api/auth/*\nbackend/\n auth.ts ← Better Auth instance (server)\n schema.ts ← Creates the user/session/account/verification tables\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n lib/\n auth-client.ts ← Better Auth React client (useSession, signIn, signOut)\n components/\n App.tsx ← Root: shows or based on session\n SignIn.tsx ← Email form that calls signIn.magicLink\n Dashboard.tsx ← Signed-in view with sign-out button\n```\n\n## How auth works\n\n1. User enters their email and submits the form. The client calls\n `authClient.signIn.magicLink({ email })`, which `POST`s to\n `/api/auth/sign-in/magic-link`.\n2. Better Auth generates a token, stores it in the `verification` table, and\n calls our `sendMagicLink` callback in `backend/auth.ts`. The callback uses\n `std/email` to send the link.\n3. User clicks the link, which opens `/api/auth/magic-link/verify?token=…`.\n Better Auth validates the token, creates a row in `session`, sets a secure\n cookie, and redirects to `/`.\n4. Back in React, `useSession()` re-fetches `/api/auth/get-session`, the user\n object becomes available, and `` renders ``.\n\n## Adding more auth methods\n\nBetter Auth has a rich [plugin ecosystem](https://better-auth.com/docs/plugins).\nCommon next steps:\n\n- **Email + password** — flip `emailAndPassword.enabled` to `true` in\n `backend/auth.ts`. No plugin needed.\n- **Social login (Google, GitHub, …)** — add `socialProviders` to your auth\n config and store the client IDs/secrets as env vars. See the\n [social providers docs](https://better-auth.com/docs/concepts/social-providers).\n- **Passkeys, 2FA, organizations** — add the relevant plugin on the server and\n the matching client plugin in `frontend/lib/auth-client.ts`.\n\nAfter enabling new methods, you may need new database columns. See the\n[database concepts](https://better-auth.com/docs/concepts/database) page — for\nSQLite you'll add the columns directly to `backend/schema.ts`.\n\n## Production checklist\n\n- [ ] Set the **`BETTER_AUTH_SECRET`** env var to a random string from\n [`generate-random-signing-key.val.run`](https://generate-random-signing-key.val.run/).\n- [ ] Narrow `baseURL.allowedHosts` in `backend/auth.ts` to the exact hosts you\n serve from (e.g. `[\"myapp.com\", \"*.web.val.run\"]`).\n- [ ] Make sure your Val Town account is on [Pro](https://www.val.town/pricing)\n so emails can be sent to addresses other than your own.\n\n## Notes\n\n- The session cookie defaults to 7 days and refreshes itself.\n- Magic-link tokens expire after 5 minutes and are single-use by default.\n- Better Auth uses Kysely under the hood — Val Town's `std/sqlite` is already an\n `@libsql/client` Client, so we hand it straight to `LibsqlDialect`. Zero\n database setup.","deleted",false,"label",[19],{"_33":153,"_13":154,"_35":155,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":156,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":157,"_18":158},{"_33":72,"_13":73,"_35":74,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":75,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":77,"_18":78},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":69,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_66":70,"_18":71},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":63,"_47":64,"_48":65,"_50":51,"_52":14,"_66":67,"_18":68},"695151b4-ffc6-4b38-88c7-d053dc69ed71","index.ts","01a06fec-b7fb-75ad-bf57-34727cdd80e1",5,["D",1788584206446],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { auth } from \"./backend/auth.ts\";\nimport { ensureSchema } from \"./backend/schema.ts\";\nimport {\n createPost,\n deletePost,\n getPostBySlug,\n listPosts,\n updatePost,\n} from \"./backend/posts.ts\";\n\n// Create Better Auth's tables on first run. Idempotent (CREATE TABLE IF NOT EXISTS).\nawait ensureSchema();\n\nconst app = new Hono<{\n Variables: {\n user: typeof auth.$Infer.Session.user | null;\n session: typeof auth.$Infer.Session.session | null;\n };\n}>();\n\n// Mount Better Auth — handles /api/auth/sign-in/magic-link, /api/auth/get-session, etc.\napp.on([\"GET\", \"POST\"], \"/api/auth/*\", (c) => auth.handler(c.req.raw));\n\n// Make the session available to downstream routes via c.get(\"user\") / c.get(\"session\").\napp.use(\"*\", async (c, next) => {\n const session = await auth.api.getSession({ headers: c.req.raw.headers });\n c.set(\"user\", session?.user ?? null);\n c.set(\"session\", session?.session ?? null);\n await next();\n});\n\n// Example protected route — fetch from the frontend to get the current user.\napp.get(\"/api/me\", (c) => {\n const user = c.get(\"user\");\n if (!user) return c.json({ error: \"Not authenticated\" }, 401);\n return c.json({ user });\n});\n\n// --- Blog API -------------------------------------------------------------\n\n// Public: list all posts.\napp.get(\"/api/posts\", async (c) => {\n const posts = await listPosts();\n return c.json({ posts });\n});\n\n// Public: fetch a single post by slug.\napp.get(\"/api/posts/:slug\", async (c) => {\n const post = await getPostBySlug(c.req.param(\"slug\"));\n if (!post) return c.json({ error: \"Not found\" }, 404);\n return c.json({ post });\n});\n\nfunction requireUser(c: {\n get: (v: \"user\") => unknown;\n json: (body: object, status?: number) => Response;\n}) {\n const user = c.get(\"user\") as {\n id: string;\n email: string;\n name: string;\n } | null;\n if (!user) return null;\n return { id: user.id, name: user.name || user.email };\n}\n\n// Protected: create a post.\napp.post(\"/api/posts\", async (c) => {\n const me = requireUser(c);\n if (!me) return c.json({ error: \"Authentication required\" }, 401);\n\n const body = await c.req.json().catch(() => null);\n const title = (body?.title ?? \"\").toString().trim();\n const content = (body?.content ?? \"\").toString().trim();\n if (!title || !content) {\n return c.json({ error: \"title and content are required\" }, 400);\n }\n\n const post = await createPost({\n title,\n content,\n authorId: me.id,\n authorName: me.name,\n });\n return c.json({ post }, 201);\n});\n\n// Protected: update a post.\napp.put(\"/api/posts/:slug\", async (c) => {\n const me = requireUser(c);\n if (!me) return c.json({ error: \"Authentication required\" }, 401);\n\n const body = await c.req.json().catch(() => null);\n const title = (body?.title ?? \"\").toString().trim();\n const content = (body?.content ?? \"\").toString().trim();\n if (!title || !content) {\n return c.json({ error: \"title and content are required\" }, 400);\n }\n\n const post = await updatePost(c.req.param(\"slug\"), { title, content });\n if (!post) return c.json({ error: \"Not found\" }, 404);\n return c.json({ post });\n});\n\n// Protected: delete a post.\napp.delete(\"/api/posts/:slug\", async (c) => {\n const me = requireUser(c);\n if (!me) return c.json({ error: \"Authentication required\" }, 401);\n\n const ok = await deletePost(c.req.param(\"slug\"));\n if (!ok) return c.json({ error: \"Not found\" }, 404);\n return c.json({ ok: true });\n});\n\n// Serve the frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error so we get real stack traces.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[59],["D",1788584179632],[],[19],"c0038934-ea0e-4300-ad3e-804c4082a78e","frontend","01a06fec-b7fb-75ad-bf57-2c4cad9dcb25",["D",1788584179632],"directory",[79,80,81,82,83],[73],{"_33":130,"_13":131,"_35":132,"_37":74,"_38":39,"_40":41,"_42":43,"_44":133,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":134,"_18":135},{"_33":107,"_13":108,"_35":109,"_37":74,"_38":39,"_40":41,"_42":43,"_44":110,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":111,"_18":112},{"_33":100,"_13":101,"_35":102,"_37":74,"_38":39,"_40":41,"_42":43,"_44":103,"_17":46,"_47":24,"_48":104,"_50":51,"_52":-5,"_66":105,"_18":106},{"_33":92,"_13":93,"_35":94,"_37":74,"_38":39,"_40":95,"_42":43,"_44":96,"_17":41,"_47":24,"_48":97,"_50":51,"_52":-5,"_66":98,"_18":99},{"_33":84,"_13":85,"_35":86,"_37":74,"_38":39,"_40":41,"_42":43,"_44":87,"_17":46,"_47":88,"_48":89,"_50":51,"_52":-5,"_66":90,"_18":91},"8554961e-cf91-44e4-b4b5-9db0dfb7b56c","index.tsx","01a06fec-b7fb-75ad-bf57-28e84ed814d4",["D",1788584179632],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[73,85],"aafed451-e48c-49da-b5df-f3ab2a144eab","index.html","01a06fec-b7fb-75ad-bf57-2615e62e9ddf",8,["D",1788584331032],"\n\n \n \n \n My Blog\n \n \n \n \n

\n \n \n \n",[],[73,93],"311d1901-f05a-4ccc-a11a-4d2452a8a8b4","favicon.svg","01a06fec-b7fb-75ad-bf57-23d59d33d8d1",["D",1788584179632],"\n",[],[73,101],"8d84be30-b8aa-432f-b881-ba5f3376f20b","lib","01a06fec-b7fb-75ad-bf57-1e352179a53d",["D",1788584179632],[113,114],[73,108],{"_33":123,"_13":124,"_35":125,"_37":109,"_38":39,"_40":41,"_42":43,"_44":126,"_17":46,"_47":88,"_48":127,"_50":51,"_52":-5,"_66":128,"_18":129},{"_33":115,"_13":116,"_35":117,"_37":109,"_38":39,"_40":118,"_42":43,"_44":119,"_17":46,"_47":88,"_48":120,"_50":51,"_52":-5,"_66":121,"_18":122},"6b8f3ac7-a948-4f9f-91bb-437bd263600e","posts-api.ts","6e6c1f60-a8e6-11f1-96f4-1607ee4eb77e",6,["D",1788584307345],"export type Post = {\n id: string;\n title: string;\n slug: string;\n content: string;\n authorId: string;\n authorName: string;\n createdAt: number;\n updatedAt: number;\n};\n\nasync function handle(res: Response): Promise {\n if (!res.ok) {\n let msg = `Request failed (${res.status})`;\n try {\n const data = await res.json();\n msg = data?.error ?? msg;\n } catch {\n /* keep default */\n }\n throw new Error(msg);\n }\n return res.json() as Promise;\n}\n\nexport function fetchPosts(): Promise<{ posts: Post[] }> {\n return fetch(\"/api/posts\").then((r) => handle(r));\n}\n\nexport function fetchPost(slug: string): Promise<{ post: Post }> {\n return fetch(`/api/posts/${encodeURIComponent(slug)}`).then((r) => handle(r));\n}\n\nexport function createPostAPI(title: string, content: string): Promise<{ post: Post }> {\n return fetch(\"/api/posts\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, content }),\n }).then((r) => handle(r));\n}\n\nexport function updatePostAPI(\n slug: string,\n title: string,\n content: string,\n): Promise<{ post: Post }> {\n return fetch(`/api/posts/${encodeURIComponent(slug)}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, content }),\n }).then((r) => handle(r));\n}\n\nexport function deletePostAPI(slug: string): Promise<{ ok: boolean }> {\n return fetch(`/api/posts/${encodeURIComponent(slug)}`, {\n method: \"DELETE\",\n }).then((r) => handle(r));\n}\n",[],[73,108,116],"2a4190b7-a85d-48ee-b62f-a5a28d7ee901","auth-client.ts","01a06fec-b7fb-75ad-bf57-184f5fe0d830",["D",1788584179632],"import { createAuthClient } from \"https://esm.sh/better-auth@1.6.9/react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { magicLinkClient } from \"https://esm.sh/better-auth@1.6.9/client/plugins?deps=react@18.2.0,react-dom@18.2.0\";\n\n// Base URL is the same origin as the page, so we don't need to set it.\n// Plugins must mirror the server-side plugins enabled in backend/auth.ts.\nexport const authClient = createAuthClient({\n plugins: [magicLinkClient()],\n});\n\nexport const { useSession, signIn, signOut } = authClient;\n",[],[73,108,124],"19194379-a8d7-42b0-bbfa-f5401e8aa3b3","components","01a06fec-b7fb-75ad-bf57-141b37fbe9b6",["D",1788584179632],[136,137],[73,131],{"_33":145,"_13":146,"_35":147,"_37":132,"_38":39,"_40":148,"_42":43,"_44":149,"_17":41,"_47":88,"_48":150,"_50":51,"_52":-5,"_66":151,"_18":152},{"_33":138,"_13":139,"_35":140,"_37":132,"_38":39,"_40":41,"_42":43,"_44":141,"_17":46,"_47":88,"_48":142,"_50":51,"_52":-5,"_66":143,"_18":144},"dd94dabe-782c-48dd-8447-4785d1074e03","SignIn.tsx","01a06fec-b7fb-75ad-bf57-111c110b0993",["D",1788584179632],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { signIn } from \"../lib/auth-client.ts\";\n\nexport function SignIn() {\n const [email, setEmail] = useState(\"\");\n const [status, setStatus] = useState<\"idle\" | \"sending\" | \"sent\" | \"error\">(\n \"idle\",\n );\n const [errorMsg, setErrorMsg] = useState(\"\");\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setStatus(\"sending\");\n setErrorMsg(\"\");\n const { error } = await signIn.magicLink({\n email,\n callbackURL: \"/\",\n });\n if (error) {\n setStatus(\"error\");\n setErrorMsg(error.message ?? \"Failed to send magic link\");\n } else {\n setStatus(\"sent\");\n }\n }\n\n if (status === \"sent\") {\n return (\n

📬 Check your email

\n We sent a sign-in link to {email}.\n

\n );\n }\n\n return (\n

\n \n Email\n setEmail((e.target as HTMLInputElement).value)}\n placeholder=\"you@example.com\"\n class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n disabled={status === \"sending\"}\n />\n \n \n {status === \"sending\" ? \"Sending…\" : \"Send magic link\"}\n \n {status === \"error\" && (\n

{errorMsg}

\n )}\n \n );\n}\n",[],[73,131,139],"8d2e41a9-c4b6-4f74-86a5-fb2c23a03652","App.tsx","01a06fec-b7fb-75ad-bf57-08e711dc7f93",7,["D",1788584327128],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@18.0\";\nimport { useSession, signOut } from \"../lib/auth-client.ts\";\nimport { SignIn } from \"./SignIn.tsx\";\nimport {\n createPostAPI,\n deletePostAPI,\n fetchPost,\n fetchPosts,\n updatePostAPI,\n type Post,\n} from \"../lib/posts-api.ts\";\n\ntype View = { name: \"list\" } | { name: \"post\"; slug: string } | { name: \"edit\"; post?: Post };\n\nfunction fmtDate(ms: number): string {\n return new Date(ms).toLocaleString();\n}\n\nfunction renderMarkdown(content: string): string {\n return marked.parse(content, { async: false }) as string;\n}\n\nexport function App() {\n const { data: session, isPending } = useSession();\n const user = session?.user ?? null;\n\n const [posts, setPosts] = useState([]);\n const [view, setView] = useState({ name: \"list\" });\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n async function refresh() {\n setLoading(true);\n setError(null);\n try {\n const { posts } = await fetchPosts();\n setPosts(posts);\n } catch (e) {\n setError((e as Error).message);\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n refresh();\n }, []);\n\n async function openPost(slug: string) {\n setError(null);\n try {\n await fetchPost(slug);\n setView({ name: \"post\", slug });\n } catch (e) {\n setError((e as Error).message);\n }\n }\n\n async function handleDelete(slug: string) {\n if (!confirm(\"Delete this post?\")) return;\n try {\n await deletePostAPI(slug);\n await refresh();\n setView({ name: \"list\" });\n } catch (e) {\n setError((e as Error).message);\n }\n }\n\n async function handleSave(title: string, content: string, existing?: Post) {\n if (existing) {\n const { post } = await updatePostAPI(existing.slug, title, content);\n await refresh();\n setView({ name: \"post\", slug: post.slug });\n } else {\n const { post } = await createPostAPI(title, content);\n await refresh();\n setView({ name: \"post\", slug: post.slug });\n }\n }\n\n return (\n

\n \n\n

\n {isPending ? null : user ? (\n <>\n {user.email}\n signOut().then(() => location.reload())}\n class=\"text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1.5 rounded-lg cursor-pointer\"\n >\n Sign out\n \n \n ) : (\n setView({ name: \"list\" })}\n class=\"text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg cursor-pointer\"\n >\n Sign in to write\n \n )}\n

\n\n {/* Sign-in panel shown when logged out */}\n {!isPending && !user && (\n

\n 🔐 Sign in to publish, edit, or delete posts\n

\n \n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n\n {view.name === \"edit\" && user ? (\n setView({ name: \"list\" })} onSave={handleSave} />\n ) : (\n <>\n {user && view.name === \"list\" && (\n setView({ name: \"edit\" })}\n class=\"mb-6 bg-emerald-500 hover:bg-emerald-600 text-white font-medium px-4 py-2 rounded-lg cursor-pointer\"\n >\n ＋ New post\n \n )}\n\n {/* Post detail */}\n {view.name === \"post\" ? (\n setView({ name: \"edit\", post })}\n onDelete={handleDelete}\n onBack={() => setView({ name: \"list\" })}\n onNotFound={() => setView({ name: \"list\" })}\n />\n ) : (\n \n )}\n \n )}\n\n \n

\n );\n}\n\nfunction PostList({\n posts,\n loading,\n onOpen,\n}: {\n posts: Post[];\n loading: boolean;\n onOpen: (slug: string) => void;\n}) {\n if (loading) return

Loading…

;\n if (posts.length === 0) {\n return (\n

\n No posts yet. Sign in and write the first one! 🚀\n

\n );\n }\n return (\n

\n onOpen(p.slug)}\n class=\"w-full text-left bg-white border border-gray-200 hover:border-blue-300 rounded-lg p-4 transition-colors cursor-pointer\"\n >\n
{p.title}
\n
\n {p.authorName} · {fmtDate(p.createdAt)}\n
\n \n

\n );\n}\n\nfunction PostView({\n slug,\n user,\n onEdit,\n onDelete,\n onBack,\n onNotFound,\n}: {\n slug: string;\n user: { id: string } | null;\n onEdit: (post: Post) => void;\n onDelete: (slug: string) => void;\n onBack: () => void;\n onNotFound: () => void;\n}) {\n const [post, setPost] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n let alive = true;\n setLoading(true);\n setError(null);\n fetchPost(slug)\n .then(({ post }) => alive && setPost(post))\n .catch((e) => {\n if (!alive) return;\n setError((e as Error).message);\n if ((e as Error).message.includes(\"404\")) onNotFound();\n })\n .finally(() => alive && setLoading(false));\n return () => {\n alive = false;\n };\n }, [slug]);\n\n const isAuthor = post && user && post.authorId === user.id;\n\n return (\n

\n \n {loading ? (\n

Loading…

\n ) : error && !post ? (\n

{error}

\n ) : post ? (\n

{post.title}

\n {post.authorName} · {fmtDate(post.createdAt)}\n

\n {isAuthor && (\n

\n onEdit(post)}\n class=\"text-sm bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1.5 rounded-lg cursor-pointer\"\n >\n Edit\n \n onDelete(post.slug)}\n class=\"text-sm bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg cursor-pointer\"\n >\n Delete\n \n

\n )}\n \n

\n ) : null}\n

\n );\n}\n\nfunction Editor({\n initial,\n onCancel,\n onSave,\n}: {\n initial?: Post;\n onCancel: () => void;\n onSave: (title: string, content: string, existing?: Post) => Promise;\n}) {\n const [title, setTitle] = useState(initial?.title ?? \"\");\n const [content, setContent] = useState(initial?.content ?? \"\");\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(null);\n\n async function submit(e: React.FormEvent) {\n e.preventDefault();\n setSaving(true);\n setError(null);\n try {\n await onSave(title.trim(), content.trim(), initial);\n } catch (err) {\n setError((err as Error).message);\n setSaving(false);\n }\n }\n\n return (\n

\n setTitle((e.target as HTMLInputElement).value)}\n placeholder=\"Post title\"\n required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg text-lg font-medium focus:ring-2 focus:ring-blue-500 outline-none\"\n />\n setContent((e.target as HTMLTextAreaElement).value)}\n placeholder={\"Write in Markdown…\\n\\n## Subheading\\nSome text with **bold** and *italic*.\"}\n required\n rows={14}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 outline-none\"\n />\n {error &&

{error}

}\n

\n \n {saving ? \"Saving…\" : initial ? \"Save changes\" : \"Publish\"}\n \n \n Cancel\n \n

\n \n );\n}\n",[],[73,131,146],"ad6c2075-0404-4f7c-bf4e-35ad79951cf0","backend","01a06fec-b7fb-75ad-bf57-07a9767a08a3",["D",1788584179632],[159,160,161],[154],{"_33":177,"_13":178,"_35":179,"_37":155,"_38":39,"_40":41,"_42":43,"_44":180,"_17":46,"_47":88,"_48":181,"_50":51,"_52":-5,"_66":182,"_18":183},{"_33":169,"_13":170,"_35":171,"_37":155,"_38":39,"_40":172,"_42":43,"_44":173,"_17":46,"_47":88,"_48":174,"_50":51,"_52":-5,"_66":175,"_18":176},{"_33":162,"_13":163,"_35":164,"_37":155,"_38":39,"_40":63,"_42":43,"_44":165,"_17":41,"_47":88,"_48":166,"_50":51,"_52":-5,"_66":167,"_18":168},"afee3e24-a29b-42f2-af14-dcdcb2f634ae","schema.ts","01a06fec-b7fb-75ad-bf57-0115a7ffa84a",["D",1788584196600],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// Better Auth's standard SQLite schema for core auth + magic link.\n// Magic link uses the `verification` table — no extra plugin tables needed.\n//\n// We run this on startup so the template works with zero setup.\n// Better Auth manages all reads/writes via Kysely; we just ensure the tables exist.\nexport async function ensureSchema() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS user (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT NOT NULL UNIQUE,\n emailVerified INTEGER NOT NULL DEFAULT 0,\n image TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS session (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,\n token TEXT NOT NULL UNIQUE,\n expiresAt INTEGER NOT NULL,\n ipAddress TEXT,\n userAgent TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS account (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,\n accountId TEXT NOT NULL,\n providerId TEXT NOT NULL,\n accessToken TEXT,\n refreshToken TEXT,\n accessTokenExpiresAt INTEGER,\n refreshTokenExpiresAt INTEGER,\n scope TEXT,\n idToken TEXT,\n password TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS verification (\n id TEXT PRIMARY KEY,\n identifier TEXT NOT NULL,\n value TEXT NOT NULL,\n expiresAt INTEGER NOT NULL,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS post (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n slug TEXT NOT NULL UNIQUE,\n content TEXT NOT NULL,\n authorId TEXT NOT NULL,\n authorName TEXT NOT NULL,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n ]);\n}\n",[],[154,163],"341c8106-a86a-4bbd-8fd5-d5592ab3b73a","posts.ts","2c6ef7c2-a8e6-11f1-b70e-1607ee4eb77e",3,["D",1788584196649],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport type Post = {\n id: string;\n title: string;\n slug: string;\n content: string;\n authorId: string;\n authorName: string;\n createdAt: number;\n updatedAt: number;\n};\n\ntype Row = {\n id: string;\n title: string;\n slug: string;\n content: string;\n authorId: string;\n authorName: string;\n createdAt: number;\n updatedAt: number;\n};\n\nfunction toPost(r: Row): Post {\n return {\n id: r.id,\n title: r.title,\n slug: r.slug,\n content: r.content,\n authorId: r.authorId,\n authorName: r.authorName,\n createdAt: Number(r.createdAt),\n updatedAt: Number(r.updatedAt),\n };\n}\n\n// Turn a title into a URL slug: lowercase, hyphens, strip non-alphanumerics.\nexport function slugify(title: string): string {\n const base = title\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9\\u3040-\\u30ff\\u4e00-\\u9faf]+/g, \"-\")\n .replace(/^-+|-+$/g, \"\")\n .slice(0, 80);\n return base || \"post\";\n}\n\n// Ensure a slug is unique by appending -2, -3, … when needed.\nasync function uniqueSlug(slug: string, excludeId?: string): Promise {\n const existing = await sqlite.execute({\n sql: \"SELECT slug FROM post WHERE slug = ? AND id != ?\",\n args: [slug, excludeId ?? \"\"],\n });\n if (existing.rows.length === 0) return slug;\n let n = 2;\n while (true) {\n const candidate = `${slug}-${n}`;\n const clash = await sqlite.execute({\n sql: \"SELECT slug FROM post WHERE slug = ? AND id != ?\",\n args: [candidate, excludeId ?? \"\"],\n });\n if (clash.rows.length === 0) return candidate;\n n++;\n }\n}\n\nexport async function listPosts(): Promise {\n const res = await sqlite.execute(\n \"SELECT * FROM post ORDER BY createdAt DESC\",\n );\n return (res.rows as unknown as Row[]).map(toPost);\n}\n\nexport async function getPostBySlug(slug: string): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT * FROM post WHERE slug = ?\",\n args: [slug],\n });\n const rows = res.rows as unknown as Row[];\n return rows.length ? toPost(rows[0]) : null;\n}\n\nexport async function createPost(args: {\n title: string;\n content: string;\n authorId: string;\n authorName: string;\n}): Promise {\n const now = Date.now();\n const id = crypto.randomUUID();\n const slug = await uniqueSlug(slugify(args.title));\n await sqlite.execute({\n sql:\n \"INSERT INTO post (id, title, slug, content, authorId, authorName, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\",\n args: [\n id,\n args.title,\n slug,\n args.content,\n args.authorId,\n args.authorName,\n now,\n now,\n ],\n });\n return toPost({\n id,\n title: args.title,\n slug,\n content: args.content,\n authorId: args.authorId,\n authorName: args.authorName,\n createdAt: now,\n updatedAt: now,\n });\n}\n\nexport async function updatePost(\n slug: string,\n args: { title: string; content: string },\n): Promise {\n const existing = await getPostBySlug(slug);\n if (!existing) return null;\n const newSlug = await uniqueSlug(slugify(args.title), existing.id);\n const now = Date.now();\n await sqlite.execute({\n sql: \"UPDATE post SET title = ?, slug = ?, content = ?, updatedAt = ? WHERE id = ?\",\n args: [args.title, newSlug, args.content, now, existing.id],\n });\n return {\n ...existing,\n title: args.title,\n slug: newSlug,\n content: args.content,\n updatedAt: now,\n };\n}\n\nexport async function deletePost(slug: string): Promise {\n const res = await sqlite.execute({\n sql: \"DELETE FROM post WHERE slug = ?\",\n args: [slug],\n });\n return (res.rowsAffected ?? 0) > 0;\n}\n",[],[154,170],"560c8c93-63dd-40ff-bcc8-62faf2bb9d56","auth.ts","01a06fec-b7fa-775f-a0ab-6a7374506016",["D",1788584179632],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { httpEndpoint, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { betterAuth } from \"npm:better-auth\";\nimport { magicLink } from \"npm:better-auth/plugins\";\nimport { LibsqlDialect } from \"npm:@libsql/kysely-libsql\";\n\n// Vals can be reached from multiple URLs (the *.web.val.run preview URL,\n// custom domains, branch deploys, etc). Better Auth's dynamic baseURL form\n// derives the URL from each incoming request and validates it against\n// allowedHosts. The fallback is used when running outside an HTTP context\n// (e.g. cron jobs, scripts).\nconst fallback = await httpEndpoint();\n\n// A secret is required to sign session tokens. We default to a per-val auto\n// secret so the template works with zero setup — but for production you should\n// set BETTER_AUTH_SECRET so sessions survive code edits across val versions.\nconst { username, name } = parseVal();\nconst secret =\n Deno.env.get(\"BETTER_AUTH_SECRET\") ?? `val-town-default-${username}-${name}`;\n\n// Val Town's `std/sqlite` is already an `@libsql/client` Client,\n// so we can hand it straight to Better Auth's Kysely libsql dialect.\n// Zero database setup required.\nexport const auth = betterAuth({\n baseURL: {\n // Accept any host so this works on the *.web.val.run preview URL,\n // custom domains, and any future deployment URL. For production you\n // should narrow this to the specific hosts you serve from, e.g.\n // [\"myapp.com\", \"*.web.val.run\"].\n allowedHosts: [\"*\"],\n protocol: \"auto\",\n fallback,\n },\n secret,\n database: {\n dialect: new LibsqlDialect({ client: sqlite }),\n type: \"sqlite\",\n },\n // Disable email+password — this template is magic link only.\n emailAndPassword: { enabled: false },\n plugins: [\n magicLink({\n sendMagicLink: async ({ email, url }) => {\n // Val Town's built-in email. Sending to addresses other than your own\n // requires a Pro account: https://www.val.town/pricing\n await sendEmail({\n to: email,\n subject: \"Your sign-in link\",\n text: `Click to sign in: ${url}\\n\\nThis link expires in 5 minutes.`,\n html:\n `

Click to sign in:

` +\n `

${url}

` +\n `

This link expires in 5 minutes.

`,\n });\n },\n }),\n ],\n});\n",[],[154,178],"d448b9a5-7d02-4455-8353-29a12395d824",["D",1788584179632],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Magic-link auth blog with CRUD","imageUrl","userId","e8dc4c42-368d-443a-bdb0-f12c12a7ed90","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a06c07-a416-700f-9d79-6326f651fc92","tursoName","d448b9a57d024455835329a12395d824","tursoHostname","d448b9a57d024455835329a12395d824-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789539031988],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_241":236},"org",{"_11":12,"_235":236,"_237":236,"_194":195,"_238":239,"_240":51},"branch",{"_17":226,"_13":16,"_33":39,"_227":184,"_228":-5,"_229":-5,"_230":-5,"_231":-5,"_232":-5,"_233":14,"_234":12},"isOwned",9,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":184,"_13":14,"_44":319,"_186":-5,"_187":51,"_188":189,"_190":189,"_191":192,"_193":-5,"_194":195,"_196":60,"_197":43,"_198":-5,"_199":-5,"_200":46,"_201":202,"_203":204,"_205":206,"_207":320,"_209":-5,"_210":211,"_212":211,"_213":214,"_215":214,"_216":214,"_217":211,"_218":211,"_219":321,"_221":322,"_223":323,"_225":51},[271,275,285,286],"files",[271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286],"counts",{"_262":46,"_263":41,"_264":46,"_32":265,"_266":267},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":261},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks",{"_268":46,"_270":46},"connections",{"_268":46,"_269":46},"count","unfilledCount","emptyCount",{"_33":153,"_13":154,"_35":155,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":156,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":317,"_18":318},{"_33":177,"_13":178,"_35":179,"_37":155,"_38":39,"_40":41,"_42":43,"_44":180,"_17":46,"_47":88,"_48":181,"_50":51,"_52":-5,"_66":315,"_18":316},{"_33":169,"_13":170,"_35":171,"_37":155,"_38":39,"_40":172,"_42":43,"_44":173,"_17":46,"_47":88,"_48":174,"_50":51,"_52":-5,"_66":313,"_18":314},{"_33":162,"_13":163,"_35":164,"_37":155,"_38":39,"_40":63,"_42":43,"_44":165,"_17":41,"_47":88,"_48":166,"_50":51,"_52":-5,"_66":311,"_18":312},{"_33":72,"_13":73,"_35":74,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":75,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":309,"_18":310},{"_33":130,"_13":131,"_35":132,"_37":74,"_38":39,"_40":41,"_42":43,"_44":133,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":307,"_18":308},{"_33":145,"_13":146,"_35":147,"_37":132,"_38":39,"_40":148,"_42":43,"_44":149,"_17":41,"_47":88,"_48":150,"_50":51,"_52":-5,"_66":305,"_18":306},{"_33":138,"_13":139,"_35":140,"_37":132,"_38":39,"_40":41,"_42":43,"_44":141,"_17":46,"_47":88,"_48":142,"_50":51,"_52":-5,"_66":303,"_18":304},{"_33":107,"_13":108,"_35":109,"_37":74,"_38":39,"_40":41,"_42":43,"_44":110,"_17":46,"_47":76,"_48":-5,"_50":51,"_52":-5,"_66":301,"_18":302},{"_33":123,"_13":124,"_35":125,"_37":109,"_38":39,"_40":41,"_42":43,"_44":126,"_17":46,"_47":88,"_48":127,"_50":51,"_52":-5,"_66":299,"_18":300},{"_33":115,"_13":116,"_35":117,"_37":109,"_38":39,"_40":118,"_42":43,"_44":119,"_17":46,"_47":88,"_48":120,"_50":51,"_52":-5,"_66":297,"_18":298},{"_33":100,"_13":101,"_35":102,"_37":74,"_38":39,"_40":41,"_42":43,"_44":103,"_17":46,"_47":24,"_48":104,"_50":51,"_52":-5,"_66":295,"_18":296},{"_33":92,"_13":93,"_35":94,"_37":74,"_38":39,"_40":95,"_42":43,"_44":96,"_17":41,"_47":24,"_48":97,"_50":51,"_52":-5,"_66":293,"_18":294},{"_33":84,"_13":85,"_35":86,"_37":74,"_38":39,"_40":41,"_42":43,"_44":87,"_17":46,"_47":88,"_48":89,"_50":51,"_52":-5,"_66":291,"_18":292},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":69,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_66":289,"_18":290},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":63,"_47":64,"_48":65,"_50":51,"_52":14,"_66":287,"_18":288},[],[59],[],[19],[],[73,85],[],[73,93],[],[73,101],[],[73,108,116],[],[73,108,124],[280,281],[73,108],[],[73,131,139],[],[73,131,146],[277,278],[73,131],[276,279,282,283,284],[73],[],[154,163],[],[154,170],[],[154,178],[272,273,274],[154],["D",1788584179632],["D",1789539031988],{"_11":12,"_241":236},{"_11":12,"_235":236,"_237":236,"_194":195,"_238":239,"_240":51},{"_17":226,"_13":16,"_33":39,"_227":184,"_228":-5,"_229":-5,"_230":-5,"_231":-5,"_232":-5,"_233":14,"_234":12},"ctx",{"_219":-5,"_258":357,"_358":359,"_360":361,"_362":51,"_363":51,"_364":51,"_365":43,"_366":-5,"_367":-7,"_368":-7,"_369":46,"_370":51,"_371":51,"_372":-5,"_373":51,"_374":51,"_375":51,"_376":-5},"ENV",{"_328":329,"_330":331,"_332":16,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

{p.title}

{post.title}