Docs: improve landing page

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

@@ -15,7 +15,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/ui/button';
 
-export function CreateAppAnimation(): React.ReactElement {
+export function CreateAppAnimation() {
   const installCmd = 'npm create fumadocs-app';
   const tickTime = 100;
   const timeCommandEnter = installCmd.length;
@@ -129,7 +129,7 @@ export function WhyInteractive(props: {
   codeblockInteractive: ReactNode;
   typeTable: ReactNode;
   codeblockMdx: ReactNode;
-}): ReactNode {
+}) {
   const [autoActive, setAutoActive] = useState(true);
   const [active, setActive] = useState(0);
   const duration = 1000 * 8;
@@ -153,19 +153,6 @@ export function WhyInteractive(props: {
     };
   }, [active, autoActive, duration, items.length]);
 
-  if (typeof window !== 'undefined') {
-    const element = document.getElementById(
-      `why-interactive-${active.toString()}`,
-    );
-
-    if (element) {
-      scrollIntoView(element, {
-        behavior: 'smooth',
-        boundary: document.getElementById('why-interactive'),
-      });
-    }
-  }
-
   return (
     <div
       id="why-interactive"
@@ -175,7 +162,14 @@ export function WhyInteractive(props: {
         {items.map((item, i) => (
           <button
             key={item}
-            id={`why-interactive-${i.toString()}`}
+            ref={(element) => {
+              if (!element || i !== active) return;
+
+              scrollIntoView(element, {
+                behavior: 'smooth',
+                boundary: document.getElementById('why-interactive'),
+              });
+            }}
             type="button"
             className={cn(
               'inline-flex flex-col-reverse text-nowrap rounded-lg py-1.5 text-left text-sm font-medium text-muted-foreground transition-colors max-lg:px-2 lg:flex-row',
@@ -186,7 +180,10 @@ export function WhyInteractive(props: {
             )}
             onClick={() => {
               if (active === i) setAutoActive((prev) => !prev);
-              else setActive(i);
+              else {
+                setAutoActive(false);
+                setActive(i);
+              }
             }}
           >
             {i === active && autoActive ? (
@@ -367,7 +364,7 @@ export function WhyInteractive(props: {
   );
 }
 
-function WhyPanel(props: HTMLProps<HTMLDivElement>): ReactNode {
+function WhyPanel(props: HTMLProps<HTMLDivElement>) {
   return (
     <div
       {...props}

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

@@ -36,13 +36,9 @@ import {
 import Img from './img.png';
 
 const badgeVariants = cva(
-  'mb-2 inline-flex size-7 items-center justify-center rounded-full bg-fd-primary font-medium text-fd-primary-foreground',
+  'inline-flex size-7 items-center justify-center rounded-full bg-fd-primary font-medium text-fd-primary-foreground',
 );
 
-const code = `const schema = frontmatterSchema.extend({
-  preview: z.string().optional()
-})`;
-
 export default function Page(): React.ReactElement {
   return (
     <>
@@ -555,39 +551,45 @@ function Feedback(): React.ReactElement {
 function Introduction(): React.ReactElement {
   return (
     <div className="grid grid-cols-1 border-r md:grid-cols-2">
-      <div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
+      <div className="flex flex-col gap-2 border-l border-t px-6 py-12 md:py-16">
         <div className={cn(badgeVariants())}>1</div>
         <h3 className="text-xl font-bold">Create it.</h3>
         <p className="mb-8 text-fd-muted-foreground">
           Initialize a new docs with a command.
         </p>
         <CreateAppAnimation />
       </div>
-      <div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
+      <div className="flex flex-col gap-2 border-l border-t px-6 py-12 md:py-16">
         <div className={cn(badgeVariants())}>2</div>
-        <h3 className="text-xl font-bold">Customise.</h3>
+        <h3 className="text-xl font-bold">Write.</h3>
         <p className="text-fd-muted-foreground">
-          Modify the code, in a comfortable way with Typescript auto-complete.
+          Write content, with automation tools & type-safe data validation.
         </p>
         <div className="relative flex flex-col">
           <CodeBlock
-            lang="ts"
+            lang="mdx"
             wrapper={{ className: 'absolute inset-x-2 top-0' }}
-            code={code}
+            code={`---
+title: My Documentation
+---
+
+## Introduction
+
+Hello World
+`}
           />
-          <Files className="z-[2] mt-20 shadow-xl">
+          <Files className="z-[2] mt-48 shadow-xl">
             <Folder name="content" defaultOpen>
               <File name="index.mdx" />
-              <File name="hello.mdx" />
               <File name="components.mdx" />
             </Folder>
           </Files>
         </div>
       </div>
-      <div className="col-span-full flex flex-col items-center border-l border-t px-6 py-12 text-center">
+      <div className="col-span-full flex flex-col items-center gap-2 border-l border-t px-6 py-12 text-center">
         <div className={cn(badgeVariants())}>3</div>
         <h3 className="text-2xl font-bold">Ship.</h3>
-        <p className="mb-2 text-fd-muted-foreground">
+        <p className="text-fd-muted-foreground">
           Deploy your docs easily with Next.js compatible hosting platforms.
         </p>
 

apps/docs/app/docs/[...slug]/page.tsx

@@ -66,7 +66,7 @@ export default async function Page(props: {
     >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
+      <DocsBody className="text-fd-foreground/80">
         {preview ? <PreviewRenderer preview={preview} /> : null}
         <Mdx
           components={{

apps/docs/tsconfig.json

@@ -14,5 +14,5 @@
     "next.config.js",
     "tailwind.config.js"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "eslint.config.mjs"]
 }

packages/cli/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "test/repo", "test/repo-2"]
+  "exclude": ["node_modules", "test/repo", "test/repo-2", "eslint.config.mjs"]
 }

packages/core/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "eslint.config.mjs"]
 }

packages/create-app/tsconfig.json

@@ -6,5 +6,11 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "template", "dist", "scripts"]
+  "exclude": [
+    "node_modules",
+    "template",
+    "dist",
+    "scripts",
+    "eslint.config.mjs"
+  ]
 }

packages/doc-gen/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "eslint.config.mjs"]
 }

packages/mdx-remote/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "eslint.config.mjs"]
 }

packages/mdx/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "eslint.config.mjs"]
 }

packages/twoslash/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "eslint.config.mjs"]
 }

packages/typescript/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "eslint.config.mjs"]
 }

packages/ui/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "eslint.config.mjs"]
 }