DRAFT [feat]: new docs

packages/docs-v2/.source/source.config.mjs

@@ -0,0 +1,85 @@
+// source.config.ts
+import { defineConfig, defineDocs } from "fumadocs-mdx/config";
+
+// lib/highlight-code.ts
+import { LRUCache } from "lru-cache";
+import { codeToHtml } from "shiki";
+var highlightCache = new LRUCache({
+  max: 500,
+  ttl: 1e3 * 60 * 60
+  // 1 hour.
+});
+var transformers = [
+  {
+    code(node) {
+      if (node.tagName === "code") {
+        const raw = this.source;
+        node.properties["__raw__"] = raw;
+        if (raw.startsWith("npm install")) {
+          node.properties["__npm__"] = raw;
+          node.properties["__yarn__"] = raw.replace("npm install", "yarn add");
+          node.properties["__pnpm__"] = raw.replace("npm install", "pnpm add");
+          node.properties["__bun__"] = raw.replace("npm install", "bun add");
+        }
+        if (raw.startsWith("npx create-")) {
+          node.properties["__npm__"] = raw;
+          node.properties["__yarn__"] = raw.replace(
+            "npx create-",
+            "yarn create "
+          );
+          node.properties["__pnpm__"] = raw.replace(
+            "npx create-",
+            "pnpm create "
+          );
+          node.properties["__bun__"] = raw.replace("npx", "bunx --bun");
+        }
+        if (raw.startsWith("npm create")) {
+          node.properties["__npm__"] = raw;
+          node.properties["__yarn__"] = raw.replace("npm create", "yarn create");
+          node.properties["__pnpm__"] = raw.replace("npm create", "pnpm create");
+          node.properties["__bun__"] = raw.replace("npm create", "bun create");
+        }
+        if (raw.startsWith("npx")) {
+          node.properties["__npm__"] = raw;
+          node.properties["__yarn__"] = raw.replace("npx", "yarn");
+          node.properties["__pnpm__"] = raw.replace("npx", "pnpm dlx");
+          node.properties["__bun__"] = raw.replace("npx", "bunx --bun");
+        }
+        if (raw.startsWith("npm run")) {
+          node.properties["__npm__"] = raw;
+          node.properties["__yarn__"] = raw.replace("npm run", "yarn");
+          node.properties["__pnpm__"] = raw.replace("npm run", "pnpm");
+          node.properties["__bun__"] = raw.replace("npm run", "bun");
+        }
+      }
+    }
+  }
+];
+
+// source.config.ts
+import rehypePrettyCode from "rehype-pretty-code";
+var source_config_default = defineConfig({
+  mdxOptions: {
+    rehypePlugins: (plugins) => {
+      plugins.shift();
+      plugins.push([
+        rehypePrettyCode,
+        {
+          theme: {
+            dark: "github-dark",
+            light: "github-light-default"
+          },
+          transformers
+        }
+      ]);
+      return plugins;
+    }
+  }
+});
+var docs = defineDocs({
+  dir: "content/docs"
+});
+export {
+  source_config_default as default,
+  docs
+};

packages/docs-v2/app/(app)/(root)/page.tsx

@@ -0,0 +1,107 @@
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading
+} from '@/components/page-header';
+import { Button } from '@/components/ui/button';
+import { type Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const title = 'reactuse';
+
+const description =
+  'Improve your react applications with our library 📦 designed for comfort and speed';
+
+const cardsData = [
+  {
+    title: 'Lightweight & Scalable',
+    details:
+      'Hooks are lightweight and easy to use, making it simple to integrate into any project.',
+    icon: <></>
+  },
+  {
+    title: 'Clean & consistent',
+    details: 'Hooks follow a unified approach for consistency and maintainability.',
+    icon: <></>
+  },
+  {
+    title: 'Customizable',
+    details: 'Install and customize hooks effortlessly using our CLI',
+    icon: <></>
+  },
+  {
+    title: 'Large collection',
+    details:
+      'Extensive collection of hooks for all your needs, from state management to browser APIs.',
+    icon: <></>
+  },
+  {
+    title: 'Tree shakable',
+    details:
+      'The hooks are tree shakable, so you only import the hooks you need in your application.',
+    icon: <></>
+  },
+  {
+    title: 'Active community',
+    details: 'Join our active community on Github and help make reactuse even better.',
+    icon: <></>
+  }
+];
+
+export const metadata: Metadata = {
+  title,
+  description
+};
+
+export default function IndexPage() {
+  return (
+    <div className='flex flex-1 flex-col'>
+      <PageHeader>
+        <PageHeaderHeading className='max-w-4xl'>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size='sm' className='h-[31px] rounded-lg'>
+            <Link href='/docs/installation'>Get Started</Link>
+          </Button>
+        </PageActions>
+        <Button asChild size='sm' variant='ghost' className='rounded-lg'>
+          <Link href='/docs/hooks/useactiveelement'>View hooks</Link>
+        </Button>
+      </PageHeader>
+      <div className='container grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
+        {cardsData.map((card) => {
+          const Icon = card.icon;
+          return (
+            <div key={card.title} className='bg-card space-y-3 rounded-xl border p-6 py-10'>
+              <div className='bg-accent flex h-8 w-8 items-center justify-center rounded border'>
+                <div />
+              </div>
+              <h3 className='text-lg font-semibold text-white'>{card.title}</h3>
+              <p className='text-sm text-gray-400'>{card.details}</p>
+            </div>
+          );
+        })}
+      </div>
+      <div className='mt-20'>
+        <div className='mb-10 text-center text-4xl font-bold'>Team & Contributors</div>
+        <div className='flex items-center justify-center'>
+          <Link href='https://github.com/siberiacancode'>
+            <div className='flex items-center justify-center gap-3'>
+              <Image
+                width={40}
+                height={40}
+                alt='SIBERIA CAN CODE'
+                className='rounded-lg'
+                src='https://avatars.githubusercontent.com/u/122668137?s=200&v=4'
+              />
+              <div className='text-xl font-bold'>SIBERIA CAN CODE</div>
+            </div>
+          </Link>
+        </div>
+        <div className='mt-12 text-center'></div>
+      </div>
+    </div>
+  );
+}

packages/docs-v2/app/(app)/layout.tsx

@@ -0,0 +1,13 @@
+import { SiteHeader } from "@/components/site-header"
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-slot="layout"
+      className="bg-background relative z-10 flex min-h-svh flex-col"
+    >
+      <SiteHeader />
+      <main className="flex flex-1 flex-col">{children}</main>
+    </div>
+  )
+}

packages/docs-v2/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,151 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { mdxComponents } from '@/mdx-components';
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react';
+import { findNeighbour } from 'fumadocs-core/page-tree';
+
+import { source } from '@/lib/source';
+import { absoluteUrl } from '@/lib/utils';
+import { Button } from '@/ui/button';
+import { DocsCopyPage } from '@/components/docs-copy-page';
+
+export const revalidate = false;
+export const dynamic = 'force-static';
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: { params: Promise<{ slug: string[] }> }) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  const doc = page.data;
+
+  if (!doc.title || !doc.description) {
+    notFound();
+  }
+
+  return {
+    title: doc.title,
+    description: doc.description,
+    twitter: {
+      card: 'summary_large_image',
+      title: doc.title,
+      description: doc.description,
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`
+        }
+      ]
+    }
+  };
+}
+
+export default async function Page(props: { params: Promise<{ slug: string[] }> }) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) {
+    notFound();
+  }
+
+  const doc = page.data;
+  const MDX = doc.body;
+  const isChangelog = params.slug?.[0] === 'changelog';
+  const neighbours = isChangelog
+    ? { previous: null, next: null }
+    : findNeighbour(source.pageTree, page.url);
+  const raw = await page.data.getText('raw');
+
+  return (
+    <div
+      data-slot='docs'
+      className='flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full'
+    >
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <div className='h-(--top-spacing) shrink-0' />
+        <div className='mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300'>
+          <div className='flex flex-col gap-2'>
+            <div className='flex flex-col gap-2'>
+              <div className='flex items-center justify-between md:items-start'>
+                <h1 className='scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl'>
+                  {doc.title}
+                </h1>
+                <div className='docs-nav flex items-center gap-2'>
+                  <div className='hidden sm:block'>
+                    <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
+                  </div>
+                  <div className='ml-auto flex gap-2'>
+                    {neighbours.previous && (
+                      <Button
+                        variant='secondary'
+                        size='icon'
+                        className='extend-touch-target size-8 shadow-none md:size-7'
+                        asChild
+                      >
+                        <Link href={neighbours.previous.url}>
+                          <IconArrowLeft />
+                          <span className='sr-only'>Previous</span>
+                        </Link>
+                      </Button>
+                    )}
+                    {neighbours.next && (
+                      <Button
+                        variant='secondary'
+                        size='icon'
+                        className='extend-touch-target size-8 shadow-none md:size-7'
+                        asChild
+                      >
+                        <Link href={neighbours.next.url}>
+                          <span className='sr-only'>Next</span>
+                          <IconArrowRight />
+                        </Link>
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+              {doc.description && (
+                <p className='text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]'>
+                  {doc.description}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className='w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0'>
+            {/* {params.slug && params.slug[0] === 'components' && params.slug[1] && params.slug[2] && (
+              <DocsBaseSwitcher base={params.slug[1]} component={params.slug[2]} className='mb-4' />
+            )} */}
+            <MDX components={mdxComponents} />
+          </div>
+          <div className='hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0'>
+            {neighbours.previous && (
+              <Button variant='secondary' size='sm' asChild className='shadow-none'>
+                <Link href={neighbours.previous.url}>
+                  <IconArrowLeft /> {neighbours.previous.name}
+                </Link>
+              </Button>
+            )}
+            {neighbours.next && (
+              <Button variant='secondary' size='sm' className='ml-auto shadow-none' asChild>
+                <Link href={neighbours.next.url}>
+                  {neighbours.next.name} <IconArrowRight />
+                </Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className='sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex'>
+        <div className='h-(--top-spacing) shrink-0'></div>
+      </div>
+    </div>
+  );
+}

packages/docs-v2/app/docs/layout.tsx

@@ -0,0 +1,33 @@
+// import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+// import type { ReactNode } from 'react';
+// import { source } from '@/lib/source';
+
+// export default function Layout({ children }: { children: ReactNode }) {
+//   return <DocsLayout tree={source.pageTree}>{children}</DocsLayout>;
+// }
+
+import { source } from '@/lib/source';
+import { DocsSidebar } from '@/components/docs-sidebar';
+import { SidebarProvider } from '@/ui/sidebar';
+import { SiteHeader } from '@/components/site-header';
+
+export default function DocsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <SiteHeader />
+      <div className='container-wrapper flex flex-1 flex-col px-2'>
+        <SidebarProvider
+          className='3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]'
+          style={
+            {
+              '--sidebar-width': 'calc(var(--spacing) * 72)'
+            } as React.CSSProperties
+          }
+        >
+          <DocsSidebar tree={source.pageTree} />
+          <div className='h-full w-full'>{children}</div>
+        </SidebarProvider>
+      </div>
+    </>
+  );
+}