Skip to content

Commit a3fee9c

Browse files
claudeclaude
committed
feat: add documentation website package
Create a documentation SPA using @funstack/router with: - Home page featuring library highlights and quick start - Getting Started guide with installation and basic usage - API Reference for all components, hooks, and utilities - Examples page with common usage patterns
1 parent 1674de5 commit a3fee9c

File tree

14 files changed

+1440
-0
lines changed

14 files changed

+1440
-0
lines changed

‎packages/docs/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>FUNSTACK Router - Documentation</title>
7+
<meta
8+
name="description"
9+
content="Modern React router built on the Navigation API"
10+
/>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

‎packages/docs/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "funstack-router-docs",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"typecheck": "tsc --noEmit"
11+
},
12+
"dependencies": {
13+
"@funstack/router": "workspace:*",
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^19.0.0",
19+
"@types/react-dom": "^19.0.0",
20+
"@vitejs/plugin-react": "^4.3.0",
21+
"typescript": "^5.7.0",
22+
"vite": "^6.0.0"
23+
}
24+
}

‎packages/docs/src/App.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Router, route } from "@funstack/router";
2+
import { Layout } from "./components/Layout.js";
3+
import { HomePage } from "./pages/HomePage.js";
4+
import { GettingStartedPage } from "./pages/GettingStartedPage.js";
5+
import { ApiReferencePage } from "./pages/ApiReferencePage.js";
6+
import { ExamplesPage } from "./pages/ExamplesPage.js";
7+
8+
const routes = [
9+
route({
10+
path: "/funstack-router",
11+
component: Layout,
12+
children: [
13+
route({
14+
path: "/",
15+
component: HomePage,
16+
}),
17+
route({
18+
path: "/getting-started",
19+
component: GettingStartedPage,
20+
}),
21+
route({
22+
path: "/api",
23+
component: ApiReferencePage,
24+
}),
25+
route({
26+
path: "/examples",
27+
component: ExamplesPage,
28+
}),
29+
],
30+
}),
31+
];
32+
33+
export function App() {
34+
return <Router routes={routes} />;
35+
}

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Outlet, useLocation, useNavigate } from "@funstack/router";
2+
3+
const navItems = [
4+
{ path: "/funstack-router/", label: "Home" },
5+
{ path: "/funstack-router/getting-started", label: "Getting Started" },
6+
{ path: "/funstack-router/api", label: "API Reference" },
7+
{ path: "/funstack-router/examples", label: "Examples" },
8+
];
9+
10+
export function Layout() {
11+
const location = useLocation();
12+
const navigate = useNavigate();
13+
14+
return (
15+
<div className="layout">
16+
<header className="header">
17+
<div className="header-content">
18+
<h1 className="logo">
19+
<a
20+
href="/funstack-router/"
21+
onClick={(e) => {
22+
e.preventDefault();
23+
navigate("/funstack-router/");
24+
}}
25+
>
26+
FUNSTACK Router
27+
</a>
28+
</h1>
29+
<nav className="nav">
30+
{navItems.map((item) => (
31+
<a
32+
key={item.path}
33+
href={item.path}
34+
className={`nav-link ${location.pathname === item.path || (item.path === "/funstack-router/" && location.pathname === "/funstack-router") ? "active" : ""}`}
35+
onClick={(e) => {
36+
e.preventDefault();
37+
navigate(item.path);
38+
}}
39+
>
40+
{item.label}
41+
</a>
42+
))}
43+
</nav>
44+
<a
45+
href="https://github.com/user/funstack-router"
46+
className="github-link"
47+
target="_blank"
48+
rel="noopener noreferrer"
49+
>
50+
GitHub
51+
</a>
52+
</div>
53+
</header>
54+
<main className="main">
55+
<Outlet />
56+
</main>
57+
<footer className="footer">
58+
<p>
59+
Built with <strong>@funstack/router</strong> &mdash; A modern React
60+
router based on the Navigation API
61+
</p>
62+
</footer>
63+
</div>
64+
);
65+
}

‎packages/docs/src/main.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import { App } from "./App.js";
4+
import "./styles.css";
5+
6+
createRoot(document.getElementById("root")!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
);

0 commit comments

Comments
 (0)