Click to sign in:

` +\n `

This link expires in 5 minutes.

`,\n });\n },\n }),\n ],\n});\n",[18,88],"pulls","branches","forks","envVars",{"_84":26,"_210":26},"connections",{"_84":26,"_209":26},"unfilledCount","emptyCount",{"_35":180,"_13":18,"_75":105,"_45":-5,"_37":38,"_183":42,"_190":24,"_39":322,"_41":26,"_78":106,"_181":-5,"_80":30,"_184":-5,"_233":323,"_17":324},{"_35":198,"_13":88,"_75":87,"_45":105,"_37":38,"_183":42,"_190":24,"_39":319,"_41":26,"_78":79,"_181":200,"_80":30,"_184":-5,"_233":320,"_17":321},{"_35":194,"_13":104,"_75":103,"_45":105,"_37":38,"_183":98,"_190":24,"_39":316,"_41":26,"_78":79,"_181":196,"_80":30,"_184":-5,"_233":317,"_17":318},{"_35":189,"_13":77,"_75":76,"_45":105,"_37":38,"_183":85,"_190":24,"_39":313,"_41":42,"_78":79,"_181":192,"_80":30,"_184":-5,"_233":314,"_17":315},{"_35":309,"_13":251,"_75":246,"_45":-5,"_37":38,"_183":42,"_190":24,"_39":310,"_41":26,"_78":106,"_181":-5,"_80":30,"_184":-5,"_233":311,"_17":312},{"_35":305,"_13":296,"_75":291,"_45":246,"_37":38,"_183":42,"_190":24,"_39":306,"_41":26,"_78":106,"_181":-5,"_80":30,"_184":-5,"_233":307,"_17":308},{"_35":297,"_13":298,"_75":299,"_45":291,"_37":38,"_183":300,"_190":24,"_39":301,"_41":42,"_78":79,"_181":302,"_80":30,"_184":-5,"_233":303,"_17":304},{"_35":288,"_13":289,"_75":290,"_45":291,"_37":38,"_183":42,"_190":24,"_39":292,"_41":26,"_78":79,"_181":293,"_80":30,"_184":-5,"_233":294,"_17":295},{"_35":284,"_13":276,"_75":270,"_45":246,"_37":38,"_183":42,"_190":24,"_39":285,"_41":26,"_78":106,"_181":-5,"_80":30,"_184":-5,"_233":286,"_17":287},{"_35":277,"_13":278,"_75":279,"_45":270,"_37":38,"_183":42,"_190":24,"_39":280,"_41":26,"_78":79,"_181":281,"_80":30,"_184":-5,"_233":282,"_17":283},{"_35":267,"_13":268,"_75":269,"_45":270,"_37":38,"_183":271,"_190":24,"_39":272,"_41":26,"_78":79,"_181":273,"_80":30,"_184":-5,"_233":274,"_17":275},{"_35":260,"_13":261,"_75":262,"_45":246,"_37":38,"_183":42,"_190":24,"_39":263,"_41":26,"_78":21,"_181":264,"_80":30,"_184":-5,"_233":265,"_17":266},{"_35":252,"_13":253,"_75":254,"_45":246,"_37":38,"_183":255,"_190":24,"_39":256,"_41":42,"_78":21,"_181":257,"_80":30,"_184":-5,"_233":258,"_17":259},{"_35":243,"_13":244,"_75":245,"_45":246,"_37":38,"_183":42,"_190":24,"_39":247,"_41":26,"_78":79,"_181":248,"_80":30,"_184":-5,"_233":249,"_17":250},{"_35":236,"_13":237,"_75":238,"_45":-5,"_37":38,"_183":42,"_190":24,"_39":239,"_41":26,"_78":21,"_181":240,"_80":30,"_184":-5,"_233":241,"_17":242},{"_35":227,"_13":228,"_75":118,"_45":-5,"_37":38,"_183":229,"_190":24,"_39":230,"_41":85,"_78":231,"_181":232,"_80":30,"_184":14,"_233":234,"_17":235},"695151b4-ffc6-4b38-88c7-d053dc69ed71","index.ts",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",[],[228],"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.",[],[237],"8554961e-cf91-44e4-b4b5-9db0dfb7b56c","index.tsx","01a06fec-b7fb-75ad-bf57-28e84ed814d4","01a06fec-b7fb-75ad-bf57-2c4cad9dcb25",["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();",[],[251,244],"frontend","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",[],[251,253],"311d1901-f05a-4ccc-a11a-4d2452a8a8b4","favicon.svg","01a06fec-b7fb-75ad-bf57-23d59d33d8d1",["D",1788584179632],"\n",[],[251,261],"6b8f3ac7-a948-4f9f-91bb-437bd263600e","posts-api.ts","6e6c1f60-a8e6-11f1-96f4-1607ee4eb77e","01a06fec-b7fb-75ad-bf57-1e352179a53d",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",[],[251,276,268],"lib","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",[],[251,276,278],"8d84be30-b8aa-432f-b881-ba5f3376f20b",["D",1788584179632],[220,221],[251,276],"dd94dabe-782c-48dd-8447-4785d1074e03","SignIn.tsx","01a06fec-b7fb-75ad-bf57-111c110b0993","01a06fec-b7fb-75ad-bf57-141b37fbe9b6",["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",[],[251,296,289],"components","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",[],[251,296,298],"19194379-a8d7-42b0-bbfa-f5401e8aa3b3",["D",1788584179632],[217,218],[251,296],"c0038934-ea0e-4300-ad3e-804c4082a78e",["D",1788584179632],[216,219,222,223,224],[251],["D",1788584196600],[],[18,77],["D",1788584196649],[],[18,104],["D",1788584179632],[],[18,88],["D",1788584179632],[212,213,214],[18],["D",1788584179632],["D",1789539031988],{"_11":12,"_158":83},{"_11":12,"_154":83,"_82":83,"_31":81,"_155":156,"_157":30},{"_41":145,"_13":16,"_35":38,"_146":108,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":14,"_153":12},"ctx",{"_55":-5,"_177":363,"_364":365,"_366":367,"_368":30,"_369":30,"_370":30,"_371":24,"_372":-5,"_373":-7,"_374":-7,"_375":26,"_376":30,"_377":30,"_378":-5,"_379":30,"_380":30,"_381":30,"_382":-5},"ENV",{"_334":335,"_336":337,"_338":16,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362},"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}

History · backend