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/README.md

@@ -1,105 +1,47 @@
-# Website Development
+# docs2
 
-This is the code for the [BlockNote documentation website](https://www.blocknotejs.org). If you're looking to work on BlockNote itself, check the [`packages`](/packages/) folder.
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
 
-To get started with development of the website, you can follow these steps:
+It is a Next.js app with [Static Export](https://nextjs.org/docs/app/guides/static-exports) configured.
 
-1. Initialize the DB
-
-If you haven't already, you can initialize the database with the following command:
-
-```bash
-cd docs && pnpm run init-db
-```
-
-This will initialize an SQLite database at `./docs/sqlite.db`.
-
-2. Setup environment variables
-
-Copy the `.env.example` file to `.env.local` and set the environment variables.
-
-```bash
-cp .env.example .env.local
-```
-
-If you want to test logging in, or payments see more information below [in the environment variables section](#environment-variables).
-
-3. Start the development server from within the `./docs` directory.
-
-```bash
-pnpm run dev
-```
-
-This will start the development server on port 3000.
-
-## Environment Variables
-
-### Logging in
-
-To test logging in, you can set the following environment variables:
+Run development server:
 
 ```bash
-AUTH_SECRET=test
-# Github OAuth optionally
-AUTH_GITHUB_ID=test
-AUTH_GITHUB_SECRET=test
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
 ```
 
-Note: the GITHUB_ID and GITHUB_SECRET are optional, but if you want to test logging in with Github you'll need to set them. For local development, you'll need to set the callback URL to `http://localhost:3000/api/auth/callback/github`
+Open http://localhost:3000 with your browser to see the result.
 
-### Payments
+## Explore
 
-To test payments, you can set the following environment variables:
+In the project, you can see:
 
-```bash
-POLAR_ACCESS_TOKEN=test
-POLAR_WEBHOOK_SECRET=test
-```
-
-For testing payments, you'll need access to the polar sandbox which needs to be configured to point a webhook to your local server. This can be configured at: <https://sandbox.polar.sh/dashboard/blocknote/settings/webhooks>
-
-You'll need something like [ngrok](https://ngrok.com/) to expose your local server to the internet.
-
-```bash
-ngrok http http://localhost:3000
-```
-
-You'll need the webhook to point to ngrok like so:
+- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
+- `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
 
-```
-https://0000-00-00-000-00.ngrok-free.app/api/auth/polar/webhooks
-```
+| Route                     | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `app/(home)`              | The route group for your landing page and other pages. |
+| `app/docs`                | The documentation layout and pages.                    |
+| `app/api/search/route.ts` | The Route Handler for search.                          |
 
-With this webhook pointing to your local server, you should be able to test payments.
+### Fumadocs MDX
 
-### Email sending
+A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
 
-Note, this is not required, if email sending is not configured, the app will log the email it would send to the console. Often this is more convenient for development.
+Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
 
-To test email sending, you can set the following environment variables:
-
-```bash
-SMTP_HOST=
-SMTP_USER=
-SMTP_PASS=
-SMTP_PORT=
-SMTP_SECURE=false
-```
-
-When configured, you'll be able to send emails to the email address you've configured.
-
-To setup with protonmail, you'll need to go to <https://account.proton.me/u/0/mail/imap-smtp> and create a new SMTP submission token.
-
-You'll need to set the following environment variables:
-
-```bash
-SMTP_HOST=smtp.protonmail.com
-SMTP_USER=my.email@protonmail.com
-SMTP_PASS=my-smtp-token
-SMTP_PORT=587
-SMTP_SECURE=false
-```
+## Learn More
 
-# Contributing
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
 
-To submit your changes, open a pull request to the [BlockNote GitHub repo](https://github.com/TypeCellOS/BlockNote). Pull requests will automatically be deployed to a preview environment.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.dev) - learn about Fumadocs

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>;
 }