Download Val Town Project

\n Download any public or unlisted Val Town project as a zip via its URL.\n setURL(e.target.value)}\n placeholder=\"https://www.val.town/x/shouser/getProjectsAsZips\"\n style={{\n display: \"block\",\n \"border\": \"1px solid black\",\n \"padding\": \"10px\",\n \"margin\": \"10px 0\",\n }}\n />\n \n Download\n \n

\n All Projects\n

\n {projects.map((project) => (\n \n \n {project.author.username}/{project.name}\n \n Download\n

\n ))}\n

\n \n );\n}",[],[183,189,195],[183,189],{"_103":204,"_95":205,"_157":206,"_159":184,"_160":140,"_161":120,"_162":117,"_105":207,"_100":32,"_164":208,"_166":209,"_167":22,"_168":-5,"_169":210,"_99":211},"4a31b416-f604-11ef-9be1-569c3dd06744","favicon.svg","10be9c57-e19b-41c2-ad91-581086931a1e",["D",1740768375677],"file","",[],[183,205],{"_103":213,"_95":214,"_157":215,"_159":184,"_160":140,"_161":120,"_162":117,"_105":216,"_100":32,"_164":208,"_166":217,"_167":22,"_168":-5,"_169":218,"_99":219},"4a31d4e6-f604-11ef-9be1-569c3dd06744","index.html","6eed68da-59d7-43f8-8a45-ba493fcf809b",["D",1740768375677],"\n\n \n \n \n Get Projects As Zips\n \n \n \n \n

\n \n \n",[],[183,214],{"_103":221,"_95":222,"_157":223,"_159":184,"_160":140,"_161":120,"_162":117,"_105":224,"_100":32,"_164":198,"_166":225,"_167":22,"_168":-5,"_169":226,"_99":227},"4a31d798-f604-11ef-9be1-569c3dd06744","index.tsx","140a573f-69d4-42cb-a7ba-7a5fe8175353",["D",1740768375677],"/** @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();",[],[183,222],{"_103":229,"_95":230,"_157":231,"_159":184,"_160":140,"_161":120,"_162":117,"_105":232,"_100":32,"_164":208,"_166":233,"_167":22,"_168":-5,"_169":234,"_99":235},"4a31d946-f604-11ef-9be1-569c3dd06744","style.css","7c0cf23a-8345-4a45-b507-f6b08d38e331",["D",1740768375677],"body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.message-board {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n}\n\n\n\nfooter {\n text-align: center;\n margin-top: 20px;\n}",[],[183,230],[183],{"_103":238,"_95":239,"_157":240,"_159":-5,"_160":140,"_161":120,"_162":117,"_105":241,"_100":32,"_164":208,"_166":242,"_167":22,"_168":-5,"_169":243,"_99":244},"4a31dc52-f604-11ef-9be1-569c3dd06744","README.md","a2f9f9c6-f83b-4822-9f82-f32cd7bbba36",["D",1740768375677],"# Download Projects as a Zip\n\nThis is a proof of concept, showing how to download Val Town projects as zip files. For now, I've hardcoded my username into the code, so you can only download my public/unlisted projects. To see it working, type the name of this project **getProjectsAsZips** and press download. Waalaah!\n\nIf you fork this project, you can update the hardcoded username in frontend/MessageInput.tsx. I forked the [reactHonoStarter](https://www.val.town/x/stevekrouse/reactHonoStarter) to get started quickly (it's great), hence the weird naming and leftover code you'll see around this project.\n\n## Next Steps\nI'd love it if someone wanted to send me a PR and tackle either of these two:\n\n1. Add ability for users to input their own username\n2. Add ability for users to input their API token so they can see private projects",[],[239],"files",[154,171,181,187,193,203,212,220,228,237],"counts",{"_249":120,"_250":251,"_252":139,"_253":32},"pulls","branches",5,"forks","envVars","contents",[256,259,262],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":140,"_161":120,"_162":117,"_105":257,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":258},["D",1740768375677],[156],{"_103":182,"_95":183,"_157":184,"_159":-5,"_160":140,"_161":120,"_162":117,"_105":260,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":261},["D",1740768375677],[183],{"_103":238,"_95":239,"_157":240,"_159":-5,"_160":140,"_161":120,"_162":117,"_105":263,"_100":32,"_164":208,"_166":242,"_167":22,"_168":-5,"_99":264},["D",1740768375677],[239],"upstreamProject",{"_103":267,"_95":268,"_111":269,"_112":-5,"_109":110,"_23":270},"41ef0130-f2f5-11ef-891c-569c3dd06744","reactHonoExample","Example with client-side React & Hono server",{"_93":271,"_132":272},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":143,"_105":275,"_276":277,"_95":43,"_141":104,"_100":278,"_142":279,"_144":280,"_281":282,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":121,"_149":96},["D",1740582463346],"updatedAt",["D",1741204231628],11,"41ef5540-f2f5-11ef-891c-569c3dd06744",217,"lockfileKey","1744590139881-esm.town_v_shouser_getProjectsAsZips@11-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":98,"_101":287,"_292":32,"_293":32,"_294":295,"_317":117,"_318":291,"_319":320,"_323":-5},{"_103":104,"_95":96,"_105":288,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":289,"_134":290,"_137":291,"_151":22},["D",1740582463346],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":98,"_103":140,"_141":104,"_142":143,"_144":145,"_146":110,"_147":104,"_148":121,"_149":96,"_150":94},"ahead","behind","diff",{"_296":297,"_167":298,"_299":300},"added",[],[],"modified",[301],{"_99":302,"_303":304,"_313":314},"backend/index.ts","targetFile",{"_103":305,"_95":173,"_157":115,"_159":306,"_160":143,"_161":145,"_162":22,"_105":307,"_100":308,"_164":176,"_166":309,"_167":22,"_168":-5,"_169":-7,"_99":310,"_311":312},"50363896-f55a-11ef-a70e-569c3dd06744","90f9e0d7-af18-4c3f-8369-0aaa087a5085",["D",1740695371325],3,"import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport JSZip from \"npm:jszip\";\n\nconst app = new Hono();\nconst vt = new ValTown();\n\n// Bootstrap the initial messages data into index.html\nconst projects = await getAllProjects();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\nasync function getAllProjects() {\n let projects = await vt.projects.list({ limit: 100, offset: 0 });\n let allProjects = [...projects.data];\n while (projects.data.length === 100 && allProjects.length < 1000) {\n projects = await vt.projects.list({ limit: 100, offset: projects.data.length });\n allProjects = [...allProjects, ...projects.data];\n }\n return allProjects;\n}\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/zip-project\", async (c) => {\n const url = c.req.query(\"url\");\n\n if (!url) {\n return c.json({\n success: false,\n error: \"Missing required parameter: url\",\n }, 400);\n }\n\n const { username, projectName } = parseValTownProjectURL(url);\n\n if (!username || !projectName) {\n return c.json({\n success: false,\n error: \"Missing required parameters: username and projectName\",\n }, 400);\n }\n\n const projectDetails = await vt.alias.username.projectName.retrieve(username, projectName);\n\n if (!projectDetails || !projectDetails.id) {\n return c.json({\n success: false,\n error: \"Project not found\",\n }, 404);\n }\n\n const projectId = projectDetails.id;\n const files = await vt.projects.files.list(projectId, { recursive: true });\n const filesWithContent = await getFilesWithContent(files.body.data, projectId);\n const zipBuffer = await createZipFromEndpoints(filesWithContent, `${projectName}.zip`);\n\n c.header(\"Content-Type\", \"application/zip\");\n c.header(\"Content-Disposition\", `attachment; filename=\"${projectName}.zip\"`);\n\n // Return the ZIP file directly\n return c.body(zipBuffer, 200);\n});\n\nfunction parseValTownProjectURL(url: string) {\n // Use the URL constructor to parse the URL\n const { pathname } = new URL(url);\n // Split the pathname and filter out empty segments\n const parts = pathname.split(\"/\").filter(Boolean);\n // Expecting the format: [\"x\", \"stevekrouse\", \"getProjectsAsZips\"]\n if (parts.length < 3 || parts[0] !== \"x\") {\n throw new Error(\"Invalid URL structure\");\n }\n const username = parts[1];\n const projectName = parts[2];\n return { username, projectName };\n}\nasync function getFilesWithContent(files: any[], projectId) {\n const nonDirectoryFiles = files.filter(file => file.type !== \"directory\");\n\n const failedFiles = [];\n\n const filePromises = nonDirectoryFiles.map(async file => {\n try {\n const urlEncodedPath = encodeURIComponent(file.path);\n console.log(\"url encoded path\", urlEncodedPath);\n const response = await vt.projects.files.content(projectId, urlEncodedPath);\n\n if (!response) {\n throw new Error(`Could not get content for file: ${file.path}`);\n }\n\n return {\n name: file.path,\n content: response,\n };\n } catch (error) {\n failedFiles.push({\n path: file.path,\n error: error.message,\n });\n }\n });\n\n const results = await Promise.all(filePromises);\n if (failedFiles.length > 0) {\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to fetch content for files: ${failedFilesList}`);\n }\n\n return results;\n}\n\nasync function createZipFromEndpoints(\n files: any[],\n zipFileName: string,\n): Promise {\n try {\n const zip = new JSZip();\n\n for (const file of files) {\n zip.file(file.name, file.content);\n }\n\n const zipBlob = await zip.generateAsync({\n type: \"blob\",\n compression: \"DEFLATE\",\n compressionOptions: { level: 6 },\n });\n\n return zipBlob;\n } catch (error) {\n console.error(\"Error creating ZIP file:\", error);\n throw error;\n }\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, c) => {\n throw err;\n});\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;",[156,173],"contentHash","581d6fa15b7abd2e0367786b9b6e72155125dcf810afc6d0e168758e28222f0c","sourceFile",{"_103":172,"_95":173,"_157":174,"_159":158,"_160":140,"_161":139,"_162":117,"_105":175,"_100":120,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":-7,"_99":315,"_311":316},[156,173],"99d15d27cda68cd98bd211cbd9dec7c93ca73ae434e9e58fdac55b0bef4f1bf3","hasChanges","sourceBranch","targetBranch",{"_103":143,"_105":321,"_276":322,"_95":43,"_141":104,"_100":278,"_142":279,"_144":280,"_281":282,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":121,"_149":96},["D",1740582463346],["D",1741204231628],"pull","actionData","errors"]

Mergefix-paginationintomain

Hbackend/index.ts+11-4