this repo has no description
Stuff
+28
-26
+17
-3
src/articles/article.functions.tsx
+17
-3
src/articles/article.functions.tsx
···
6
6
7
7
import { ArticleShell } from "~/articles/article-shell.server";
8
8
9
-
const articlesContent: Record<string, () => Promise<string>> = {
9
+
export const articleSlugs = [
10
+
"basic",
11
+
"preloading",
12
+
"intent-preloading",
13
+
"pagination",
14
+
"filters",
15
+
"debounced-preload-filters",
16
+
"live-query",
17
+
"live-query-filters",
18
+
] as const;
19
+
20
+
const ArticleSlugSchema = v.picklist(articleSlugs);
21
+
type ArticleSlug = v.InferInput<typeof ArticleSlugSchema>;
22
+
23
+
const articlesContent: Record<ArticleSlug, () => Promise<string>> = {
10
24
basic: () => import("./content/basic.md?raw").then((m) => m.default),
11
25
preloading: () => import("./content/preloading.md?raw").then((m) => m.default),
12
26
"intent-preloading": () => import("./content/intent-preloading.md?raw").then((m) => m.default),
···
20
34
21
35
const getServerArticle = createServerFn({ method: "GET" })
22
36
.middleware([staticFunctionMiddleware])
23
-
.inputValidator(v.object({ slug: v.string() }))
37
+
.inputValidator(v.object({ slug: ArticleSlugSchema }))
24
38
.handler(async ({ data }) => {
25
39
const markdown = await (articlesContent[data.slug]?.() ??
26
40
Promise.resolve("Content coming soon."));
···
30
44
return { article };
31
45
});
32
46
33
-
export const getArticleQueryOptions = ({ slug }: { slug: string }) =>
47
+
export const getArticleQueryOptions = ({ slug }: { slug: ArticleSlug }) =>
34
48
queryOptions({
35
49
queryKey: ["article", { slug }],
36
50
structuralSharing: false,
+1
-12
src/landing/landing-page.tsx
+1
-12
src/landing/landing-page.tsx
···
1
1
import { Link } from "@tanstack/react-router";
2
-
import { createServerFn } from "@tanstack/react-start";
3
-
import { renderServerComponent } from "@tanstack/react-start/rsc";
4
2
import { StatusDot, StatusDotWithLabel } from "~/chapters/status-dot";
5
3
import { chapterGroups } from "~/chapters/chapters";
6
4
7
-
export const getLandingPage = createServerFn({ method: "GET" }).handler(async () => {
8
-
return renderServerComponent(<LandingPageDocument />);
9
-
});
10
-
11
-
export function LandingPage(props: Readonly<{ landingPage: React.ReactNode }>) {
12
-
const { landingPage } = props;
13
-
return <>{landingPage}</>;
14
-
}
15
-
16
-
function LandingPageDocument() {
5
+
export function LandingPage() {
17
6
return (
18
7
<main className="min-h-screen flex flex-col bg-(--bg-primary)">
19
8
<section className="border-b border-(--border-default) bg-(--bg-secondary)">
+5
src/router.tsx
+5
src/router.tsx
···
5
5
6
6
// Import the generated route tree
7
7
import { routeTree } from "./routeTree.gen.ts";
8
+
import { articleSlugs, getArticleQueryOptions } from "./articles/article.functions.tsx";
8
9
9
10
function DefaultErrorComponent() {
10
11
return (
···
75
76
router,
76
77
queryClient,
77
78
});
79
+
80
+
void Promise.all(
81
+
articleSlugs.map((slug) => queryClient.prefetchQuery(getArticleQueryOptions({ slug }))),
82
+
);
78
83
79
84
return router;
80
85
}
+2
-11
src/routes/index.tsx
+2
-11
src/routes/index.tsx
···
1
1
import { createFileRoute } from "@tanstack/react-router";
2
-
import { LandingPage, getLandingPage } from "~/landing/landing-page";
2
+
import { LandingPage } from "~/landing/landing-page";
3
3
4
4
export const Route = createFileRoute("/")({
5
-
loader: async () => {
6
-
const landingPage = await getLandingPage();
7
-
return { landingPage };
8
-
},
9
-
component: LandingPageComponent,
5
+
component: LandingPage,
10
6
});
11
-
12
-
function LandingPageComponent() {
13
-
const { landingPage } = Route.useLoaderData();
14
-
return <LandingPage landingPage={landingPage} />;
15
-
}