[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_266":267,"_268":269},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_198":-5,"_20":199,"_22":200,"_201":202,"_203":204,"_26":205,"_24":206,"_207":-5,"_208":-5,"_209":57,"_210":211,"_212":48,"_213":-5,"_214":-5,"_215":216},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","loading","name","newest","branchName","main","version","path","frontend","project",{"_36":144,"_13":14,"_49":145,"_146":-5,"_147":57,"_148":149,"_150":149,"_151":152,"_153":-5,"_154":155,"_156":85,"_157":48,"_158":-5,"_159":86,"_160":72,"_161":162,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":177,"_178":179,"_180":181,"_182":57},"tree",[79,80,81,82],"file",{"_36":75,"_43":44,"_39":42,"_13":19,"_54":-5,"_52":73,"_17":72,"_41":-5,"_49":76,"_45":77,"_58":-5,"_18":78},"contents",[33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":71,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":74},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_18":67},{"_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":59},"id","29ec53a4-1487-11f0-90de-569c3dd06744","index.tsx","fileId","009cf702-1481-11f0-9063-569c3dd06744","parentId","2d70afe1-1685-4c97-aaa5-a97d0803a429","branchId","c99ca83a-147e-11f0-94b9-569c3dd06744","branchVersion",94,"latest",true,"createdAt",["D",1744123120486],13,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ValCard, ValList } from \"./components/Card.tsx\";\n\nfunction App() {\n const [vals, setVals] = React.useState(null);\n const [loading, setLoading] = React.useState(true);\n const [error, setError] = React.useState(null);\n const [page, setPage] = React.useState(0);\n const limit = 20;\n\n const fetchVals = async (offset) => {\n try {\n setLoading(true);\n const response = await fetch(`/api/vals?limit=${limit}&offset=${offset}`);\n\n if (!response.ok) {\n throw new Error(`Failed to fetch vals: ${response.status}`);\n }\n\n const data = await response.json();\n setVals(data);\n setError(null);\n } catch (err) {\n console.error(\"Error fetching vals:\", err);\n setError(\"Failed to load vals. Please try again later.\");\n } finally {\n setLoading(false);\n }\n };\n\n React.useEffect(() => {\n fetchVals(page * limit);\n }, [page]);\n\n const handlePrevPage = () => {\n if (page > 0) {\n setPage(page - 1);\n }\n };\n\n const handleNextPage = () => {\n if (vals?.links.next) {\n setPage(page + 1);\n }\n };\n\n return (\n

Latest Projects on Val Town

\n {error && (\n

{error}

\n )}\n\n {loading\n ? (\n

\n )\n : (\n <>\n {vals && }\n\n

\n \n Previous\n \n\n Page {page + 1}\n\n \n Next\n \n

\n \n )}\n

\n \n

\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nif (!rootElement) throw new Error(\"Root element not found\");\n\nconst root = createRoot(rootElement);\nroot.render();","deleted",false,"label",[19,38],"e50ef280-1488-11f0-a7a6-569c3dd06744","index.html","57d806ba-1481-11f0-a360-569c3dd06744",106,["D",1744123863937],9,"\n\n \n \n \n Latest Projects on Val.Town\n \n \n \n \n \n

\n \n \n",[19,61],"9950f238-1480-11f0-8efe-569c3dd06744","components","aa99edea-d142-4aa9-aebe-69a7cda55844",["D",1744120300898],0,"directory",[19,69],"9090245c-1480-11f0-b98a-569c3dd06744",["D",1744120286212],12,[19],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":77,"_47":48,"_49":119,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":120,"_18":121},{"_36":103,"_13":104,"_39":105,"_41":-5,"_43":44,"_45":106,"_47":48,"_49":107,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":108,"_18":109},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":99,"_52":24,"_54":100,"_56":57,"_58":-5,"_91":101,"_18":102},{"_36":83,"_13":84,"_39":85,"_41":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":88,"_52":89,"_54":90,"_56":57,"_58":14,"_91":92,"_18":93},"9923eddc-149a-11f0-b1db-569c3dd06744","main.ts","0114ed44-1480-11f0-9802-569c3dd06744",173,["D",1744131467514],52,"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err: unknown, _) => {\n console.error(err);\n throw err;\n});\n\napp.use(\"*\", cors());\n\napp.get(\"/api/vals\", async (c: any) => {\n try {\n const limit = c.req.query(\"limit\") ? parseInt(c.req.query(\"limit\")) : 20;\n const offset = c.req.query(\"offset\") ? parseInt(c.req.query(\"offset\")) : 0;\n\n const response = await fetch(`https://api.val.town/v1/projects?limit=${limit}&offset=${offset}`);\n\n if (!response.ok) {\n throw new Error(`Failed to fetch vals: ${response.status} ${response.statusText}`);\n }\n\n const data = await response.json();\n for (const val of data.data) {\n // if (!val.description) {\n // const url = val.links.html.split(\"/code/\")[0].replace(\"https://www.val.town/x/\", \"https://www.esm.town/v/\")\n // + \"/README.md\";\n // try {\n // const res = await fetch(url);\n // if (!res.ok) {\n // throw new Error(`Failed to fetch val: ${response.status} ${response.statusText}`);\n // }\n // const text = await res.text();\n // val.description = await res.text();\n // } catch (error) {\n // console.error(\"Error fetching val description:\", error);\n // }\n // if (!response.ok) {\n // throw new Error(`Failed to fetch val: ${response.status} ${response.statusText}`);\n // }\n // }\n }\n return c.json(data);\n } catch (error) {\n console.error(\"Error fetching vals:\", error);\n return c.json({ error: \"Failed to fetch vals\" }, 500);\n }\n});\n\napp.get(\"/\", async _ => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\napp.get(\"/frontend/**/*\", (c: any) => serveFile(c.req.path, import.meta.url));\n\nexport default app.fetch;","children",[],[84],"b490d43c-1480-11f0-a9c0-569c3dd06744","README.md","d174ddfc-147e-11f0-bf96-569c3dd06744",17,["D",1744120346614],2,"# Latest Vals on Val Town\n\nThis project displays the latest public vals (projects) on Val Town. It uses the Val Town API to fetch the latest vals and displays them in a clean, responsive interface.\n\n## Features\n\n- Displays the latest public vals on Val Town\n- Shows val details including name, description, author, and creation date\n- Pagination support to browse through all vals\n- Responsive design that works on mobile and desktop\n- Direct links to view vals on Val Town\n\n## Technology Stack\n\n- **Backend**: Hono.js running on Deno (Val Town's runtime)\n- **Frontend**: React with Tailwind CSS (via Twind)\n- **API**: Val Town's public API\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # API endpoint to fetch vals\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React component\n│ │ ├── ValList.tsx # Component to display list of vals\n│ │ └── ValCard.tsx # Component to display a single val\n│ ├── index.html # Main HTML template\n│ └── index.tsx # React entry point\n├── README.md\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n1. The backend API endpoint fetches the latest vals from Val Town's API\n2. The frontend displays these vals in a responsive grid layout\n3. Users can navigate through pages of vals using the pagination controls\n\n## Running the Project\n\nThis project is designed to run on Val Town. Simply import it and run it as an HTTP val.\n\n## References\n\n- https://docs.val.town/openapi#tag/beta/POST/v1/projects\n- https://www.val.town/v/stevekrouse/getShowcaseVals",[],[95],"8da0bdd8-1480-11f0-ad1e-569c3dd06744","shared","0ae61cfd-8f43-4f2e-b0d4-3955dc76fe02",11,["D",1744120281290],[110],[104],{"_36":111,"_13":112,"_39":113,"_41":105,"_43":44,"_45":114,"_47":48,"_49":115,"_17":99,"_52":53,"_54":116,"_56":57,"_58":-5,"_91":117,"_18":118},"0bdc9792-1483-11f0-8a60-569c3dd06744","types.ts","8da0b554-1480-11f0-ad1e-569c3dd06744",63,["D",1744121352068],"export interface Author {\n id: string;\n username: string;\n}\n\nexport interface Val {\n name: string;\n id: string;\n createdAt: string;\n privacy: string;\n author: Author;\n description: string;\n imageUrl?: string;\n links: {\n self: string;\n html: string;\n };\n}\n\nexport interface ValResponse {\n data: Val[];\n links: {\n self: string;\n prev?: string;\n next?: string;\n };\n}",[],[104,112],["D",1744120286212],[122,123,124],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":131,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":132,"_18":133},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":128,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_91":129,"_18":130},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":125,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":126,"_18":127},["D",1744123120486],[],[19,38],["D",1744123863937],[],[19,61],["D",1744120300898],[134],[19,69],{"_36":135,"_13":136,"_39":137,"_41":70,"_43":44,"_45":138,"_47":48,"_49":139,"_17":140,"_52":53,"_54":141,"_56":57,"_58":-5,"_91":142,"_18":143},"2d843c98-14b4-11f0-ab92-569c3dd06744","Card.tsx","9c653734-1482-11f0-b222-569c3dd06744",180,["D",1744142453867],57,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function ValCard({ val }) {\n const createdAt = new Date(val.createdAt).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n\n return (\n

\n \n \n \n \n {val.author.username}\n \n

\n \n {val.name}\n \n {val.description && (\n

\n {val.description}\n

\n )}\n {!val.description &&

}\n

\n Created on {createdAt}\n

\n\n

\n \n View on Val Town →\n \n

\n );\n}\n\nexport function ValList({ vals }) {\n if (vals.length === 0) {\n return (\n

No vals found

\n );\n }\n\n return (\n

\n {vals.map((val) => )}\n

\n );\n}",[],[19,69,136],"c99c3cce-147e-11f0-94b9-569c3dd06744",["D",1744119522933],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","List of the newest projects for Val.Town","imageUrl","userId","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_197":193},"org",{"_11":12,"_191":-5,"_192":193,"_154":155,"_194":195,"_196":57},"branch",{"_17":138,"_13":16,"_36":44,"_183":144,"_184":-5,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":14,"_190":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":144,"_13":14,"_49":262,"_146":-5,"_147":57,"_148":149,"_150":149,"_151":152,"_153":-5,"_154":155,"_156":85,"_157":48,"_158":-5,"_159":86,"_160":72,"_161":162,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":263,"_178":264,"_180":265,"_182":57},[235,240,242,243],"files",[235,236,237,238,239,240,241,242,243],"counts",{"_225":72,"_226":227,"_228":72,"_32":229,"_230":231},[219,220,221],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":77,"_47":48,"_49":217,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":218},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1744120286212],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":71,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":224},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_18":223},{"_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":222},[19,38],[19,61],[19,69],"pulls","branches",1,"forks",{"_232":72,"_234":72},"connections",{"_232":72,"_233":72},"count","unfilledCount","emptyCount",{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":77,"_47":48,"_49":119,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":260,"_18":261},{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":51,"_47":48,"_49":131,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":258,"_18":259},{"_36":135,"_13":136,"_39":137,"_41":70,"_43":44,"_45":138,"_47":48,"_49":139,"_17":140,"_52":53,"_54":141,"_56":57,"_58":-5,"_91":256,"_18":257},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":128,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_91":254,"_18":255},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":125,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":252,"_18":253},{"_36":103,"_13":104,"_39":105,"_41":-5,"_43":44,"_45":106,"_47":48,"_49":107,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":250,"_18":251},{"_36":111,"_13":112,"_39":113,"_41":105,"_43":44,"_45":114,"_47":48,"_49":115,"_17":99,"_52":53,"_54":116,"_56":57,"_58":-5,"_91":248,"_18":249},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":99,"_52":24,"_54":100,"_56":57,"_58":-5,"_91":246,"_18":247},{"_36":83,"_13":84,"_39":85,"_41":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":88,"_52":89,"_54":90,"_56":57,"_58":14,"_91":244,"_18":245},[],[84],[],[95],[],[104,112],[241],[104],[],[19,38],[],[19,61],[],[19,69,136],[237],[19,69],[236,238,239],[19],["D",1744119522933],{"_11":12,"_197":193},{"_11":12,"_191":-5,"_192":193,"_154":155,"_194":195,"_196":57},{"_17":138,"_13":16,"_36":44,"_183":144,"_184":-5,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":14,"_190":12},"ctx",{"_176":-5,"_214":299,"_300":301,"_302":303,"_304":57,"_305":57,"_306":57,"_307":48,"_308":-5,"_309":-7,"_310":-7,"_311":72,"_312":57,"_313":57,"_314":-5,"_315":57,"_316":57,"_317":57,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"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"]