docs: Examples, footer, and remaining pages

fumadocs/.gitignore

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

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/app/docs/layout.tsx

@@ -1,12 +1,14 @@
 import { DocsLayout } from "fumadocs-ui/layouts/notebook";
 import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/Footer";
 import { source } from "@/lib/source/docs";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout tree={source.pageTree} {...baseOptions}>
       {children}
+      <Footer />
     </DocsLayout>
   );
 }

fumadocs/app/examples/layout.tsx

@@ -1,12 +1,14 @@
 import { DocsLayout } from "fumadocs-ui/layouts/notebook";
 import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/Footer";
 import { source } from "@/lib/source/examples";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout tree={source.pageTree} {...baseOptions}>
       {children}
+      <Footer />
     </DocsLayout>
   );
 }

fumadocs/app/layout.config.tsx

@@ -1,6 +1,8 @@
 import { AuthNavButton } from "@/components/AuthNavButton";
-import { ThemedImage } from "@/components/ThemedImage";
+import LogoLight from "@/public/img/logos/banner.svg";
+import LogoDark from "@/public/img/logos/banner.dark.svg";
 import type { DocsLayoutProps } from "fumadocs-ui/layouts/notebook";
+import Image from "next/image";
 import { FaBook, FaCode, FaDiscord, FaGithub, FaUser } from "react-icons/fa";
 
 /**
@@ -14,12 +16,15 @@ export const baseOptions: Partial<DocsLayoutProps> = {
   nav: {
     title: (
       <>
-        <ThemedImage
-          height={32}
-          width={170}
-          src="/img/logos/banner.svg"
-          darkImage={"/img/logos/banner.dark.svg"}
+        <Image
+          src={LogoLight}
           alt="BlockNote"
+          className="block w-32 dark:hidden"
+        />
+        <Image
+          src={LogoDark}
+          alt="BlockNote"
+          className="hidden w-32 dark:block"
         />
       </>
     ),
@@ -54,7 +59,7 @@ export const baseOptions: Partial<DocsLayoutProps> = {
     },
     {
       text: "About",
-      url: "/about",
+      url: "/pages/about",
       active: "url",
     },
     {

fumadocs/app/about/page.tsx → fumadocs/app/pages/[[...slug]]/page.tsx

@@ -3,9 +3,11 @@ import { getMDXComponents } from "@/util/mdx-components";
 import { DocsBody, DocsDescription, DocsTitle } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 
-export default async function Page() {
-  const page = source.getPage(["about"]);
-  console.log(source.getPageTree());
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const slug = (await props.params).slug || [];
+  const page = source.getPage(slug);
   if (!page) {
     notFound();
   }
@@ -28,8 +30,11 @@ export async function generateStaticParams() {
   return source.generateParams();
 }
 
-export async function generateMetadata() {
-  const page = source.getPage(["thanks"]);
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const slug = (await props.params).slug || [];
+  const page = source.getPage(slug);
   if (!page) {
     notFound();
   }

fumadocs/app/about/layout.tsx → fumadocs/app/pages/layout.tsx

@@ -1,7 +1,13 @@
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 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/app/pricing/layout.tsx

@@ -1,7 +1,13 @@
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 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/auth.ts

@@ -216,7 +216,7 @@ export const auth = betterAuth({
             // http://localhost:3000/api/auth/checkout/starter
           },
         ],
-        successUrl: "/thanks",
+        successUrl: "/pages/thanks",
       },
       // Incoming Webhooks handler will be installed at /polar/webhooks
       webhooks: {

fumadocs/components/CTAButton.tsx

@@ -9,7 +9,7 @@ export default function CTAButton(props: {
   children: ReactNode;
 }) {
   return (
-    <div className="button-glow-parent relative flex h-fit w-fit flex-wrap">
+    <div className="not-prose button-glow-parent relative flex h-fit w-fit flex-wrap">
       <Link
         className={`bg-fd-accent border-fd-border text-fd-foreground z-20 m-0 rounded-full border font-medium ${props.size === "small" ? "px-3 py-1.5 text-xs md:text-sm" : "px-4 py-2 text-base md:text-lg"}`}
         href={props.href}

fumadocs/components/Footer.tsx

@@ -1,10 +1,13 @@
+import LogoLight from "@/public/img/logos/banner.svg";
+import LogoDark from "@/public/img/logos/banner.dark.svg";
 import cn from "classnames";
+import Image from "next/image";
 import Link from "next/link";
 import type { ReactElement, ReactNode } from "react";
-// import { Logo } from "./Logo";
+
 function FooterLink({ href, children }: { href: string; children: ReactNode }) {
   const classes =
-    "text-sm text-[#666666] dark:text-[#888888] no-underline betterhover:hover:text-gray-700 betterhover:hover:dark:text-white transition";
+    "text-sm text-[#666666] dark:text-[#888888] no-underline hover:text-gray-700 hover:dark:text-white transition";
   if (href.startsWith("http")) {
     return (
       <a className={classes} href={href}>
@@ -44,14 +47,14 @@ const navigation = {
     },
   ],
   collaborate: () => [
-    { name: "Partner with us", href: `/about#partner-with-us` },
+    { name: "Partner with us", href: `/pages/about#partner-with-us` },
     {
       name: "Sponsorships",
-      href: `/about#sponsorships`,
+      href: `/pages/about#sponsorships`,
     },
     {
       name: "Contribute",
-      href: `/about#contribute`,
+      href: `/pages/about#contribute`,
     },
   ],
 };
@@ -66,7 +69,16 @@ export function FooterContent() {
         <div className="xl:grid xl:grid-cols-3 xl:gap-16">
           <div className="">
             {/* <FooterHeader>Subscribe to our newsletter</FooterHeader> */}
-            {/* <Logo /> */}
+            <Image
+              src={LogoLight}
+              alt="BlockNote"
+              className="block w-64 dark:hidden"
+            />
+            <Image
+              src={LogoDark}
+              alt="BlockNote"
+              className="hidden w-64 dark:block"
+            />
             <p className="mt-4 text-sm text-gray-600 dark:text-[#888888]">
               BlockNote is an extensible React rich text editor with support for
               block-based editing, collaboration and comes with ready-to-use
@@ -110,12 +122,12 @@ export function FooterContent() {
                 <FooterHeader>Legal</FooterHeader>
                 <ul className="ml-0 mt-4 list-none space-y-1.5">
                   <li key={"terms-and-conditions"}>
-                    <FooterLink href={"/legal/terms-and-conditions"}>
+                    <FooterLink href={"/pages/terms-and-conditions"}>
                       Terms & Conditions
                     </FooterLink>
                   </li>
                   <li key={"privacy-policy"}>
-                    <FooterLink href={"/legal/privacy-policy"}>
+                    <FooterLink href={"/pages/privacy-policy"}>
                       Privacy Policy
                     </FooterLink>
                   </li>
@@ -140,7 +152,7 @@ export function FooterContent() {
 
 export function Footer({ menu }: { menu?: boolean }): ReactElement {
   return (
-    <footer className="relative bg-[#FAFAFA] pb-[env(safe-area-inset-bottom)] dark:bg-[#111111]">
+    <footer className="relative mt-10 bg-[#FAFAFA] pb-[env(safe-area-inset-bottom)] dark:bg-[#111111]">
       {/* <div className="pointer-events-none absolute top-0 h-12 w-full -translate-y-full bg-gradient-to-t from-[#FAFAFA] to-transparent dark:from-black" /> */}
       {/* <div
         className={cn(

fumadocs/components/Logo.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import LogoLight from "@/public/img/logos/banner.svg";
+import LogoDark from "@/public/img/logos/banner.dark.svg";
+import { useTheme } from "next-themes";
+
+export default function Logo() {
+  const { resolvedTheme } = useTheme();
+  return resolvedTheme === "dark" ? LogoDark : LogoLight;
+}

fumadocs/components/ThemedExample.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { BlockNoteContext } from "@blocknote/react";
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
+export default function ThemedExample(props: { name: string }) {
+  const Component = dynamic(
+    () => import("./example/generated/components/" + props.name + "/index"),
+    { ssr: false },
+  );
+
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <BlockNoteContext.Provider
+      value={{
+        colorSchemePreference: resolvedTheme === "dark" ? "dark" : "light",
+      }}
+    >
+      <Component />
+    </BlockNoteContext.Provider>
+  );
+}