[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","1d6af706-2775-11f0-b46e-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [posts, setPosts] = useState([]);\n const [selectedImage, setSelectedImage] = useState(null);\n const [imagePreview, setImagePreview] = useState(null);\n const [postCaption, setPostCaption] = useState(\"\");\n\n useEffect(() => {\n fetch(\"/api/posts\")\n .then(res => res.json())\n .then(setPosts);\n\n fetch(\"/api/me\")\n .then(res => res.json())\n .then(setUser);\n }, []);\n\n const handleImageUpload = (e) => {\n const file = e.target.files[0];\n if (file) {\n setSelectedImage(file);\n const reader = new FileReader();\n reader.onloadend = () => {\n setImagePreview(reader.result);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const createPost = async (e) => {\n e.preventDefault();\n const formData = new FormData();\n formData.append(\"image\", selectedImage);\n formData.append(\"caption\", postCaption);\n\n const response = await fetch(\"/api/posts\", {\n method: \"POST\",\n body: formData,\n });\n const newPost = await response.json();\n setPosts([newPost, ...posts]);\n\n // Reset form\n setSelectedImage(null);\n setImagePreview(null);\n setPostCaption(\"\");\n };\n\n const likePost = async (postId) => {\n const response = await fetch(`/api/posts/${postId}/like`, { method: \"POST\" });\n const updatedPost = await response.json();\n setPosts(posts.map(post => post.id === postId ? updatedPost : post));\n };\n\n const login = async (username, password) => {\n const response = await fetch(\"/api/login\", {\n method: \"POST\",\n body: JSON.stringify({ username, password }),\n });\n const userData = await response.json();\n setUser(userData);\n };\n\n const logout = async () => {\n await fetch(\"/api/logout\", { method: \"POST\" });\n setUser(null);\n };\n\n if (!user) {\n return ;\n }\n\n return (\n

Ashish

\n Welcome, {user.username}\n \n

\n\n

\n {posts.map(post => (\n

\n \n

\n {post.author}\n

{post.caption}

\n \n

\n ))}\n

\n );\n}\n\nfunction LoginForm({ onLogin }) {\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onLogin(username, password);\n };\n\n return (\n

\n setUsername(e.target.value)}\n placeholder=\"Username\"\n />\n setPassword(e.target.value)}\n placeholder=\"Password\"\n />\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"gregariousSapphireSnail\";\n\n // Initialize tables with new schema\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL,\n profile_picture TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_posts (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n image_url TEXT NOT NULL,\n caption TEXT,\n likes INTEGER DEFAULT 0,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY(user_id) REFERENCES ${KEY}_users(id)\n )\n `);\n\n const url = new URL(request.url);\n\n // Image upload handling\n if (url.pathname === \"/api/posts\" && request.method === \"POST\") {\n const formData = await request.formData();\n const imageFile = formData.get(\"image\");\n const caption = formData.get(\"caption\");\n\n // Store image in blob storage\n const imageKey = `${KEY}_post_${Date.now()}`;\n const imageUrl = await blob.set(imageKey, imageFile);\n\n // Insert post record\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_posts (user_id, image_url, caption) VALUES (1, ?, ?)`,\n [imageUrl, caption],\n );\n\n return Response.json({\n id: result.lastInsertRowid,\n image_url: imageUrl,\n caption,\n author: \"User\",\n likes: 0,\n });\n }\n\n // Like post endpoint\n if (url.pathname.startsWith(\"/api/posts/\") && url.pathname.endsWith(\"/like\") && request.method === \"POST\") {\n const postId = url.pathname.split(\"/\")[3];\n await sqlite.execute(\n `UPDATE ${KEY}_posts SET likes = likes + 1 WHERE id = ?`,\n [postId],\n );\n const updatedPost = await sqlite.execute(\n `SELECT * FROM ${KEY}_posts WHERE id = ?`,\n [postId],\n );\n return Response.json(updatedPost.rows[0]);\n }\n\n // Login endpoint (simplified)\n if (url.pathname === \"/api/login\" && request.method === \"POST\") {\n const { username, password } = await request.json();\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ? AND password = ?`,\n [username, password],\n );\n\n if (result.rows.length) {\n return Response.json(result.rows[0]);\n }\n return new Response(\"Unauthorized\", { status: 401 });\n }\n\n // Fetch posts endpoint\n if (url.pathname === \"/api/posts\" && request.method === \"GET\") {\n const posts = await sqlite.execute(`\n SELECT p.*, u.username as author \n FROM ${KEY}_posts p \n JOIN ${KEY}_users u ON p.user_id = u.id \n ORDER BY p.created_at DESC \n LIMIT 50\n `);\n return Response.json(posts.rows);\n }\n\n return new Response(\n `\n \n \n ValGram 📸\n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n background-color: #fafafa;\n margin: 0;\n padding: 0;\n}\n\n.instagram-app {\n max-width: 600px;\n margin: 0 auto;\n background: white;\n min-height: 100vh;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n border-bottom: 1px solid #dbdbdb;\n}\n\n.post-upload {\n padding: 15px;\n border-bottom: 1px solid #dbdbdb;\n}\n\n.image-preview {\n max-width: 100%;\n max-height: 300px;\n object-fit: cover;\n margin: 10px 0;\n}\n\n.photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n padding: 10px;\n}\n\n.photo-card {\n border: 1px solid #dbdbdb;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.photo-card img {\n width: 100%;\n height: 250px;\n object-fit: cover;\n}\n\n.post-details {\n padding: 10px;\n}\n\n.post-actions {\n margin-top: 10px;\n}\n\ninput, textarea, button {\n width: 100%;\n margin: 5px 0;\n padding: 10px;\n box-sizing: border-box;\n}\n\n.login-form {\n max-width: 300px;\n margin: 50px auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n`;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [posts, setPosts] = useState([]);\n const [selectedImage, setSelectedImage] = useState(null);\n const [imagePreview, setImagePreview] = useState(null);\n const [postCaption, setPostCaption] = useState(\"\");\n\n useEffect(() => {\n fetch('/api/posts')\n .then(res => res.json())\n .then(setPosts);\n \n fetch('/api/me')\n .then(res => res.json())\n .then(setUser);\n }, []);\n\n const handleImageUpload = (e) => {\n const file = e.target.files[0];\n if (file) {\n setSelectedImage(file);\n const reader = new FileReader();\n reader.onloadend = () => {\n setImagePreview(reader.result);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const createPost = async (e) => {\n e.preventDefault();\n const formData = new FormData();\n formData.append('image', selectedImage);\n formData.append('caption', postCaption);\n\n const response = await fetch('/api/posts', {\n method: 'POST',\n body: formData\n });\n const newPost = await response.json();\n setPosts([newPost, ...posts]);\n \n // Reset form\n setSelectedImage(null);\n setImagePreview(null);\n setPostCaption(\"\");\n };\n\n const likePost = async (postId) => {\n const response = await fetch(`/api/posts/${postId}/like`, { method: 'POST' });\n const updatedPost = await response.json();\n setPosts(posts.map(post => post.id === postId ? updatedPost : post));\n };\n\n const login = async (username, password) => {\n const response = await fetch('/api/login', {\n method: 'POST',\n body: JSON.stringify({ username, password })\n });\n const userData = await response.json();\n setUser(userData);\n };\n\n const logout = async () => {\n await fetch('/api/logout', { method: 'POST' });\n setUser(null);\n };\n\n if (!user) {\n return ;\n }\n\n return (\n

Ashish

\n Welcome, {user.username}\n \n

\n \n

\n \n {imagePreview && (\n $\"Preview\"$ \n )}\n

setPostCaption(e.target.value)}\n            placeholder=\"Write a caption...\"\n          />\n          <button type=\"submit\" disabled={!selectedImage}>\n            Post\n          </button>\n        </form>\n      </div>\n\n      <div className=\"photo-grid\">\n        {posts.map(post => (\n          <div key={post.id} className=\"photo-card\">\n            <img \n              src={post.image_url} \n              alt={post.caption || \"Post\"} \n            />\n            <div className=\"post-details\">\n              <strong>{post.author}</strong>\n              <p>{post.caption}</p>\n              <div className=\"post-actions\">\n                <button onClick={() => likePost(post.id)}>\n                  ❤️ {post.likes || 0}\n                </button>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction LoginForm({ onLogin }) {\n  const [username, setUsername] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    onLogin(username, password);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"login-form\">\n      <input \n        type=\"text\" \n        value={username}\n        onChange={(e) => setUsername(e.target.value)}\n        placeholder=\"Username\" \n      />\n      <input \n        type=\"password\" \n        value={password}\n        onChange={(e) => setPassword(e.target.value)}\n        placeholder=\"Password\" \n      />\n      <button type=\"submit\">Login</button>\n    </form>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { blob } = await import(\"https://esm.town/v/std/blob\");\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"gregariousSapphireSnail\";\n\n  // Initialize tables with new schema\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_users (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      username TEXT UNIQUE NOT NULL,\n      password TEXT NOT NULL,\n      profile_picture TEXT\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_posts (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      user_id INTEGER NOT NULL,\n      image_url TEXT NOT NULL,\n      caption TEXT,\n      likes INTEGER DEFAULT 0,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(user_id) REFERENCES ${KEY}_users(id)\n    )\n  `);\n\n  const url = new URL(request.url);\n  \n  // Image upload handling\n  if (url.pathname === '/api/posts' && request.method === 'POST') {\n    const formData = await request.formData();\n    const imageFile = formData.get('image');\n    const caption = formData.get('caption');\n\n    // Store image in blob storage\n    const imageKey = `${KEY}_post_${Date.now()}`;\n    const imageUrl = await blob.set(imageKey, imageFile);\n\n    // Insert post record\n    const result = await sqlite.execute(\n      `INSERT INTO ${KEY}_posts (user_id, image_url, caption) VALUES (1, ?, ?)`, \n      [imageUrl, caption]\n    );\n\n    return Response.json({ \n      id: result.lastInsertRowid, \n      image_url: imageUrl, \n      caption, \n      author: 'User',\n      likes: 0\n    });\n  }\n\n  // Like post endpoint\n  if (url.pathname.startsWith('/api/posts/') && url.pathname.endsWith('/like') && request.method === 'POST') {\n    const postId = url.pathname.split('/')[3];\n    await sqlite.execute(\n      `UPDATE ${KEY}_posts SET likes = likes + 1 WHERE id = ?`, \n      [postId]\n    );\n    const updatedPost = await sqlite.execute(\n      `SELECT * FROM ${KEY}_posts WHERE id = ?`, \n      [postId]\n    );\n    return Response.json(updatedPost.rows[0]);\n  }\n\n  // Login endpoint (simplified)\n  if (url.pathname === '/api/login' && request.method === 'POST') {\n    const { username, password } = await request.json();\n    const result = await sqlite.execute(\n      `SELECT * FROM ${KEY}_users WHERE username = ? AND password = ?`, \n      [username, password]\n    );\n    \n    if (result.rows.length) {\n      return Response.json(result.rows[0]);\n    }\n    return new Response('Unauthorized', { status: 401 });\n  }\n\n  // Fetch posts endpoint\n  if (url.pathname === '/api/posts' && request.method === 'GET') {\n    const posts = await sqlite.execute(`\n      SELECT p.*, u.username as author \n      FROM ${KEY}_posts p \n      JOIN ${KEY}_users u ON p.user_id = u.id \n      ORDER BY p.created_at DESC \n      LIMIT 50\n    `);\n    return Response.json(posts.rows);\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>ValGram 📸</title>\n        <style>${css}</style>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background-color: #fafafa;\n  margin: 0;\n  padding: 0;\n}\n\n.instagram-app {\n  max-width: 600px;\n  margin: 0 auto;\n  background: white;\n  min-height: 100vh;\n}\n\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px;\n  border-bottom: 1px solid #dbdbdb;\n}\n\n.post-upload {\n  padding: 15px;\n  border-bottom: 1px solid #dbdbdb;\n}\n\n.image-preview {\n  max-width: 100%;\n  max-height: 300px;\n  object-fit: cover;\n  margin: 10px 0;\n}\n\n.photo-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 10px;\n  padding: 10px;\n}\n\n.photo-card {\n  border: 1px solid #dbdbdb;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.photo-card img {\n  width: 100%;\n  height: 250px;\n  object-fit: cover;\n}\n\n.post-details {\n  padding: 10px;\n}\n\n.post-actions {\n  margin-top: 10px;\n}\n\ninput, textarea, button {\n  width: 100%;\n  margin: 5px 0;\n  padding: 10px;\n  box-sizing: border-box;\n}\n\n.login-form {\n  max-width: 300px;\n  margin: 50px auto;\n  padding: 20px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n`;","createdAt",["D",1737702780280],"branchVersion","branchId","1d6837e6-2775-11f0-b46e-569c3dd06744","id","1d67e5a2-2775-11f0-b46e-569c3dd06744","gregariousSapphireSnail",["D",1746204440646],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","6f6f8450-da21-11ef-8f44-4f4de3a875c2","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","2991e310-346e-4b02-a025-14bb47c96ab4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",8,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","AshishChaudhary10","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJzNDVxTUJaaGJlZzNTUGtoVEFlSTZGQXZLMSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":150,"_79":151,"_81":152,"_83":25},"tree",[144],"files",[144],"counts",{"_133":61,"_134":135,"_136":135,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"1d886e9e-2775-11f0-b46e-569c3dd06744","parentId","latest",["D",1737702780280],5,"label",[28],"pulls","branches",1,"forks","envVars",{"_141":61,"_143":61},"connections",{"_141":61,"_142":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":145,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1737702780280],"children",[],[28],["D",1746204440646],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":57,"_195":-5,"_196":-7,"_197":-7,"_198":61,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":85,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]
</article></body></html>

Diff · v6