Docs: Add usages for auto setup

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

@@ -1,4 +1,4 @@
-import { LayoutIcon, LibraryIcon } from 'lucide-react';
+import { Building2, LibraryIcon } from 'lucide-react';
 import Link, { type LinkProps } from 'next/link';
 import Image from 'next/image';
 import { buttonVariants } from '@/components/ui/button';
@@ -31,7 +31,7 @@ export default function DocsPage(): React.ReactElement {
         Getting Started
       </h1>
       <p className="text-fd-muted-foreground">
-        You can start with Fumadocs UI, or just use the core library.
+        You can start with Fumadocs, or just use the core library.
       </p>
       <div className="mt-4 grid grid-cols-2 gap-4">
         <a
@@ -51,9 +51,9 @@ export default function DocsPage(): React.ReactElement {
       <div className="mt-16 grid grid-cols-1 gap-4 text-left md:grid-cols-2">
         <Item href="/docs/ui">
           <Icon>
-            <LayoutIcon className="size-full" />
+            <Building2 className="size-full" />
           </Icon>
-          <h2 className="mb-2 text-lg font-semibold">Fumadocs UI</h2>
+          <h2 className="mb-2 text-lg font-semibold">Fumadocs</h2>
           <p className="text-sm text-fd-muted-foreground">
             The full-powered documentation framework with an excellent UI.
           </p>

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

@@ -1,5 +1,11 @@
 import { cva } from 'class-variance-authority';
-import { Heart, type LucideIcon, MousePointer, Terminal } from 'lucide-react';
+import {
+  Heart,
+  type LucideIcon,
+  MousePointer,
+  Sparkle,
+  Terminal,
+} from 'lucide-react';
 import {
   BatteryChargingIcon,
   CpuIcon,
@@ -62,16 +68,11 @@ export default function Page(): React.ReactElement {
           }}
         >
           <div className="relative">
-            <StarsIcon
+            <Sparkle
               className="absolute -left-2 -top-2 z-10 size-4 xl:scale-[200%]"
               stroke="none"
               fill="currentColor"
             />
-            <StarsIcon
-              className="absolute -bottom-2 -right-2 z-10 size-4 xl:scale-[200%]"
-              stroke="none"
-              fill="currentColor"
-            />
             <Hero />
             <UwuHero />
           </div>
@@ -156,8 +157,7 @@ function Why(): React.ReactElement {
       </style>
       <h2 className="bg-gradient-to-b from-foreground to-foreground/40 bg-clip-text text-2xl font-semibold text-transparent md:text-3xl">
         Build docs 100x faster and easier
-        <br />
-        with Fumadocs
+        <p className="max-md:hidden">with Fumadocs</p>
       </h2>
       <p className="mt-4 text-foreground/50">
         Fumadocs offers a complete toolchain to maintain your docs.
@@ -507,22 +507,19 @@ function Highlight({
 
 function Hero(): React.ReactElement {
   return (
-    <div className="container relative z-[2] flex flex-col overflow-hidden border-x border-t bg-fd-background px-6 pt-12 md:px-12 md:pt-16 [.uwu_&]:hidden">
-      <h1 className="mb-8 max-w-[600px] text-3xl font-medium md:text-4xl">
+    <div className="container relative z-[2] flex flex-col overflow-hidden border-x border-t bg-fd-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16 [.uwu_&]:hidden">
+      <h1 className="mb-8 text-4xl font-medium md:hidden">Build Your Docs</h1>
+      <h1 className="mb-8 max-w-[600px] text-4xl font-medium max-md:hidden">
         Build excellent documentation site with less effort
       </h1>
       <p className="mb-8 text-fd-muted-foreground md:max-w-[80%] md:text-xl">
-        Fumadocs is a{' '}
-        <span className="font-medium text-fd-foreground">beautiful</span>{' '}
+        Fumadocs is a <span className="text-fd-foreground">beautiful</span>{' '}
         documentation framework with{' '}
-        <span className="font-medium text-fd-foreground">
-          a complete toolchain
-        </span>
-        , powered by{' '}
-        <span className="font-medium text-foreground">Next.js App Router</span>.
+        <span className="text-fd-foreground">a complete toolchain</span>,
+        powered by <span className="text-foreground">Next.js App Router</span>.
         Designed to be flexible and fast.
       </p>
-      <div className="inline-flex items-center gap-3">
+      <div className="inline-flex items-center gap-3 max-md:mx-auto">
         <Link
           href="/docs/ui"
           className={cn(
@@ -547,7 +544,7 @@ function Hero(): React.ReactElement {
       <Image
         src={Img}
         alt="preview"
-        className="mb-[-250px] mt-8 min-w-[800px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12 md:mb-[-370px] md:min-w-[1200px]"
+        className="mb-[-250px] mt-8 min-w-[800px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12 md:mb-[-370px] md:min-w-[1100px]"
         priority
       />
       <div
@@ -567,7 +564,7 @@ function Hero(): React.ReactElement {
 
 function Feedback(): React.ReactElement {
   return (
-    <div className="relative flex flex-col items-center overflow-hidden border-x border-t px-12 py-8 md:py-16">
+    <div className="relative flex flex-col items-center overflow-hidden border-x border-t px-6 py-8 md:py-16">
       <div
         className="absolute inset-x-0 bottom-0 z-[-1] h-24 opacity-30 duration-1000 animate-in fade-in"
         style={{

apps/docs/app/layout.config.tsx

@@ -1,9 +1,9 @@
 import { type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
-import { BookIcon, Heart, LayoutTemplateIcon } from 'lucide-react';
+import { AlbumIcon, BookIcon, Heart, LayoutTemplateIcon } from 'lucide-react';
 import Image from 'next/image';
 import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-import { FumadocsIcon, NavChildren } from '@/app/layout.client';
+import { FumadocsIcon } from '@/app/layout.client';
 import Logo from '@/public/logo.png';
 import { utils } from '@/app/source';
 import { modes } from '@/utils/modes';
@@ -25,17 +25,22 @@ export const baseOptions: BaseLayoutProps = {
           className="size-4 [.uwu_&]:hidden [header_&]:size-5"
           fill="currentColor"
         />
-        <span className="font-medium [.uwu_&]:hidden max-md:[header_&]:hidden">
+        <span className="font-medium [#nd-nav_&]:text-[15px] [.uwu_&]:hidden">
           Fumadocs
         </span>
       </>
     ),
     transparentMode: 'top',
-    children: <NavChildren />,
   },
   links: [
     {
       icon: <BookIcon />,
+      text: 'Documentation',
+      url: '/docs/ui',
+      active: 'none',
+    },
+    {
+      icon: <AlbumIcon />,
       text: 'Blog',
       url: '/blog',
       active: 'nested-url',

apps/docs/content/docs/ui/(integrations)/open-graph.mdx

@@ -10,9 +10,17 @@ Fumadocs uses the Next.js Metadata API for SEO.
 
 Make sure to read their [Metadata section](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) for the fundamentals of Metadata API.
 
-### Open Graph Image
+## Open Graph Image
 
-For docs pages, Fumadocs has a built-in dynamic image generator.
+For docs pages, Fumadocs has a built-in metadata image generator.
+
+### Auto Setup
+
+```package-install
+npx fumadocs init og-image
+```
+
+### Manual Setup
 
 ```json doc-gen:file
 {
@@ -47,6 +55,8 @@ In your docs page, add the image to metadata.
 }
 ```
 
+### Font
+
 You can also customise the font, options for Satori are also available on the built-in generator.
 
 ```ts

apps/docs/content/docs/ui/(integrations)/openapi/index.mdx

@@ -3,7 +3,15 @@ title: OpenAPI
 description: Generating docs for OpenAPI schema
 ---
 
-## Usage
+## Auto Setup
+
+Using Fumadocs CLI.
+
+```package-install
+npx fumadocs init openapi
+```
+
+## Manual Setup
 
 Install the required packages.
 

packages/ui/src/components/layout/nav.tsx

@@ -68,7 +68,7 @@ export function Title({ title, url }: TitleProps): React.ReactElement {
   return (
     <Link
       href={url ?? (locale ? `/${locale}` : '/')}
-      className="inline-flex items-center gap-2 font-semibold"
+      className="inline-flex items-center gap-2.5 font-semibold"
     >
       {title}
     </Link>

packages/ui/src/layouts/home.client.tsx

@@ -47,8 +47,8 @@ export function Nav({
         <div className="flex flex-1 flex-row items-center justify-end md:gap-2">
           {enableSearch && search.enabled ? (
             <>
-              <SearchToggle className="md:hidden" />
-              <LargeSearchToggle className="w-full max-w-[240px] max-md:hidden" />
+              <SearchToggle className="sm:hidden" />
+              <LargeSearchToggle className="w-full max-w-[240px] max-sm:hidden" />
             </>
           ) : null}