this repo has no description
1import { createRouter as createTanstackRouter } from "@tanstack/react-router";
2
3import { QueryClient } from "@tanstack/react-query";
4import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
5
6// Import the generated route tree
7import { routeTree } from "./routeTree.gen.ts";
8import { articleSlugs } from "./articles/schemas.tsx";
9import { getArticleQueryOptions } from "./articles/querys.ts";
10
11function DefaultErrorComponent() {
12 return (
13 <div className="min-h-screen bg-(--bg-primary) p-6">
14 <div className="max-w-4xl mx-auto">
15 <div className="bg-(--bg-card) border border-(--status-error) p-6">
16 <h1 className="text-lg font-mono font-semibold text-(--status-error) mb-2">Error</h1>
17 <p className="text-sm font-mono text-(--text-secondary)">
18 Something went wrong. Try refreshing the page.
19 </p>
20 </div>
21 </div>
22 </div>
23 );
24}
25
26function DefaultPendingComponent() {
27 return (
28 <div className="min-h-screen bg-(--bg-primary) p-6">
29 <div className="max-w-4xl mx-auto">
30 <div className="bg-(--bg-card) border border-(--border-default) p-6">
31 <div className="flex items-center gap-3">
32 <span className="inline-block w-2 h-2 rounded-full bg-(--status-fetching) animate-pulse-dot" />
33 <span className="text-sm font-mono text-(--text-muted)">Loading...</span>
34 </div>
35 </div>
36 </div>
37 </div>
38 );
39}
40
41function DefaultNotFoundComponent() {
42 return (
43 <div className="min-h-screen bg-(--bg-primary) p-6">
44 <div className="max-w-4xl mx-auto">
45 <div className="bg-(--bg-card) border border-(--border-default) p-6">
46 <h1 className="text-lg font-mono font-semibold text-(--text-primary) mb-2">
47 404 — Not Found
48 </h1>
49 <p className="text-sm font-mono text-(--text-secondary)">
50 The page you are looking for does not exist.
51 </p>
52 </div>
53 </div>
54 </div>
55 );
56}
57
58export function getRouter() {
59 const queryClient = new QueryClient();
60
61 const router = createTanstackRouter({
62 routeTree,
63 scrollRestoration: true,
64 defaultPreload: false,
65 defaultStructuralSharing: true,
66 defaultPreloadStaleTime: 0,
67 defaultPendingMs: 0,
68 defaultErrorComponent: DefaultErrorComponent,
69 defaultPendingComponent: DefaultPendingComponent,
70 defaultNotFoundComponent: DefaultNotFoundComponent,
71 context: {
72 queryClient,
73 },
74 });
75
76 setupRouterSsrQueryIntegration({
77 router,
78 queryClient,
79 });
80
81 void Promise.all(
82 articleSlugs.map((slug) => queryClient.prefetchQuery(getArticleQueryOptions({ slug }))),
83 );
84
85 return router;
86}
87
88// Register the router instance for type safety
89declare module "@tanstack/react-router" {
90 interface Register {
91 router: ReturnType<typeof getRouter>;
92 }
93
94 interface StaticDataRouteOption {
95 routeTitle?: string;
96 routeSubtitle?: string;
97 }
98}