this repo has no description
yay
+22
-38
+15
-21
src/articles/article-shell.server.tsx
+15
-21
src/articles/article-shell.server.tsx
···
2
2
import { renderMarkdown } from "~/articles/render-markdown.server";
3
3
4
4
interface ArticleShell {
5
-
title: string;
6
5
markdown: string;
7
6
}
8
7
9
-
export async function ArticleShell({ title, markdown }: ArticleShell) {
8
+
export async function ArticleShell({ markdown }: ArticleShell) {
10
9
const content = await renderMarkdown(markdown);
11
10
12
11
const mainClassName = cn([
13
-
"space-y-5 text-sm leading-7 text-(--text-secondary)",
14
-
"[&_h2]:mb-4 [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-(--text-primary) [&_h2]:first:mt-0",
15
-
"[&_h3]:mb-3 [&_h3]:mt-6 [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-(--text-primary) first:[&_h3]:mt-0",
16
-
"[&_p]:mb-5",
17
-
"[&_ul]:mb-5 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-5",
18
-
"[&_ol]:mb-5 [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-5",
19
-
"[&_li]:text-(--text-secondary)",
20
-
"[&_strong]:font-semibold [&_strong]:text-(--text-primary)",
21
-
"[&_code]:rounded [&_code]:bg-(--bg-primary) [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs",
22
-
"[&_pre]:mb-5 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-(--bg-primary) [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs",
23
-
"[&_a]:text-(--accent-default) [&_a]:underline [&_a]:decoration-(--accent-default)/30 [&_a]:underline-offset-2 hover:[&_a]:decoration-(--accent-default)",
24
-
"[&_blockquote]:mb-5 [&_blockquote]:border-l-2 [&_blockquote]:border-(--accent-default) [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-(--text-muted)",
25
-
"[&_hr]:my-8 [&_hr]:border-(--border-default)",
12
+
"prose prose-sm max-w-none leading-7",
13
+
"prose-headings:font-semibold prose-headings:text-(--text-primary)",
14
+
"prose-h2:mb-6 prose-h2:mt-8 prose-h2:text-3xl prose-h2:first:mt-0 prose-h2:font-(--font-display)",
15
+
"prose-h3:mb-3 prose-h3:mt-6 prose-h3:text-lg prose-h3:first:mt-0",
16
+
"prose-p:mb-5 prose-p:text-(--text-secondary)",
17
+
"prose-ul:mb-5 prose-ul:list-disc prose-ul:space-y-2 prose-ul:pl-5",
18
+
"prose-ol:mb-5 prose-ol:list-decimal prose-ol:space-y-2 prose-ol:pl-5",
19
+
"prose-li:text-(--text-secondary)",
20
+
"prose-strong:font-semibold prose-strong:text-(--text-primary)",
21
+
"prose-code:rounded prose-code:bg-(--bg-primary) prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:text-xs",
22
+
"prose-pre:mb-5 prose-pre:overflow-x-auto prose-pre:rounded prose-pre:bg-(--bg-primary) prose-pre:p-4 prose-pre:font-mono prose-pre:text-xs",
23
+
"prose-a:text-(--accent-default) prose-a:underline prose-a:decoration-(--accent-default)/30 prose-a:underline-offset-2 prose-a:hover:decoration-(--accent-default)",
24
+
"prose-blockquote:mb-5 prose-blockquote:border-l-2 prose-blockquote:border-(--accent-default) prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-(--text-muted)",
25
+
"prose-hr:my-8 prose-hr:border-(--border-default)",
26
26
]);
27
27
28
28
return (
29
29
<article className="border border-(--border-default) bg-(--bg-secondary) p-6 md:p-8 xl:sticky xl:top-20">
30
-
<h2 className="mb-6 text-3xl font-semibold uppercase leading-tight text-(--text-primary) md:text-4xl">
31
-
{title}
32
-
</h2>
33
30
<div className={mainClassName}>{content}</div>
34
-
<div className="mt-8 border-t border-(--border-default) pt-5 font-mono text-xs uppercase text-(--text-muted)">
35
-
Strategy notes / walkthrough
36
-
</div>
37
31
</article>
38
32
);
39
33
}
+5
-7
src/articles/article.functions.tsx
+5
-7
src/articles/article.functions.tsx
···
20
20
21
21
const getServerArticle = createServerFn({ method: "GET" })
22
22
.middleware([staticFunctionMiddleware])
23
-
.inputValidator(v.object({ title: v.string(), slug: v.string() }))
23
+
.inputValidator(v.object({ slug: v.string() }))
24
24
.handler(async ({ data }) => {
25
25
const markdown = await (articlesContent[data.slug]?.() ??
26
26
Promise.resolve("Content coming soon."));
27
27
28
-
const article = await renderServerComponent(
29
-
<ArticleShell title={data.title} markdown={markdown} />,
30
-
);
28
+
const article = await renderServerComponent(<ArticleShell markdown={markdown} />);
31
29
32
30
return { article };
33
31
});
34
32
35
-
export const getArticleQueryOptions = ({ title, slug }: { title: string; slug: string }) =>
33
+
export const getArticleQueryOptions = ({ slug }: { slug: string }) =>
36
34
queryOptions({
37
-
queryKey: ["article", { title, slug }],
35
+
queryKey: ["article", { slug }],
38
36
structuralSharing: false,
39
37
staleTime: Infinity,
40
-
queryFn: () => getServerArticle({ data: { title, slug } }),
38
+
queryFn: () => getServerArticle({ data: { slug } }),
41
39
});
-1
src/routes/_chapters/basic.tsx
-1
src/routes/_chapters/basic.tsx
-1
src/routes/_chapters/debounced-preload-filters.tsx
-1
src/routes/_chapters/debounced-preload-filters.tsx
-1
src/routes/_chapters/filters.tsx
-1
src/routes/_chapters/filters.tsx
-1
src/routes/_chapters/intent-preloading.tsx
-1
src/routes/_chapters/intent-preloading.tsx
-1
src/routes/_chapters/live-query-filters.tsx
-1
src/routes/_chapters/live-query-filters.tsx
-1
src/routes/_chapters/live-query.tsx
-1
src/routes/_chapters/live-query.tsx
-1
src/routes/_chapters/pagination.tsx
-1
src/routes/_chapters/pagination.tsx