Merge pull request #376 from nocodb/fuma-sync

Author: DarkPhoenix2704

.eslintrc.json

@@ -1,7 +1,7 @@
 import {blogSource} from "@/lib/source";
 import Link from "next/link";
 import {notFound} from "next/navigation";
-import {metadataImage} from "@/lib/metadata";
+import {getPageImage} from "@/lib/metadata";
 import {calculateReadingTime} from "@/lib/timeToRead";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import CustomToc from "@/components/blog/CustomToc";
@@ -22,14 +22,26 @@ export async function generateMetadata(props: {
     const page = blogSource.getPage([params.slug]);
     if (!page) notFound();
 
+    const imageUrl = getPageImage(page).url;
 
-    return metadataImage.withImage(page.slugs, {
+    return {
         title: page.data.title,
         description: page.data.description,
+        openGraph: {
+            title: page.data.title,
+            description: page.data.description,
+            images: [imageUrl],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: page.data.title,
+            description: page.data.description,
+            images: [imageUrl],
+        },
         icons: {
             icon: '/img/favicon.png',
         }
-    });
+    };
 }
 
 export default async function page(props: {

app/blog/[slug]/page.tsx

@@ -1,14 +1,36 @@
-import {generateOGImage} from 'fumadocs-ui/og';
-import {metadataImage} from '@/lib/metadata';
+import { getPageImage, blogSource } from '@/lib/metadata';
+import { notFound } from 'next/navigation';
+import { ImageResponse } from 'next/og';
+import { generate as DefaultImage } from 'fumadocs-ui/og';
 
-export const GET = metadataImage.createAPI((page) => {
-    return generateOGImage({
-        title: page.data.title,
-        primaryColor: '#3366ff',
-        description: page.data.description,
-    });
-});
+export const revalidate = false;
+
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ slug: string[] }> }
+) {
+  const { slug } = await params;
+  const page = blogSource.getPage(slug.slice(0, -1));
+  
+  if (!page) notFound();
+
+  return new ImageResponse(
+    (
+      <DefaultImage
+        title={page.data.title}
+        description={page.data.description}
+        primaryColor="#3366ff"
+      />
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}
 
 export function generateStaticParams() {
-    return metadataImage.generateParams();
+  return blogSource.getPages().map((page) => ({
+    slug: getPageImage(page).segments,
+  }));
 }

app/docs-og/[...slug]/route.tsx

@@ -7,7 +7,7 @@ import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
 
 import { TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
 import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
-import { getPageTreePeers } from 'fumadocs-core/server';
+import { getPageTreePeers } from 'fumadocs-core/page-tree';
 import { Cards, Card } from 'fumadocs-ui/components/card';
 import TOCMobile from '@/components/layout/TOCMobile';
 import { TOCProvider } from 'fumadocs-ui/components/layout/toc';

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

@@ -7,7 +7,7 @@ import { AnchorProvider } from 'fumadocs-core/toc';
 import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
 import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
 import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
-import { getPageTreePeers } from 'fumadocs-core/server';
+import { getPageTreePeers } from 'fumadocs-core/page-tree';
 import { Cards, Card } from 'fumadocs-ui/components/card';
 import TOCMobile from '@/components/layout/TOCMobile';
 

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

@@ -7,7 +7,7 @@ import { AnchorProvider } from 'fumadocs-core/toc';
 import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
 import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
 import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
-import { getPageTreePeers } from 'fumadocs-core/server';
+import { getPageTreePeers } from 'fumadocs-core/page-tree';
 import { Cards, Card } from 'fumadocs-ui/components/card';
 import TOCMobile from '@/components/layout/TOCMobile';
 

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

@@ -7,7 +7,7 @@ import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
 import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
 import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
 import TOCMobile from '@/components/layout/TOCMobile';
-import { getPageTreePeers } from 'fumadocs-core/server';
+import { getPageTreePeers } from 'fumadocs-core/page-tree';
 import { Cards, Card } from 'fumadocs-ui/components/card';
 
 export default async function Page(props: {

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

@@ -7,7 +7,7 @@ import { AnchorProvider } from 'fumadocs-core/toc';
 import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
 import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
 import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
-import { getPageTreePeers } from 'fumadocs-core/server';
+import { getPageTreePeers } from 'fumadocs-core/page-tree';
 import { Cards, Card } from 'fumadocs-ui/components/card';
 import TOCMobile from '@/components/layout/TOCMobile';
 

app/docs/self-hosting/[[...slug]]/page.tsx

@@ -260,7 +260,6 @@
     --font-size-h2: 40px;
     --font-size-h3: 24px;
 
-
     --measurements-radius-x-small: var(--spacing-02);
     --measurements-radius-small: var(--spacing-03);
     --measurements-radius-medium: var(--spacing-04);
@@ -294,15 +293,13 @@
     --font-weight-bold: 700;
     --font-weight-black: 800;
 
-
     --shadow-default: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
     --shadow-hover: 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
     --shadow-selected: 0px 0px 0px 2px var(--color-ant-primary-color-outline);
     --shadow-selected-ai: 0px 0px 0px 2px rgba(125, 38, 205, 0.24);
     --shadow-error: 0px 0px 0px 2px var(--color-ant-error-color-outline);
     --shadow-focus: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
     --shadow-nc-sm: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
-
 }
 
 @theme inline {
@@ -464,7 +461,6 @@
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
 
-
     --shadow-sm: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
     --shadow-default: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
     --shadow-hover: 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
@@ -492,7 +488,6 @@
     --color-border: var(--color-nc-border-grey-medium);
     --color-input: var(--color-nc-content-grey-subtle);
 
-
     --color-ant-primary-hover: #6e7ef5;
     --color-ant-primary-active: #2f36c2;
     --color-ant-primary-outline: #4351e833;
@@ -509,7 +504,6 @@
     --color-fd-primary: var(--color-nc-content-grey-emphasis);
     --color-fd-accent: var(--color-nc-background-grey-medium);
 
-
     --color-fd-background: var(--color-grey-50);
     --color-fd-foreground: var(--color-grey-900);
     --color-fd-muted: var(--color-grey-100);
@@ -575,7 +569,6 @@
     }
 }
 
-
 [id="nd-home-layout"] {
     padding-top: 18px !important;
 }
@@ -584,12 +577,10 @@
     inset-inline-end: 0 !important;
 }
 
-
 .grecaptcha-badge {
     @apply hidden;
 }
 
-
 .nc-docs-layout {
     [role="tablist"] {
         button:is([role="tab"]):is([aria-selected="true"]) {

app/global.css

@@ -4,7 +4,7 @@ import type {ReactNode} from 'react';
 import ClientAnalytics from "@/components/Analytics";
 import NcSearchDialog from "@/components/layout/Search";
 import {CustomThemeProvider} from "@/app/ThemeProvider";
-import {RootProvider} from "fumadocs-ui/provider";
+import {RootProvider} from "fumadocs-ui/provider/next";
 import { Toaster } from "sonner";
 
 const inter = Inter({