docs: Fumadocs migration

fumadocs/.gitignore

@@ -40,6 +40,6 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
-/content/examples/*/
+/content/examples/**/*
 /components/example/generated/
 /.source/

fumadocs/components/pages/landing/community/Community.tsx → fumadocs/app/(home)/community/Community.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { Contributors } from "@/components/pages/landing/community/Contributors";
-import { Section } from "@/components/pages/landing/shared/Section";
-import { Sponsors } from "@/components/pages/landing/community/Sponsors";
-import { SectionIntro } from "@/components/pages/landing/shared/Headings";
+import { Contributors } from "@/app/(home)/community/Contributors";
+import { Section } from "@/components/Section";
+import { Sponsors } from "@/app/(home)/community/Sponsors";
+import { SectionIntro } from "@/components/Headings";
 
 export const Community: FC = () => (
   <Section gradientBackground className="pb-24 pt-12 xl:pb-32 xl:pt-16">

fumadocs/components/pages/landing/community/Contributors.tsx → fumadocs/app/(home)/community/Contributors.tsx

@@ -1,9 +1,9 @@
 import Image from "next/image";
 import Link from "next/link";
-import { DiscordIcon, GitHubIcon } from "nextra/icons";
-import { SectionSubHeader } from "@/components/pages/landing/shared/Headings";
-import { JoinButton } from "@/components/pages/landing/community/JoinButton";
-import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
+import { RiDiscordFill, RiGithubFill } from "react-icons/ri";
+import { SectionSubHeader } from "@/components/Headings";
+import { JoinButton } from "@/app/(home)/community/JoinButton";
+import { FadeIn } from "@/components/FadeIn";
 
 // TODO: Use GitHub API
 function fetchContributors(): { username: string; avatarUrl: string }[] {
@@ -114,7 +114,7 @@ export const Contributors = () => (
         subtext={
           "Join the community of BlockNote developers by contributing code and supporting the project."
         }
-        icon={GitHubIcon}
+        icon={<RiGithubFill size={32} />}
         linkTitle={"See our repository"}
         linkUrl={"https://github.com/TypeCellOS/BlockNote"}
       />
@@ -123,7 +123,7 @@ export const Contributors = () => (
         subtext={
           "Ask questions, discuss features, and share your work with other BlockNote users on Discord."
         }
-        icon={DiscordIcon}
+        icon={<RiDiscordFill size={32} />}
         linkTitle={"Join our Server"}
         linkUrl={"https://discord.gg/Qc2QTTH5dF"}
       />

fumadocs/components/pages/landing/community/JoinButton.tsx → fumadocs/app/(home)/community/JoinButton.tsx

@@ -1,24 +1,20 @@
 import Link from "next/link";
-import { ComponentProps, FC } from "react";
+import { ReactNode } from "react";
 
 export const JoinButton = (props: {
   text: string;
   subtext: string;
-  icon: FC<ComponentProps<"svg">>;
+  icon: ReactNode;
   linkTitle: string;
   linkUrl: string;
 }) => {
-  const Icon = props.icon;
-
   return (
     <div
       className={
-        "flex w-full flex-col items-start justify-between gap-4 rounded-lg bg-gray-50 p-4 sm:flex-row sm:items-center sm:gap-8 md:max-w-screen-md dark:bg-gray-800"
+        "border-fd-border flex w-full flex-col items-start justify-between gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:gap-8 md:max-w-screen-md"
       }
     >
-      <div className={"hidden md:block md:w-fit"}>
-        <Icon width={30} />
-      </div>
+      <div className={"hidden md:block md:w-fit"}>{props.icon}</div>
       <div className={"flex w-full flex-col items-start justify-start"}>
         <h2
           className={

fumadocs/components/pages/landing/community/SponsorCard.tsx → fumadocs/app/(home)/community/SponsorCard.tsx

@@ -14,7 +14,7 @@ export function SponsorCard(props: SponsorCardProps) {
   return (
     <a
       href={props.link}
-      className="relative flex aspect-video max-w-[235px] items-center justify-center rounded-lg bg-gray-100 md:w-[235px] dark:bg-gray-900"
+      className="border-fd-border relative flex aspect-video max-w-[235px] items-center justify-center rounded-lg border"
     >
       <Image
         className={"block h-1/3 w-3/5 object-contain dark:hidden"}

fumadocs/components/pages/landing/community/Sponsors.tsx → fumadocs/app/(home)/community/Sponsors.tsx

@@ -1,30 +1,30 @@
 import {
   SponsorCard,
   SponsorCardProps,
-} from "@/components/pages/landing/community/SponsorCard";
-import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
-import { SectionSubHeader } from "@/components/pages/landing/shared/Headings";
+} from "@/app/(home)/community/SponsorCard";
+import { FadeIn } from "@/components/FadeIn";
+import { SectionSubHeader } from "@/components/Headings";
 
-import agree from "../../../../public/img/sponsors/agree.png";
-import atuin from "../../../../public/img/sponsors/atuin.png";
-import capitolDark from "../../../../public/img/sponsors/capitolDark.svg";
-import capitolLight from "../../../../public/img/sponsors/capitolLight.svg";
-import deepOrigin from "../../../../public/img/sponsors/deepOrigin.svg";
-import dinumDark from "../../../../public/img/sponsors/dinumDark.svg";
-import dinumLight from "../../../../public/img/sponsors/dinumLight.svg";
-import fermatDark from "../../../../public/img/sponsors/fermatDark.svg";
-import fermatLight from "../../../../public/img/sponsors/fermatLight.svg";
-import nlnetDark from "../../../../public/img/sponsors/nlnetDark.svg";
-import nlnetLight from "../../../../public/img/sponsors/nlnetLight.svg";
-import notePlanDark from "../../../../public/img/sponsors/notePlanDark.png";
-import notePlanLight from "../../../../public/img/sponsors/notePlanLight.png";
-import poggioDark from "../../../../public/img/sponsors/poggioDark.svg";
-import poggioLight from "../../../../public/img/sponsors/poggioLight.svg";
-import twentyDark from "../../../../public/img/sponsors/twentyDark.png";
-import twentyLight from "../../../../public/img/sponsors/twentyLight.png";
-import typeCellDark from "../../../../public/img/sponsors/typeCellDark.svg";
-import typeCellLight from "../../../../public/img/sponsors/typeCellLight.svg";
-import zendis from "../../../../public/img/sponsors/zendis.svg";
+import agree from "@/public/img/sponsors/agree.png";
+import atuin from "@/public/img/sponsors/atuin.png";
+import capitolDark from "@/public/img/sponsors/capitolDark.svg";
+import capitolLight from "@/public/img/sponsors/capitolLight.svg";
+import deepOrigin from "@/public/img/sponsors/deepOrigin.svg";
+import dinumDark from "@/public/img/sponsors/dinumDark.svg";
+import dinumLight from "@/public/img/sponsors/dinumLight.svg";
+import fermatDark from "@/public/img/sponsors/fermatDark.svg";
+import fermatLight from "@/public/img/sponsors/fermatLight.svg";
+import nlnetDark from "@/public/img/sponsors/nlnetDark.svg";
+import nlnetLight from "@/public/img/sponsors/nlnetLight.svg";
+import notePlanDark from "@/public/img/sponsors/notePlanDark.png";
+import notePlanLight from "@/public/img/sponsors/notePlanLight.png";
+import poggioDark from "@/public/img/sponsors/poggioDark.svg";
+import poggioLight from "@/public/img/sponsors/poggioLight.svg";
+import twentyDark from "@/public/img/sponsors/twentyDark.png";
+import twentyLight from "@/public/img/sponsors/twentyLight.png";
+import typeCellDark from "@/public/img/sponsors/typeCellDark.svg";
+import typeCellLight from "@/public/img/sponsors/typeCellLight.svg";
+import zendis from "@/public/img/sponsors/zendis.svg";
 
 export const sponsorsCardData: SponsorCardProps[] = [
   {

fumadocs/components/pages/landing/faq/FAQ.tsx → fumadocs/app/(home)/faq/FAQ.tsx

@@ -1,5 +1,5 @@
-import { SectionIntro } from "@/components/pages/landing/shared/Headings";
-import { Section } from "@/components/pages/landing/shared/Section";
+import { SectionIntro } from "@/components/Headings";
+import { Section } from "@/components/Section";
 import Link from "next/link";
 
 const faqs = [

fumadocs/components/pages/landing/features/FeatureCard.tsx → fumadocs/app/(home)/features/FeatureCard.tsx

@@ -16,10 +16,14 @@ export function FeatureCard(props: FeatureCardProps) {
 
   return (
     <div
-      className={`card relative flex w-[360px] max-w-full flex-col justify-between gap-1 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black ${props.thumbnail ? "row-span-2" : "row-span-1"}`}
+      className={`card border-fd-accent bg-fd-card relative flex w-[360px] max-w-full flex-col justify-between gap-1 overflow-hidden rounded-lg border ${props.thumbnail ? "row-span-2" : "row-span-1"}`}
     >
       {props.thumbnail && (
-        <div className={"thumbnail aspect-video w-full overflow-hidden"}>
+        <div
+          className={
+            "thumbnail before:content before:bg-linear-to-b before:to-fd-card aspect-video w-full overflow-hidden before:absolute before:block before:aspect-video before:w-full before:from-transparent"
+          }
+        >
           <Image
             className={"block w-full dark:hidden"}
             src={props.thumbnail.light}

fumadocs/components/pages/landing/features/Features.tsx → fumadocs/app/(home)/features/Features.tsx

@@ -11,20 +11,20 @@ import {
   BiLogoMarkdown,
   BiSolidWrench,
 } from "react-icons/bi";
-import { Section } from "@/components/pages/landing/shared/Section";
+import { Section } from "@/components/Section";
 import {
   FeatureCard,
   FeatureCardProps,
-} from "@/components/pages/landing/features/FeatureCard";
-import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
-import { SectionIntro } from "@/components/pages/landing/shared/Headings";
+} from "@/app/(home)/features/FeatureCard";
+import { FadeIn } from "@/components/FadeIn";
+import { SectionIntro } from "@/components/Headings";
 
-import worksOutOfTheBoxLight from "../../../../public/img/features/works_out_of_the_box_light.gif";
-import worksOutOfTheBoxDark from "../../../../public/img/features/works_out_of_the_box_dark.gif";
-import blockBasedDesignLight from "../../../../public/img/features/block_based_design_light.gif";
-import blockBasedDesignDark from "../../../../public/img/features/block_based_design_dark.gif";
-import collaborationLight from "../../../../public/img/features/collaboration_light.gif";
-import collaborationDark from "../../../../public/img/features/collaboration_dark.gif";
+import worksOutOfTheBoxLight from "@/public/img/features/works_out_of_the_box_light.gif";
+import worksOutOfTheBoxDark from "@/public/img/features/works_out_of_the_box_dark.gif";
+import blockBasedDesignLight from "@/public/img/features/block_based_design_light.gif";
+import blockBasedDesignDark from "@/public/img/features/block_based_design_dark.gif";
+import collaborationLight from "@/public/img/features/collaboration_light.gif";
+import collaborationDark from "@/public/img/features/collaboration_dark.gif";
 
 export const featuresCardData: FeatureCardProps[] = [
   {

fumadocs/components/pages/landing/hero/Demo.tsx → fumadocs/app/(home)/hero/Demo.tsx

@@ -1,42 +1,35 @@
+"use client";
+
 import dynamic from "next/dynamic";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 import tryHereImageDark from "@/public/img/assets/try.dark.svg";
 import tryHereImageLight from "@/public/img/assets/try.svg";
 
-function TryHereImageBase(props: { dark: boolean }) {
+function TryHereImage(props: { theme?: "light" | "dark" }) {
   return (
     <Image
-      src={props.dark ? tryHereImageDark : tryHereImageLight}
-      className={`relative bottom-24 left-10 z-30 float-right size-56 ${props.dark ? "hidden dark:block" : "block dark:hidden"}`}
+      src={props.theme === "dark" ? tryHereImageDark : tryHereImageLight}
+      className={`relative bottom-24 left-10 z-30 float-right size-56 ${props.theme === "dark" ? "hidden dark:block" : "block dark:hidden"}`}
       alt="Try it out"
     />
   );
 }
 
-function TryHereImage() {
-  return (
-    <>
-      <TryHereImageBase dark={false} />
-      <TryHereImageBase dark={true} />
-    </>
-  );
-}
+const DemoEditor = dynamic(() => import("@/app/(home)/hero/DemoEditor"), {
+  ssr: false,
+});
 
-const DemoEditor = dynamic(
-  () => import("@/components/pages/landing/hero/DemoEditor"),
-  {
-    ssr: false,
-  },
-);
+export function Demo() {
+  const { resolvedTheme } = useTheme();
 
-export function Demo(props: { theme?: "light" | "dark" }) {
   return (
     <div className="hero-demo relative h-[36rem] w-full shrink-0 grow-0 rounded-lg sm:block xl:w-[584px]">
       <div className="hero-glow demo-glow absolute z-10 h-full w-full" />
       <div className="relative z-20 h-full w-full rounded-lg bg-white dark:bg-[#202020]">
-        <DemoEditor theme={props.theme} />
+        <DemoEditor theme={resolvedTheme as "light" | "dark" | undefined} />
       </div>
-      <TryHereImage />
+      <TryHereImage theme={resolvedTheme as "light" | "dark" | undefined} />
     </div>
   );
 }

fumadocs/app/(home)/hero/Hero.tsx

@@ -0,0 +1,22 @@
+import { Section } from "@/components/Section";
+import { Text } from "@/app/(home)/hero/Text";
+import { Demo } from "@/app/(home)/hero/Demo";
+import { FadeIn } from "@/components/FadeIn";
+
+import "./styles.css";
+
+export function Hero() {
+  return (
+    <Section className="pb-36 pt-24 xl:pt-36">
+      <FadeIn
+        noVertical
+        className={
+          "z-20 flex w-full flex-col items-center justify-between gap-6 px-6 md:max-w-screen-md xl:max-w-[1440px] xl:flex-row"
+        }
+      >
+        <Text />
+        <Demo />
+      </FadeIn>
+    </Section>
+  );
+}

fumadocs/components/pages/landing/hero/Text.tsx → fumadocs/app/(home)/hero/Text.tsx

@@ -1,8 +1,5 @@
-import {
-  HeroText,
-  SectionSubtext,
-} from "@/components/pages/landing/shared/Headings";
-import CTAButton from "@/components/pages/landing/shared/CTAButton";
+import { HeroText, SectionSubtext } from "@/components/Headings";
+import CTAButton from "@/components/CTAButton";
 
 export function Text() {
   return (

fumadocs/app/(home)/layout.tsx

@@ -1,7 +1,13 @@
-import type { ReactNode } from 'react';
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { baseOptions } from '@/app/layout.config';
+import type { ReactNode } from "react";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/Footer";
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+  return (
+    <HomeLayout {...baseOptions}>
+      {children}
+      <Footer />
+    </HomeLayout>
+  );
 }

fumadocs/components/pages/landing/letter/Letter.tsx → fumadocs/app/(home)/letter/Letter.tsx

@@ -1,9 +1,9 @@
 import cn from "classnames";
-import CTAButton from "@/components/pages/landing/shared/CTAButton";
-import { Section } from "@/components/pages/landing/shared/Section";
-import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
-import { HeroText } from "@/components/pages/landing/shared/Headings";
-import gradients from "@/components/pages/landing/shared/gradients.module.css";
+import CTAButton from "@/components/CTAButton";
+import { Section } from "@/components/Section";
+import { FadeIn } from "@/components/FadeIn";
+import { HeroText } from "@/components/Headings";
+import gradients from "@/components/gradients.module.css";
 
 export function Letter() {
   return (

fumadocs/app/(home)/page.tsx

@@ -1,27 +1,30 @@
-import Link from "next/link";
+import { FadeIn } from "@/components/FadeIn";
+import { FAQ } from "./faq/FAQ";
+import { Community } from "./community/Community";
+import { Features } from "./features/Features";
+import { Hero } from "./hero/Hero";
+import { Letter } from "./letter/Letter";
 
-export default function HomePage() {
+export default function Home() {
   return (
-    <main className="flex flex-1 flex-col justify-center text-center">
-      <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
-      <p className="text-fd-muted-foreground">
-        You can open{" "}
-        <Link
-          href="/docs"
-          className="text-fd-foreground font-semibold underline">
-          /docs
-        </Link>{" "}
-        and see the documentation.
-      </p>
-      <p className="text-fd-muted-foreground">
-        You can open{" "}
-        <Link
-          href="/examples"
-          className="text-fd-foreground font-semibold underline">
-          /examples
-        </Link>{" "}
-        and see the examples.
-      </p>
+    <main className="relative">
+      <Hero />
+      <FadeIn noVertical>
+        <div className={"h-px w-full bg-gray-500 opacity-20"} />
+      </FadeIn>
+      <Features />
+      <FadeIn noVertical>
+        <div className={"section-border"} />
+      </FadeIn>
+      <Letter />
+      <FadeIn noVertical>
+        <div className={"section-border"} />
+      </FadeIn>
+      <Community />
+      <FadeIn noVertical>
+        <div className={"h-px w-full bg-gray-500 opacity-20"} />
+      </FadeIn>
+      <FAQ />
     </main>
   );
 }

fumadocs/app/(home)/styles.css

@@ -0,0 +1,8 @@
+.thumbnail:before {
+  content: "";
+  width: 100%;
+  aspect-ratio: 16/9;
+  display: block;
+  position: absolute;
+  background: linear-gradient(transparent 50%, var(--bg-color));
+}

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

@@ -5,7 +5,7 @@ import { notFound } from "next/navigation";
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
 }) {
-  return <DocPage {...props} source={source} baseUrl="/docs" />;
+  return <DocPage {...props} source={source} />;
 }
 
 export async function generateStaticParams() {