Click to sign in:

` +\n `

This link expires in 5 minutes.

`,\n });\n },\n }),\n ],\n});\n",[19,69],"ad6c2075-0404-4f7c-bf4e-35ad79951cf0",["D",1788584179632],"directory",[19],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":178,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":179,"_18":180},{"_36":99,"_13":100,"_39":101,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":102,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":103,"_18":104},{"_36":92,"_13":93,"_39":94,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":95,"_17":65,"_52":24,"_54":96,"_56":57,"_58":-5,"_89":97,"_18":98},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":46,"_52":87,"_54":88,"_56":57,"_58":14,"_89":90,"_18":91},"695151b4-ffc6-4b38-88c7-d053dc69ed71","index.ts","01a06fec-b7fb-75ad-bf57-34727cdd80e1",5,["D",1788584206446],"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",[],[83],"b52977e4-55af-4b36-8200-09227b5d3bcf","README.md","01a06fec-b7fb-75ad-bf57-3366e614e1ec",["D",1788584179632],"# 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.",[],[93],"c0038934-ea0e-4300-ad3e-804c4082a78e","frontend","01a06fec-b7fb-75ad-bf57-2c4cad9dcb25",["D",1788584179632],[105,106,107,108,109],[100],{"_36":155,"_13":156,"_39":157,"_41":101,"_43":44,"_45":51,"_47":48,"_49":158,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":159,"_18":160},{"_36":132,"_13":133,"_39":134,"_41":101,"_43":44,"_45":51,"_47":48,"_49":135,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":136,"_18":137},{"_36":125,"_13":126,"_39":127,"_41":101,"_43":44,"_45":51,"_47":48,"_49":128,"_17":65,"_52":24,"_54":129,"_56":57,"_58":-5,"_89":130,"_18":131},{"_36":117,"_13":118,"_39":119,"_41":101,"_43":44,"_45":120,"_47":48,"_49":121,"_17":51,"_52":24,"_54":122,"_56":57,"_58":-5,"_89":123,"_18":124},{"_36":110,"_13":111,"_39":112,"_41":101,"_43":44,"_45":51,"_47":48,"_49":113,"_17":65,"_52":53,"_54":114,"_56":57,"_58":-5,"_89":115,"_18":116},"8554961e-cf91-44e4-b4b5-9db0dfb7b56c","index.tsx","01a06fec-b7fb-75ad-bf57-28e84ed814d4",["D",1788584179632],"/** @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();",[],[100,111],"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",[],[100,118],"311d1901-f05a-4ccc-a11a-4d2452a8a8b4","favicon.svg","01a06fec-b7fb-75ad-bf57-23d59d33d8d1",["D",1788584179632],"\n",[],[100,126],"8d84be30-b8aa-432f-b881-ba5f3376f20b","lib","01a06fec-b7fb-75ad-bf57-1e352179a53d",["D",1788584179632],[138,139],[100,133],{"_36":148,"_13":149,"_39":150,"_41":134,"_43":44,"_45":51,"_47":48,"_49":151,"_17":65,"_52":53,"_54":152,"_56":57,"_58":-5,"_89":153,"_18":154},{"_36":140,"_13":141,"_39":142,"_41":134,"_43":44,"_45":143,"_47":48,"_49":144,"_17":65,"_52":53,"_54":145,"_56":57,"_58":-5,"_89":146,"_18":147},"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",[],[100,133,141],"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",[],[100,133,149],"19194379-a8d7-42b0-bbfa-f5401e8aa3b3","components","01a06fec-b7fb-75ad-bf57-141b37fbe9b6",["D",1788584179632],[161,162],[100,156],{"_36":170,"_13":171,"_39":172,"_41":157,"_43":44,"_45":173,"_47":48,"_49":174,"_17":51,"_52":53,"_54":175,"_56":57,"_58":-5,"_89":176,"_18":177},{"_36":163,"_13":164,"_39":165,"_41":157,"_43":44,"_45":51,"_47":48,"_49":166,"_17":65,"_52":53,"_54":167,"_56":57,"_58":-5,"_89":168,"_18":169},"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",[],[100,156,164],"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",[],[100,156,171],["D",1788584179632],[181,182,183],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":190,"_17":65,"_52":53,"_54":72,"_56":57,"_58":-5,"_89":191,"_18":192},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":187,"_17":65,"_52":53,"_54":66,"_56":57,"_58":-5,"_89":188,"_18":189},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":184,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_89":185,"_18":186},["D",1788584196600],[],[19,38],["D",1788584196649],[],[19,61],["D",1788584179632],[],[19,69],"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,"_250":245},"org",{"_11":12,"_244":245,"_246":245,"_203":204,"_247":248,"_249":57},"branch",{"_17":235,"_13":16,"_36":44,"_236":193,"_237":-5,"_238":-5,"_239":-5,"_240":-5,"_241":-5,"_242":14,"_243":12},"isOwned",9,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":193,"_13":14,"_49":334,"_195":-5,"_196":57,"_197":198,"_199":198,"_200":201,"_202":-5,"_203":204,"_205":84,"_206":48,"_207":-5,"_208":-5,"_209":65,"_210":211,"_212":213,"_214":215,"_216":335,"_218":-5,"_219":220,"_221":220,"_222":223,"_224":223,"_225":223,"_226":220,"_227":220,"_228":336,"_230":337,"_232":338,"_234":57},[286,290,300,301],"files",[286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301],"counts",{"_277":65,"_278":51,"_279":65,"_32":280,"_281":282},[271,272,273],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":75,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_18":270},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":71,"_17":65,"_52":53,"_54":72,"_56":57,"_58":-5,"_18":276},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":65,"_52":53,"_54":66,"_56":57,"_58":-5,"_18":275},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":274},[19,38],[19,61],[19,69],"pulls","branches","forks",{"_283":65,"_285":65},"connections",{"_283":65,"_284":65},"count","unfilledCount","emptyCount",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":178,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":332,"_18":333},{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":190,"_17":65,"_52":53,"_54":72,"_56":57,"_58":-5,"_89":330,"_18":331},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":187,"_17":65,"_52":53,"_54":66,"_56":57,"_58":-5,"_89":328,"_18":329},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":184,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_89":326,"_18":327},{"_36":99,"_13":100,"_39":101,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":102,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":324,"_18":325},{"_36":155,"_13":156,"_39":157,"_41":101,"_43":44,"_45":51,"_47":48,"_49":158,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":322,"_18":323},{"_36":170,"_13":171,"_39":172,"_41":157,"_43":44,"_45":173,"_47":48,"_49":174,"_17":51,"_52":53,"_54":175,"_56":57,"_58":-5,"_89":320,"_18":321},{"_36":163,"_13":164,"_39":165,"_41":157,"_43":44,"_45":51,"_47":48,"_49":166,"_17":65,"_52":53,"_54":167,"_56":57,"_58":-5,"_89":318,"_18":319},{"_36":132,"_13":133,"_39":134,"_41":101,"_43":44,"_45":51,"_47":48,"_49":135,"_17":65,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":316,"_18":317},{"_36":148,"_13":149,"_39":150,"_41":134,"_43":44,"_45":51,"_47":48,"_49":151,"_17":65,"_52":53,"_54":152,"_56":57,"_58":-5,"_89":314,"_18":315},{"_36":140,"_13":141,"_39":142,"_41":134,"_43":44,"_45":143,"_47":48,"_49":144,"_17":65,"_52":53,"_54":145,"_56":57,"_58":-5,"_89":312,"_18":313},{"_36":125,"_13":126,"_39":127,"_41":101,"_43":44,"_45":51,"_47":48,"_49":128,"_17":65,"_52":24,"_54":129,"_56":57,"_58":-5,"_89":310,"_18":311},{"_36":117,"_13":118,"_39":119,"_41":101,"_43":44,"_45":120,"_47":48,"_49":121,"_17":51,"_52":24,"_54":122,"_56":57,"_58":-5,"_89":308,"_18":309},{"_36":110,"_13":111,"_39":112,"_41":101,"_43":44,"_45":51,"_47":48,"_49":113,"_17":65,"_52":53,"_54":114,"_56":57,"_58":-5,"_89":306,"_18":307},{"_36":92,"_13":93,"_39":94,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":95,"_17":65,"_52":24,"_54":96,"_56":57,"_58":-5,"_89":304,"_18":305},{"_36":82,"_13":83,"_39":84,"_41":-5,"_43":44,"_45":85,"_47":48,"_49":86,"_17":46,"_52":87,"_54":88,"_56":57,"_58":14,"_89":302,"_18":303},[],[83],[],[93],[],[100,111],[],[100,118],[],[100,126],[],[100,133,141],[],[100,133,149],[295,296],[100,133],[],[100,156,164],[],[100,156,171],[292,293],[100,156],[291,294,297,298,299],[100],[],[19,38],[],[19,61],[],[19,69],[287,288,289],[19],["D",1788584179632],["D",1789539031988],{"_11":12,"_250":245},{"_11":12,"_244":245,"_246":245,"_203":204,"_247":248,"_249":57},{"_17":235,"_13":16,"_36":44,"_236":193,"_237":-5,"_238":-5,"_239":-5,"_240":-5,"_241":-5,"_242":14,"_243":12},"ctx",{"_228":-5,"_267":372,"_373":374,"_375":376,"_377":57,"_378":57,"_379":57,"_380":48,"_381":-5,"_382":-7,"_383":-7,"_384":65,"_385":57,"_386":57,"_387":-5,"_388":57,"_389":57,"_390":57,"_391":-5},"ENV",{"_343":344,"_345":346,"_347":16,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371},"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}