Skip to content

Commit f5815e5

Browse files
uhyouhyo
authored
docs: enhance contents and styling (#4)
* docs: write docs (does not build yet) * docs: fix mdx plugin usage * docs: update to emphasize SPAs * docs: add syntax highlighting * docs: fix syntax highlighting * docs: update Getting Started * chore: fix formatting
1 parent 630ee17 commit f5815e5

22 files changed

Lines changed: 2171 additions & 17 deletions

‎.claude/format-hook.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
file_path=$(jq -r '.tool_input.file_path')
44

55
# Check if file matches JS/TS extensions
6-
if [[ "$file_path" =~ \.(ts|tsx|js|jsx|mjs|cjs|mts|cts)$ ]]; then
6+
if [[ "$file_path" =~ \.(ts|tsx|js|jsx|mjs|cjs|mts|cts|css|mdx)$ ]]; then
77
pnpm exec prettier --write "$file_path"
88
fi

‎packages/docs/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@
1313
"dependencies": {
1414
"@funstack/router": "0.0.3-alpha.1",
1515
"@funstack/static": "workspace:*",
16+
"@shikijs/rehype": "^3.21.0",
1617
"@types/node": "catalog:",
1718
"react": "catalog:",
18-
"react-dom": "catalog:"
19+
"react-dom": "catalog:",
20+
"shiki": "^3.21.0"
1921
},
2022
"devDependencies": {
2123
"@mdx-js/rollup": "^3.1.0",
@@ -24,7 +26,7 @@
2426
"@types/react-dom": "^19.2.3",
2527
"@vitejs/plugin-react": "latest",
2628
"rsc-html-stream": "^0.0.7",
27-
"vite": "catalog:",
28-
"typescript": "catalog:"
29+
"typescript": "catalog:",
30+
"vite": "catalog:"
2931
}
3032
}

‎packages/docs/src/App.tsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
11
import { Router } from "@funstack/router";
22
import { route, type RouteDefinition } from "@funstack/router/server";
3+
import { defer } from "@funstack/static/server";
4+
import { Layout } from "./components/Layout/Layout";
5+
import DeferApi from "./pages/api/Defer.mdx";
6+
import FunstackStaticApi from "./pages/api/FunstackStatic.mdx";
7+
import RSCConcept from "./pages/concepts/RSC.mdx";
38
import GettingStarted from "./pages/GettingStarted.mdx";
49
import { Home } from "./pages/Home";
5-
import { defer } from "@funstack/static/server";
610

711
const routes: RouteDefinition[] = [
812
route({
913
path: "/",
10-
component: <Home />,
14+
component: (
15+
<Layout variant="home">
16+
<Home />
17+
</Layout>
18+
),
1119
}),
1220
route({
1321
path: "/getting-started",
14-
component: defer(GettingStarted),
22+
component: <Layout>{defer(GettingStarted)}</Layout>,
23+
}),
24+
route({
25+
path: "/api/funstack-static",
26+
component: <Layout>{defer(FunstackStaticApi)}</Layout>,
27+
}),
28+
route({
29+
path: "/api/defer",
30+
component: <Layout>{defer(DeferApi)}</Layout>,
31+
}),
32+
route({
33+
path: "/concepts/rsc",
34+
component: <Layout>{defer(RSCConcept)}</Layout>,
1535
}),
1636
];
1737

‎packages/docs/src/components/CodeBlock/CodeBlock.module.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.codeBlock {
2+
position: relative;
3+
margin: var(--spacing-lg) 0;
4+
border-radius: var(--radius-lg);
5+
overflow: hidden;
6+
}
7+
8+
.codeContent {
9+
font-size: var(--text-sm);
10+
line-height: 1.6;
11+
}
12+
13+
/* Style Shiki's generated pre element */
14+
.codeContent :global(pre) {
15+
margin: 0;
16+
padding: var(--spacing-lg);
17+
overflow-x: auto;
18+
border-radius: var(--radius-lg);
19+
}
20+
21+
.codeContent :global(code) {
22+
font-family: var(--font-mono);
23+
}
24+
25+
/* Shiki code styling */
26+
.codeContent :global(.shiki code) {
27+
background: transparent;
28+
}
29+
30+
/* Dark mode: override Shiki's default light colors */
31+
@media (prefers-color-scheme: dark) {
32+
.codeContent :global(.shiki) {
33+
background-color: var(--shiki-dark-bg) !important;
34+
}
35+
36+
.codeContent :global(.shiki span) {
37+
color: var(--shiki-dark) !important;
38+
}
39+
}
40+
41+
/* Inline code */
42+
.inlineCode {
43+
font-family: var(--font-mono);
44+
font-size: 0.9em;
45+
padding: 0.15em 0.4em;
46+
background-color: var(--color-bg-tertiary);
47+
border-radius: var(--radius-sm);
48+
color: var(--color-accent);
49+
}

‎packages/docs/src/components/CodeBlock/CodeBlock.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { codeToHtml } from "shiki";
2+
import styles from "./CodeBlock.module.css";
3+
4+
interface CodeBlockProps {
5+
children: string;
6+
language?: string;
7+
}
8+
9+
export async function CodeBlock({
10+
children,
11+
language = "typescript",
12+
}: CodeBlockProps) {
13+
const html = await codeToHtml(children.trim(), {
14+
lang: language,
15+
themes: {
16+
light: "github-light",
17+
dark: "github-dark",
18+
},
19+
});
20+
21+
return (
22+
<div className={styles.codeBlock}>
23+
<div
24+
className={styles.codeContent}
25+
dangerouslySetInnerHTML={{ __html: html }}
26+
/>
27+
</div>
28+
);
29+
}
30+
31+
interface InlineCodeProps {
32+
children: React.ReactNode;
33+
}
34+
35+
export function InlineCode({ children }: InlineCodeProps) {
36+
return <code className={styles.inlineCode}>{children}</code>;
37+
}

‎packages/docs/src/components/Header/Header.module.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.header {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
height: var(--header-height);
7+
background-color: var(--color-bg);
8+
border-bottom: 1px solid var(--color-border);
9+
z-index: 100;
10+
backdrop-filter: blur(8px);
11+
background-color: rgba(255, 255, 255, 0.9);
12+
}
13+
14+
@media (prefers-color-scheme: dark) {
15+
.header {
16+
background-color: rgba(15, 15, 26, 0.9);
17+
}
18+
}
19+
20+
.container {
21+
max-width: var(--page-max-width);
22+
margin: 0 auto;
23+
height: 100%;
24+
display: flex;
25+
align-items: center;
26+
justify-content: space-between;
27+
padding: 0 var(--spacing-xl);
28+
}
29+
30+
.logo {
31+
display: flex;
32+
align-items: center;
33+
gap: var(--spacing-sm);
34+
font-weight: 700;
35+
font-size: var(--text-lg);
36+
color: var(--color-text);
37+
text-decoration: none;
38+
}
39+
40+
.logo:hover {
41+
color: var(--color-text);
42+
}
43+
44+
.logoIcon {
45+
width: 32px;
46+
height: 32px;
47+
background: var(--gradient-accent);
48+
border-radius: var(--radius-md);
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
color: white;
53+
font-weight: 700;
54+
font-size: var(--text-sm);
55+
}
56+
57+
.logoText {
58+
background: var(--gradient-accent);
59+
-webkit-background-clip: text;
60+
-webkit-text-fill-color: transparent;
61+
background-clip: text;
62+
}
63+
64+
.nav {
65+
display: flex;
66+
align-items: center;
67+
gap: var(--spacing-lg);
68+
}
69+
70+
.navLink {
71+
font-size: var(--text-sm);
72+
font-weight: 500;
73+
color: var(--color-text-secondary);
74+
text-decoration: none;
75+
padding: var(--spacing-sm) var(--spacing-md);
76+
border-radius: var(--radius-md);
77+
transition:
78+
color var(--transition-fast),
79+
background-color var(--transition-fast);
80+
}
81+
82+
.navLink:hover {
83+
color: var(--color-text);
84+
background-color: var(--color-bg-tertiary);
85+
}
86+
87+
.navLinkActive {
88+
color: var(--color-accent);
89+
}
90+
91+
.navLinkActive:hover {
92+
color: var(--color-accent-dark);
93+
}
94+
95+
.githubLink {
96+
display: flex;
97+
align-items: center;
98+
justify-content: center;
99+
width: 36px;
100+
height: 36px;
101+
border-radius: var(--radius-md);
102+
color: var(--color-text-secondary);
103+
transition:
104+
color var(--transition-fast),
105+
background-color var(--transition-fast);
106+
}
107+
108+
.githubLink:hover {
109+
color: var(--color-text);
110+
background-color: var(--color-bg-tertiary);
111+
}
112+
113+
.githubLink svg {
114+
width: 20px;
115+
height: 20px;
116+
}
117+
118+
/* Mobile menu button */
119+
.menuButton {
120+
display: none;
121+
width: 40px;
122+
height: 40px;
123+
align-items: center;
124+
justify-content: center;
125+
border-radius: var(--radius-md);
126+
color: var(--color-text-secondary);
127+
}
128+
129+
.menuButton:hover {
130+
background-color: var(--color-bg-tertiary);
131+
color: var(--color-text);
132+
}
133+
134+
@media (max-width: 768px) {
135+
.nav {
136+
display: none;
137+
}
138+
139+
.menuButton {
140+
display: flex;
141+
}
142+
}

‎packages/docs/src/components/Header/Header.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styles from "./Header.module.css";
2+
3+
export const Header: React.FC = () => {
4+
return (
5+
<header className={styles.header}>
6+
<div className={styles.container}>
7+
<a href="/" className={styles.logo}>
8+
<span className={styles.logoIcon}>F</span>
9+
<span className={styles.logoText}>FUNSTACK Static</span>
10+
</a>
11+
12+
<nav className={styles.nav}>
13+
<a href="/getting-started" className={styles.navLink}>
14+
Docs
15+
</a>
16+
<a href="/api/funstack-static" className={styles.navLink}>
17+
API
18+
</a>
19+
<a href="/concepts/rsc" className={styles.navLink}>
20+
Concepts
21+
</a>
22+
<a
23+
href="https://github.com/user/funstack-static"
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
className={styles.githubLink}
27+
aria-label="GitHub repository"
28+
>
29+
<svg viewBox="0 0 24 24" fill="currentColor">
30+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
31+
</svg>
32+
</a>
33+
</nav>
34+
35+
<button
36+
className={styles.menuButton}
37+
aria-label="Open menu"
38+
type="button"
39+
>
40+
<svg
41+
width="24"
42+
height="24"
43+
viewBox="0 0 24 24"
44+
fill="none"
45+
stroke="currentColor"
46+
strokeWidth="2"
47+
>
48+
<line x1="3" y1="6" x2="21" y2="6" />
49+
<line x1="3" y1="12" x2="21" y2="12" />
50+
<line x1="3" y1="18" x2="21" y2="18" />
51+
</svg>
52+
</button>
53+
</div>
54+
</header>
55+
);
56+
};

0 commit comments

Comments
 (0)