\n \n \n \n","label",[180,69],"frontend","pulls","branches",2,"forks","envVars",{"_189":77,"_191":26},"connections",{"_189":26,"_190":26},"count","unfilledCount","emptyCount",{"_33":316,"_13":255,"_67":249,"_43":-5,"_35":36,"_173":40,"_174":95,"_37":317,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":318,"_17":319},{"_33":312,"_13":291,"_67":286,"_43":249,"_35":36,"_173":40,"_174":95,"_37":313,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":314,"_17":315},{"_33":308,"_13":307,"_67":302,"_43":286,"_35":36,"_173":40,"_174":95,"_37":309,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":310,"_17":311},{"_33":299,"_13":300,"_67":301,"_43":302,"_35":36,"_173":40,"_174":95,"_37":303,"_39":26,"_70":21,"_176":304,"_71":24,"_178":-5,"_214":305,"_17":306},{"_33":292,"_13":293,"_67":294,"_43":286,"_35":36,"_173":40,"_174":95,"_37":295,"_39":26,"_70":221,"_176":296,"_71":24,"_178":-5,"_214":297,"_17":298},{"_33":283,"_13":284,"_67":285,"_43":286,"_35":36,"_173":40,"_174":95,"_37":287,"_39":26,"_70":221,"_176":288,"_71":24,"_178":-5,"_214":289,"_17":290},{"_33":279,"_13":264,"_67":259,"_43":249,"_35":36,"_173":40,"_174":95,"_37":280,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":281,"_17":282},{"_33":272,"_13":273,"_67":274,"_43":259,"_35":36,"_173":40,"_174":95,"_37":275,"_39":26,"_70":221,"_176":276,"_71":24,"_178":-5,"_214":277,"_17":278},{"_33":265,"_13":266,"_67":267,"_43":259,"_35":36,"_173":40,"_174":95,"_37":268,"_39":26,"_70":221,"_176":269,"_71":24,"_178":-5,"_214":270,"_17":271},{"_33":256,"_13":257,"_67":258,"_43":259,"_35":36,"_173":40,"_174":95,"_37":260,"_39":26,"_70":221,"_176":261,"_71":24,"_178":-5,"_214":262,"_17":263},{"_33":246,"_13":247,"_67":248,"_43":249,"_35":36,"_173":119,"_174":95,"_37":250,"_39":40,"_70":251,"_176":252,"_71":24,"_178":-5,"_214":253,"_17":254},{"_33":242,"_13":180,"_67":172,"_43":-5,"_35":36,"_173":40,"_174":95,"_37":243,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":244,"_17":245},{"_33":237,"_13":236,"_67":231,"_43":172,"_35":36,"_173":40,"_174":95,"_37":238,"_39":26,"_70":239,"_176":-5,"_71":24,"_178":-5,"_214":240,"_17":241},{"_33":228,"_13":229,"_67":230,"_43":231,"_35":36,"_173":183,"_174":95,"_37":232,"_39":40,"_70":221,"_176":233,"_71":24,"_178":-5,"_214":234,"_17":235},{"_33":171,"_13":69,"_67":68,"_43":172,"_35":36,"_173":77,"_174":95,"_37":225,"_39":40,"_70":21,"_176":177,"_71":24,"_178":-5,"_214":226,"_17":227},{"_33":217,"_13":218,"_67":219,"_43":172,"_35":36,"_173":40,"_174":95,"_37":220,"_39":26,"_70":221,"_176":222,"_71":24,"_178":-5,"_214":223,"_17":224},{"_33":209,"_13":210,"_67":211,"_43":-5,"_35":36,"_173":40,"_174":95,"_37":212,"_39":26,"_70":21,"_176":213,"_71":24,"_178":-5,"_214":215,"_17":216},"b02499b4-08ce-11f0-a41a-569c3dd06744","README.md","3b588306-7029-4e78-9912-94a9764ba076",["D",1742834425984],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.","children",[],[210],"b0249752-08ce-11f0-a41a-569c3dd06744","index.tsx","233f7085-1943-4f71-9351-644107633448",["D",1742834425984],"script","/** @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();",[],[180,218],["D",1742834701934],[],[180,69],"4fd691e2-08cf-11f0-a9ec-569c3dd06744","App.tsx","ac662191-809a-4388-896a-f460013b5bff","77fb8aa0-23f3-4b09-8299-7e7ff39a72a6",["D",1742834693911],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [url, setUrl] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [result, setResult] = useState<{\n success: boolean;\n message: string;\n projectUrl?: string;\n } | null>(null);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!url) {\n setError(\"Please enter a URL\");\n return;\n }\n\n try {\n setIsLoading(true);\n setError(null);\n setResult(null);\n \n const response = await fetch(\"/api/scrape\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ url }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.message || \"Failed to scrape website\");\n }\n \n setResult(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An unknown error occurred\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Website to API Generator

\n Enter a URL to scrape a website and generate an API based on its content\n

\n \n \n \n {error && (\n

{error}

\n )}\n \n {result && (\n

\n {result.success ? \"Success!\" : \"Error\"}\n

{result.message}

\n {result.projectUrl && (\n \n View Generated API\n \n )}\n

\n )}\n

\n );\n}",[],[180,236,229],"components","b0249554-08ce-11f0-a41a-569c3dd06744",["D",1742834425984],"directory",[205],[180,236],"b0249888-08ce-11f0-a41a-569c3dd06744",["D",1742834425984],[204,206,207],[180],"bb21bd5a-08cf-11f0-b6d6-569c3dd06744","index.ts","cf914214-0eb3-4c51-8142-deb5c6328ec1","1cdf452d-5d5b-4251-b56d-1d244b8d62b1",["D",1742834873916],"http","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { createNewScraperProject } from \"./valtown/project.ts\";\nimport { vt } from \"./valtown/sdk.ts\";\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\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to handle website scraping and API generation\napp.post(\"/api/scrape\", async (c) => {\n try {\n const { url } = await c.req.json();\n \n if (!url) {\n return c.json({ success: false, message: \"URL is required\" }, 400);\n }\n \n // Create a new branch name based on the domain\n const domain = new URL(url).hostname.replace(/[^a-zA-Z0-9]/g, \"_\");\n const branchName = `scraper_${domain}_${Date.now()}`;\n \n // Fork the template project\n const newBranch = await createNewScraperProject(branchName);\n \n // Get the project ID from the new branch\n const projectId = newBranch.projectId;\n \n // Generate route file for scraping the website\n const routeFileName = \"routes/scrape.ts\";\n const routeContent = generateScraperRouteCode(url);\n \n // Create the route file in the forked project\n await vt.projects.files.create(projectId, {\n branchId: newBranch.id,\n path: routeFileName,\n content: routeContent,\n });\n \n // Get the current index.ts file\n const indexFileResponse = await vt.projects.files.getContent(projectId, {\n branchId: newBranch.id,\n path: \"index.ts\",\n });\n \n const indexContent = await indexFileResponse.text();\n \n // Update the index.ts file to include the new route\n const updatedIndexContent = updateIndexFile(indexContent);\n \n // Update the index.ts file in the forked project\n await vt.projects.files.update(projectId, {\n branchId: newBranch.id,\n path: \"index.ts\",\n content: updatedIndexContent,\n });\n \n // Get the project URL\n const projectUrl = `https://val.town/v/${newBranch.username}/${newBranch.projectName}/${branchName}`;\n \n return c.json({\n success: true,\n message: \"API successfully generated!\",\n projectUrl,\n });\n } catch (error) {\n console.error(\"Error generating API:\", error);\n return c.json({\n success: false,\n message: error instanceof Error ? error.message : \"Failed to generate API\",\n }, 500);\n }\n});\n\n// Function to generate the scraper route code\nfunction generateScraperRouteCode(url: string): string {\n return `import { z } from \"https://esm.sh/@hono/zod-openapi@0.18.4\";\nimport { createRoute } from \"https://esm.sh/@hono/zod-openapi@0.18.4\";\nimport { JSDOM } from \"https://esm.sh/jsdom@22.1.0\";\n\n// The URL to scrape\nconst TARGET_URL = \"${url}\";\n\nexport const scrapeParams = z.object({\n selector: z\n .string()\n .optional()\n .openapi({ \n example: \"h1\", \n description: \"CSS selector to target specific elements (optional)\" \n }),\n});\n\nexport const scrapeRoute = createRoute({\n method: \"get\",\n path: \"/scrape\",\n summary: \"Scrape content from ${url}\",\n description: \"Fetches and parses the content from the target website using JSDOM\",\n request: {\n query: scrapeParams,\n },\n responses: {\n 200: {\n content: {\n \"application/json\": {\n schema: z.object({ \n url: z.string(),\n title: z.string(),\n content: z.record(z.string(), z.any()),\n elements: z.array(z.any()),\n }),\n },\n },\n description: \"Successfully scraped website content\",\n },\n 500: {\n content: {\n \"application/json\": {\n schema: z.object({ \n error: z.string() \n }),\n },\n },\n description: \"Failed to scrape website\",\n },\n },\n});\n\n// Helper function to extract text content from elements\nfunction extractElements(document: Document, selector: string) {\n const elements = Array.from(document.querySelectorAll(selector));\n return elements.map(el => ({\n tagName: el.tagName.toLowerCase(),\n text: el.textContent?.trim() || \"\",\n html: el.innerHTML,\n attributes: getAttributes(el),\n }));\n}\n\n// Helper function to get element attributes\nfunction getAttributes(element: Element) {\n const attributes: Record = {};\n for (const attr of element.attributes) {\n attributes[attr.name] = attr.value;\n }\n return attributes;\n}\n\n// Helper function to extract common page data\nfunction extractPageData(document: Document) {\n return {\n title: document.title,\n headings: {\n h1: extractElements(document, \"h1\").map(el => el.text),\n h2: extractElements(document, \"h2\").map(el => el.text),\n h3: extractElements(document, \"h3\").map(el => el.text),\n },\n links: extractElements(document, \"a\").map(el => ({\n text: el.text,\n href: el.attributes.href,\n })),\n images: extractElements(document, \"img\").map(el => ({\n alt: el.attributes.alt,\n src: el.attributes.src,\n })),\n meta: extractElements(document, \"meta[name], meta[property]\").reduce((acc, el) => {\n const key = el.attributes.name || el.attributes.property;\n if (key) {\n acc[key] = el.attributes.content;\n }\n return acc;\n }, {} as Record),\n };\n}\n`;\n}\n\n// Function to update the index.ts file to include the new route\nfunction updateIndexFile(indexContent: string): string {\n // Add import for the scrape route\n let updatedContent = indexContent.replace(\n 'import { greetRoute } from \"./routes/greet.ts\";',\n 'import { greetRoute } from \"./routes/greet.ts\";\\nimport { scrapeRoute } from \"./routes/scrape.ts\";'\n );\n \n // Add the route handler\n updatedContent = updatedContent.replace(\n 'app.openapi(greetRoute, (c) => {',\n 'app.openapi(scrapeRoute, async (c) => {\\n' +\n ' try {\\n' +\n ' const { selector } = c.req.valid(\"query\");\\n' +\n ' \\n' +\n ' // Fetch the target URL\\n' +\n ' const response = await fetch(TARGET_URL);\\n' +\n ' if (!response.ok) {\\n' +\n ' throw new Error(`Failed to fetch URL: ${response.status}`);\\n' +\n ' }\\n' +\n ' \\n' +\n ' const html = await response.text();\\n' +\n ' \\n' +\n ' // Parse the HTML with JSDOM\\n' +\n ' const dom = new JSDOM(html);\\n' +\n ' const document = dom.window.document;\\n' +\n ' \\n' +\n ' // Extract page data\\n' +\n ' const pageData = extractPageData(document);\\n' +\n ' \\n' +\n ' // If a selector is provided, extract those specific elements\\n' +\n ' const selectedElements = selector ? extractElements(document, selector) : [];\\n' +\n ' \\n' +\n ' return c.json({\\n' +\n ' url: TARGET_URL,\\n' +\n ' title: document.title,\\n' +\n ' content: pageData,\\n' +\n ' elements: selectedElements,\\n' +\n ' }, 200);\\n' +\n ' } catch (error) {\\n' +\n ' console.error(\"Scraping error:\", error);\\n' +\n ' return c.json({ error: error instanceof Error ? error.message : \"Failed to scrape website\" }, 500);\\n' +\n ' }\\n' +\n '});\\n\\n' +\n 'app.openapi(greetRoute, (c) => {'\n );\n \n // Update the OpenAPI documentation title and description\n updatedContent = updatedContent.replace(\n 'title: \"Greet user API\",',\n 'title: \"Website Scraper API\",'\n );\n \n return updatedContent;\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;\n",[],[255,247],"backend","b0248c80-08ce-11f0-a41a-569c3dd06744","utils.ts","2685aa8b-0c87-4b41-a13c-7b3143d22ec1","749ba341-a0e0-4881-9a0d-768cbe8cd9f3",["D",1742834425984],"import ValTown from \"jsr:@valtown/sdk\";\nimport { vt } from \"./sdk.ts\";\n\n/**\n * Lists all branches for a given project and finds the ID of the specified branch name.\n *\n * @param {string} projectId - The ID of the project to search branches within.\n * @param {string} branchName - The name of the branch to find.\n * @returns {Promise} - The ID of the specified branch.\n * @throws {Deno.errors.NotFound} If the branch with the specified name is not found.\n */\nexport async function branchIdToBranch(\n projectId: string,\n branchName: string,\n): Promise {\n for await (\n const branch of vt.projects.branches.list(projectId, {\n limit: 100,\n offset: 0,\n })\n ) if (branch.name === branchName) return branch;\n throw new Deno.errors.NotFound(`Branch '${branchName}' not found`);\n}\n\n/**\n * Forks a new branch from a specified source branch within a project.\n *\n * @param {string} projectId - The ID of the project where the branch will be created.\n * @param {string} newBranchName - The name of the new branch to create.\n * @param {string} sourceBranchId - The ID of the branch to fork from.\n * @returns {Promise

History · index.html