\n {vals.length === 0 ? (\n

\n No vals yet. Create the first one!\n

\n ) : (\n

\n {vals.map((val) => (\n \n ))}\n

\n )}\n

\n );\n}\n",[],[298,291],"routes","8f0e8890-63c6-11f0-98de-0224a6c84d84","Home.loader.ts","add2bc6a-3c88-4d70-997d-18af37901504",["D",1752836490240],"import { ValTown } from \"npm:@valtown/sdk@1.6.0\";\nimport type { GroupedValInfo } from \"../shared/types.ts\";\n\nexport async function fetchValsFromAPI(): Promise {\n const vt = new ValTown();\n const grouped: Record = {};\n\n const valList = [];\n for await (const val of vt.me.vals.list({ limit: 1, offset: 0 })) {\n valList.push(val);\n }\n\n const filePromises = valList.map((val) =>\n vt.vals.files\n .retrieve(val.id, { path: \"\", recursive: true })\n .then((files) => ({ val, files })),\n );\n\n const results = await Promise.all(filePromises);\n\n for (const { val, files } of results) {\n const emailFiles = files.data.filter(\n (file) => file.type === \"email\" && file.links.endpoint,\n );\n\n const httpFiles = files.data.filter(\n (file) =>\n file.type === \"http\" &&\n !file.links.endpoint.includes(\"web.val.run\"),\n );\n\n for (const file of [...httpFiles, ...emailFiles]) {\n if (!grouped[val.name]) {\n grouped[val.name] = {\n valId: file.id,\n valName: val.name,\n valUrl: val.links.html,\n valAuthor: val.author?.username || \"unknown\",\n files: [],\n };\n }\n grouped[val.name].files.push({\n fileName: file.path,\n subdomain:\n file.type === \"http\"\n ? new URL(file.links.endpoint).hostname\n : new URL(file.links.endpoint).hostname.replace(\n \".val.run\",\n \"@val.email\",\n ),\n type: file.type ?? \"\",\n fileUrl: file.links.html,\n });\n }\n }\n\n return Object.values(grouped);\n}\n\nexport async function loader() {\n // Artificial delay to simulate slow loading\n const vals = await fetchValsFromAPI();\n\n return { vals };\n}\n",[],[298,300],"8f0e86a6-63c6-11f0-98de-0224a6c84d84","App.tsx","60eb7d3d-4def-43e9-a08f-338d2fdecf18",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport {\n Outlet,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Nav } from \"../frontend/components/Nav.tsx\";\n\nexport function App() {\n console.log(\"App rendered\");\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n \n \n );\n}\n",[],[298,307],"8f0e8fd4-63c6-11f0-98de-0224a6c84d84",["D",1752836490240],[222,223,224],[298],"8f0e82be-63c6-11f0-98de-0224a6c84d84","index.tsx","f74e94cb-3b58-4b03-9f3f-6c5d0b9c695e","03104a13-d175-4df3-8a91-cdd78a66362b",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { routes } from \"../shared/routes.ts\";\n\n// Create a browser router with the same routes as the server\n// but using the hydration data from the server render\nconst router = createBrowserRouter(routes, {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: globalThis.__staticRouterHydrationData,\n});\n\n// Hydrate the app\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\nhydrateRoot(\n root,\n \n \n ,\n);\n\n// Fade out and remove the global loading overlay after hydration\nconst overlay = document.getElementById(\"global-loading-overlay\");\nif (overlay) {\n overlay.style.transition = \"opacity 0.3s\";\n overlay.style.opacity = \"0\";\n setTimeout(() => overlay.remove(), 300);\n}\n",[],[325,318],"frontend","8f0e8034-63c6-11f0-98de-0224a6c84d84","index.html","6676e7cc-eb9a-445e-9e63-a047970d6815",["D",1752836490240],"\n\n\n\n \n \n Custom Endpoints & Emails\n \n \n \n\n\n\n \n

\n \n \n\n\n",[],[325,327],"8f0e756c-63c6-11f0-98de-0224a6c84d84","ValCard.tsx","05449add-bb76-4967-8755-5836918e3129","6589140d-a839-4d84-bcb9-fa5cedfb4ce5",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { GroupedValInfo } from \"../../shared/types.ts\";\nimport { EndpointInfo } from \"./EndpointInfo.tsx\";\nimport { LinkIcon } from \"./Icons.tsx\";\n\ninterface ValCardProps {\n val: GroupedValInfo;\n}\n\nexport function ValCard({ val }: ValCardProps) {\n return (\n

\n {val.valName}\n {val.valUrl && (\n \n \n \n )}\n

\n \n

\n );\n}\n",[],[325,341,334],"components","8f0e726a-63c6-11f0-98de-0224a6c84d84","Nav.tsx","331b8eb5-bfb0-4742-b9e4-05c3fc847c66",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { Link } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function Nav() {\n return (\n

Custom Endpoints & Emails

\n \n \n \n \n Refresh\n \n

\n );\n}\n",[],[325,341,343],"8f0e7030-63c6-11f0-98de-0224a6c84d84","Icons.tsx","eaf4a59d-b735-4ab2-b37b-91e0fe8ac375",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport const MailIcon = () => (\n \n Email Icon\n \n \n \n);\n\nexport const GlobeIcon = () => (\n \n HTTP Icon\n \n \n \n \n);\n\nexport const LinkIcon = () => (\n \n Open external link\n \n \n);\n",[],[325,341,350],"8f0e6e0a-63c6-11f0-98de-0224a6c84d84","EndpointInfo.tsx","ba40401c-8365-4baf-9a8a-4c38fac43e08",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { GroupedValInfo } from \"../../shared/types.ts\";\nimport { CopyEmailButton } from \"./CopyEmailButton.tsx\";\nimport { GlobeIcon, MailIcon } from \"./Icons.tsx\";\n\nexport function EndpointInfo({ val }: { val: GroupedValInfo }) {\n return val.files.map((file) => (\n

\n {file.type === \"http\" ? : }\n

\n {file.type === \"email\" ? (\n \n ) : (\n \n {file.subdomain}\n \n )}\n

\n \n {file.fileName}\n \n

\n ));\n}\n",[],[325,341,357],"8f0e6b44-63c6-11f0-98de-0224a6c84d84","CopyEmailButton.tsx","9cff7dca-cfeb-4e65-8264-934eaf1e78d0",["D",1752836490240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function CopyEmailButton({ email }: { email: string }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n await navigator.clipboard.writeText(email);\n setCopied(true);\n setTimeout(() => setCopied(false), 1200);\n };\n\n return (\n \n {copied ? \"Copied!\" : email}\n \n );\n}\n",[],[325,341,364],"8f0e7d96-63c6-11f0-98de-0224a6c84d84",["D",1752836490240],[214,215,216,217,218],[325,341],"8f0e8480-63c6-11f0-98de-0224a6c84d84",["D",1752836490240],[213,219,220],[325],"8f0e5f3c-63c6-11f0-98de-0224a6c84d84","index.ts","722bde42-6a8f-43e9-99ed-9db453c0d6de",["D",1752836490240],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@4.1.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { routes } from \"../shared/routes.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\n\n// Initialize the database\nawait initializeDatabase();\n\n// Create the Hono app\nconst app = new Hono();\n\n// Serve static files from the frontend directory\napp.get(\"/frontend/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the shared directory\napp.get(\"/shared/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the routes directory\napp.get(\"/routes/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// LoaderData returns a map of loaderDatas for all matched loaders by an internal\n// id representation that looks like \"0-0\" and \"0-1\"\n// Some context: https://github.com/remix-run/react-router/blob/a3e4b8ed875611637357647fcf862c2bc61f4e11/packages/react-router/lib/hooks.tsx#L1093\n// This function combines all loader datas into a single object, which isn't technically correct, but might get us\n// pretty far.\n// Ultimately what we want is to only make one loader call for a new page navigation and then set the `state`\n// all at once with this exact object, and then have react router take care of sending the apprioriate state\n// to all the useLoaderDatas\nfunction parseData(data: any) {\n const entries = Object.values(data ?? {})\n .filter(Boolean)\n .flatMap((value: any) => Object.entries(value));\n return Object.fromEntries(entries);\n}\n\n// Create a static handler for server-side rendering\nconst { query, dataRoutes } = createStaticHandler(routes);\n\n// Handle all other routes with React Router\napp.all(\"*\", async (c) => {\n // Get the routing context by running loaders/actions\n const context = await query(c.req.raw);\n\n // If the context is a Response, return it directly (e.g., redirects)\n if (context instanceof Response) {\n return context;\n }\n console.log(context);\n\n // If the request is for JSON data, handle as before\n if (c.req.header(\"Accept\") === \"application/json\") {\n // in theory we should use `queryRoute` for this, like here:\n // https://github.com/remix-run/custom-react-router-framework-example/blob/f5a141d67800e8da076cd1bb3130f29a8c0d4ce3/entry.server.tsx#L79\n // but i wasn't able to get that to work in my rewrite-server branch\n // maybe it depends on X-Route-Id?\n return Response.json(parseData(context.loaderData));\n } else if (\n c.req\n .header(\"Content-Type\")\n ?.includes(\"application/x-www-form-urlencoded\")\n ) {\n return Response.json(parseData(context.actionData));\n }\n\n // Create a static router for server-side rendering\n const router = createStaticRouter(dataRoutes, context);\n\n // Read the HTML template\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n const appHtml = renderToString(\n // @ts-ignore - this is a workaround to get the StaticRouterProvider to work\n React.createElement(StaticRouterProvider, {\n router,\n context,\n }),\n );\n\n // Insert the rendered app and hydration data into the HTML template\n html = html.replace(\n '

',\n `

${appHtml}

`, // fix: inject rendered HTML, not literal\n );\n\n // Return the HTML with the appropriate headers\n return c.html(html);\n});\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n throw err;\n});\n\n// Export the app for HTTP vals\nexport default app.fetch;\n",[],[386,379],"backend","8f0e58c0-63c6-11f0-98de-0224a6c84d84","queries.ts","1ccc5af4-e3e6-4557-b185-d3acf8c61294","3dd1c492-84d7-4777-9de9-0dc6b33da7cd",["D",1752836490240],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, SearchResults, Topic } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `,\n [title, createdAt],\n );\n\n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `,\n [topicId],\n );\n\n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `,\n [topicId, content, createdAt],\n );\n\n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `,\n [`%${query}%`],\n );\n\n // Search in messages\n const messagesResult = await sqlite.execute(\n `\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `,\n [`%${query}%`],\n );\n\n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query,\n };\n}",[],[386,395,388],"database","8f0e3764-63c6-11f0-98de-0224a6c84d84","migrations.ts","73aa2978-ca31-4ddc-a293-f44ba33e9caa",["D",1752836490240],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names with versioning to allow for schema changes\nexport const TOPICS_TABLE = \"message_board_topics_v1\";\nexport const MESSAGES_TABLE = \"message_board_messages_v1\";\nexport const TODOS_TABLE = \"todos_v1\";\n\n/**\n * Initialize the database schema\n */\nexport async function initializeDatabase() {\n // Create topics table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TOPICS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topicId INTEGER NOT NULL,\n content TEXT NOT NULL,\n createdAt TEXT NOT NULL,\n FOREIGN KEY (topicId) REFERENCES ${TOPICS_TABLE}(id)\n )\n `);\n\n // Create indexes for faster queries\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_messages_topicId \n ON ${MESSAGES_TABLE} (topicId)\n `);\n\n // Seed initial data if the topics table is empty\n const existingTopics = await sqlite.execute(\n `SELECT COUNT(*) as count FROM ${TOPICS_TABLE}`,\n );\n\n if (existingTopics.rows[0].count === 0) {\n await seedInitialData();\n }\n}\n\n/**\n * Seed the database with initial data for demonstration\n */\nasync function seedInitialData() {\n // Insert sample topics\n await sqlite.execute(`\n INSERT INTO ${TOPICS_TABLE} (title, createdAt) VALUES\n ('Welcome to the Message Board', '${new Date().toISOString()}'),\n ('Tips and Tricks for Val Town', '${new Date().toISOString()}'),\n ('Introduce Yourself', '${new Date().toISOString()}')\n `);\n\n // Get the IDs of the inserted topics\n const topics = await sqlite.execute(\n `SELECT id FROM ${TOPICS_TABLE} LIMIT 3`,\n );\n\n // Insert sample messages for each topic\n if (topics.rows.length > 0) {\n const welcomeTopicId = topics.rows[0].id;\n const tipsTopicId = topics.rows[1].id;\n const introTopicId = topics.rows[2].id;\n\n await sqlite.execute(`\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt) VALUES\n (${welcomeTopicId}, 'Welcome to our community message board! Feel free to browse around and join the discussions.', '${new Date().toISOString()}'),\n (${welcomeTopicId}, 'If you have any questions, just post them here!', '${new Date(Date.now() - 3600000).toISOString()}'),\n (${tipsTopicId}, 'Val Town makes it easy to build and share serverless functions.', '${new Date().toISOString()}'),\n (${tipsTopicId}, 'You can use TypeScript for better type safety in your projects.', '${new Date(Date.now() - 7200000).toISOString()}'),\n (${introTopicId}, 'Hi everyone! I\\'m the creator of this message board example.', '${new Date().toISOString()}')\n `);\n }\n}\n",[],[386,395,397],"8f0e5d70-63c6-11f0-98de-0224a6c84d84",["D",1752836490240],[209,210],[386,395],"8f0e68ce-63c6-11f0-98de-0224a6c84d84",["D",1752836490240],[208,211],[386],["D",1752836490240],{"_11":12,"_144":81},{"_11":12,"_140":-5,"_80":81,"_31":79,"_141":142,"_143":30},{"_39":40,"_13":16,"_33":36,"_129":96,"_130":70,"_131":132,"_133":100,"_134":135,"_136":137,"_138":14,"_139":12},"ctx",{"_52":-5,"_165":448,"_449":450,"_451":452,"_453":30,"_454":30,"_455":30,"_456":24,"_457":-5,"_458":-7,"_459":-7,"_460":26,"_461":30,"_462":30,"_463":-5,"_464":30,"_465":30,"_466":30,"_467":-5},"ENV",{"_419":420,"_421":422,"_423":16,"_424":425,"_426":427,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439,"_440":441,"_442":443,"_444":445,"_446":447},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · shared