ZacharyZhang-NY
faf0987cf8
The build fetches showcase.lock's commit and runs the catalog's own validator. /showcase/ lists featured apps first, then the rest by newest or stars, with categories and search; /showcase/<id>/ shows previews, links and the README. The header drops its sound switch below 414px so the fourth link fits.
48 lines
2.2 KiB
TypeScript
48 lines
2.2 KiB
TypeScript
import "@fontsource-variable/geist";
|
|
import "@fontsource-variable/geist-mono";
|
|
import { createRootRoute, createRoute, createRouter, redirect, RouterProvider } from "@tanstack/react-router";
|
|
import { createRoot } from "react-dom/client";
|
|
import { Shell } from "./Shell";
|
|
import { chapters } from "./data";
|
|
import { Chapters } from "./pages/Chapters";
|
|
import { Docs } from "./pages/Docs";
|
|
import { Home } from "./pages/Home";
|
|
import { NotFound } from "./pages/NotFound";
|
|
import { Showcase } from "./pages/Showcase";
|
|
import { ShowcaseApp } from "./pages/ShowcaseApp";
|
|
import { Story } from "./pages/Story";
|
|
import "./styles.css";
|
|
|
|
const root = createRootRoute({ component: Shell, notFoundComponent: () => <NotFound /> });
|
|
const home = createRoute({ getParentRoute: () => root, path: "/", component: Home });
|
|
const index = createRoute({ getParentRoute: () => root, path: "/components", component: Chapters });
|
|
const chapter = createRoute({
|
|
getParentRoute: () => root,
|
|
path: "/components/$page",
|
|
// A chapter opens its first story.
|
|
beforeLoad: ({ params }) => {
|
|
const found = chapters.find((c) => c.slug === params.page);
|
|
if (found) throw redirect({ to: "/components/$page/$story/", params: { page: found.slug, story: found.stories[0].slug } });
|
|
},
|
|
component: () => <NotFound what="No chapter by that name." />,
|
|
});
|
|
const story = createRoute({ getParentRoute: () => root, path: "/components/$page/$story", component: Story });
|
|
const docs = createRoute({ getParentRoute: () => root, path: "/docs", component: Docs });
|
|
const doc = createRoute({ getParentRoute: () => root, path: "/docs/$page", component: Docs });
|
|
const showcase = createRoute({ getParentRoute: () => root, path: "/showcase", component: Showcase });
|
|
const showcaseApp = createRoute({ getParentRoute: () => root, path: "/showcase/$app", component: ShowcaseApp });
|
|
|
|
const router = createRouter({
|
|
routeTree: root.addChildren([home, index, chapter, story, docs, doc, showcase, showcaseApp]),
|
|
trailingSlash: "always",
|
|
scrollRestoration: true,
|
|
});
|
|
|
|
declare module "@tanstack/react-router" {
|
|
interface Register {
|
|
router: typeof router;
|
|
}
|
|
}
|
|
|
|
createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />);
|