feat(docs): Refine Docs, Blog, API and Layout

README.md

@@ -6,7 +6,7 @@
 
 <div align="center">
   <h1>Rehooks CLI</h1>
-  <p>A CLI to insert hooks directly to your project.</p>
+  <p>A CLI to scaffold your react custom hooks, with a focus on performance, reusability, and type-safety.</p>
 </div>
 
 <div align="center">

apps/docs/app/(home)/(blog)/blog/(root)/layout.tsx

@@ -0,0 +1,17 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import Footer from "@/app/(home)/_components/footer";
+import { baseOptions } from "@/app/layout.config";
+import type { ReactNode } from "react";
+
+export default function BlogLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>): React.ReactElement {
+  return (
+    <HomeLayout {...baseOptions}>
+      {children}
+      <Footer className="absolute bottom-0 left-0 right-0" />
+    </HomeLayout>
+  );
+}

apps/docs/app/(home)/(blog)/blog/(root)/page.tsx

@@ -0,0 +1,33 @@
+import { RehooksIcon } from "@rehooks/ui/icons";
+import { blog } from "@/lib/docs/source";
+import Link from "next/link";
+
+export default function BlogPage() {
+  const posts = blog.getPages();
+
+  return (
+    <main className="container mx-auto grow px-4 py-8">
+      <div className="flex flex-row items-center gap-x-2">
+        <RehooksIcon className="size-10" stroke="#8b5cf6" />
+        <h1 className="text-4xl font-bold">Rehooks Blog</h1>
+      </div>
+      <hr className="border-t-fd-border my-6 border-t" />
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.url}
+            href={post.url}
+            className="bg-fd-background border-fd-border hover:bg-fd-secondary/50 block overflow-hidden rounded-lg border p-6"
+          >
+            <h2 className="text-fd-foreground mb-2 text-xl font-semibold">
+              {post.data.title}
+            </h2>
+            <p className="text-fd-muted-foreground mb-4">
+              {post.data.description}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

apps/docs/app/(home)/(blog)/blog/[slug]/layout.tsx

@@ -0,0 +1,11 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/app/layout.config";
+import type { ReactNode } from "react";
+
+export default function SlugLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>): React.ReactElement {
+  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+}

apps/docs/app/(home)/(blog)/blog/[slug]/page.tsx

@@ -0,0 +1,75 @@
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { CornerDownLeft } from "@rehooks/ui/icons";
+import { notFound } from "next/navigation";
+import { blog } from "@/lib/docs/source";
+import Link from "next/link";
+
+export default async function BlogPost(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const page = blog.getPage([params.slug]);
+
+  if (!page) notFound();
+  const Mdx = page.data.body;
+
+  return (
+    <>
+      <div className="bg-fd-background container mt-8 rounded-xl border p-8">
+        <h1 className="mg:text-3xl mb-2 text-xl font-bold">
+          {page.data.title}
+        </h1>
+        <p className="text-fd-muted-foreground mb-4 text-base md:text-lg">
+          {page.data.description}
+        </p>
+        <div className="flex items-center">
+          <Link
+            href="/blog"
+            className="bg-fd-background border-fd-border hover:bg-fd-secondary inline-flex transform items-center gap-x-2 rounded-md border px-4 py-1 transition"
+          >
+            Back
+            <CornerDownLeft className="inline-block size-4" />
+          </Link>
+        </div>
+      </div>
+      <article className="container flex flex-col px-4 py-8">
+        <div className="prose min-w-0">
+          <Mdx components={defaultMdxComponents} />
+        </div>
+        <hr className="border-t-fd-border my-12 border-t" />
+        <div className="flex flex-col gap-4 text-sm">
+          <div>
+            <p className="text-fd-muted-foreground mb-1">Written by</p>
+            <p className="font-medium">{page.data.author}</p>
+          </div>
+          <div>
+            <p className="text-fd-muted-foreground mb-1 text-sm">At</p>
+            <p className="font-medium">
+              {new Date(page.data.date).toDateString()}
+            </p>
+          </div>
+        </div>
+      </article>
+    </>
+  );
+}
+
+export function generateStaticParams(): { slug: string }[] {
+  return blog.getPages().map((page) => ({
+    slug: page.slugs[0],
+  }));
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const page = blog.getPage([params.slug]);
+
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

apps/docs/app/(home)/layout.tsx → apps/docs/app/(home)/(home)/layout.tsx

@@ -1,5 +1,5 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
 import Footer from "@/app/(home)/_components/footer";
-import { HomeLayout } from "fumadocs-ui/home-layout";
 import { baseOptions } from "@/app/layout.config";
 import { Grid } from "@rehooks/ui/components";
 import type { ReactNode } from "react";
@@ -17,7 +17,7 @@ export default function Layout({
         height={46}
         x={-1}
         y={-1}
-        strokeDasharray={"4 2"}
+        strokeDasharray={"2 4"}
         className="-z-50 [mask-image:radial-gradient(350px_circle_at_center,white,#ffffff50)] dark:[mask-image:radial-gradient(350px_circle_at_center,white,#ffffff01)]"
       />
       <Footer />

apps/docs/app/(home)/(home)/page.tsx

@@ -0,0 +1,53 @@
+import { Editor } from "@/app/(home)/_components/editor";
+import { Grid } from "@/app/(home)/_components/bento";
+import { Hero } from "@/app/(home)/_components/hero";
+import { ArrowUpRight } from "@rehooks/ui/icons";
+import { ReactNode } from "react";
+
+export default function HomePage() {
+  return (
+    <div className="mx-8 my-12 flex min-h-screen flex-col items-center justify-center">
+      <div className="mb-6">
+        <Badge
+          icon={
+            <ArrowUpRight className="size-3 transition-transform duration-100 group-hover:-translate-y-px group-hover:translate-x-px" />
+          }
+        >
+          Rehooks v4.5 Released!
+        </Badge>
+      </div>
+      <Hero />
+      <Editor />
+      <h2 className="text-fd-muted-foreground select-none text-xl font-medium uppercase">
+        Features
+      </h2>
+      <h3 className="text-fd-foreground my-1 text-wrap text-center text-3xl font-semibold">
+        Crafted for Efficiency
+      </h3>
+      <h4 className="text-fd-muted-foreground mt-1.5 max-w-lg text-pretty text-center text-xl italic">
+        I've created Rehooks to streamline the process of creating custom hooks,
+        and get rid of heavy packages.
+      </h4>
+      <div className="mt-10 max-w-6xl">
+        <Grid />
+      </div>
+    </div>
+  );
+}
+
+function Badge({ children, icon }: { children: ReactNode; icon?: ReactNode }) {
+  return (
+    <a
+      href="#"
+      className="divide-fd-border border-fd-border bg-fd-background hover:bg-fd-secondary/50 group flex items-center rounded-full border text-xs font-medium drop-shadow-sm backdrop-blur-sm transition-colors duration-75 sm:divide-x"
+    >
+      <span className="text-fd-foreground py-1.5 pl-4 text-sm sm:pr-2.5">
+        {children}
+      </span>
+      <div className="text-fd-muted-foreground flex items-center gap-1.5 p-1.5 pl-2.5">
+        <span className="hidden text-sm sm:block">Read more</span>
+        <div className="rounded-full bg-blue-600 p-1 text-white">{icon}</div>
+      </div>
+    </a>
+  );
+}

apps/docs/app/(home)/_components/bento.tsx

@@ -6,8 +6,8 @@ import { features } from "@/app/(home)/_components/cards";
 export function Grid() {
   return (
     <BentoGrid>
-      {features.map((feature, idx) => (
-        <BentoCard key={idx} {...feature} />
+      {features.map((features, index) => (
+        <BentoCard key={index} {...features} />
       ))}
     </BentoGrid>
   );

apps/docs/app/(home)/_components/cards.tsx

@@ -1,67 +1,79 @@
 "use client";
 
-import { Globe as GlobeIcon, Braces, Layers, Zap } from "@rehooks/ui/icons";
-import { Retro, Marquee, Text } from "@rehooks/ui/components";
+import {
+  Globe,
+  Braces,
+  Layers,
+  Zap,
+  Wrench,
+  Sparkles,
+  Hammer,
+} from "@rehooks/ui/icons";
+import { Retro, Marquee, Text, Shimmer } from "@rehooks/ui/components";
 import { cn, hooks } from "@rehooks/utils";
-import { useEffect, useRef } from "react";
-import createGlobe from "cobe";
-
-export const Globe = ({ className }: { className?: string }) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    let phi = 0;
-
-    if (!canvasRef.current) return;
-
-    const globe = createGlobe(canvasRef.current, {
-      devicePixelRatio: 2,
-      width: 600 * 2,
-      height: 600 * 2,
-      phi: 0,
-      theta: 0,
-      dark: 1,
-      diffuse: 1.2,
-      mapSamples: 16000,
-      mapBrightness: 6,
-      baseColor: [0.3, 0.3, 0.3],
-      markerColor: [0.545, 0.361, 0.965],
-      glowColor: [0.1, 0.1, 0.1],
-      markers: [
-        { location: [37.7595, -122.4367], size: 0.04 },
-        { location: [40.7128, -74.006], size: 0.04 },
-        { location: [52.7128, -242.831], size: 0.04 },
-      ],
-      onRender: (state) => {
-        state.phi = phi;
-        phi += 0.01;
-      },
-    });
-
-    return () => {
-      globe.destroy();
-    };
-  }, []);
+import type { ReactNode } from "react";
 
+function CommitCard({
+  className,
+  comment,
+  icon,
+}: {
+  className?: string;
+  comment: string;
+  icon: ReactNode;
+}) {
   return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
-      className={cn("pointer-events-none transform-gpu", className)}
-    />
+    <div
+      className={cn(
+        "dark:bg-fd-muted/25 bg-fd-muted border-fd-border/50 absolute inline-flex h-10 w-80 transform select-none items-center rounded-full border px-3 transition-all group-hover:-right-4 lg:w-72",
+        className,
+      )}
+    >
+      <span>{icon}</span>
+      <Shimmer color="#888" className="font-mono text-xs" text={comment} />
+    </div>
   );
-};
+}
+
+const commits = [
+  {
+    comment: "fix(cli): no args passed",
+    icon: <Wrench className="text-fd-foreground/50 mr-2 size-4" />,
+    className: "-right-4",
+  },
+  {
+    comment: "feat(core): health checker",
+    icon: (
+      <Sparkles className="text-fd-foreground/50 mr-2 size-4 transform transition group-hover:rotate-180" />
+    ),
+    className: "-right-12 top-12",
+  },
+  {
+    comment: "ref(docs): add missing props",
+    icon: <Hammer className="text-fd-foreground/50 mr-2 size-4" />,
+    className: "-right-24 top-24",
+  },
+];
 
 export const features = [
   {
-    Icon: GlobeIcon,
+    Icon: Globe,
     name: "Open-Source Codebase",
     description:
-      "Rehooks is an open-source project, to expand OSS communities.",
+      "Rehooks is an open-source project, licensed under Apache 2.0.",
     className:
       "lg:row-start-1 lg:row-end-1 lg:col-start-1 lg:col-end-2 rounded-t-2xl lg:rounded-tl-2xl lg:rounded-tr-none border-b-[0.5px] border-r-[1px] lg:border-r-[0.5px] border-t-[1px] border-l-[1px]",
     background: (
-      <Globe className="absolute -bottom-80 -right-10 [mask-image:linear-gradient(to_top,transparent_60%,#000_100%)] md:-bottom-72 md:-right-10" />
+      <div className="absolute right-0 top-9">
+        {commits.map((commit, index) => (
+          <CommitCard
+            className={commit.className}
+            key={index}
+            icon={commit.icon}
+            comment={commit.comment}
+          />
+        ))}
+      </div>
     ),
   },
   {
@@ -71,7 +83,11 @@ export const features = [
       "Rehooks is written in TypeScript, ensuring type safety and maintainability throughout the codebase.",
     className:
       "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-2 lg:rounded-br-2xl lg:rounded-tr-none border-b-[0.5px] lg:border-b-[1px] border-r-[1px] border-t-[0.5px] border-l-[1px] lg:border-l-[0.5px]",
-    background: <Text text="<T>" className="absolute -top-16" />,
+    background: (
+      <div className="flex h-full w-full items-center justify-center">
+        <Text text="<T>" className="absolute top-16" />
+      </div>
+    ),
   },
   {
     Icon: Layers,