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}",[],[252,262],"c868ccae-0f83-11f1-8520-42dde27851f2","Topic.loader.ts","019c82b3-583b-71ae-9cac-52d820d094d0",12,["D",1771719410249],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.13.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}",[],[252,270],"c371bb34-0f83-11f1-a3bc-42dde27851f2","Topic.action.ts","019c82b3-583b-71ae-9cac-4e2ac6fb8e8b",10,["D",1771719401916],"import { ActionFunctionArgs } from \"https://esm.sh/react-router@7.13.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}",[],[252,278],"bea13346-0f83-11f1-acb4-42dde27851f2","Search.tsx","019c82b3-583b-71ae-9cac-4aff258d2fdd",8,["D",1771719393843],"/** @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.13.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}",[],[252,286],"cd5d221e-0f83-11f1-b0f4-42dde27851f2","Search.loader.ts","019c82b3-583b-71ae-9cac-46b17bb536e8",14,["D",1771719418559],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.13.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}",[],[252,294],"ba300486-0f83-11f1-9cd5-42dde27851f2","Home.tsx","019c82b3-583b-71ae-9cac-41a23628529a",["D",1771719386387],"/** @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.13.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 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

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}",[],[252,302],"c597d6b4-0f83-11f1-9cd5-42dde27851f2","Home.loader.ts","019c82b3-583b-71ae-9cac-3f3c0e852689",11,["D",1771719405526],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.13.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}",[],[252,309],"b7917d0e-0f83-11f1-a3bc-42dde27851f2","App.tsx","019c82b3-583b-71ae-9cac-38166350be11",["D",1771719381992],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.13.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}",[],[252,317],"912e090c-0f83-11f1-b3bb-42dde27851f2",["D",1771719317575],[186,187,188,189,190,191,192,193,194,195],[252],"3690864a-0f84-11f1-9953-42dde27851f2","index.tsx","019c82b3-583b-71ae-9cac-32ee6db01b2e","019c82b3-583b-71ae-9cac-34ea3e5e54bb",["D",1771719595056],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n redirect,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.13.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 dataStrategy for single-fetch\nconst router = createBrowserRouter(\n routes,\n {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: window.__staticRouterHydrationData,\n\n async dataStrategy({ request, matches }) {\n // Filter to matches that need their handler called\n const matchesToLoad = matches.filter(m => m.shouldCallHandler());\n\n // If no matches need loading, return empty results\n if (matchesToLoad.length === 0) {\n return {};\n }\n\n console.log(\"[dataStrategy] fetching:\", request.url, \"method:\", request.method);\n console.log(\"[dataStrategy] matchesToLoad:\", matchesToLoad.map(m => m.route.id));\n\n const fetchInit: RequestInit = {\n method: request.method,\n headers: {\n \"X-Data-Request\": \"true\",\n },\n signal: request.signal,\n };\n\n // For non-GET requests (actions), forward the body\n if (request.method !== \"GET\") {\n fetchInit.body = await request.formData();\n }\n\n const res = await fetch(request.url, fetchInit);\n const json = await res.json();\n\n console.log(\"[dataStrategy] response keys:\", Object.keys(json));\n\n // Handle redirects from actions\n // The server sends { redirect: \"/path\" } instead of a 302\n // Return the redirect Response as a DataStrategyResult for each match.\n // React Router unwraps Response results — a 302 triggers client-side navigation.\n if (json.redirect) {\n console.log(\"[dataStrategy] redirect to:\", json.redirect);\n const results: Record = {};\n for (const match of matchesToLoad) {\n results[match.route.id] = {\n type: \"data\",\n result: redirect(json.redirect),\n };\n }\n return results;\n }\n\n // Build results keyed by route ID\n // dataStrategy must return Record\n const results: Record = {};\n for (const match of matchesToLoad) {\n const routeId = match.route.id;\n // For actions, prefer actionData; for loaders, use loaderData\n if (json.actionData && json.actionData[routeId] !== undefined && json.actionData[routeId] !== null) {\n results[routeId] = { type: \"data\", result: json.actionData[routeId] };\n } else if (json.loaderData && json.loaderData[routeId] !== undefined) {\n results[routeId] = { type: \"data\", result: json.loaderData[routeId] };\n }\n }\n\n console.log(\"[dataStrategy] returning results for routes:\", Object.keys(results));\n return results;\n },\n },\n);\n\n// Hydrate the app\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);",[],[335,328],"frontend","912da4a8-0f83-11f1-b3bb-42dde27851f2","index.html","019c82b3-583b-71ae-9cac-2e78fb0f5acd",["D",1771719317575],"\n\n \n \n \n Community Message Board\n \n \n \n \n \n

\n \n \n",[],[335,337],"d9bec1b6-0f83-11f1-be24-42dde27851f2","SearchResults.tsx","019c82b3-583b-71ae-9cac-27ca4603f2eb","019c82b3-583b-71ae-9cac-2835650ea273",19,["D",1771719439315],"/** @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.13.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}",[],[335,352,344],"components","cfc3b540-0f83-11f1-bc79-42dde27851f2","SearchForm.tsx","019c82b3-583b-71ae-9cac-20319c0d3da0",15,["D",1771719422584],"/** @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.13.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}",[],[335,352,354],"d443684a-0f83-11f1-bbe8-42dde27851f2","MessageList.tsx","019c82b3-583b-71ae-9cac-1f515293d8e5",17,["D",1771719430128],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLocation } from \"https://esm.sh/react-router@7.13.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}",[],[335,352,362],"d21fa470-0f83-11f1-8520-42dde27851f2","MessageForm.tsx","019c82b3-583b-71ae-9cac-180a2e39c211",16,["D",1771719426547],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n useActionData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.13.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}",[],[335,352,370],"912d6e0c-0f83-11f1-b3bb-42dde27851f2","LoadingSpinner.tsx","019c82b3-583b-71ae-9cac-15e49fc44d10",["D",1771719317575],"/** @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}",[],[335,352,378],"d78d3742-0f83-11f1-b60a-42dde27851f2","019c82b3-583b-71ae-9cac-10561f576faa",18,["D",1771719435658],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.13.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}",[],[335,352,317],"912da2be-0f83-11f1-b3bb-42dde27851f2",["D",1771719317575],[177,178,179,180,181,182],[335,352],"912dbde4-0f83-11f1-b3bb-42dde27851f2",["D",1771719317575],[176,183,184],[335],"b52d0466-0f83-11f1-b0f4-42dde27851f2","index.ts","019c82b3-583b-71ae-9cac-0b2bc44714f5","019c82b3-583b-71ae-9cac-0ce3711766dd",4,["D",1771719377978],"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.13.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// 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 const isDataRequest = c.req.header(\"X-Data-Request\") === \"true\";\n\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 (e.g., redirects from actions)\n if (context instanceof Response) {\n if (isDataRequest && context.status >= 300 && context.status < 400) {\n // For data requests, convert redirects to JSON so the client can handle them\n const location = context.headers.get(\"Location\");\n console.log(\"[data-request] redirect to:\", location);\n return Response.json({ redirect: location });\n }\n return context;\n }\n\n // Data-only request: return loaderData/actionData as JSON keyed by route ID\n if (isDataRequest) {\n console.log(\"[data-request] loaderData keys:\", Object.keys(context.loaderData || {}));\n console.log(\"[data-request] actionData keys:\", Object.keys(context.actionData || {}));\n return Response.json({\n loaderData: context.loaderData,\n actionData: context.actionData,\n });\n }\n\n // Full SSR render\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;",[],[409,400],"backend","912d41d4-0f83-11f1-b3bb-42dde27851f2","queries.ts","019c82b3-583b-71ae-9cac-0371b5959f4f","019c82b3-583b-71ae-9cac-060c9565ddfb",["D",1771719317575],"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}",[],[409,418,411],"database","912d12f4-0f83-11f1-b3bb-42dde27851f2","migrations.ts","019c82b3-583b-71ae-9cab-fe7fe92a3ba1",["D",1771719317575],"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\";\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(`SELECT COUNT(*) as count FROM ${TOPICS_TABLE}`);\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(`SELECT id FROM ${TOPICS_TABLE} LIMIT 3`);\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}",[],[409,418,420],"912d519c-0f83-11f1-b3bb-42dde27851f2",["D",1771719317575],[172,173],[409,418],"912d6434-0f83-11f1-b3bb-42dde27851f2",["D",1771719317575],[171,174],[409],["D",1744152661331],["D",1789558275908],{"_11":12,"_129":73},{"_11":12,"_125":-5,"_72":73,"_30":71,"_126":127,"_128":24},{"_38":115,"_13":16,"_32":35,"_116":75,"_117":62,"_118":119,"_120":79,"_121":75,"_122":41,"_123":14,"_124":12},"ctx",{"_51":-5,"_148":473,"_474":475,"_476":477,"_478":24,"_479":24,"_480":24,"_481":87,"_482":-5,"_483":-7,"_484":-7,"_485":26,"_486":24,"_487":24,"_488":-5,"_489":24,"_490":24,"_491":24,"_492":-5},"ENV",{"_443":444,"_445":446,"_447":448,"_449":450,"_451":452,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","main","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 · react-router-questions.md