feat: switch to fumadocs and react-router-v7

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 *.sw?
 
 .direnv/
-*storybook.log
+*storybook.log
+/build

README.md

@@ -1,63 +1,14 @@
-# Compio Website
+# compio-webiste2
 
-## Development
+This is a React Router application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
 
-```shell
-# Install dependencies
-pnpm install
+Run development server:
 
-# Start the development server
+```bash
+npm run dev
+# or
 pnpm dev
+# or
+yarn dev
 ```
-
-## Build
-
-```shell
-# build for production environment
-pnpm build
-```
-
-## Advanced
-
-```shell
-# preview the release environment effect
-pnpm preview
-
-# code check
-pnpm lint
-
-# code auto fix
-pnpm format
-```
-
-## TODO
-
-- [ ] Add "on this page" section
-- [x] Code block highlight
-- [x] Small screen optimization
-- [x] Next/Prev page block (content-footer)
-- [ ] Back to top button
-- [ ] Dark Mode
-- [ ] Nav background opacity
-- [ ] SEO
-  - [ ] Page title
-  - [ ] Sitemap
-  - [ ] Robots.txt
-  - [ ] Open Graph
-
-## Dependencies
-
-- React
-- React Router
-- TypeScript
-- Vite
-- ESLint
-- Commitlint
-- Tailwind CSS
-- PostCSS
-
-## License
-
-[MIT](https://github.com/compio-rs/website/blob/main/LICENSE)
-
-Copyright (c) 2024 George Miao

app/app.css

@@ -0,0 +1,96 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/vitepress.css';
+@import 'fumadocs-ui/css/preset.css';
+
+
+@theme {
+  /* Light gray background */
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  /* Almost black text */
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  /* Slightly off-white muted bg */
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  /* Medium gray text */
+  --color-fd-popover: hsl(0, 0%, 98%);
+  /* Popover/card background */
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  /* Dark gray popover text */
+  --color-fd-card: hsl(0, 0%, 94.7%);
+  /* Card background */
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  /* Card text */
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
+  /* Light gray border */
+  --color-fd-primary: hsl(210, 100%, 40%);
+  /* Deep blue for links/buttons */
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  /* White text on primary */
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  /* Light gray secondary */
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  /* Dark gray secondary text */
+  --color-fd-accent: hsla(210, 100%, 80%, 50%);
+  /* Light blue accent */
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  /* Dark gray accent text */
+  --color-fd-ring: hsl(210, 100%, 60%);
+  /* Blue ring/outline */
+
+  /* Override Tailwind's blue palette */
+
+  --color-blue-50: hsl(190 10% 99%);
+  --color-blue-100: hsl(191 18% 96%);
+  --color-blue-200: hsl(192 30% 92%);
+  --color-blue-300: hsl(193 45% 86%);
+  --color-blue-400: hsl(195 65% 78%);
+  --color-blue-500: hsl(197 80% 68%);
+  --color-blue-600: hsl(198 90% 58%);
+  --color-blue-700: hsl(199 95% 48%);
+  --color-blue-800: hsl(200 100% 38%);
+  --color-blue-900: hsl(200 100% 30%);
+  --color-blue-950: hsl(200 100% 22%);
+
+}
+
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  /* Very dark gray background */
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  /* Bright white text */
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  /* Slightly lighter dark gray */
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  /* Light gray muted text */
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  /* Popover background */
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  /* Light gray popover text */
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  /* Card background */
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  /* White card text */
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  /* Subtle dark border */
+  --color-fd-primary: hsl(210, 100%, 60%);
+  /* Lighter blue in dark mode */
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  /* Dark gray text on primary */
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  /* Dark gray secondary */
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
+  /* White secondary text */
+  --color-fd-accent: hsla(210, 100%, 40%, 30%);
+  /* Medium blue accent */
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  /* Light gray accent text */
+  --color-fd-ring: hsl(210, 100%, 55%);
+  /* Blue ring/outline in dark mode */
+}
+
+
+html {
+  font-family: "DM Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}

src/components/base/feature.tsx → app/components/base/feature.tsx

@@ -1,4 +1,4 @@
-import { fadeInItem } from '@/util/motion/fade'
+import { fadeInItem } from '@/lib/fade'
 import { Icon } from '@iconify/react'
 import cx from 'classix'
 import { motion } from 'framer-motion'
@@ -22,7 +22,7 @@ export default function FeatureBlock({
         'col-span-12',
         'md:col-span-6 gap-4',
         '2xl:col-span-3',
-        'bg-blue-50/40 p-8 rounded-lg flex',
+        'bg-blue-300/50 p-8 rounded-lg flex',
       )}
     >
       <div className='flex-1'>

src/components/base/link-button.tsx → app/components/base/link-button.tsx

@@ -1,5 +1,5 @@
 import cx from 'classix'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 interface LinkButtonProps extends React.RefAttributes<HTMLAnchorElement> {
   to: string

src/components/motion/fade-in.tsx → app/components/motion/fade-in.tsx

@@ -1,4 +1,4 @@
-import { fadeInItem } from '@/util/motion/fade'
+import { fadeInItem } from '@/lib/fade'
 import { type Variants, motion, useInView } from 'framer-motion'
 import { type HTMLProps, useRef } from 'react'
 

app/docs/page.tsx

@@ -0,0 +1,52 @@
+import type { Route } from './+types/page';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import {
+  DocsBody,
+  DocsPage,
+  DocsTitle,
+  PageBreadcrumb
+} from 'fumadocs-ui/layouts/docs/page';
+import { source } from '@/lib/source';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import browserCollections from 'fumadocs-mdx:collections/browser';
+import { baseOptions } from '@/lib/layout.shared';
+import { useFumadocsLoader } from 'fumadocs-core/source/client';
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slugs = params['*'].split('/').filter((v) => v.length > 0);
+  const page = source.getPage(slugs);
+  if (!page) throw new Response('Not found', { status: 404 });
+
+  return {
+    path: page.path,
+    pageTree: await source.serializePageTree(source.getPageTree()),
+  };
+}
+
+const clientLoader = browserCollections.docs.createClientLoader({
+  component({ toc, default: Mdx, frontmatter }) {
+    return (
+      <DocsPage toc={toc} tableOfContent={{ style: "clerk" }}>
+        <title>Compio</title>
+        <meta name="description" content={frontmatter.description} />
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        {/* <DocsDescription>{frontmatter.description}</DocsDescription> */}
+        <PageBreadcrumb includePage={true} includeRoot={true} />
+        <DocsBody>
+          <Mdx components={{ ...defaultMdxComponents }} />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+export default function Page({ loaderData }: Route.ComponentProps) {
+  const Content = clientLoader.getComponent(loaderData.path);
+  const { pageTree } = useFumadocsLoader(loaderData);
+
+  return (
+    <DocsLayout {...baseOptions()} nav={{ ...baseOptions().nav }} tree={pageTree}>
+      <Content />
+    </DocsLayout>
+  );
+}

app/docs/search.ts

@@ -0,0 +1,12 @@
+import type { Route } from './+types/search';
+import { createFromSource } from 'fumadocs-core/search/server';
+import { source } from '@/lib/source';
+
+const server = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return server.GET(request);
+}

app/lib/layout.shared.tsx

@@ -0,0 +1,21 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { Link } from 'react-router';
+import logo from "../../assets/colored-with-text.svg"
+
+export function baseOptions(): BaseLayoutProps {
+  return {
+    githubUrl: "https://github.com/compio-rs/compio",
+    nav: {
+      title: <Navtitle />,
+      transparentMode: "top"
+    },
+  };
+}
+
+function Navtitle() {
+  return (
+    <Link to='/'>
+      <img src={logo} alt='Compio' className='w-20 sm:w-28' />
+    </Link>
+  )
+}

app/lib/source.ts

@@ -0,0 +1,7 @@
+import { loader } from 'fumadocs-core/source';
+import { docs } from 'fumadocs-mdx:collections/server';
+
+export const source = loader({
+  source: docs.toFumadocsSource(),
+  baseUrl: '/docs',
+});