\n \n \n \n",[],[209,211],"311d1901-f05a-4ccc-a11a-4d2452a8a8b4","favicon.svg","01a06fec-b7fb-75ad-bf57-23d59d33d8d1",["D",1788584179632],"\n",[],[209,219],"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",[],[209,234,226],"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",[],[209,234,236],"8d84be30-b8aa-432f-b881-ba5f3376f20b",["D",1788584179632],"directory",[177,178],[209,234],"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",[],[209,255,248],"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",[],[209,255,257],"19194379-a8d7-42b0-bbfa-f5401e8aa3b3",["D",1788584179632],[174,175],[209,255],"c0038934-ea0e-4300-ad3e-804c4082a78e",["D",1788584179632],[173,176,179,180,181],[209],"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",[],[156,273],["D",1788584196649],[],[156,65],"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",[],[156,283],"ad6c2075-0404-4f7c-bf4e-35ad79951cf0",["D",1788584179632],[169,170,171],[156],["D",1788584179632],["D",1789539031988],{"_11":12,"_125":71},{"_11":12,"_121":71,"_70":71,"_30":69,"_122":123,"_124":24},{"_38":112,"_13":16,"_32":35,"_113":73,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_53":-5,"_144":331,"_332":333,"_334":335,"_336":24,"_337":24,"_338":24,"_339":86,"_340":-5,"_341":-7,"_342":-7,"_343":26,"_344":24,"_345":24,"_346":-5,"_347":24,"_348":24,"_349":24,"_350":-5},"ENV",{"_302":303,"_304":305,"_306":16,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · posts.ts