Val Town Code SearchReturn to Val Town

1# Community Message Board
2
3A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
4
5## Features
49### Server-Side Rendering
50
51The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
52
531. The server receives the request
60After the initial page load, navigation happens entirely on the client:
61
621. React Router handles link clicks and form submissions
632. Data is fetched asynchronously using loaders and actions
643. A loading spinner is displayed during data fetching
90
91- **Hono**: For server-side routing and handling
92- **React Router 7**: For both server and client-side routing
93- **SQLite**: For data persistence
94- **TypeScript**: For type safety across the stack
95
96The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Link, useLocation } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
4import { Message } from "../../shared/types.ts";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Form, useNavigation } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
4import { LoadingSpinner } from "./LoadingSpinner.tsx";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface LoadingSpinnerProps {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import {
4  createBrowserRouter,
5  RouterProvider,
6} from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
7import React from "https://esm.sh/react@18.2.0";
8import { routes } from "../shared/routes.ts";
9
21hydrateRoot(
22  document.getElementById("root")!,
23  <React.StrictMode>
24    <RouterProvider router={router} />
25  </React.StrictMode>,
26);

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3  Form,
5  useLoaderData,
6  useNavigation,
7} from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
8import React from "https://esm.sh/react@18.2.0";
9import { Topic } from "../shared/types.ts";
10import { LoadingSpinner } from "../frontend/components/LoadingSpinner.tsx";

1import { LoaderFunctionArgs } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
2import { getAllTopics } from "../backend/database/queries.ts";
3

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Outlet, useNavigation } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
3import React from "https://esm.sh/react@18.2.0";
4import { LoadingSpinner } from "../frontend/components/LoadingSpinner.tsx";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Outlet, useNavigation } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
3import React from "https://esm.sh/react@18.2.0";
4import { LoadingSpinner } from "./LoadingSpinner.tsx";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { parseProject } from "https://esm.town/v/std/parseImportMeta/project";
3import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
4import { html } from "https://esm.town/v/stevekrouse/html";
5import { renderToString } from "npm:react-dom@18.2.0/server";
6import config from "./config.json" with { type: "json" };
7import { SparklineSVG } from "./sparklineSVG";