\n 🔔 Project Updates Webhook Register\n

\n\n {notification.show && (\n

\n {notification.message}\n

\n )}\n\n \n\n {thisProjectURL && (\n \n )}\n

\n );\n}\n\nfunction WebhookItem({ webhook }) {\n // Create a friendly label for the event type\n const getEventLabel = (eventType) => {\n const labels = {\n \"FilesCreated\": \"Files Created\",\n \"FilesDeleted\": \"Files Deleted\",\n \"UserJoined\": \"User Joined\",\n \"ProjectUpdated\": \"Project Updated\",\n };\n return labels[eventType] || eventType;\n };\n\n return (\n

\n Project ID: {webhook.projectId}\n

\n URL: {webhook.webhookUrl}\n

\n Event: {getEventLabel(webhook.event)}\n {webhook.event}\n

\n );\n}",[],[223,229,236],{"_103":245,"_95":246,"_147":247,"_149":230,"_150":136,"_151":248,"_153":118,"_105":249,"_100":186,"_155":176,"_157":250,"_158":27,"_159":-5,"_160":251,"_98":252},"e15c9536-0347-11f0-b1af-569c3dd06744","WebhookForm.tsx","5833b63a-00fa-11f0-8cfe-569c3dd06744",40,["D",1742226770687],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function WebhookForm({ onSubmit }: { onSubmit: () => void }) {\n const [projectId, setProjectId] = React.useState(\"\");\n const [webhookUrl, setWebhookUrl] = React.useState(\"\");\n const [event, setEvent] = React.useState(\"FilesCreated\");\n const [isSubmitting, setIsSubmitting] = React.useState(false);\n const [error, setError] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n\n // Form validation\n if (!projectId.trim() || !webhookUrl.trim()) {\n setError(\"Please fill in all required fields\");\n return;\n }\n\n // URL validation\n try {\n new URL(webhookUrl);\n } catch {\n setError(\"Please enter a valid URL\");\n return;\n }\n\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/submit-webhook\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n projectId,\n webhookUrl,\n event,\n }),\n });\n\n if (response.ok) {\n onSubmit();\n setProjectId(\"\");\n setWebhookUrl(\"\");\n setEvent(\"FilesCreated\");\n } else {\n const data = await response.json();\n setError(data.message || \"Failed to register webhook\");\n }\n } catch (error) {\n console.error(\"Webhook registration failed\", error);\n setError(\"Connection error. Please try again later\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const eventOptions = [\n { value: \"FilesCreated\", label: \"Files Created\" },\n { value: \"FilesDeleted\", label: \"Files Deleted\" },\n ];\n\n return (\n

Register New Webhook

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Project ID *\n \n setProjectId(e.target.value)}\n placeholder=\"Enter your project ID\"\n required\n disabled={isSubmitting}\n />\n

\n\n

\n \n Webhook URL *\n \n setWebhookUrl(e.target.value)}\n placeholder=\"https://example.com/webhook\"\n required\n disabled={isSubmitting}\n />\n

\n\n

\n \n Event Type *\n \n setEvent(e.target.value)}\n disabled={isSubmitting}\n >\n {eventOptions.map(option => (\n \n ))}\n \n

\n\n \n

\n );\n}",[],[223,229,246],[223,229],{"_103":255,"_95":256,"_147":257,"_149":224,"_150":136,"_151":258,"_153":118,"_105":259,"_100":186,"_155":260,"_157":261,"_158":27,"_159":-5,"_160":262,"_98":263},"790475ec-0119-11f0-afb8-569c3dd06744","index.html","414ebf20-00e9-11f0-9cf6-569c3dd06744",35,["D",1741986936454],"file","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[223,256],{"_103":265,"_95":266,"_147":267,"_149":224,"_150":136,"_151":240,"_153":118,"_105":268,"_100":31,"_155":176,"_157":269,"_158":27,"_159":-5,"_160":270,"_98":271},"413e9280-00e9-11f0-bbde-569c3dd06744","index.tsx","413e9334-00e9-11f0-bbde-569c3dd06744",["D",1741966227045],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { type Message } from \"../shared/utils.ts\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n initialMessages?: Message[];\n thisProjectURL?: string;\n };\n }\n}\n\ncreateRoot(root).render();",[],[223,266],{"_103":273,"_95":274,"_147":275,"_149":224,"_150":136,"_151":276,"_153":118,"_105":277,"_100":207,"_155":260,"_157":278,"_158":27,"_159":-5,"_160":279,"_98":280},"de713300-0111-11f0-840d-569c3dd06744","style.css","400c13ce-00e9-11f0-9c85-569c3dd06744",34,["D",1741983670645],"/* Base styles */\n:root {\n --primary: #4f46e5;\n --primary-hover: #4338ca;\n --secondary: #f3f4f6;\n --text-primary: #1f2937;\n --text-secondary: #6b7280;\n --border: #e5e7eb;\n --success: #10b981;\n --danger: #ef4444;\n --radius: 0.5rem;\n --shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\nbody {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Open Sans\",\n \"Helvetica Neue\",\n sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n background-color: #f9fafb;\n color: var(--text-primary);\n line-height: 1.5;\n}\n\n/* Webhook Manager */\n.webhook-manager {\n background: white;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 2rem;\n overflow: hidden;\n}\n\n.webhook-manager h1 {\n margin-top: 0;\n margin-bottom: 1.5rem;\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Webhook List */\n.webhook-list {\n margin-bottom: 2rem;\n border-bottom: 1px solid var(--border);\n padding-bottom: 1.5rem;\n}\n\n.webhook-list p {\n color: var(--text-secondary);\n font-size: 0.875rem;\n}\n\n.webhook-items-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.webhook-item {\n background-color: var(--secondary);\n border-radius: var(--radius);\n padding: 1rem;\n border-left: 4px solid var(--primary);\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.webhook-item:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow);\n}\n\n.webhook-item p {\n margin: 0.5rem 0;\n font-size: 0.875rem;\n}\n\n.webhook-item p strong {\n color: var(--text-primary);\n display: inline-block;\n width: 5.5rem;\n}\n\n.webhook-item .event-tag {\n display: inline-block;\n background-color: #dbeafe;\n color: #1e40af;\n font-size: 0.75rem;\n font-weight: 600;\n padding: 0.25rem 0.5rem;\n border-radius: 9999px;\n margin-left: 0.5rem;\n}\n\n/* Webhook Form */\n.webhook-form {\n background-color: white;\n border-radius: var(--radius);\n}\n\n.form-group {\n margin-bottom: 1.25rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n color: var(--text-primary);\n font-size: 0.875rem;\n}\n\n.form-group input,\n.form-group select {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-size: 0.875rem;\n transition: border-color 0.2s, box-shadow 0.2s;\n color: var(--text-primary);\n}\n\n.form-group input:focus,\n.form-group select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);\n}\n\n.form-group input::placeholder {\n color: var(--text-secondary);\n}\n\n.webhook-form button {\n background-color: var(--primary);\n color: white;\n border: none;\n border-radius: var(--radius);\n padding: 0.75rem 1.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s;\n width: 100%;\n font-size: 0.875rem;\n}\n\n.webhook-form button:hover {\n background-color: var(--primary-hover);\n}\n\n/* Footer */\nfooter {\n text-align: center;\n margin-top: 1.5rem;\n}\n\nfooter a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 0.75rem;\n transition: color 0.2s;\n}\n\nfooter a:hover {\n color: var(--primary);\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n body {\n padding: 1rem;\n }\n\n .webhook-manager {\n padding: 1.5rem;\n }\n\n .webhook-items-container {\n grid-template-columns: 1fr;\n }\n}",[],[223,274],[223],{"_103":283,"_95":284,"_147":285,"_149":-5,"_150":136,"_151":207,"_153":118,"_105":286,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":287,"_98":304},"3ffd7b2a-00e9-11f0-bbaf-569c3dd06744","shared","d2191363-2748-4cfe-a4c5-931c4600f1d6",["D",1741966224939],[288,296],{"_103":289,"_95":290,"_147":291,"_149":285,"_150":136,"_151":175,"_153":118,"_105":292,"_100":31,"_155":260,"_157":293,"_158":27,"_159":-5,"_160":294,"_98":295},"401d0936-00e9-11f0-9b7e-569c3dd06744","README.md","401d0a1c-00e9-11f0-9b7e-569c3dd06744",["D",1741966225143],"# Shared\n\nIt's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:\n\n![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)\n\nFor example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support \"web-standards\", but there are definitely edge cases to look out for.",[],[284,290],{"_103":297,"_95":298,"_147":299,"_149":285,"_150":136,"_151":184,"_153":118,"_105":300,"_100":186,"_155":176,"_157":301,"_158":27,"_159":-5,"_160":302,"_98":303},"23daeebe-0107-11f0-9910-569c3dd06744","utils.ts","3ffd6ea0-00e9-11f0-bbaf-569c3dd06744",["D",1741979062632],"export interface Message {\n content: string;\n}\n\nexport interface Webhook {\n id?: number;\n projectId: string;\n webhookUrl: string;\n event: string;\n createdAt?: string;\n}\n\nexport interface ProjectFile {\n id: string;\n name: string;\n path: string;\n type: string;\n updatedAt: string;\n}\n\nexport interface ProjectState {\n projectId: string;\n files: ProjectFile[];\n lastUpdated: string;\n}\n\nexport const WEBHOOK_LIMIT = 5;",[],[284,298],[284],{"_103":306,"_95":290,"_147":307,"_149":-5,"_150":136,"_151":135,"_153":118,"_105":308,"_100":175,"_155":260,"_157":309,"_158":27,"_159":-5,"_160":310,"_98":311},"03443e64-0349-11f0-9b5e-569c3dd06744","4110a262-00e9-11f0-a035-569c3dd06744",["D",1742227257061],"# Webhooks for Project File Creation/Deletion\n\nRegister a webhook to recieve a file creation or file deletion summary event once an hour.\n\nBeware that this is truly simple, there's no retry management, authentication or way to delete the webhook at the moment. If you want to get both events sent to one webhook, you'll need to fill out the form twice.\n\n## File Creation Event\n```\n{\n event: \"FilesCreated\",\n projectId: string,\n files: Array<{\n id: string,\n name: string,\n path: string,\n type: string,\n updatedAt: string // ISO date string\n }>\n}\n```\n\n## File Deletion Event\n```\n{\n event: \"FilesDeleted\",\n projectId: string,\n files: Array<{\n id: string,\n name: string,\n path: string,\n type: string,\n updatedAt: string // ISO date string\n }>\n}\n```",[],[290],"files",[144,162,169,180,191,202,212,221,227,234,244,254,264,272,282,288,296,305],"counts",{"_316":31,"_317":166,"_318":31,"_319":31},"pulls","branches","forks","envVars","contents",[],{"_103":235,"_95":236,"_147":237,"_149":230,"_150":136,"_151":238,"_153":118,"_105":323,"_100":240,"_155":176,"_157":241,"_158":27,"_159":-5,"_98":324},["D",1742226842608],[223,229,236],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":330,"_142":334,"_312":389,"_260":390,"_320":392,"_325":-5,"_393":27,"_394":-5},{"_103":104,"_95":96,"_105":331,"_107":-5,"_108":27,"_109":110,"_111":112,"_113":-5,"_12":114,"_115":116,"_117":118,"_119":-5,"_120":31,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":27,"_21":332,"_133":333},["D",1741966224804],{"_93":94,"_131":132},{"_100":135,"_95":41,"_103":136,"_137":104,"_138":-5,"_139":-5,"_140":-5,"_141":-5},[335,356,377,386],{"_103":145,"_95":146,"_147":148,"_149":-5,"_150":136,"_151":152,"_153":118,"_105":154,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":336,"_98":355},[337,346,349,352],{"_103":163,"_95":164,"_147":165,"_149":148,"_150":136,"_151":166,"_153":118,"_105":167,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":338,"_98":345},[339,342],{"_103":170,"_95":171,"_147":172,"_149":165,"_150":136,"_151":173,"_153":118,"_105":174,"_100":175,"_155":176,"_157":177,"_158":27,"_159":-5,"_160":340,"_98":341},[],[146,164,171],{"_103":181,"_95":182,"_147":183,"_149":165,"_150":136,"_151":184,"_153":118,"_105":185,"_100":186,"_155":176,"_157":187,"_158":27,"_159":-5,"_160":343,"_98":344},[],[146,164,182],[146,164],{"_103":192,"_95":193,"_147":194,"_149":148,"_150":136,"_151":195,"_153":118,"_105":196,"_100":197,"_155":198,"_157":199,"_158":27,"_159":-5,"_160":347,"_98":348},[],[146,193],{"_103":203,"_95":204,"_147":116,"_149":148,"_150":136,"_151":205,"_153":118,"_105":206,"_100":207,"_155":208,"_157":209,"_158":27,"_159":-5,"_160":350,"_98":351},[],[146,204],{"_103":213,"_95":214,"_147":215,"_149":148,"_150":136,"_151":184,"_153":118,"_105":216,"_100":31,"_155":176,"_157":217,"_158":27,"_159":-5,"_160":353,"_98":354},[],[146,214],[146],{"_103":222,"_95":223,"_147":224,"_149":-5,"_150":136,"_151":186,"_153":118,"_105":225,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":357,"_98":376},[358,367,370,373],{"_103":228,"_95":229,"_147":230,"_149":224,"_150":136,"_151":231,"_153":118,"_105":232,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":359,"_98":366},[360,363],{"_103":235,"_95":236,"_147":237,"_149":230,"_150":136,"_151":238,"_153":118,"_105":239,"_100":240,"_155":176,"_157":241,"_158":27,"_159":-5,"_160":361,"_98":362},[],[223,229,236],{"_103":245,"_95":246,"_147":247,"_149":230,"_150":136,"_151":248,"_153":118,"_105":249,"_100":186,"_155":176,"_157":250,"_158":27,"_159":-5,"_160":364,"_98":365},[],[223,229,246],[223,229],{"_103":255,"_95":256,"_147":257,"_149":224,"_150":136,"_151":258,"_153":118,"_105":259,"_100":186,"_155":260,"_157":261,"_158":27,"_159":-5,"_160":368,"_98":369},[],[223,256],{"_103":265,"_95":266,"_147":267,"_149":224,"_150":136,"_151":240,"_153":118,"_105":268,"_100":31,"_155":176,"_157":269,"_158":27,"_159":-5,"_160":371,"_98":372},[],[223,266],{"_103":273,"_95":274,"_147":275,"_149":224,"_150":136,"_151":276,"_153":118,"_105":277,"_100":207,"_155":260,"_157":278,"_158":27,"_159":-5,"_160":374,"_98":375},[],[223,274],[223],{"_103":283,"_95":284,"_147":285,"_149":-5,"_150":136,"_151":207,"_153":118,"_105":286,"_100":31,"_155":156,"_157":-5,"_158":27,"_159":-5,"_160":378,"_98":385},[379,382],{"_103":289,"_95":290,"_147":291,"_149":285,"_150":136,"_151":175,"_153":118,"_105":292,"_100":31,"_155":260,"_157":293,"_158":27,"_159":-5,"_160":380,"_98":381},[],[284,290],{"_103":297,"_95":298,"_147":299,"_149":285,"_150":136,"_151":184,"_153":118,"_105":300,"_100":186,"_155":176,"_157":301,"_158":27,"_159":-5,"_160":383,"_98":384},[],[284,298],[284],{"_103":306,"_95":290,"_147":307,"_149":-5,"_150":136,"_151":135,"_153":118,"_105":308,"_100":175,"_155":260,"_157":309,"_158":27,"_159":-5,"_160":387,"_98":388},[],[290],[335,337,339,342,346,349,352,356,358,360,363,367,370,373,377,379,382,386],{"_103":235,"_95":236,"_147":237,"_149":230,"_150":136,"_151":238,"_153":118,"_105":323,"_100":240,"_155":176,"_157":241,"_158":27,"_159":-5,"_98":391},[223,229,236],[],"showCompareCallout","pull","routes/_app","actionData","errors"]