this repo has no description
1import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from "@tanstack/react-router";
2import { TanStackDevtools } from "@tanstack/react-devtools";
3import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
4import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
5import type { QueryClient } from "@tanstack/react-query";
6
7import { Header } from "~/chapters/header";
8
9import appCss from "~/design-system/styles/global.css?url";
10
11interface MyRouterContext {
12 queryClient: QueryClient;
13}
14
15const themeHydrationScript = `
16 (function() {
17 try {
18 var theme = localStorage.getItem('theme');
19 if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
20 document.documentElement.setAttribute('data-theme', 'dark');
21 } else if (theme === 'light') {
22 document.documentElement.setAttribute('data-theme', 'light');
23 }
24 } catch (e) {}
25 })();
26`;
27
28export const Route = createRootRouteWithContext<MyRouterContext>()({
29 head: () => ({
30 meta: [
31 {
32 charSet: "utf-8",
33 },
34 {
35 name: "viewport",
36 content: "width=device-width, initial-scale=1",
37 },
38 {
39 title: "Prefetching Patterns",
40 },
41 {
42 name: "description",
43 content:
44 "A developer console for exploring data prefetching techniques in modern React applications with TanStack Router and Query.",
45 },
46 ],
47 links: [
48 { rel: "icon", href: "/favicon.ico" },
49 { rel: "stylesheet", href: appCss },
50 { rel: "preconnect", href: "https://fonts.googleapis.com" },
51 { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
52 {
53 rel: "stylesheet",
54 href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
55 },
56 {
57 rel: "stylesheet",
58 href: "https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap",
59 },
60 ],
61 }),
62 component: RootComponent,
63});
64
65function RootComponent() {
66 return (
67 <RootDocument>
68 <Outlet />
69 </RootDocument>
70 );
71}
72
73function RootDocument(props: Readonly<{ children: React.ReactNode }>) {
74 return (
75 <html lang="en" suppressHydrationWarning>
76 <head>
77 <script dangerouslySetInnerHTML={{ __html: themeHydrationScript }} />
78 <HeadContent />
79 </head>
80 <body>
81 <a
82 href="#main-content"
83 className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-(--bg-card) focus:border focus:border-(--accent-default) focus:text-(--text-primary) focus:font-mono focus:text-sm"
84 >
85 Skip to main content
86 </a>
87 <Header />
88 {props.children}
89
90 <TanStackDevtools
91 plugins={[
92 {
93 name: "TanStack Router",
94 render: <TanStackRouterDevtoolsPanel />,
95 defaultOpen: true,
96 },
97 {
98 name: "TanStack Query",
99 render: <ReactQueryDevtoolsPanel />,
100 defaultOpen: true,
101 },
102 ]}
103 />
104 <Scripts />
105 </body>
106 </html>
107 );
108}