docs: Website upgrade and cleanup

docs/.gitignore

@@ -1,45 +1,31 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# deps
 /node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
 
-# testing
-/coverage
+# generated content
+.source
 
-# next.js
+# test & build
+/coverage
 /.next/
 /out/
-
-# production
 /build
+*.tsbuildinfo
 
 # misc
 .DS_Store
 *.pem
-
-# debug
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# others
 .env*.local
-
-# vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
 next-env.d.ts
-
-# database
-*.db
-
 # Sentry Config File
 .env.sentry-build-plugin
+
 /content/examples/*/*
-/components/example/generated/
-/.source/
+/components/example/generated/

docs/app/(auth)/layout.tsx

@@ -0,0 +1,10 @@
+import { HomeLayout } from "@/components/fumadocs/layout/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <HomeLayout {...baseOptions()}>
+      <div className="md:pt-8">{children}</div>
+    </HomeLayout>
+  );
+}

docs/app/(auth)/signin/page.tsx

@@ -0,0 +1,18 @@
+import AuthenticationPage from "@/components/AuthenticationPage";
+import { getFullMetadata } from "@/lib/getFullMetadata";
+import { Suspense } from "react";
+
+export const metadata = getFullMetadata({
+  title: "Sign In",
+  path: "/signin",
+});
+
+// Suspense + imported AuthenticationPage because AuthenticationPage is a client component
+// https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
+export default function Page() {
+  return (
+    <Suspense>
+      <AuthenticationPage variant="email" />
+    </Suspense>
+  );
+}

docs/app/(auth)/signin/password/page.tsx

@@ -0,0 +1,17 @@
+import AuthenticationPage from "@/components/AuthenticationPage";
+import { Metadata } from "next";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Password Login",
+};
+
+// Suspense + imported AuthenticationPage because AuthenticationPage is a client component
+// https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
+export default function Page() {
+  return (
+    <Suspense>
+      <AuthenticationPage variant="password" />
+    </Suspense>
+  );
+}

docs/app/(auth)/signup/page.tsx

@@ -0,0 +1,18 @@
+import AuthenticationPage from "@/components/AuthenticationPage";
+import { getFullMetadata } from "@/lib/getFullMetadata";
+import { Suspense } from "react";
+
+export const metadata = getFullMetadata({
+  title: "Sign Up",
+  path: "/signup",
+});
+
+// Suspense + imported AuthenticationPage because AuthenticationPage is a client component
+// https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
+export default function Page() {
+  return (
+    <Suspense>
+      <AuthenticationPage variant="register" />
+    </Suspense>
+  );
+}

docs/app/(home)/community/Community.tsx

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

docs/app/(home)/community/Contributors.tsx

@@ -1,9 +1,9 @@
+import { FadeIn } from "@/components/FadeIn";
+import { SectionSubHeader } from "@/components/Headings";
 import Image from "next/image";
 import Link from "next/link";
 import { RiDiscordFill, RiGithubFill } from "react-icons/ri";
-import { SectionSubHeader } from "@/components/Headings";
-import { JoinButton } from "@/app/(home)/community/JoinButton";
-import { FadeIn } from "@/components/FadeIn";
+import { JoinButton } from "./JoinButton";
 
 // TODO: Use GitHub API
 function fetchContributors(): { username: string; avatarUrl: string }[] {

docs/app/(home)/community/Sponsors.tsx

@@ -1,9 +1,6 @@
-import {
-  SponsorCard,
-  SponsorCardProps,
-} from "@/app/(home)/community/SponsorCard";
 import { FadeIn } from "@/components/FadeIn";
 import { SectionSubHeader } from "@/components/Headings";
+import { SponsorCard, SponsorCardProps } from "./SponsorCard";
 
 import agree from "@/public/img/sponsors/agree.png";
 import atuin from "@/public/img/sponsors/atuin.png";

docs/app/(home)/error.tsx

@@ -0,0 +1,34 @@
+"use client"; // Error boundaries must be Client Components
+
+import * as Sentry from "@sentry/nextjs";
+import { DocsBody } from "fumadocs-ui/layouts/docs/page";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error, {
+      tags: { type: "react-render", source: "home" },
+    });
+  }, [error]);
+
+  return (
+    <div className="mx-auto max-w-3xl pt-8">
+      <DocsBody>
+        <h1>Whoops. What the blocks!?</h1>
+        <div>
+          We encountered an error trying to show this page. If this keeps
+          occuring, an issue can be filed on GitHub at{" "}
+          <a href="https://github.com/TypeCellOS/BlockNote/issues">
+            https://github.com/TypeCellOS/BlockNote/issues
+          </a>
+        </div>
+      </DocsBody>
+    </div>
+  );
+}

docs/app/(home)/faq/FAQ.tsx

@@ -27,8 +27,8 @@ const faqs = [
       <>
         100% of BlockNote is open source. We offer consultancy, support services
         and commercial licenses for specific XL packages to help sustain
-        BlockNote. Explore our <a href="/pricing">pricing page</a> for more
-        details.
+        BlockNote. Explore our <Link href="/pricing">pricing page</Link> for
+        more details.
       </>
     ),
   },

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

@@ -1,7 +1,7 @@
-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 { Section } from "@/components/Section";
+import { Demo } from "./Demo";
+import { Text } from "./Text";
 
 import "./styles.css";
 

docs/app/(home)/layout.tsx

@@ -1,32 +1,6 @@
-import type { ReactNode } from "react";
-import { HomeLayout } from "fumadocs-ui/layouts/home";
-import { baseOptions } from "@/app/layout.config";
-import { Footer } from "@/components/Footer";
-import * as Sentry from "@sentry/nextjs";
+import { HomeLayout } from "@/components/fumadocs/layout/home";
+import { baseOptions } from "@/lib/layout.shared";
 
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      <HomeLayout {...baseOptions}>
-        <Sentry.ErrorBoundary
-          fallback={
-            <div>
-              We encountered an error trying to show this page. Please report
-              this to us on GitHub at{" "}
-              <a href="https://github.com/TypeCellOS/BlockNote/issues">
-                https://github.com/TypeCellOS/BlockNote/issues
-              </a>
-            </div>
-          }
-          beforeCapture={(scope) => {
-            scope.setTag("type", "react-render");
-            scope.setTag("page", "home");
-          }}
-        >
-          {children}
-        </Sentry.ErrorBoundary>
-      </HomeLayout>
-      <Footer />
-    </>
-  );
+export default function Layout({ children }: LayoutProps<"/">) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
 }

docs/app/(home)/letter/Letter.tsx

@@ -3,7 +3,7 @@ import { FadeIn } from "@/components/FadeIn";
 import { HeroText } from "@/components/Headings";
 import { Section } from "@/components/Section";
 import gradients from "@/components/gradients.module.css";
-import cn from "classnames";
+import { cn } from "@/lib/fumadocs/cn";
 
 export function Letter() {
   return (

docs/app/[...slug]/error.tsx

@@ -0,0 +1,34 @@
+"use client"; // Error boundaries must be Client Components
+
+import * as Sentry from "@sentry/nextjs";
+import { DocsBody } from "fumadocs-ui/layouts/docs/page";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error, {
+      tags: { type: "react-render", source: "pages" },
+    });
+  }, [error]);
+
+  return (
+    <div className="mx-auto max-w-3xl pt-8">
+      <DocsBody>
+        <h1>Whoops. What the blocks!?</h1>
+        <div>
+          We encountered an error trying to show this page. If this keeps
+          occuring, an issue can be filed on GitHub at{" "}
+          <a href="https://github.com/TypeCellOS/BlockNote/issues">
+            https://github.com/TypeCellOS/BlockNote/issues
+          </a>
+        </div>
+      </DocsBody>
+    </div>
+  );
+}

docs/app/[...slug]/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from "@/components/fumadocs/layout/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/[...slug]">) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

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

@@ -0,0 +1,47 @@
+import { getFullMetadata } from "@/lib/getFullMetadata";
+import { getPageImage, source } from "@/lib/source/pages";
+import { getMDXComponents } from "@/mdx-components";
+import { DocsBody } from "fumadocs-ui/layouts/docs/page";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export default async function Page(props: PageProps<"/[...slug]">) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <div className="mx-auto max-w-3xl pt-8">
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            // this allows you to link to other pages with relative file paths
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(
+  props: PageProps<"/[...slug]">,
+): Promise<Metadata> {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return getFullMetadata({
+    title: page.data.title,
+    description: page.data.description,
+    openGraphImages: getPageImage(page).url,
+    path: page.url,
+  });
+}