[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_255":256,"_257":258},"routes/_app.x.$handle.$name",{"_99":98,"_33":47,"_107":89,"_28":38,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":27,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":27},"version",88,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"path","frontend/tailwind.config.ts","latestPath","fileId","2551bf24-1486-11f0-b862-569c3dd06744","name","tailwind.config.ts","fileType","script","content","","default exports = {\n theme: {\n colors: {\n gray: colors.coolGray,\n blue: colors.lightBlue,\n red: colors.rose,\n pink: colors.fuchsia,\n },\n fontFamily: {\n sans: ['Graphik', 'sans-serif'],\n serif: ['Merriweather', 'serif'],\n },\n extend: {\n spacing: {\n '128': '32rem',\n '144': '36rem',\n },\n borderRadius: {\n '4xl': '2rem',\n }\n }\n },\n variants: {\n extend: {\n borderColor: ['focus-visible'],\n opacity: ['disabled'],\n }\n }\n}","createdAt",["D",1744122725402],"branchVersion","branchId","c99ca83a-147e-11f0-94b9-569c3dd06744","id","c99c3cce-147e-11f0-94b9-569c3dd06744","newest",["D",1744119522933],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","List of the newest projects for Val.Town","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","0114ed44-1480-11f0-9802-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",173,"likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":57,"_103":104,"_105":27},"branch",{"_13":88,"_33":89,"_45":44,"_90":46,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":47,"_97":98},"isOwned",180,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_45":46,"_33":47,"_40":251,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":252,"_83":253,"_85":254,"_87":27},"tree",[175,181,184,185],"files",[175,176,177,178,179,180,181,182,183,184,185],"counts",{"_164":65,"_165":166,"_167":65,"_168":169,"_170":171},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":158,"_33":159,"_31":160,"_134":-5,"_43":44,"_42":161,"_136":25,"_40":162,"_13":65,"_35":156,"_37":-5,"_24":27,"_141":-5,"_28":163},{"_45":151,"_33":152,"_31":153,"_134":-5,"_43":44,"_42":154,"_136":25,"_40":155,"_13":65,"_35":156,"_37":-5,"_24":27,"_141":-5,"_28":157},{"_45":143,"_33":144,"_31":145,"_134":-5,"_43":44,"_42":146,"_136":25,"_40":147,"_13":148,"_35":20,"_37":149,"_24":27,"_141":-5,"_28":150},{"_45":132,"_33":133,"_31":59,"_134":-5,"_43":44,"_42":135,"_136":27,"_40":137,"_13":138,"_35":139,"_37":140,"_24":27,"_141":47,"_28":142},"234ddabc-1483-11f0-a070-569c3dd06744","main.ts","parentId",64,"latest",["D",1744121391374],14,"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, c) => {\n console.error(err);\n throw err;\n});\n\napp.use(\"*\", cors());\n\napp.get(\"/api/vals\", async (c) => {\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 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 c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\nexport default app.fetch;","label",[133],"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",[144],"8da0bdd8-1480-11f0-ad1e-569c3dd06744","shared","0ae61cfd-8f43-4f2e-b0d4-3955dc76fe02",11,["D",1744120281290],"directory",[152],"9090245c-1480-11f0-b98a-569c3dd06744","frontend","2d70afe1-1685-4c97-aaa5-a97d0803a429",12,["D",1744120286212],[159],"pulls","branches",1,"forks","envVars",{"_172":65,"_174":65},"connections",{"_172":65,"_173":65},"count","unfilledCount","emptyCount",{"_45":158,"_33":159,"_31":160,"_134":-5,"_43":44,"_42":161,"_136":25,"_40":248,"_13":65,"_35":156,"_37":-5,"_24":27,"_141":-5,"_187":249,"_28":250},{"_45":243,"_33":242,"_31":236,"_134":160,"_43":44,"_42":244,"_136":25,"_40":245,"_13":65,"_35":156,"_37":-5,"_24":27,"_141":-5,"_187":246,"_28":247},{"_45":233,"_33":234,"_31":235,"_134":236,"_43":44,"_42":237,"_136":27,"_40":238,"_13":161,"_35":36,"_37":239,"_24":27,"_141":-5,"_187":240,"_28":241},{"_45":224,"_33":225,"_31":226,"_134":160,"_43":44,"_42":227,"_136":27,"_40":228,"_13":229,"_35":20,"_37":230,"_24":27,"_141":-5,"_187":231,"_28":232},{"_45":216,"_33":217,"_31":218,"_134":160,"_43":44,"_42":219,"_136":27,"_40":220,"_13":154,"_35":36,"_37":221,"_24":27,"_141":-5,"_187":222,"_28":223},{"_45":212,"_33":34,"_31":32,"_134":160,"_43":44,"_42":14,"_136":27,"_40":213,"_13":166,"_35":36,"_37":39,"_24":27,"_141":-5,"_187":214,"_28":215},{"_45":151,"_33":152,"_31":153,"_134":-5,"_43":44,"_42":154,"_136":25,"_40":209,"_13":65,"_35":156,"_37":-5,"_24":27,"_141":-5,"_187":210,"_28":211},{"_45":201,"_33":202,"_31":203,"_134":153,"_43":44,"_42":204,"_136":27,"_40":205,"_13":154,"_35":36,"_37":206,"_24":27,"_141":-5,"_187":207,"_28":208},{"_45":193,"_33":194,"_31":195,"_134":153,"_43":44,"_42":196,"_136":25,"_40":197,"_13":148,"_35":36,"_37":198,"_24":27,"_141":-5,"_187":199,"_28":200},{"_45":143,"_33":144,"_31":145,"_134":-5,"_43":44,"_42":146,"_136":25,"_40":190,"_13":148,"_35":20,"_37":149,"_24":27,"_141":-5,"_187":191,"_28":192},{"_45":132,"_33":133,"_31":59,"_134":-5,"_43":44,"_42":135,"_136":27,"_40":186,"_13":138,"_35":139,"_37":140,"_24":27,"_141":47,"_187":188,"_28":189},["D",1744121391374],"children",[],[133],["D",1744120346614],[],[144],"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}",[],[152,194],"8b3ac7d2-1485-11f0-a013-569c3dd06744","gen.ts","4fb26a0e-1484-11f0-959b-569c3dd06744",84,["D",1744122424749],"import { zodResponseFormat } from \"https://esm.sh/openai/helpers/zod\";\nimport { z } from \"https://esm.sh/zod\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\n\nconst openai = new OpenAI();\n\nconst ValDescriptions = z.object({\n descriptiveName: z.string(),\n description: z.string(),\n});\n\nexport async function getDescription(val: any) {\n const completion = await openai.beta.chat.completions.parse({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"system\",\n content: `You are a developer evanglist for Val Town,\n a collaborative coding community. Given the following val as JSON,\n give it a descriptive name (right now it just has a slug for a name),\n and a description. These names and descriptions will fill out a grid\n somewhat like grid of YouTube videos. Make it as appealing and clickworthy as possible.\n `,\n },\n { role: \"user\", content: JSON.stringify(val) },\n ],\n response_format: zodResponseFormat(ValDescriptions, \"ValDescriptions\"),\n });\n return completion.choices[0].message.parsed as typeof ValDescriptions;\n}",[],[152,202],["D",1744120281290],[182,183],[152],"3e6fb894-1486-11f0-813b-569c3dd06744",["D",1744122725402],[],[159,34],"3013392c-1483-11f0-ab35-569c3dd06744","index.tsx","009cf702-1481-11f0-9063-569c3dd06744",65,["D",1744121412822],"/** @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 Vals 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();",[],[159,217],"d2755f6c-1481-11f0-b3a8-569c3dd06744","index.html","57d806ba-1481-11f0-a360-569c3dd06744",42,["D",1744120826264],6,"\n\n \n \n \n Latest Vals on Val Town\n \n \n \n \n \n

\n \n \n",[],[159,225],"b647dffa-1485-11f0-af4d-569c3dd06744","Card.tsx","9c653734-1482-11f0-b222-569c3dd06744","aa99edea-d142-4aa9-aebe-69a7cda55844",86,["D",1744122496977],"/** @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 {val.name}\n

\n \n {val.privacy}\n \n

\n\n

\n {val.description || \"No description\"}\n

\n\n

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

\n\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}",[],[159,242,234],"components","9950f238-1480-11f0-8efe-569c3dd06744",13,["D",1744120300898],[177],[159,242],["D",1744120286212],[176,178,179,180],[159],["D",1744119522933],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":57,"_103":104,"_105":27},{"_13":88,"_33":89,"_45":44,"_90":46,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":47,"_97":98},"ctx",{"_81":-5,"_125":288,"_289":290,"_291":292,"_293":27,"_294":27,"_295":27,"_296":25,"_297":-5,"_298":-7,"_299":-7,"_300":65,"_301":27,"_302":27,"_303":-5,"_304":27,"_305":27,"_306":27,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":89,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"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"]

Diff · v88