feat: DR-7744 Support page

apps/blog/src/components/search.tsx

@@ -22,11 +22,7 @@ import { SearchIcon } from "lucide-react";
 import { Badge, Spinner } from "@prisma/eclipse";
 import { BlogSearchResult } from "../lib/search-types";
 
-export function CustomSearchDialogIcon({
-  isLoading,
-}: {
-  isLoading: boolean;
-}) {
+export function CustomSearchDialogIcon({ isLoading }: { isLoading: boolean }) {
   return (
     <>
       {isLoading ? (
@@ -45,13 +41,12 @@ type SearchResultItemProps = Parameters<
 function isBlogSearchResult(value: unknown): value is BlogSearchResult {
   if (!value || typeof value !== "object") return false;
   const candidate = value as Partial<BlogSearchResult>;
-  return typeof candidate.url === "string" && typeof candidate.content === "string";
+  return (
+    typeof candidate.url === "string" && typeof candidate.content === "string"
+  );
 }
 
-function SearchResultItem({
-  item,
-  onClick,
-}: SearchResultItemProps): ReactNode {
+function SearchResultItem({ item, onClick }: SearchResultItemProps): ReactNode {
   if (!isBlogSearchResult(item)) return null;
   const post = item;
 
@@ -98,20 +93,20 @@ function SearchResultItem({
   );
 }
 
-
-
-
 export default function CustomSearchDialog(props: SharedProps) {
   const { search, setSearch, query } = useDocsSearch({
-    type: 'fetch',
-    api: withBlogBasePath('/api/search'),
+    type: "fetch",
+    api: withBlogBasePath("/api/search"),
     delayMs: 500,
   });
 
-
-
   return (
-    <SearchDialog search={search} onSearchChange={setSearch} isLoading={query.isLoading} {...props}>
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
       <SearchDialogOverlay />
       <SearchDialogContent>
         <SearchDialogHeader>
@@ -123,8 +118,7 @@ export default function CustomSearchDialog(props: SharedProps) {
           items={query.data !== "empty" ? query.data : null}
           Item={SearchResultItem}
         />
-        <SearchDialogFooter className="border-t border-fd-border p-2">
-        </SearchDialogFooter>
+        <SearchDialogFooter className="border-t border-fd-border p-2"></SearchDialogFooter>
       </SearchDialogContent>
     </SearchDialog>
   );

apps/site/.env.example

@@ -0,0 +1,13 @@
+# Mixedbread API Configuration
+# Required for the search functionality to work
+# Get your API key from: https://www.mixedbread.ai/
+MIXEDBREAD_API_KEY=your_mixedbread_api_key_here
+
+# Base URL for the site (optional, defaults based on environment)
+# NEXT_PUBLIC_PRISMA_URL=https://www.prisma.io
+
+# Vercel URL (automatically set in Vercel deployments)
+# VERCEL_URL=
+
+# Allowed development origins (optional, defaults to localhost,127.0.0.1,192.168.1.48)
+# ALLOWED_DEV_ORIGINS=localhost,127.0.0.1

apps/site/package.json

@@ -13,17 +13,22 @@
   },
   "dependencies": {
     "@base-ui/react": "catalog:",
-    "@prisma/eclipse": "workspace:^",
+    "@fumadocs/base-ui": "catalog:",
+    "@mixedbread/sdk": "catalog:",
     "@prisma-docs/ui": "workspace:*",
+    "@prisma/eclipse": "workspace:^",
     "cors": "^2.8.6",
+    "fumadocs-core": "catalog:",
+    "fumadocs-ui": "catalog:",
     "lucide-react": "catalog:",
     "next": "catalog:",
     "npm-to-yarn": "catalog:",
+    "posthog-js": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-tweet": "catalog:",
-    "posthog-js": "catalog:",
     "remark-directive": "catalog:",
+    "tailwind-merge": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {
@@ -32,11 +37,11 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "next-validate-link": "catalog:",
     "postcss": "catalog:",
     "tailwindcss": "catalog:",
     "tsx": "catalog:",
-    "typescript": "catalog:",
-    "babel-plugin-react-compiler": "catalog:"
+    "typescript": "catalog:"
   }
 }

apps/site/src/app/api/search/route.ts

@@ -1,8 +1,81 @@
-export async function GET() {
-  return Response.json(
-    {
-      error: "Search is not configured in the site host zone.",
-    },
-    { status: 404 },
-  );
+import { createMixedbreadSearchAPI } from "fumadocs-core/search/mixedbread";
+import Mixedbread from "@mixedbread/sdk";
+import { SiteSearchResult } from "@/components/support/search-types";
+import { NextResponse } from "next/server";
+
+export type GeneratedMetadata = {
+  title: string;
+  slug: string;
+  date: string;
+  authors: string[];
+  metaTitle: string;
+  metaDescription: string;
+  metaImagePath: string;
+  heroImagePath: string;
+  heroImageAlt: string;
+  tags: string[];
+  excerpt: string;
+};
+export const dynamic = "force-dynamic";
+
+const mixedbreadApiKey = process.env.MIXEDBREAD_API_KEY;
+
+if (!mixedbreadApiKey) {
+  console.error("MIXEDBREAD_API_KEY environment variable is missing");
 }
+
+let GET: ((request: Request) => Promise<Response>) | undefined;
+
+if (mixedbreadApiKey) {
+  try {
+    const client = new Mixedbread({ apiKey: mixedbreadApiKey });
+
+    const api = createMixedbreadSearchAPI({
+      client,
+      storeIdentifier: "site-search",
+      topK: 20,
+      transform: (results, _query) => {
+        try {
+          return results.flatMap((item) => {
+            const metadata =
+              item.generated_metadata as unknown as GeneratedMetadata;
+            const slug = (metadata?.slug ?? "").replace(/^\/+/, "");
+            const title = metadata?.metaTitle ?? metadata?.title ?? "Untitled";
+
+            const formattedUrl = slug ? `/${slug}` : "#";
+            const base = `${item.file_id}-${item.chunk_index}`;
+            const chunkResults: SiteSearchResult[] = [
+              {
+                id: `${base}-page`,
+                type: "page",
+                content: title,
+                url: formattedUrl,
+                description: metadata?.metaDescription ?? "",
+                heroImagePath: metadata?.heroImagePath ?? "",
+                tags: metadata?.tags ?? [],
+              },
+            ];
+            return chunkResults;
+          });
+        } catch (error) {
+          console.error("Error transforming search results:", error);
+          return [];
+        }
+      },
+    });
+    GET = api.GET;
+  } catch (error) {
+    console.error("Error initializing Mixedbread search API:", error);
+  }
+}
+
+if (!GET) {
+  GET = async () => {
+    console.error("Search API called but Mixedbread is not configured");
+    console.error("Please set MIXEDBREAD_API_KEY environment variable");
+    // Return empty array for fumadocs compatibility
+    return NextResponse.json([]);
+  };
+}
+
+export { GET };

apps/site/src/app/global.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "@prisma/eclipse/styles/globals.css";
+@import "fumadocs-ui/css/shadcn.css";
+@import "fumadocs-ui/css/preset.css";
 @import "@prisma-docs/ui/styles";
 
 :root {
@@ -39,51 +41,50 @@
 
 .newsletter-bg {
     background: linear-gradient(
-        59deg, 
-        color-mix(in srgb, var(--color-foreground-ppg) 30%, transparent) 6.53%, 
+        59deg,
+        color-mix(in srgb, var(--color-foreground-ppg) 30%, transparent) 6.53%,
         var(--color-background-default) 74.71%
-        )
+    );
 }
 
 @keyframes glitch-1 {
     0% {
-      clip-path: inset(20% 0 60% 0);
+        clip-path: inset(20% 0 60% 0);
     }
     20% {
-      clip-path: inset(10% 0 85% 0);
+        clip-path: inset(10% 0 85% 0);
     }
     40% {
-      clip-path: inset(40% 0 40% 0);
+        clip-path: inset(40% 0 40% 0);
     }
     60% {
-      clip-path: inset(80% 0 5% 0);
+        clip-path: inset(80% 0 5% 0);
     }
     80% {
-      clip-path: inset(50% 0 30% 0);
+        clip-path: inset(50% 0 30% 0);
     }
     100% {
-      clip-path: inset(25% 0 55% 0);
+        clip-path: inset(25% 0 55% 0);
     }
-  }
+}
 
 @keyframes glitch-2 {
     0% {
-      clip-path: inset(80% 0 5% 0);
+        clip-path: inset(80% 0 5% 0);
     }
     20% {
-      clip-path: inset(50% 0 30% 0);
+        clip-path: inset(50% 0 30% 0);
     }
     40% {
-      clip-path: inset(20% 0 60% 0);
+        clip-path: inset(20% 0 60% 0);
     }
     60% {
-      clip-path: inset(10% 0 85% 0);
+        clip-path: inset(10% 0 85% 0);
     }
     80% {
-      clip-path: inset(40% 0 40% 0);
+        clip-path: inset(40% 0 40% 0);
     }
     100% {
-      clip-path: inset(75% 0 15% 0);
+        clip-path: inset(75% 0 15% 0);
     }
 }
-

apps/site/src/app/layout.tsx

@@ -121,19 +121,14 @@ function baseOptions() {
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html
-      lang="en"
-      className={`${inter.variable}`}
-      suppressHydrationWarning
-    >
+    <html lang="en" className={`${inter.variable}`} suppressHydrationWarning>
       <head>
         <Script
           src="https://kit.fontawesome.com/6916e9db27.js"
           crossOrigin="anonymous"
         ></Script>
       </head>
       <body className="flex flex-col min-h-screen pt-24 relative">
-        <div className="bg-blog absolute inset-0 -z-1 overflow-hidden" />
         <Provider>
           <ThemeProvider defaultTheme="system" storageKey="theme">
             <WebNavigation