Import from Github

\n\n

\n \n Github Repo Url\n \n setProjectUrl(e.target.value)}\n placeholder=\"https://github.com/...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n\n

\n \n Val Town API Token (project read + write permissions)\n \n setApiToken(e.target.value)}\n placeholder=\"Enter your API token\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n\n \n {loading ? \"Importing...\" : \"Import\"}\n \n \n\n {message && (\n

\n {message}\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nexport default App;",[129,34,132],"pulls","branches",2,"forks",1,"envVars",{"_149":26,"_151":26},"connections",{"_149":26,"_150":26},"count","unfilledCount","emptyCount",{"_39":203,"_13":202,"_32":195,"_119":-5,"_121":81,"_122":204,"_124":24,"_41":205,"_80":26,"_35":36,"_126":-5,"_37":30,"_127":-5,"_166":206,"_17":207},{"_39":193,"_13":194,"_32":52,"_119":195,"_121":81,"_122":56,"_124":24,"_41":196,"_80":197,"_35":198,"_126":199,"_37":30,"_127":-5,"_166":200,"_17":201},{"_39":189,"_13":129,"_32":120,"_119":-5,"_121":81,"_122":142,"_124":24,"_41":190,"_80":26,"_35":36,"_126":-5,"_37":30,"_127":-5,"_166":191,"_17":192},{"_39":118,"_13":34,"_32":33,"_119":120,"_121":81,"_122":123,"_124":24,"_41":186,"_80":26,"_35":36,"_126":-5,"_37":30,"_127":-5,"_166":187,"_17":188},{"_39":131,"_13":132,"_32":133,"_119":33,"_121":81,"_122":134,"_124":24,"_41":183,"_80":136,"_35":137,"_126":138,"_37":30,"_127":-5,"_166":184,"_17":185},{"_39":176,"_13":177,"_32":178,"_119":120,"_121":81,"_122":136,"_124":24,"_41":179,"_80":26,"_35":21,"_126":180,"_37":30,"_127":-5,"_166":181,"_17":182},{"_39":169,"_13":170,"_32":171,"_119":120,"_121":81,"_122":142,"_124":24,"_41":172,"_80":26,"_35":137,"_126":173,"_37":30,"_127":-5,"_166":174,"_17":175},{"_39":160,"_13":161,"_32":162,"_119":-5,"_121":81,"_122":163,"_124":24,"_41":164,"_80":142,"_35":21,"_126":165,"_37":30,"_127":-5,"_166":167,"_17":168},"a78ddd66-0035-11f0-8bc6-569c3dd06744","README.md","5c2c1510-fea3-11ef-a9f8-569c3dd06744",16,["D",1741889089277],"# Import From Github\n\nImport any repo from Github to a Val Town project with a mere copy, paste and go. \n\nAnything that may be binary is skipped.","children",[],[161],"5c37df80-fea3-11ef-bfac-569c3dd06744","index.tsx","5c37e052-fea3-11ef-bfac-569c3dd06744",["D",1741716305191],"/** @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();",[],[129,170],"5c4f566a-fea3-11ef-bfac-569c3dd06744","index.html","5c4f5732-fea3-11ef-bfac-569c3dd06744",["D",1741716305353],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n",[],[129,177],["D",1741888643757],[],[129,34,132],["D",1741716305413],[156],[129,34],"5c37e9a8-fea3-11ef-bfac-569c3dd06744",["D",1741716305191],[155,157,158],[129],"3ec6528e-2058-11f0-8df5-569c3dd06744","index.ts","c3ec93ff-458f-43d8-962d-300bf8b1e097",["D",1745422383076],11,"http","import { listFiles } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseProject, serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\napp.post(\"/import-github\", async c => {\n try {\n const repoUrl = c.req.query(\"url\");\n const authHeader = c.req.header(\"Authorization\");\n\n let authToken = null;\n if (authHeader && authHeader.startsWith(\"Bearer \")) {\n authToken = authHeader.substring(7);\n }\n\n if (!repoUrl || !authToken) {\n return c.json({\n success: false,\n error: \"Missing required parameter: url or auth token\",\n }, 400);\n }\n\n const authenticatedVt = new ValTown({\n bearerToken: authToken,\n });\n\n // Parse GitHub URL to get owner and repo name\n const { owner, repo } = parseGitHubRepoURL(repoUrl);\n\n if (!owner || !repo) {\n return c.json({\n success: false,\n error: \"Missing required parameters: owner and repo\",\n }, 400);\n }\n\n // Create a new Val.town project\n let newProject;\n try {\n newProject = await authenticatedVt.vals.create({\n privacy: \"public\",\n name: `${repo}_${Date.now().toString()}`,\n description: `Imported from GitHub: ${owner}/${repo}`,\n });\n console.log(\"New project created:\", newProject);\n } catch (error) {\n console.error(\"Error creating project:\", error);\n return c.json({\n success: false,\n error: `Error creating project: ${error.message || error}`,\n status: error.status,\n statusText: error.statusText,\n }, 400);\n }\n\n // Get all files from GitHub repo\n console.log(\"Fetching files from GitHub\");\n try {\n const files = await fetchGitHubRepoContents(owner, repo);\n console.log(\"Files fetched:\", files.length);\n\n // Create files in Val.town project\n const result = await createFilesInValTown(authenticatedVt, files, newProject.id);\n console.log(\"Files copied:\", result.successful.length);\n console.log(\"Files skipped:\", result.skipped.length);\n } catch (error) {\n console.error(\"Error copying files:\", error);\n return c.json({\n success: false,\n error: `Error copying files: ${error.message || error}`,\n }, 400);\n }\n\n return c.json({\n success: true,\n newProject: newProject,\n }, 200);\n } catch (error) {\n console.error(\"Unexpected error:\", error);\n return c.json({\n success: false,\n error: `Unexpected error: ${error.message || error}`,\n stack: error.stack,\n }, 500);\n }\n});\n\n// Parse GitHub repo URL to extract owner and repo name\nfunction parseGitHubRepoURL(url: string): { owner: string; repo: string } {\n try {\n // Use the URL constructor to parse the URL\n const parsedUrl = new URL(url);\n\n // Handle both github.com URLs and API URLs\n if (!parsedUrl.hostname.includes(\"github.com\")) {\n throw new Error(\"Not a GitHub URL\");\n }\n\n // Split the pathname and filter out empty segments\n const parts = parsedUrl.pathname.split(\"/\").filter(Boolean);\n\n // GitHub URLs have format: github.com/owner/repo\n if (parts.length < 2) {\n throw new Error(\"Invalid GitHub URL structure\");\n }\n\n return {\n owner: parts[0],\n repo: parts[1],\n };\n } catch (error) {\n console.error(\"Error parsing GitHub URL:\", error);\n throw new Error(`Invalid GitHub URL: ${error.message}`);\n }\n}\n\n// Fetch all files and their content from a GitHub repository\nasync function fetchGitHubRepoContents(owner: string, repo: string, path: string = \"\") {\n const files: Array<{\n path: string;\n type: string;\n content: string;\n download_url?: string;\n }> = [];\n\n try {\n // GitHub API URL for repo contents\n const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;\n console.log(`Fetching from: ${apiUrl}`);\n\n const response = await fetch(apiUrl, {\n headers: {\n \"Accept\": \"application/vnd.github.v3+json\",\n \"User-Agent\": \"ValTown-GitHub-Importer\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);\n }\n\n const contents = await response.json();\n\n // Handle array response (directory) or object response (file)\n const items = Array.isArray(contents) ? contents : [contents];\n\n for (const item of items) {\n if (item.type === \"file\") {\n // Fetch file content\n let content;\n if (item.download_url) {\n const contentResponse = await fetch(item.download_url);\n if (contentResponse.ok) {\n content = await contentResponse.text();\n } else {\n console.error(`Failed to fetch content for ${item.path}: ${contentResponse.status}`);\n content = \"\";\n }\n } else if (item.content && item.encoding === \"base64\") {\n // Some API responses include base64 encoded content\n content = Buffer.from(item.content, \"base64\").toString(\"utf8\");\n } else {\n console.error(`No content available for ${item.path}`);\n content = \"\";\n }\n\n files.push({\n path: item.path,\n type: \"file\",\n content,\n });\n } else if (item.type === \"dir\") {\n // Recursively fetch contents of subdirectories\n const subFiles = await fetchGitHubRepoContents(owner, repo, item.path);\n files.push(...subFiles);\n }\n }\n\n return files;\n } catch (error) {\n console.error(`Error fetching GitHub contents for ${owner}/${repo}/${path}:`, error);\n throw error;\n }\n}\n\n// Map GitHub file extension to Val.town file type\nfunction mapFileTypeForValTown(filePath: string): string | null {\n const extension = filePath.split(\".\").pop()?.toLowerCase();\n\n // Handle HTML files\n if (extension === \"html\" || extension === \"htm\") {\n return \"http\";\n }\n // Handle markdown files\n else if (extension === \"md\" || extension === \"markdown\") {\n return \"file\";\n }\n // Handle script files\n else if ([\"js\", \"ts\", \"tsx\", \"jsx\"].includes(extension || \"\")) {\n return \"script\";\n }\n // TODO possibly remove files in other languages?\n // Handle common text file types\n else if (\n [\n \"txt\",\n \"css\",\n \"json\",\n \"yml\",\n \"yaml\",\n \"xml\",\n \"csv\",\n \"svg\",\n \"sh\",\n \"bat\",\n \"py\",\n \"rb\",\n \"php\",\n \"java\",\n \"c\",\n \"cpp\",\n \"h\",\n \"cs\",\n \"go\",\n \"rs\",\n \"toml\",\n \"ini\",\n ].includes(extension || \"\")\n ) {\n return \"file\";\n }\n // For other types, return null to indicate non-text or unsupported\n else {\n return null;\n }\n}\n\nfunction transformHtmlContent(htmlContent: string): string {\n return `export default function server(request: Request): Response {\n return new Response(\n \\`${htmlContent}\\`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}`;\n}\n\n// TODO could be doing this with a library\n// Check if file is likely binary based on extension\nfunction isProbablyBinaryFile(filePath: string): boolean {\n const binaryExtensions = [\n \"png\",\n \"jpg\",\n \"jpeg\",\n \"gif\",\n \"bmp\",\n \"ico\",\n \"webp\",\n \"tiff\", // Images\n \"pdf\",\n \"doc\",\n \"docx\",\n \"xls\",\n \"xlsx\",\n \"ppt\",\n \"pptx\", // Documents\n \"zip\",\n \"rar\",\n \"tar\",\n \"gz\",\n \"7z\", // Archives\n \"mp3\",\n \"mp4\",\n \"wav\",\n \"avi\",\n \"mov\",\n \"webm\", // Media\n \"exe\",\n \"dll\",\n \"so\",\n \"dylib\", // Binaries\n \"ttf\",\n \"otf\",\n \"woff\",\n \"woff2\", // Fonts\n ];\n\n const extension = filePath.split(\".\").pop()?.toLowerCase();\n return binaryExtensions.includes(extension || \"\");\n}\n\n// Create files in the Val.town project\nasync function createFilesInValTown(authenticatedVT: any, files: any[], newProjectId: string) {\n console.log(`Processing ${files.length} files`);\n\n const failedFiles: Array<{ path: string; error: string }> = [];\n const successfulFiles: Array<{ name: string }> = [];\n const skippedFiles: Array<{ path: string; reason: string }> = [];\n\n for (const file of files) {\n try {\n console.log(`Processing file: ${file.path}`);\n\n // Map the file type for Val.town\n const valTownFileType = mapFileTypeForValTown(file.path);\n\n if (valTownFileType === \"http\") {\n file.content = transformHtmlContent(file.content);\n }\n\n // Skip binary or unsupported files\n if (!valTownFileType) {\n const reason = isProbablyBinaryFile(file.path)\n ? \"binary file detected\"\n : \"unsupported file type\";\n console.log(`Skipping file ${file.path}: ${reason}`);\n skippedFiles.push({\n path: file.path,\n reason: reason,\n });\n continue;\n }\n\n console.log(`Creating file in new project: ${file.path} (type: ${valTownFileType})`);\n console.log(`content: ${file.content}`);\n const responseCreation = await authenticatedVT.vals.files.create(newProjectId, {\n content: file.content,\n type: valTownFileType,\n path: file.path,\n });\n\n if (!responseCreation) {\n throw new Error(`Could not create file: ${file.path}`);\n }\n\n console.log(`File created successfully: ${file.path}`);\n successfulFiles.push({\n name: file.path,\n });\n } catch (error) {\n console.error(`Error processing file ${file.path}:`, error);\n failedFiles.push({\n path: file.path,\n error: error.message || String(error),\n });\n }\n }\n\n // Log summary of skipped files\n if (skippedFiles.length > 0) {\n console.log(`Skipped ${skippedFiles.length} files that couldn't be processed:`);\n skippedFiles.forEach(file => {\n console.log(`- ${file.path}: ${file.reason}`);\n });\n }\n\n if (failedFiles.length > 0) {\n console.error(`Failed to process ${failedFiles.length} files`);\n const failedFilesList = failedFiles.map(f => `'${f.path}': ${f.error}`).join(\", \");\n throw new Error(`Failed to process files: ${failedFilesList}`);\n }\n\n return {\n successful: successfulFiles,\n skipped: skippedFiles,\n };\n}\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\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;",[],[202,194],"backend","5c43ff2c-fea3-11ef-8a4d-569c3dd06744",3,["D",1741716305278],[153],[202],["D",1741716304952],{"_11":12,"_96":92},{"_11":12,"_90":-5,"_91":92,"_31":50,"_93":94,"_95":30},{"_80":56,"_13":16,"_39":81,"_82":40,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":14,"_89":12},"ctx",{"_73":-5,"_115":245,"_246":247,"_248":249,"_250":30,"_251":30,"_252":30,"_253":24,"_254":-5,"_255":-7,"_256":-7,"_257":26,"_258":30,"_259":30,"_260":-5,"_261":30,"_262":30,"_263":30,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":16,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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"]

History · components