[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_258":259,"_260":261},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":90,"_27":36,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":59,"_125":-5,"_126":-5,"_127":128},"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":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",30,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/Common.html","latestPath","fileId","d62c0fb4-3610-11f1-acce-42b51c65c3df","name","Common.html","fileType","content","","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n\n \n \n \n","createdAt",["D",1775958243239],"branchVersion","branchId","89f88876-3169-11f1-9094-42dde27851f2","id","89f035d6-3169-11f1-9094-42dde27851f2","khacks",["D",1775446478026],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Personal hacks","imageUrl","019d3acb-4266-73d5-b8a9-93ce4f16a9b3","pinnedFileId","019d60db-4d3b-744e-a4f9-a1cd54af5feb","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019d3acb-4266-73d5-b8a9-96af6d3b07cc","tursoName","89f035d6316911f1909442dde27851f2","tursoHostname","89f035d6316911f1909442dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789470042795],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",215,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","KMan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNCZDkxUG1lV2dqZEV1N1ljYXFxVUM1Ull2bSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":253,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":254,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":255,"_84":256,"_86":257,"_88":25},"tree",[173,175,183,184],"files",[173,174,175,176,177,178,179,180,181,182,183,184],"counts",{"_163":63,"_164":147,"_165":63,"_166":167,"_168":169},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":157,"_32":158,"_30":159,"_135":-5,"_41":42,"_40":160,"_137":59,"_38":161,"_13":147,"_34":155,"_35":-5,"_24":25,"_142":-5,"_27":162},{"_43":151,"_32":152,"_30":153,"_135":-5,"_41":42,"_40":147,"_137":59,"_38":154,"_13":63,"_34":155,"_35":-5,"_24":25,"_142":-5,"_27":156},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":59,"_38":148,"_13":63,"_34":20,"_35":149,"_24":25,"_142":-5,"_27":150},{"_43":133,"_32":134,"_30":57,"_135":-5,"_41":42,"_40":136,"_137":25,"_38":138,"_13":139,"_34":140,"_35":141,"_24":25,"_142":45,"_27":143},"ff1556e0-35c7-11f1-a62f-42b51c65c3df","index.ts","parentId",26,"latest",["D",1775926851941],10,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { insertBook, insertUncommonWord, insertYTUrl } from \"./backend/db.ts\";\nimport { fetch } from \"https://esm.town/v/std/fetch\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\napp.post(\"/books\", async (c) => {\n try {\n // Parse JSON body\n const body = await c.req.json().catch(() => null);\n\n // Validate input\n if (!body || typeof body !== \"object\") {\n return c.json({ error: \"Request body must be a valid JSON object\" }, 400);\n }\n\n if (!body.title || typeof body.title !== \"string\") {\n return c.json({\n error: \"Request must include a 'title' property with a string value\",\n }, 400);\n }\n\n if (body.title.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n insertBook(\n body.title,\n body.author,\n body.description ?? null,\n body.genre ?? null,\n );\n\n // Return the newly created phrase\n return c.json({\n message: \"Book saved successfully\",\n yturl: body.title,\n }, 200);\n } catch (error) {\n console.error(\"Error adding books:\", error);\n return c.json({ error: \"Failed to books\" }, 500);\n }\n});\n\napp.post(\"/uncommon\", async (c) => {\n try {\n // Parse JSON body\n const body = await c.req.json().catch(() => null);\n\n // Validate input\n if (!body || typeof body !== \"object\") {\n return c.json({ error: \"Request body must be a valid JSON object\" }, 400);\n }\n\n if (!body.term || typeof body.term !== \"string\") {\n return c.json({\n error: \"Request must include a 'term' property with a string value\",\n }, 400);\n }\n\n if (body.term.trim() === \"\") {\n return c.json({ error: \"Term cannot be empty\" }, 400);\n }\n\n insertUncommonWord(body.term, body.description ?? null, body.notes ?? null);\n\n return c.json({\n message: \"Uncommon phrase saved successfully\",\n yturl: body.term,\n }, 200);\n } catch (error) {\n console.error(\"Error adding uncommon phrase:\", error);\n return c.json({ error: \"Failed to save the phrase\" }, 500);\n }\n});\n\napp.post(\"/ytube\", async (c) => {\n //await ensureTableExists();\n\n try {\n // Parse JSON body\n const body = await c.req.json().catch(() => null);\n\n // Validate input\n if (!body || typeof body !== \"object\") {\n return c.json({ error: \"Request body must be a valid JSON object\" }, 400);\n }\n\n if (!body.url || typeof body.url !== \"string\") {\n return c.json({\n error: \"Request must include a 'url' property with a string value\",\n }, 400);\n }\n\n if (body.url.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n //https://www.youtube.com/oembed?url=\n const data = await fetch(\n `https://www.youtube.com/oembed?url=${body.url}&format=json`,\n );\n const jsonData = await data.json();\n\n insertYTUrl(body.url.trim(), jsonData.title, body.description ?? null);\n\n // Return the newly created phrase\n return c.json({\n message: \"YT Url saved successfully\",\n yturl: jsonData.title,\n }, 201);\n } catch (error) {\n console.error(\"Error adding YT url:\", error);\n return c.json({ error: \"Failed to save YT url\" }, 500);\n }\n});\n\napp.get(\"/testing\", (c) =>\n c.json({\n hello: \"world\",\n baseUrl: c.req.url.replace(c.req.path, \"\"),\n \"import.meta.url\": import.meta.url,\n }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","label",[134],"89fbc892-3169-11f1-9094-42dde27851f2","README.md","019d60db-4d3b-744e-a4f9-9d1d6b380c62",1,["D",1775446478026],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[145],"89fbc75c-3169-11f1-9094-42dde27851f2","frontend","019d60db-4d3b-744e-a4f9-99649d93cb85",["D",1775446478026],"directory",[152],"ff6af6c4-316f-11f1-88b8-42dde27851f2","backend","fd9c88d0-316f-11f1-ae4b-42dde27851f2",3,["D",1775449252133],[158],"pulls","branches","forks","envVars",{"_170":147,"_172":63},"connections",{"_170":63,"_171":63},"count","unfilledCount","emptyCount",{"_43":157,"_32":158,"_30":159,"_135":-5,"_41":42,"_40":160,"_137":59,"_38":250,"_13":147,"_34":155,"_35":-5,"_24":25,"_142":-5,"_186":251,"_27":252},{"_43":241,"_32":242,"_30":243,"_135":159,"_41":42,"_40":244,"_137":25,"_38":245,"_13":246,"_34":203,"_35":247,"_24":25,"_142":-5,"_186":248,"_27":249},{"_43":151,"_32":152,"_30":153,"_135":-5,"_41":42,"_40":147,"_137":59,"_38":238,"_13":63,"_34":155,"_35":-5,"_24":25,"_142":-5,"_186":239,"_27":240},{"_43":234,"_32":233,"_30":228,"_135":153,"_41":42,"_40":147,"_137":59,"_38":235,"_13":63,"_34":155,"_35":-5,"_24":25,"_142":-5,"_186":236,"_27":237},{"_43":225,"_32":226,"_30":227,"_135":228,"_41":42,"_40":147,"_137":59,"_38":229,"_13":63,"_34":203,"_35":230,"_24":25,"_142":-5,"_186":231,"_27":232},{"_43":221,"_32":33,"_30":31,"_135":153,"_41":42,"_40":14,"_137":25,"_38":222,"_13":160,"_34":20,"_35":37,"_24":25,"_142":-5,"_186":223,"_27":224},{"_43":214,"_32":215,"_30":216,"_135":153,"_41":42,"_40":147,"_137":59,"_38":217,"_13":63,"_34":20,"_35":218,"_24":25,"_142":-5,"_186":219,"_27":220},{"_43":207,"_32":208,"_30":209,"_135":153,"_41":42,"_40":147,"_137":25,"_38":210,"_13":63,"_34":20,"_35":211,"_24":25,"_142":-5,"_186":212,"_27":213},{"_43":199,"_32":200,"_30":201,"_135":153,"_41":42,"_40":147,"_137":25,"_38":202,"_13":63,"_34":203,"_35":204,"_24":25,"_142":-5,"_186":205,"_27":206},{"_43":192,"_32":193,"_30":194,"_135":153,"_41":42,"_40":147,"_137":59,"_38":195,"_13":63,"_34":20,"_35":196,"_24":25,"_142":-5,"_186":197,"_27":198},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":59,"_38":189,"_13":63,"_34":20,"_35":149,"_24":25,"_142":-5,"_186":190,"_27":191},{"_43":133,"_32":134,"_30":57,"_135":-5,"_41":42,"_40":136,"_137":25,"_38":185,"_13":139,"_34":140,"_35":141,"_24":25,"_142":45,"_186":187,"_27":188},["D",1775926851941],"children",[],[134],["D",1775446478026],[],[145],"89fbc446-3169-11f1-9094-42dde27851f2","style.css","019d60db-4d3b-744e-a4f9-9411665e62ef",["D",1775446478026],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[152,193],"89fbba32-3169-11f1-9094-42dde27851f2","index.tsx","019d60db-4d3b-744e-a4f9-93129402de20",["D",1775446478026],"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();",[],[152,200],"89fbb550-3169-11f1-9094-42dde27851f2","index.html","019d60db-4d3b-744e-a4f9-8e243d39f3d6",["D",1775446478026],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[152,208],"89fbaf38-3169-11f1-9094-42dde27851f2","favicon.svg","019d60db-4d3b-744e-a4f9-89ecb6740d40",["D",1775446478026],"\n",[],[152,215],"15c12b3c-3611-11f1-8e74-42b51c65c3df",["D",1775958243239],[],[152,33],"89fb886e-3169-11f1-9094-42dde27851f2","App.tsx","019d60db-4d3a-758a-85f2-055b8e771277","019d60db-4d3b-744e-a4f9-875ac38dca3b",["D",1775446478026],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[152,233,226],"components","89fbacb8-3169-11f1-9094-42dde27851f2",["D",1775446478026],[177],[152,233],["D",1775446478026],[176,178,179,180,181,182],[152],"cc34a654-32fc-11f1-974f-42b51c65c3df","db.ts","03d04502-3170-11f1-a5cc-42dde27851f2",25,["D",1775619676352],12,"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n//await createTables();\n\nexport async function insertYTUrl(\n url: string,\n title: string | null,\n description: string | null,\n) {\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO YTLINKS (url, title, description) VALUES(:url, :title, :description)`,\n args: { url, title, description },\n });\n\n // await sqlite.execute({\n // sql: `insert into kv(key, value) values (:key, :value)`,\n // args: { key: \"specialkey\", value: \"specialvalue\" },\n // });\n}\n\nexport async function insertBook(\n title: string,\n author: string | null,\n description: string | null,\n genre: string | null,\n) {\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO BKLINKS (title, author, description, genre) VALUES (:title, :author, :description, :genre)`,\n args: { title, author, description, genre },\n });\n}\n\nexport async function insertUncommonWord(\n term: string,\n description: string | null,\n notes: string | null,\n) {\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO UNCOMMON_WORDS (term, description, notes) VALUES (:term, :description, :notes)`,\n args: { term, description, notes },\n });\n}\n\nexport async function insertGHubLink(\n url: string,\n description: string | null,\n) {\n await sqlite.execute({\n sql:\n `INSERT OR IGNORE INTO GHUB (url, description) VALUES (:url, :description)`,\n args: { url, description },\n });\n}\n\nexport async function createTables() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS YTLINKS (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n url TEXT NOT NULL UNIQUE,\n title TEXT NULL,\n description TEXT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n\n `CREATE TABLE IF NOT EXISTS BKLINKS (\n id INTEGER PRIMARY KEY AUTOINCREMENT, \n title TEXT NOT NULL,\n author TEXT NOT NULL,\n description TEXT NULL,\n genre TEXT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n\n `CREATE TABLE IF NOT EXISTS UNCOMMON_WORDS (\n id INTEGER PRIMARY KEY AUTOINCREMENT, \n term TEXT NOT NULL,\n description TEXT NULL,\n notes TEXT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n /* Add any other tables or migrations you want here\n\n However, you should know that SQLite has much more limited\n support for altering existing tables as compared to other databases.\n Often it's easier to create new tables with the schema you want, and then\n copy the data over. */\n ]);\n}",[],[158,242],["D",1775449252133],[174],[158],["D",1775446478026],["D",1789470042795],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"ctx",{"_82":-5,"_126":291,"_292":293,"_294":295,"_296":25,"_297":25,"_298":25,"_299":59,"_300":-5,"_301":-7,"_302":-7,"_303":63,"_304":25,"_305":25,"_306":-5,"_307":25,"_308":25,"_309":25,"_310":-5},"ENV",{"_262":263,"_264":265,"_266":90,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290},"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"]

Diff · v30