Sync

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

@@ -22,6 +22,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/ui/button';
 import { CodeBlock } from '@/components/code-block';
+import { UwuHero } from '@/app/(home)/uwu';
 import { CreateAppAnimation, Previews, Rain } from './page.client';
 import {
   VercelLogo,
@@ -70,6 +71,7 @@ export default function HomePage(): React.ReactElement {
               fill="currentColor"
             />
             <Hero />
+            <UwuHero />
           </div>
           <div className="container border-x border-t py-24">
             <h2 className="text-center text-2xl font-semibold sm:text-3xl">
@@ -303,7 +305,7 @@ function Highlight({
 
 function Hero(): React.ReactElement {
   return (
-    <div className="container relative z-[2] flex flex-col items-center overflow-hidden border-x border-t bg-background px-6 pt-12 text-center md:pt-20">
+    <div className="container relative z-[2] flex flex-col items-center overflow-hidden border-x border-t bg-background px-6 pt-12 text-center md:pt-20 [.uwu_&]:hidden">
       <h1 className="mb-6 text-4xl font-semibold md:text-5xl">
         Build Your Docs.
       </h1>

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

@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/components/ui/button';
+import Logo from '@/public/logo.png';
+
+export function UwuHero(): React.ReactElement {
+  return (
+    <div className="z-[2] hidden flex-col items-center pb-8 text-center [.uwu_&]:flex">
+      <Image alt="logo" src={Logo} className="mb-6 w-full max-w-[400px] px-4" />
+
+      <p className="mb-6 h-fit p-2 text-lg text-muted-foreground md:max-w-[80%] md:text-xl">
+        Fumadocs is the framework for building documentation with{' '}
+        <b className="font-medium text-foreground">anime and fuwa fuwa power</b>
+        . Using the power of weebs and waifus.
+      </p>
+      <div className="inline-flex items-center gap-3">
+        <Link
+          href="/docs"
+          className={cn(
+            buttonVariants({ size: 'lg', className: 'rounded-full' }),
+          )}
+        >
+          Getting Started
+        </Link>
+        <a
+          href="https://githubbox.com/fuma-nama/fumadocs-ui-template"
+          className={cn(
+            buttonVariants({
+              size: 'lg',
+              variant: 'outline',
+              className: 'rounded-full bg-background',
+            }),
+          )}
+        >
+          Open Demo
+        </a>
+      </div>
+    </div>
+  );
+}

apps/docs/app/global.css

@@ -25,3 +25,25 @@
 .dark .mdx {
   --primary: 0 0% 100%;
 }
+
+.uwu {
+  --background: 240 80% 94% !important;
+  --popover: 240 80% 94% !important;
+  --primary: 230 90% 72% !important;
+  --border: 230 30% 87% !important;
+  --accent: 250 80% 90% !important;
+  --secondary: 230 40% 94% !important;
+  --muted: 230 80% 92% !important;
+  --card: 230 90% 94% !important;
+}
+
+.uwu.dark {
+  --background: 240 40% 20% !important;
+  --primary: 250 70% 94% !important;
+  --border: 230 30% 30% !important;
+  --muted: 230 30% 36.3% !important;
+  --secondary: 250 30% 36.3% !important;
+  --accent: 250 20% 38.3% !important;
+  --muted-foreground: 230 80% 84% !important;
+  --card: 230 40% 26.3% !important;
+}

apps/docs/app/layout.client.tsx

@@ -21,24 +21,18 @@ const itemVariants = cva(
 );
 
 export function Title(): React.ReactElement {
-  const pathname = usePathname();
-
-  if (pathname === '/uwu') {
-    return (
+  return (
+    <>
       <Image
         alt="Fumadocs"
         src={Logo}
         sizes="100px"
-        className="w-20 md:w-24"
+        className="hidden w-20 md:w-24 [.uwu_&]:block"
         aria-label="Fumadocs"
       />
-    );
-  }
 
-  return (
-    <>
-      <FumadocsIcon className="size-5" fill="currentColor" />
-      <span className="max-md:hidden">Fumadocs</span>
+      <FumadocsIcon className="size-5 [.uwu_&]:hidden" fill="currentColor" />
+      <span className="max-md:hidden [.uwu_&]:hidden">Fumadocs</span>
     </>
   );
 }

apps/docs/app/provider.tsx

@@ -8,6 +8,21 @@ const SearchDialog = dynamic(() => import('@/components/search'), {
   ssr: false,
 });
 
+const inject = `
+const urlParams = new URLSearchParams(window.location.search);
+const uwuParam = urlParams.get("uwu");
+
+if (typeof uwuParam === 'string') {
+    localStorage.setItem('uwu', uwuParam);
+}
+
+const item = localStorage.getItem('uwu')
+
+if (item === 'true') {
+    document.documentElement.classList.add("uwu")
+}    
+`;
+
 export function Provider({
   children,
 }: {
@@ -19,6 +34,10 @@ export function Provider({
         SearchDialog,
       }}
     >
+      <script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: inject }}
+      />
       {children}
     </RootProvider>
   );

apps/docs/content/docs/headless/mdx/remark-docgen.mdx

@@ -34,6 +34,8 @@ Use generators in a markdown/MDX file with:
 You can add a generator to the `generators` array.
 
 ```ts
+import { remarkDocGen, fileGenerator } from 'fumadocs-docgen';
+
 const config = {
   remarkPlugins: [[remarkDocGen, { generators: [fileGenerator()] }]],
 };
@@ -93,7 +95,7 @@ You may configure it with generator options.
 To use it, specify the Typescript file and exported type you want to generate from.
 
 ````mdx
-```json
+```json doc-gen:typescript
 {
   "file": "./my-file.ts",
   "name": "MyInterface"

apps/docs/tailwind.config.js

@@ -1,4 +1,5 @@
 import { createPreset, presets } from 'fumadocs-ui/tailwind-plugin';
+import animate from 'tailwindcss-animate';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -75,5 +76,5 @@ export default {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [animate],
 };