Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[188],{"_111":196,"_102":197,"_169":198,"_171":-5,"_172":154,"_173":199,"_175":125,"_113":200,"_107":33,"_177":178,"_179":201,"_181":22,"_182":-5,"_183":202,"_105":203},"0c69c9aa-139c-11f1-b347-42dde27851f2","deno.json","0c69ca72-139c-11f1-b347-42dde27851f2",57,["D",1772169636756],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[197],{"_111":205,"_102":206,"_169":123,"_171":-5,"_172":154,"_173":207,"_175":125,"_113":208,"_107":209,"_177":210,"_179":211,"_181":22,"_182":-5,"_183":212,"_105":213},"0c5c3c18-139c-11f1-8016-42dde27851f2","host-zip-files.ts",56,["D",1772169636746],32,"http","// Imports: Val Town blob storage for persisting files, JSZip for extracting zip archives\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\n\n// Map file extensions to content types\nconst contentTypeMap: Record = {\n \".html\": \"text/html\",\n \".css\": \"text/css\",\n \".js\": \"text/javascript\",\n \".json\": \"application/json\",\n \".png\": \"image/png\",\n \".jpg\": \"image/jpeg\",\n \".jpeg\": \"image/jpeg\",\n \".gif\": \"image/gif\",\n \".svg\": \"image/svg+xml\",\n \".ico\": \"image/x-icon\",\n \".txt\": \"text/plain\",\n \".md\": \"text/markdown\",\n \".pdf\": \"application/pdf\",\n \".woff\": \"font/woff\",\n \".woff2\": \"font/woff2\",\n \".ttf\": \"font/ttf\",\n \".eot\": \"application/vnd.ms-fontobject\",\n \".otf\": \"font/otf\",\n \".xml\": \"application/xml\",\n \".webp\": \"image/webp\",\n \".mp4\": \"video/mp4\",\n \".webm\": \"video/webm\",\n \".mp3\": \"audio/mpeg\",\n \".wav\": \"audio/wav\",\n \".ogg\": \"audio/ogg\",\n \".zip\": \"application/zip\",\n \".csv\": \"text/csv\",\n \".doc\": \"application/msword\",\n \".docx\": \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n \".xls\": \"application/vnd.ms-excel\",\n \".xlsx\": \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n \".ppt\": \"application/vnd.ms-powerpoint\",\n \".pptx\": \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n};\n\n// Returns the MIME content type for a given filename based on its extension,\n// falling back to \"application/octet-stream\" for unknown types\nfunction getContentType(filename: string): string {\n const extension = filename.substring(filename.lastIndexOf(\".\")).toLowerCase();\n return contentTypeMap[extension] || \"application/octet-stream\";\n}\n\n// Returns true for file types that must be read as binary (images, fonts, audio/video, etc.)\n// rather than as UTF-8 text, to avoid data corruption when storing/serving them\nfunction isBinaryFile(filename: string): boolean {\n return /\\.(png|jpg|jpeg|gif|ico|pdf|woff|woff2|ttf|eot|otf|mp4|webm|mp3|wav|ogg|zip|webp)$/i.test(filename);\n}\n\n// Generates a unique upload ID using the current timestamp and a random suffix,\n// used as the namespace/prefix for all blob keys belonging to a single upload\nfunction generateUploadId(): string {\n return `upload_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;\n}\n\n// Extracts a zip archive and stores every file into blob storage under a unique upload ID.\n// Returns the upload ID, which is used as the URL path prefix to serve the files later.\nasync function processZipUpload(zipData: ArrayBuffer): Promise {\n const uploadId = generateUploadId();\n const zip = new JSZip();\n\n try {\n // Parse the raw zip bytes into a JSZip object for iteration\n const zipContents = await zip.loadAsync(zipData);\n\n // Track all stored file paths so we can build a directory index\n const fileList: string[] = [];\n\n // Iterate every entry in the zip archive\n for (const [relativePath, zipEntry] of Object.entries(zipContents.files)) {\n // Skip directory entries — we only store actual file content\n if (zipEntry.dir) continue;\n\n // Skip hidden files and folders (e.g. .DS_Store, .git/) to avoid junk\n if (relativePath.split(\"/\").some(part => part.startsWith(\".\"))) continue;\n \n // Read as binary bytes or UTF-8 text depending on the file type\n const isFileBinary = isBinaryFile(relativePath);\n\n let fileContent;\n if (isFileBinary) {\n fileContent = await zipEntry.async(\"uint8array\");\n } else {\n fileContent = await zipEntry.async(\"text\");\n }\n\n console.log(`Processing file: ${relativePath}, isBinary: ${isFileBinary}`);\n\n // Store the file in blob storage under \"/\"\n const fileKey = `${uploadId}/${relativePath}`;\n console.log(`Storing file: ${fileKey}, content type: ${typeof fileContent}`);\n await blob.set(fileKey, fileContent);\n\n fileList.push(relativePath);\n }\n\n // Persist the full file list so the directory listing page can enumerate files\n await blob.setJSON(`${uploadId}/_index`, fileList);\n\n // Look for an index.html to auto-serve when visiting the upload root URL\n const indexFile = fileList.find(file =>\n file.toLowerCase() === \"index.html\" ||\n file.toLowerCase().endsWith(\"/index.html\")\n );\n\n // Persist upload metadata (timestamp, file count, entry point) for later retrieval\n await blob.setJSON(`${uploadId}/_meta`, {\n uploadTime: new Date().toISOString(),\n fileCount: fileList.length,\n indexFile: indexFile || null,\n });\n \n return uploadId;\n } catch (error) {\n console.error(\"Error processing zip:\", error);\n throw new Error(\"Failed to process zip file\");\n }\n}\n\n// ─── HTTP Request Handler ────────────────────────────────────────────────────\n// Routes incoming requests to one of three handlers:\n// POST /upload — receives and processes a zip file upload\n// GET / — serves the upload form UI\n// GET /view/[/file]— serves an uploaded file or directory listing\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n \n console.log(`Handling request for path: ${path}`);\n \n // Log request headers for debugging\n const headers: Record = {};\n req.headers.forEach((value, key) => {\n headers[key] = value;\n });\n console.log(`Request headers: ${JSON.stringify(headers)}`);\n \n // ── POST /upload ─────────────────────────────────────────────────────────\n // Accepts a multipart form with a \"zipFile\" field, extracts it, stores all\n // files in blob storage, and returns a JSON response with the access URL.\n if (req.method === \"POST\" && path === \"/upload\") {\n try {\n // Check if the request contains a file\n const formData = await req.formData();\n const zipFile = formData.get(\"zipFile\");\n \n if (!zipFile || !(zipFile instanceof File)) {\n return new Response(JSON.stringify({ error: \"No zip file provided\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n // Process the zip file\n const zipData = await zipFile.arrayBuffer();\n const uploadId = await processZipUpload(zipData);\n \n // Return success response with access URL\n // Make sure the URL is properly formatted\n const accessUrl = new URL(`/view/${uploadId}`, url.origin).toString();\n \n return new Response(JSON.stringify({\n success: true,\n uploadId,\n message: \"Zip file uploaded and processed successfully\",\n accessUrl: accessUrl\n }), {\n status: 200,\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n console.error(\"Upload error:\", error);\n return new Response(JSON.stringify({ error: \"Failed to process upload\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n \n // ── GET requests ─────────────────────────────────────────────────────────\n if (req.method === \"GET\") {\n // ── GET / ── Serve the upload form UI (HTML page with drag-and-drop input)\n if (path === \"/\" || path === \"\") {\n return new Response(`\n \n \n \n \n \n Zip File Hosting\n \n \n \n

Zip File Hosting

Upload a zip file containing your HTML, CSS, and JavaScript files to host them.

\n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n \n // ── GET /view/[/] ── Serve uploaded files or directory listing\n if (path.startsWith(\"/view/\")) {\n const parts = path.split(\"/\").filter(Boolean);\n \n if (parts.length < 2) {\n return new Response(\"Invalid path\", { status: 400 });\n }\n \n const uploadId = parts[1];\n \n // No file path segment — serve index.html if one exists, otherwise show a directory listing\n if (parts.length === 2) {\n try {\n // Check if this upload exists\n const meta = await blob.getJSON(`${uploadId}/_meta`);\n \n if (!meta) {\n return new Response(\"Upload not found\", { status: 404 });\n }\n \n // If there's an index file, serve it directly instead of redirecting\n if (meta.indexFile) {\n console.log(`Serving index file directly: ${meta.indexFile}`);\n const indexFileKey = `${uploadId}/${meta.indexFile}`;\n \n try {\n // Get the index file content\n console.log(`Retrieving index file: ${indexFileKey}`);\n const indexContent = await blob.get(indexFileKey);\n \n console.log(`Index content type: ${typeof indexContent}, is Response: ${indexContent instanceof Response}`);\n \n if (indexContent === null) {\n return new Response(`Index file not found: ${meta.indexFile}`, { status: 404 });\n }\n \n // Determine content type (should be HTML)\n const contentType = getContentType(meta.indexFile);\n \n // Check if indexContent is already a Response object\n if (indexContent instanceof Response) {\n console.log(\"Index content is already a Response object, extracting content...\");\n try {\n // For binary files, we need to use arrayBuffer() instead of text()\n if (isBinaryFile(meta.indexFile)) {\n const buffer = await indexContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n // For text files, use text()\n const text = await indexContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n // Serve the index file directly\n return new Response(indexContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // Add caching for better performance\n \"Access-Control-Allow-Origin\": \"*\", // Allow cross-origin requests\n \"X-Content-Type-Options\": \"nosniff\" // Prevent MIME type sniffing\n }\n });\n } catch (error) {\n console.error(`Error serving index file ${indexFileKey}:`, error);\n return new Response(`Error retrieving index file: ${error.message}`, { status: 500 });\n }\n }\n \n // Otherwise show a directory listing\n const fileList = await blob.getJSON(`${uploadId}/_index`);\n \n const htmlContent = `\n \n \n \n \n \n Files in ${uploadId}\n \n \n \n

Files in Upload ${uploadId}

Upload time: ${new Date(meta.uploadTime).toLocaleString()}

Total files: ${meta.fileCount}

\n \n

${file}

\n \n \n `;\n \n return new Response(htmlContent, {\n headers: { \n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-cache\", // Don't cache directory listings\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n } catch (error) {\n console.error(\"Error serving directory:\", error);\n return new Response(`Error retrieving files: ${error.message}`, { status: 500 });\n }\n }\n \n // ── Serve a specific file by path ────────────────────────────────────\n // Reconstruct the relative file path from the URL segments, look it up in\n // blob storage, and return it with the appropriate content-type header.\n // Also retries with URL-decoded path if the first lookup returns null.\n const filePath = parts.slice(2).join(\"/\");\n \n // Log the requested file path for debugging\n console.log(`Requested file path: ${filePath}`);\n \n // Check if the path contains encoded characters\n const hasEncodedChars = filePath !== decodeURIComponent(filePath);\n console.log(`Path has encoded characters: ${hasEncodedChars}`);\n \n const fileKey = `${uploadId}/${filePath}`;\n \n try {\n console.log(`Attempting to serve file: ${fileKey}`);\n \n // Get the file from blob storage\n const fileContent = await blob.get(fileKey);\n \n console.log(`File content type: ${typeof fileContent}, is Response: ${fileContent instanceof Response}`);\n \n if (fileContent === null) {\n console.log(`File not found: ${fileKey}`);\n \n // Try with URL decoded path\n const decodedPath = decodeURIComponent(filePath);\n if (decodedPath !== filePath) {\n console.log(`Trying with decoded path: ${decodedPath}`);\n const decodedFileKey = `${uploadId}/${decodedPath}`;\n const decodedFileContent = await blob.get(decodedFileKey);\n \n if (decodedFileContent !== null) {\n console.log(`Found file with decoded path: ${decodedFileKey}`);\n const contentType = getContentType(decodedPath);\n \n // Check if decodedFileContent is a Response object\n if (decodedFileContent instanceof Response) {\n try {\n if (isBinaryFile(decodedPath)) {\n const buffer = await decodedFileContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n const text = await decodedFileContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n return new Response(decodedFileContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n }\n \n return new Response(`File not found: ${filePath}`, { status: 404 });\n }\n \n // Determine content type\n const contentType = getContentType(filePath);\n console.log(`Serving file ${filePath} with content type: ${contentType}`);\n \n // Check if fileContent is already a Response object\n if (fileContent instanceof Response) {\n console.log(\"File content is already a Response object, extracting content...\");\n try {\n // For binary files, we need to use arrayBuffer() instead of text()\n if (isBinaryFile(filePath)) {\n const buffer = await fileContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n // For text files, use text()\n const text = await fileContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n // Serve the file with proper content type\n return new Response(fileContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // Add caching for better performance\n \"Access-Control-Allow-Origin\": \"*\", // Allow cross-origin requests\n \"X-Content-Type-Options\": \"nosniff\" // Prevent MIME type sniffing\n }\n });\n } catch (error) {\n console.error(`Error serving file ${fileKey}:`, error);\n return new Response(`Error retrieving file: ${error.message}`, { status: 500 });\n }\n }\n \n // Handle unknown paths\n return new Response(`Not found: ${path}`, { status: 404 });\n }\n \n // Handle unsupported methods\n return new Response(`Method not allowed: ${req.method}`, { status: 405 });\n}",[],[206],{"_111":215,"_102":106,"_169":216,"_171":-5,"_172":154,"_173":108,"_175":22,"_113":217,"_107":218,"_177":210,"_179":219,"_181":22,"_182":-5,"_183":220,"_105":221},"cacf3024-1856-11f1-9eb9-42dde27851f2","858222d8-1856-11f1-9994-42dde27851f2",["D",1772689647388],1,"// JSON API for basic Cloudflare R2 file operations.\n// Uses the AWS S3-compatible SDK — R2 implements the S3 API.\n//\n// Routes:\n// GET /files — list all objects in the bucket\n// GET /files/:key — download a file\n// PUT /files/:key — upload a file (body = raw file content)\n// DELETE /files/:key — delete a file\n\nimport {\n S3Client,\n ListObjectsV2Command,\n GetObjectCommand,\n PutObjectCommand,\n DeleteObjectCommand,\n} from \"https://esm.sh/@aws-sdk/client-s3@3.454.0\";\n\n// ─── Configuration ────────────────────────────────────────────────────────────\n// All credentials are read from Val Town environment variables — never hardcoded.\nconst R2_ACCOUNT_ID = Deno.env.get(\"R2_ACCOUNT_ID\");\nconst R2_ACCESS_KEY_ID = Deno.env.get(\"R2_ACCESS_KEY_ID\");\nconst R2_SECRET_ACCESS_KEY = Deno.env.get(\"R2_SECRET_ACCESS_KEY\");\nconst R2_BUCKET_NAME = Deno.env.get(\"R2_BUCKET_NAME\");\n\n// ─── S3 Client ────────────────────────────────────────────────────────────────\n// R2 endpoint format: https://.r2.cloudflarestorage.com\nconst s3 = new S3Client({\n region: \"auto\",\n endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,\n credentials: {\n accessKeyId: R2_ACCESS_KEY_ID!,\n secretAccessKey: R2_SECRET_ACCESS_KEY!,\n },\n});\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\n// Returns a 400 JSON error if any required env var is absent\nfunction checkConfig(): Response | null {\n const missing = [\"R2_ACCOUNT_ID\", \"R2_ACCESS_KEY_ID\", \"R2_SECRET_ACCESS_KEY\", \"R2_BUCKET_NAME\"]\n .filter(k => !Deno.env.get(k));\n if (missing.length) {\n return json({ error: \"Missing environment variables\", missing }, 500);\n }\n return null;\n}\n\n// Extracts the file key from a path like /files/some/nested/file.txt → \"some/nested/file.txt\"\nfunction keyFromPath(path: string): string {\n return path.replace(/^\\/files\\//, \"\");\n}\n\n// ─── HTTP Request Handler ──────────────────────────────────────────────────────\nexport default async function (req: Request): Promise {\n const configError = checkConfig();\n if (configError) return configError;\n\n const { pathname } = new URL(req.url);\n\n // ── GET /files ── List all objects in the bucket\n if (req.method === \"GET\" && pathname === \"/files\") {\n const result = await s3.send(new ListObjectsV2Command({ Bucket: R2_BUCKET_NAME! }));\n const files = (result.Contents ?? []).map(obj => ({\n key: obj.Key,\n size: obj.Size,\n lastModified: obj.LastModified,\n }));\n return json({ files });\n }\n\n // ── GET /files/:key ── Download a file; returns raw content with detected content type\n if (req.method === \"GET\" && pathname.startsWith(\"/files/\")) {\n const key = keyFromPath(pathname);\n const result = await s3.send(new GetObjectCommand({ Bucket: R2_BUCKET_NAME!, Key: key }));\n if (!result.Body) return json({ error: \"File not found\" }, 404);\n const body = await result.Body.transformToByteArray();\n return new Response(body, {\n headers: {\n \"Content-Type\": result.ContentType ?? \"application/octet-stream\",\n \"Content-Length\": String(result.ContentLength ?? body.byteLength),\n },\n });\n }\n\n // ── PUT /files/:key ── Upload a file; request body is the raw file content.\n // Optionally set Content-Type header on the request to control the stored content type.\n if (req.method === \"PUT\" && pathname.startsWith(\"/files/\")) {\n const key = keyFromPath(pathname);\n const contentType = req.headers.get(\"Content-Type\") ?? \"application/octet-stream\";\n const body = await req.arrayBuffer();\n const result = await s3.send(new PutObjectCommand({\n Bucket: R2_BUCKET_NAME!,\n Key: key,\n Body: new Uint8Array(body),\n ContentType: contentType,\n }));\n return json({ key, etag: result.ETag });\n }\n\n // ── DELETE /files/:key ── Delete a file from the bucket\n if (req.method === \"DELETE\" && pathname.startsWith(\"/files/\")) {\n const key = keyFromPath(pathname);\n await s3.send(new DeleteObjectCommand({ Bucket: R2_BUCKET_NAME!, Key: key }));\n return json({ deleted: key });\n }\n\n return json({ error: \"Not found\" }, 404);\n}\n",[],[106],{"_111":223,"_102":224,"_169":225,"_171":-5,"_172":154,"_173":226,"_175":125,"_113":227,"_107":228,"_177":210,"_179":229,"_181":22,"_182":-5,"_183":230,"_105":231},"0cb614fe-139c-11f1-b8fb-42dde27851f2","r2-upload-test.ts","db98b8f6-38de-11f0-a95c-9e149126039e",59,["D",1772169636768],20,"// Uses the AWS S3-compatible SDK to talk to Cloudflare R2 (which implements the S3 API)\nimport { S3Client, PutObjectCommand } from \"https://esm.sh/@aws-sdk/client-s3@3.454.0\";\n\n// ─── Configuration ───────────────────────────────────────────────────────────\n// All credentials are read from Val Town environment variables — never hardcoded.\n// You'll need to set these environment variables in Val Town:\n// - R2_ACCOUNT_ID: Your Cloudflare account ID\n// - R2_ACCESS_KEY_ID: Your R2 access key ID \n// - R2_SECRET_ACCESS_KEY: Your R2 secret access key\n// - R2_BUCKET_NAME: Your R2 bucket name\n\nconst R2_ACCOUNT_ID = Deno.env.get('R2_ACCOUNT_ID');\nconst R2_ACCESS_KEY_ID = Deno.env.get('R2_ACCESS_KEY_ID');\nconst R2_SECRET_ACCESS_KEY = Deno.env.get('R2_SECRET_ACCESS_KEY');\nconst R2_BUCKET_NAME = Deno.env.get('R2_BUCKET_NAME');\n\n// Create a reusable S3 client pointed at the Cloudflare R2 endpoint for this account.\n// R2's endpoint format is: https://.r2.cloudflarestorage.com\nconst s3Client = new S3Client({\n region: 'auto',\n endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,\n credentials: {\n accessKeyId: R2_ACCESS_KEY_ID!,\n secretAccessKey: R2_SECRET_ACCESS_KEY!,\n },\n forcePathStyle: false, // Use virtual-hosted-style URLs\n});\n\n// ─── Test Payload ────────────────────────────────────────────────────────────\n// A simple styled HTML page used as the test file uploaded to R2.\n// This lets you confirm the full upload-and-serve pipeline is working.\nconst helloWorldHTML = `\n\n\n \n \n Hello World - R2 Test\n \n\n\n

🌍 Hello World!

This page is served from Cloudflare R2

Successfully uploaded via Val Town

\n Uploaded: ${new Date().toISOString()}\n

\n\n`;\n\n// ─── HTML Response Helper ────────────────────────────────────────────────────\n// Wraps a content block in a shared page shell (gradient background, card style)\n// so all status/result pages share a consistent look without repeating boilerplate.\nfunction createHtmlResponse(title: string, content: string, status: number = 200): Response {\n const html = `\n\n\n \n \n ${title}\n \n\n\n

🚀 R2 Upload Service

\n ${content}\n

\n\n`;\n \n return new Response(html, {\n status,\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\n// ─── HTTP Request Handler ────────────────────────────────────────────────────\n// Three modes controlled by query parameters:\n// (no params) — shows environment variable status page\n// ?test=true — validates credentials by listing the R2 bucket\n// ?upload=true — uploads the test HTML file to the bucket\nexport default async function(req: Request): Promise {\n try {\n // Snapshot env var presence for display in the status UI (values are not exposed)\n const envCheck = {\n R2_ACCOUNT_ID: R2_ACCOUNT_ID ? 'SET' : 'MISSING',\n R2_ACCESS_KEY_ID: R2_ACCESS_KEY_ID ? 'SET' : 'MISSING', \n R2_SECRET_ACCESS_KEY: R2_SECRET_ACCESS_KEY ? 'SET' : 'MISSING',\n R2_BUCKET_NAME: R2_BUCKET_NAME || 'MISSING'\n };\n\n // Guard: if any required env var is missing, return an error page listing what's absent\n if (!R2_ACCOUNT_ID || !R2_ACCESS_KEY_ID || !R2_SECRET_ACCESS_KEY || !R2_BUCKET_NAME) {\n const missingVars = [];\n if (!R2_ACCOUNT_ID) missingVars.push('R2_ACCOUNT_ID');\n if (!R2_ACCESS_KEY_ID) missingVars.push('R2_ACCESS_KEY_ID');\n if (!R2_SECRET_ACCESS_KEY) missingVars.push('R2_SECRET_ACCESS_KEY');\n if (!R2_BUCKET_NAME) missingVars.push('R2_BUCKET_NAME');\n\n const content = `\n

❌ Missing Environment Variables

The following environment variables need to be set in Val Town:

• ${v}

Environment Status:

${key}: ${value}

Please configure these environment variables in your Val Town settings to use the R2 upload service.

\n `;\n \n return createHtmlResponse(\"Configuration Error\", content, 400);\n }\n\n // Parse query parameters to determine which action to take\n const url = new URL(req.url);\n const shouldUpload = url.searchParams.get('upload') === 'true';\n const testCredentials = url.searchParams.get('test') === 'true';\n\n // ── ?test=true ── Validate credentials by issuing a low-impact ListObjects call\n if (testCredentials) {\n // A successful list confirms the account ID, access key, secret, and bucket name are all correct\n try {\n const { ListObjectsV2Command } = await import(\"https://esm.sh/@aws-sdk/client-s3@3.454.0\");\n const listCommand = new ListObjectsV2Command({\n Bucket: R2_BUCKET_NAME,\n MaxKeys: 1\n });\n \n const listResult = await s3Client.send(listCommand);\n \n const content = `\n

✅ Credentials Valid!

Successfully connected to R2 bucket \"${R2_BUCKET_NAME}\"

\n \n

Connection Test Results:

Bucket Access: ✅ Success
Objects Found: ${listResult.Contents?.length || 0}
Bucket Name: ${R2_BUCKET_NAME}
Account ID: ${R2_ACCOUNT_ID}

\n \n

🚀 Ready to Upload

\n Upload Test File\n ← Back to Main\n

\n `;\n \n return createHtmlResponse(\"Credentials Test - Success\", content);\n \n } catch (testError) {\n const content = `\n

❌ Credentials Test Failed

Error: ${testError.message}

\n \n

Error Details:

Error Type: ${testError.name}
Error Code: ${testError.code || 'unknown'}
HTTP Status: ${testError.$metadata?.httpStatusCode || 'unknown'}

\n \n

🔧 Common Issues:

Invalid Access Key: Check R2_ACCESS_KEY_ID
Invalid Secret: Check R2_SECRET_ACCESS_KEY
Wrong Account ID: Check R2_ACCOUNT_ID
Bucket doesn't exist: Check R2_BUCKET_NAME
Insufficient permissions: Ensure API token has R2 read/write permissions

\n ← Back to Main\n

\n `;\n \n return createHtmlResponse(\"Credentials Test - Failed\", content, 400);\n }\n }\n \n // ── (no params) ── Status page: show which env vars are set and offer test/upload links\n if (!shouldUpload) {\n const content = `\n

✅ Environment Configured

All required environment variables are set and ready for R2 uploads.

Environment Status:

${key}: ${value}

Endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

🧪 Test & Upload

Ready to test R2 upload functionality.

\n 🔍 Test Credentials First\n 🚀 Upload Test File\n

\n `;\n \n return createHtmlResponse(\"R2 Upload Ready\", content);\n }\n\n // ── ?upload=true ── Upload the test HTML file to R2 as \"index.html\"\n console.log('R2 Configuration:', {\n accountId: R2_ACCOUNT_ID ? 'SET' : 'MISSING',\n accessKeyId: R2_ACCESS_KEY_ID ? 'SET' : 'MISSING',\n secretAccessKey: R2_SECRET_ACCESS_KEY ? 'SET' : 'MISSING',\n bucketName: R2_BUCKET_NAME ? R2_BUCKET_NAME : 'MISSING',\n endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`\n });\n\n // Build and send the PutObject command to write the HTML file into the bucket\n const uploadCommand = new PutObjectCommand({\n Bucket: R2_BUCKET_NAME,\n Key: 'index.html',\n Body: helloWorldHTML,\n ContentType: 'text/html',\n CacheControl: 'public, max-age=3600',\n });\n\n console.log('Attempting upload to R2...');\n const result = await s3Client.send(uploadCommand);\n console.log('Upload successful:', result);\n \n // Primary URL uses the custom domain configured for this R2 bucket\n const customDomainUrl = `https://ziphost.chadparker.com/index.html`;\n\n // Fallback public URLs in case the custom domain isn't resolving yet\n const backupUrls = [\n `https://${R2_BUCKET_NAME}.${R2_ACCOUNT_ID}.r2.cloudflarestorage.com/index.html`,\n `https://pub-${R2_ACCOUNT_ID}.r2.dev/index.html`,\n `https://${R2_BUCKET_NAME}.r2.dev/index.html`,\n ];\n \n const content = `\n

🎉 Upload Successful!

Hello World index.html has been uploaded successfully to R2!

\n \n

Upload Details:

Bucket: ${R2_BUCKET_NAME}
File: index.html
ETag: ${result.ETag}
Content-Type: text/html
Cache-Control: public, max-age=3600

\n \n

🌐 Deployed File

Your file has been deployed and is accessible at your custom domain:

\n 🔗 View at ziphost.chadparker.com\n \n

🔧 Backup URLs (if custom domain has issues)

\n ${backupUrls.map((url, index) => `\n

\n Backup ${index + 1}:
\n 🔗 ${url}\n

\n `).join('')}\n

\n \n

🔧 Debugging Information

Custom Domain: ziphost.chadparker.com

Account ID: ${R2_ACCOUNT_ID}

Bucket Name: ${R2_BUCKET_NAME}

Upload Endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

File Key: index.html

\n \n

🔄 Upload Another File

\n ← Back to Upload Service\n

\n `;\n \n return createHtmlResponse(\"Upload Complete\", content);\n\n } catch (error) {\n // ── Error handler ── Surfaces detailed error info (HTTP status, request ID, error code)\n // to help diagnose credential, permission, or network issues with R2\n console.error(\"Error uploading to R2:\", error);\n \n // Get more detailed error information\n const errorDetails = {\n message: error.message,\n name: error.name,\n code: error.code || 'unknown',\n statusCode: error.$metadata?.httpStatusCode,\n requestId: error.$metadata?.requestId,\n };\n \n const content = `\n

❌ Upload Failed

Error: ${error.message}

\n \n

Error Details:

Error Type: ${error.name}
Error Code: ${error.code || 'unknown'}
HTTP Status: ${errorDetails.statusCode}
Request ID: ${errorDetails.requestId}

\n \n

🔧 Troubleshooting

Check credentials: Verify R2_ACCESS_KEY_ID and R2_SECRET_ACCESS_KEY are correct
Check account ID: Verify R2_ACCOUNT_ID matches your Cloudflare account
Check bucket: Verify R2_BUCKET_NAME exists and you have write permissions
Check permissions: Ensure your R2 API token has the necessary permissions
Current endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

\n \n

\n ← Back to Upload Service\n

\n `;\n \n return createHtmlResponse(\"Upload Error\", content, 500);\n }\n}",[],[224],"files",[166,186,195,204,214,222],"counts",{"_236":33,"_237":218,"_238":33,"_239":240,"_244":245},"pulls","branches","forks","envVars",{"_241":242,"_243":33},"count",4,"emptyCount","connections",{"_241":33,"_246":33},"unfilledCount","contents",[],{"_111":215,"_172":154,"_169":216,"_102":106,"_179":219,"_177":210,"_107":218,"_171":-5,"_113":250,"_173":108,"_182":-5,"_105":251},["D",1772689647388],[106],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_100":101,"_102":103,"_104":48,"_107":108,"_105":106,"_109":260,"_164":265,"_232":290,"_178":291,"_247":294,"_295":-5,"_296":-5,"_297":-5,"_298":-5,"_299":300,"_239":-5},{"_111":112,"_102":103,"_113":261,"_115":-5,"_116":22,"_117":118,"_119":-5,"_120":-5,"_14":121,"_122":123,"_124":125,"_126":125,"_127":-5,"_128":33,"_16":129,"_130":-5,"_131":-5,"_132":-5,"_133":-5,"_134":135,"_136":135,"_137":138,"_139":138,"_140":138,"_141":135,"_142":135,"_23":262,"_146":263,"_151":264,"_163":22},["D",1747883539166],{"_100":101,"_144":145},{"_100":101,"_148":145,"_14":121,"_149":150},{"_107":153,"_102":48,"_111":154,"_155":112,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":103,"_162":101},[266,270,274,278,282,286],{"_111":167,"_102":168,"_169":170,"_171":-5,"_172":154,"_173":174,"_175":125,"_113":267,"_107":33,"_177":178,"_179":180,"_181":22,"_182":-5,"_183":268,"_105":269},["D",1772169636723],[],[168],{"_111":187,"_102":188,"_169":189,"_171":-5,"_172":154,"_173":190,"_175":125,"_113":271,"_107":33,"_177":178,"_179":192,"_181":22,"_182":-5,"_183":272,"_105":273},["D",1772169636757],[],[188],{"_111":196,"_102":197,"_169":198,"_171":-5,"_172":154,"_173":199,"_175":125,"_113":275,"_107":33,"_177":178,"_179":201,"_181":22,"_182":-5,"_183":276,"_105":277},["D",1772169636756],[],[197],{"_111":205,"_102":206,"_169":123,"_171":-5,"_172":154,"_173":207,"_175":125,"_113":279,"_107":209,"_177":210,"_179":211,"_181":22,"_182":-5,"_183":280,"_105":281},["D",1772169636746],[],[206],{"_111":215,"_102":106,"_169":216,"_171":-5,"_172":154,"_173":108,"_175":22,"_113":283,"_107":218,"_177":210,"_179":219,"_181":22,"_182":-5,"_183":284,"_105":285},["D",1772689647388],[],[106],{"_111":223,"_102":224,"_169":225,"_171":-5,"_172":154,"_173":226,"_175":125,"_113":287,"_107":228,"_177":210,"_179":229,"_181":22,"_182":-5,"_183":288,"_105":289},["D",1772169636768],[],[224],[266,270,274,278,282,286],{"_111":215,"_102":106,"_169":216,"_171":-5,"_172":154,"_173":108,"_175":22,"_113":292,"_107":218,"_177":210,"_179":219,"_181":22,"_182":-5,"_105":293},["D",1772689647388],[106],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]