feat: use fumadocs for website (#1654)

Co-authored-by: Matthew Lipski <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>

Author: nperez0111

.vscode/settings.json

@@ -18,5 +18,8 @@
   "search.defaultViewMode": "tree",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[mdx]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

docs/.eslintrc.json

@@ -1,10 +1,5 @@
 {
-  "extends": "next/core-web-vitals",
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
   "rules": {
-    "import/extensions": 0,
-    "@next/next/no-img-element": "off"
-  },
-  "root": true
+    "import/extensions": 0
+  }
 }

docs/.gitignore

@@ -35,6 +35,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# database
+*.db
+
 # Sentry Config File
 .env.sentry-build-plugin
-*.db
+/content/examples/*/*
+/components/example/generated/
+/.source/

docs/DEVELOPMENT.md

@@ -1,21 +1,105 @@
-# BlockNote Docs
+# Website Development
 
-This is the code for the [BlockNote documentation website](https://www.blocknotejs.org).
+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.
 
-If you're looking to work on BlockNote itself, check the [`packages`](/packages/) folder.
+To get started with development of the website, you can follow these steps:
 
-## Getting Started
+1. Initialize the DB
 
-First, run `npm run build` in the repository root.
+If you haven't already, you can initialize the database with the following command:
 
-Next, run the development server:
+```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:
+
+```bash
+AUTH_SECRET=test
+# Github OAuth optionally
+AUTH_GITHUB_ID=test
+AUTH_GITHUB_SECRET=test
+```
+
+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`
+
+### Payments
+
+To test payments, you can set the following environment variables:
+
+```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:
+
+```
+https://0000-00-00-000-00.ngrok-free.app/api/auth/polar/webhooks
+```
+
+With this webhook pointing to your local server, you should be able to test payments.
+
+### Email sending
+
+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.
+
+To test email sending, you can set the following environment variables:
 
 ```bash
-npm run dev
+SMTP_HOST=
+SMTP_USER=
+SMTP_PASS=
+SMTP_PORT=
+SMTP_SECURE=false
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+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
+[email protected]
+SMTP_PASS=my-smtp-token
+SMTP_PORT=587
+SMTP_SECURE=false
+```
 
-## Merging
+# Contributing
 
-Open a pull request to the [BlockNote GitHub repo](https://github.com/TypeCellOS/BlockNote). Pull requests will automatically be deployed to a preview environment.
+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.

docs/README.md

@@ -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">

docs/components/pages/landing/community/Community.tsx renamed to docs/app/(home)/community/Community.tsx

@@ -1,9 +1,9 @@
-import { Link } from "nextra-theme-docs";
 import Image from "next/image";
-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 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";
 
 // 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"}
       />

docs/components/pages/landing/community/Contributors.tsx renamed to docs/app/(home)/community/Contributors.tsx

@@ -1,24 +1,20 @@
-import { Link } from "nextra-theme-docs";
-import { ComponentProps, FC } from "react";
+import Link from "next/link";
+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={

docs/components/pages/landing/community/JoinButton.tsx renamed to docs/app/(home)/community/JoinButton.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}