docs: Fumadocs migration

examples/07-collaboration/01-partykit/package.json

@@ -18,12 +18,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.15"
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/02-liveblocks/package.json

@@ -22,12 +22,12 @@
     "@liveblocks/react-blocknote": "^2.23.1",
     "@liveblocks/react-tiptap": "^2.23.1",
     "@liveblocks/react-ui": "^2.23.1",
-    "yjs": "^13.6.15"
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/03-y-sweet/package.json

@@ -17,12 +17,13 @@
     "@blocknote/shadcn": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@y-sweet/react": "^0.6.3"
+    "@y-sweet/react": "^0.6.3",
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/04-comments/package.json

@@ -18,12 +18,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "@y-sweet/react": "^0.6.3",
-    "@mantine/core": "^7.10.1"
+    "@mantine/core": "^7.10.1",
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/05-comments-with-sidebar/package.json

@@ -18,12 +18,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "@y-sweet/react": "^0.6.3",
-    "@mantine/core": "^7.10.1"
+    "@mantine/core": "^7.10.1",
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/06-ghost-writer/package.json

@@ -18,12 +18,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.15"
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/07-collaboration/07-forking/package.json

@@ -18,12 +18,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.15"
+    "yjs": "13.6.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

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

@@ -1,3 +1,4 @@
+import ThemedImage from "@/components/ThemedImage";
 import Image from "next/image";
 
 export type SponsorCardProps = {
@@ -14,19 +15,13 @@ 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"}
-        src={props.logo.light}
+      <ThemedImage
+        className={"h-1/3 w-3/5 object-contain"}
+        src={{ light: props.logo.light, dark: props.logo.dark }}
         alt={props.name}
       />
-      <Image
-        className={"hidden h-1/3 w-3/5 object-contain dark:block"}
-        src={props.logo.dark}
-        alt={props.name}
-      />
-
       {props.tagline && (
         <div className={"absolute bottom-[10%] text-xs italic md:text-sm"}>
           {props.tagline}

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

@@ -1,3 +1,4 @@
+import ThemedImage from "@/components/ThemedImage";
 import Image from "next/image";
 import { IconType } from "react-icons";
 
@@ -16,18 +17,17 @@ 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"}>
-          <Image
-            className={"block w-full dark:hidden"}
-            src={props.thumbnail.light}
-            alt={props.title}
-          />
-          <Image
-            className={"hidden w-full dark:block"}
-            src={props.thumbnail.dark}
+        <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"
+          }
+        >
+          <ThemedImage
+            className={"w-full"}
+            src={{ light: props.thumbnail.light, dark: props.thumbnail.dark }}
             alt={props.title}
           />
         </div>

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/app/(home)/hero/Demo.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import ThemedImage from "@/components/ThemedImage";
+import tryHereImageDark from "@/public/img/assets/try.dark.svg";
+import tryHereImageLight from "@/public/img/assets/try.svg";
+
+function TryHereImage() {
+  return (
+    <ThemedImage
+      src={{ light: tryHereImageLight, dark: tryHereImageDark }}
+      className="relative bottom-24 left-10 z-30 float-right size-56"
+      alt="Try it out"
+    />
+  );
+}
+
+const DemoEditor = dynamic(() => import("@/app/(home)/hero/DemoEditor"), {
+  ssr: false,
+});
+
+export function Demo() {
+  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 />
+      </div>
+      <TryHereImage />
+    </div>
+  );
+}