Community Message Board

\n \n Home\n \n

\n \n \n \n

{topic.title}

\n Created {new Date(topic.createdAt).toDateString()}\n

\n \n

Messages

\n \n \n \n \n

\n );\n}",[],[293,302],"2aadc416-1645-11f0-b5a9-569c3dd06744","Topic.loader.ts","49dc9b30-8f7a-43c9-80bc-72da05a4cf87",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getTopicById, getMessagesByTopicId } from \"../backend/database/queries.ts\";\n\nexport async function loader({ params }: LoaderFunctionArgs) {\n const topicId = parseInt(params.topicId!, 10);\n const topic = await getTopicById(topicId);\n\n if (!topic) {\n throw new Response(\"Topic not found\", { status: 404 });\n }\n\n const messages = await getMessagesByTopicId(topicId);\n return { topic, messages };\n}",[],[293,309],"2aadc268-1645-11f0-b5a9-569c3dd06744","Topic.action.ts","73fdb20b-448c-4b9e-ac48-57aad1415049",["D",1744314677289],"import { ActionFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createMessage } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n console.log(\"HERE!\");\n const formData = await request.formData();\n const topicId = parseInt(formData.get(\"topicId\") as string, 10);\n const content = formData.get(\"content\") as string;\n\n if (!content || content.trim() === \"\") {\n throw new Response(\"Content is required\", { status: 400 });\n }\n\n const message = await createMessage(topicId, content);\n return message;\n}",[],[293,316],"2aadbf70-1645-11f0-b5a9-569c3dd06744","Search.tsx","e4076c07-7ec1-4d0f-b4f7-cd2f465ef5b1",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../shared/types.ts\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\nexport function Search() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

\n Search Results for \"{query}\"\n

\n \n {!hasResults ? (\n

\n No results found for \"{query}\". Try a different search term.\n

\n ) : (\n

\n {topics.length > 0 && (\n

Topics ({topics.length})

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

\n {messages.map((message) => (\n

{message.content}

\n \n View in topic\n \n \n {new Date(message.createdAt).toDateString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[293,323],"2aadbda4-1645-11f0-b5a9-569c3dd06744","Search.loader.ts","f29bd6bb-760c-4a1a-8561-25a4726b3602",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { search } from \"../backend/database/queries.ts\";\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n const url = new URL(request.url);\n const query = url.searchParams.get(\"q\") || \"\";\n\n if (!query || query.trim() === \"\") {\n return { topics: [], messages: [], query: \"\" };\n }\n\n return await search(query);\n}",[],[293,330],"55f31a0e-1645-11f0-abf8-569c3dd06744","Home.tsx","8239b451-63d6-4090-b0ca-17a2256a913b",["D",1744314749895],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n Link,\n useLoaderData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\nimport { Topic } from \"../shared/types.ts\";\n\ninterface TopicListProps {\n topics: Topic[];\n}\n\nexport function Home() {\n const navigation = useNavigation();\n const { topics } = useLoaderData();\n const isCreatingTopic = navigation.formAction === \"/\" && navigation.state === \"submitting\";\n const isDeletingAll = navigation.formAction === \"/delete-all\" && navigation.state === \"submitting\";\n let $form = React.useRef(null);\n let $deleteForm = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n const handleDeleteAll = (e: React.FormEvent) => {\n if (!confirm(\"Are you sure you want to delete ALL topics and messages? This action cannot be undone.\")) {\n e.preventDefault();\n }\n };\n\n return (\n

Community Message Board

\n \n Home\n \n

\n\n \n\n

Create a New Topic

\n \n

\n\n

Topics

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

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

\n )\n : (\n

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n

\n );\n}",[],[293,337],"2aadb7f0-1645-11f0-b5a9-569c3dd06744","Home.loader.ts","8555734a-58d5-4f7e-986c-af499c1fdc1c",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getAllTopics } from \"../backend/database/queries.ts\";\n\nexport async function loader() {\n return { topics: await getAllTopics() };\n}",[],[293,344],"4245ba0c-1645-11f0-9ca3-569c3dd06744","DeleteAll.action.ts","4245ba98-1645-11f0-9ca3-569c3dd06744",["D",1744314716884],"import { ActionFunctionArgs, redirect } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { deleteAllTopicsAndMessages } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n const formData = await request.formData();\n const confirmation = formData.get(\"confirmation\") as string;\n\n if (confirmation !== \"delete-all\") {\n throw new Response(\"Invalid confirmation\", { status: 400 });\n }\n\n await deleteAllTopicsAndMessages();\n \n // Redirect back to the home page\n return redirect(\"/\");\n}",[],[293,351],"2aadb61a-1645-11f0-b5a9-569c3dd06744","App.tsx","67b4bdd8-663f-4012-b9e6-ba3a5e8f159b",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"../frontend/components/LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n \n

\n\n \n

\n );\n}",[],[293,358],"2aadcab0-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[225,226,227,228,229,230,231,232,233,234,235],[293],"2aadb0ac-1645-11f0-b5a9-569c3dd06744","index.tsx","87c07d8e-b7d6-4a4d-bb66-9a5d4cccfe4f","2dad1ee4-a6ea-4a16-b839-896f14d0286d",["D",1744314677289],"/** @jsxImportSource 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 React from \"https://esm.sh/react@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(\n routes,\n {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: window.__staticRouterHydrationData,\n },\n);\n\n// Hydrate the app\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);",[],[376,369],"frontend","2aadaf58-1645-11f0-b5a9-569c3dd06744","index.html","7f09b221-180b-47aa-8b48-8a390bce93e1",["D",1744314677289],"\n\n \n \n \n Community Message Board\n \n \n \n \n \n

\n \n \n",[],[376,378],"2aadaabc-1645-11f0-b5a9-569c3dd06744","TopicDetail.tsx","b9b00b4e-7e76-4eb2-9d69-09fdd602917c","f41330df-a184-42ca-acfd-b06f5891cb32",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLoaderData, useParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Message, Topic } from \"../../shared/types.ts\";\nimport { MessageForm } from \"./MessageForm.tsx\";\nimport { MessageList } from \"./MessageList.tsx\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\ninterface TopicDetailData {\n topic: Topic;\n messages: Message[];\n}\n\nexport function TopicDetail() {\n const { topic, messages } = useLoaderData() as TopicDetailData;\n const { messageId } = useParams();\n const highlightedMessageId = messageId ? parseInt(messageId, 10) : undefined;\n\n // Scroll to highlighted message if messageId is provided\n useEffect(() => {\n if (highlightedMessageId) {\n const messageElement = document.getElementById(`message-${highlightedMessageId}`);\n if (messageElement) {\n messageElement.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n }\n }, [highlightedMessageId]);\n\n return (\n

Community Message Board

\n \n Home\n \n

\n\n \n\n

{topic.title}

\n Created {new Date(topic.createdAt).toDateString()}\n

\n\n

Messages

\n\n \n\n \n

\n );\n}",[],[376,392,385],"components","2aada774-1645-11f0-b5a9-569c3dd06744","SearchResults.tsx","c592b738-4ea2-44c4-97cc-2d10a4fdd267",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../../shared/types.ts\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\nexport function SearchResults() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

\n Search Results for \"{query}\"\n

\n \n {!hasResults ? (\n

\n No results found for \"{query}\". Try a different search term.\n

\n ) : (\n

\n {topics.length > 0 && (\n

Topics ({topics.length})

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

\n {messages.map((message) => (\n

{message.content}

\n \n View in topic\n \n \n {new Date(message.createdAt).toDateString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[376,392,394],"2aada5f8-1645-11f0-b5a9-569c3dd06744","SearchForm.tsx","0a0dd767-1aa6-4786-9d68-2c175268ec8f",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Form, useNavigation, useSearchParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function SearchForm() {\n const navigation = useNavigation();\n const [searchParams] = useSearchParams();\n const query = searchParams.get(\"q\") || \"\";\n const isSearching = navigation.state === \"loading\" && navigation.location.pathname === \"/search\";\n \n return (\n \n );\n}",[],[376,392,401],"2aada3fa-1645-11f0-b5a9-569c3dd06744","MessageList.tsx","8a230f6e-d323-4710-ae6c-aa295041257a",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLocation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: Message[];\n topicId: number;\n highlightedMessageId?: number;\n}\n\nexport function MessageList({ messages, topicId, highlightedMessageId }: MessageListProps) {\n const location = useLocation();\n\n if (messages.length === 0) {\n return (\n

\n No messages yet. Be the first to post!\n

\n );\n }\n\n return (\n

\n {messages.map((message) => {\n const isHighlighted = message.id === highlightedMessageId;\n const formattedDate = new Date(message.createdAt).toDateString();\n const messageUrl = `/topics/${topicId}/messages/${message.id}`;\n\n return (\n \n

{message.content}

\n \n {formattedDate}\n \n

\n );\n })}\n \n );\n}",[],[376,392,408],"2aada166-1645-11f0-b5a9-569c3dd06744","MessageForm.tsx","7f905bdc-2fd9-4c56-96be-bdef68b02ee7",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n useActionData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface MessageFormProps {\n topicId: number;\n}\n\nexport function MessageForm({ topicId }: MessageFormProps) {\n const navigation = useNavigation();\n const isSubmitting = navigation.state === \"submitting\";\n let $form = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

Post a Message

\n \n

\n );\n}",[],[376,392,415],"2aad9ffe-1645-11f0-b5a9-569c3dd06744","LoadingSpinner.tsx","733a0e72-f8fc-427d-987d-8deb9e032e62",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface LoadingSpinnerProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport function LoadingSpinner({ size = \"medium\" }: LoadingSpinnerProps) {\n const sizeClasses = {\n small: \"w-4 h-4 border-2\",\n medium: \"w-8 h-8 border-3\",\n large: \"w-12 h-12 border-4\"\n };\n\n return (\n

\n );\n}",[],[376,392,422],"2aad9e8c-1645-11f0-b5a9-569c3dd06744","01bfe0c0-afc9-4a0f-9d29-56a7b7f0fb17",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n {isLoading && (\n

\n \n

\n )}\n\n \n\n \n

\n );\n}",[],[376,392,358],"2aadad5a-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[215,216,217,218,219,220,221],[376,392],"2aadb46c-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[214,222,223],[376],"2aad95e0-1645-11f0-b5a9-569c3dd06744","index.ts","3421c26d-7bba-42d0-aff7-e5aa65c56604",["D",1744314677289],"http","import { Hono } from \"https://esm.sh/hono@4.1.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 React from \"https://esm.sh/react@18.2.0\";\nimport { readFile, serveFile } 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 (\n c.req.header(\"Accept\") === \"application/json\"\n ) {\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 (c.req.header(\"Content-Type\")?.includes(\"application/x-www-form-urlencoded\"))\n {\n return Response.json(parseData(context.actionData));\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 // Render the app to a string\n const appHtml = renderToString(\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}

`,\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;",[],[187,443],["D",1744314712334],[],[187,95,76],["D",1744314677289],[],[187,95,87],["D",1744314677289],[210,211],[187,95],"2aad9cd4-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[209,212],[187],["D",1744152661331],["D",1789558275908],{"_11":12,"_151":82},{"_11":12,"_147":-5,"_81":82,"_31":80,"_148":149,"_150":30},{"_40":137,"_13":16,"_34":37,"_138":98,"_139":70,"_140":141,"_142":102,"_143":98,"_144":43,"_145":14,"_146":12},"ctx",{"_53":-5,"_171":501,"_502":503,"_504":505,"_506":30,"_507":30,"_508":30,"_509":24,"_510":-5,"_511":-7,"_512":-7,"_513":26,"_514":30,"_515":30,"_516":-5,"_517":30,"_518":30,"_519":30,"_520":-5},"ENV",{"_472":473,"_474":475,"_476":71,"_477":478,"_479":480,"_481":482,"_483":484,"_485":486,"_487":488,"_489":490,"_491":492,"_493":494,"_495":496,"_497":498,"_499":500},"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 · database