feat: DR-7288 Add Admonition

apps/docs/next.config.mjs

@@ -39,7 +39,9 @@ const ContentSecurityPolicy = `
     https://kit.fontawesome.com
     https://raw.githubusercontent.com
     https://hcaptcha.com
-    https://*.hcaptcha.com;
+    https://*.hcaptcha.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   style-src 'self' 'unsafe-inline'
     https://fonts.googleapis.com
@@ -51,8 +53,10 @@ const ContentSecurityPolicy = `
 
   font-src 'self' data:
     https://fonts.gstatic.com
-    https://vercel.live https://assets.vercel.com
-    https://ka-f.fontawesome.com;
+    https://vercel.live
+    https://assets.vercel.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   img-src 'self' data:
     https://cdn.sanity.io
@@ -77,6 +81,7 @@ const ContentSecurityPolicy = `
     https://vercel.live https://vercel.com data: blob:
     https://td.doubleclick.net
     https://raw.githubusercontent.com;
+
   connect-src 'self'
     https://api.github.com
     https://p2zxqf70.api.sanity.io
@@ -122,7 +127,10 @@ const ContentSecurityPolicy = `
     https://unpkg.com
     https://proxy.kapa.ai
     https://hcaptcha.com
-    https://*.hcaptcha.com;
+    https://*.hcaptcha.com
+    https://kit.fontawesome.com
+    https://ka-f.fontawesome.com
+    https://ka-p.fontawesome.com;
 
   media-src 'self'
     https://*.prisma.io
@@ -148,7 +156,6 @@ const ContentSecurityPolicy = `
     https://hcaptcha.com
     https://*.hcaptcha.com;
 
-
   child-src 'self'
     https://www.youtube.com
     https://youtube.com
@@ -202,7 +209,6 @@ const allowedDevOrigins = (
 
 /** @type {import('next').NextConfig} */
 const config = {
-
   async redirects() {
     return [
       {
@@ -216,10 +222,10 @@ const config = {
   async rewrites() {
     return [
       {
-        source: '/:path*.mdx',
-        destination: '/llms.mdx/:path*',
+        source: "/:path*.mdx",
+        destination: "/llms.mdx/:path*",
       },
-    ]
+    ];
   },
   basePath: "/docs",
   assetPrefix: "/docs-static",
@@ -241,41 +247,15 @@ const config = {
 };
 
 export default withSentryConfig(withMDX(config), {
-  // For all available options, see:
-  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
-
   org: "prisma-ch",
-
   project: "javascript-nextjs",
-
   authToken: process.env.SENTRY_AUTH_TOKEN,
   tunnelRoute: "/monitoring",
-
-  // Only print logs for uploading source maps in CI\
   silent: !process.env.CI,
-
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
   widenClientFileUpload: true,
-
-  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  // tunnelRoute: "/monitoring",
-
   webpack: {
-    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
     automaticVercelMonitors: true,
-
-    // Tree-shaking options for reducing bundle size
     treeshake: {
-      // Automatically tree-shake Sentry logger statements to reduce bundle size
       removeDebugLogging: true,
     },
   },

apps/docs/source.config.ts

@@ -1,7 +1,15 @@
 import remarkDirective from "remark-directive";
-import { remarkDirectiveAdmonition, remarkMdxFiles } from "fumadocs-core/mdx-plugins";
+import {
+  remarkDirectiveAdmonition,
+  remarkMdxFiles,
+} from "fumadocs-core/mdx-plugins";
 import { remarkImage } from "fumadocs-core/mdx-plugins";
-import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from "fumadocs-mdx/config";
+import {
+  defineConfig,
+  defineDocs,
+  frontmatterSchema,
+  metaSchema,
+} from "fumadocs-mdx/config";
 import lastModified from "fumadocs-mdx/plugins/last-modified";
 import { z } from "zod";
 import convert from "npm-to-yarn";
@@ -34,7 +42,7 @@ export const docsV6 = defineDocs({
   docs: {
     schema: frontmatterSchema.extend({
       image: z.string().optional(),
-      badge: z.enum(['early-access', 'deprecated', 'preview']).optional(),
+      badge: z.enum(["early-access", "deprecated", "preview"]).optional(),
       url: z.string().optional(),
       metaTitle: z.string().optional(),
       metaDescription: z.string().optional(),
@@ -54,7 +62,22 @@ export default defineConfig({
   mdxOptions: {
     remarkPlugins: [
       remarkDirective,
-      remarkDirectiveAdmonition,
+      [
+        remarkDirectiveAdmonition,
+        {
+          types: {
+            note: "info",
+            tip: "info",
+            info: "info",
+            warn: "warning",
+            warning: "warning",
+            danger: "error",
+            success: "success",
+            ppg: "ppg",
+            error: "error",
+          },
+        },
+      ],
       [remarkImage, { useImport: false }],
       remarkMdxFiles,
     ],

apps/docs/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Inter, Barlow } from "next/font/google";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import Script from "next/script";
+import { FontAwesomeScript as EclipseFA } from "@prisma-docs/eclipse";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -34,6 +35,9 @@ export default function Layout({ children }: { children: ReactNode }) {
       className={`${inter.variable} ${barlow.variable}`}
       suppressHydrationWarning
     >
+      <head>
+        <Script src={EclipseFA} crossOrigin="anonymous" async />
+      </head>
       <body className="flex flex-col min-h-screen">
         <Provider>{children}</Provider>
         <Script

apps/docs/src/mdx-components.tsx

@@ -29,6 +29,7 @@ import {
   TableCell,
   TableCaption,
   Input,
+  Admonition,
 } from "@prisma-docs/eclipse";
 
 function withDocsBasePathForImageSrc(src: unknown): unknown {
@@ -39,7 +40,9 @@ function withDocsBasePathForImageSrc(src: unknown): unknown {
 }
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
-  const mdxComponents = {
+  const pageContext = (components as any)?._pageContext;
+
+  return {
     ...(icons as unknown as MDXComponents),
     ...defaultMdxComponents,
     // Fumadocs tabs for manual usage (with items prop)
@@ -59,15 +62,12 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     APIPage,
     Youtube,
     img: (props: any) => (
-      <ImageZoom {...(props as any)} src={withDocsBasePathForImageSrc((props as any).src)} />
+      <ImageZoom
+        {...(props as any)}
+        src={withDocsBasePathForImageSrc((props as any).src)}
+      />
     ),
     input: (props: any) => <Input {...props} />,
-  };
-
-  const pageContext = (components as any)?._pageContext;
-
-  return {
-    ...mdxComponents,
     pre: ({ ref: _ref, ...props }) => (
       <CodeBlock {...props}>
         <Pre>{props.children}</Pre>
@@ -81,5 +81,29 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     th: ({ ref: _ref, ...props }) => <TableHead {...props} />,
     td: ({ ref: _ref, ...props }) => <TableCell {...props} />,
     caption: ({ ref: _ref, ...props }) => <TableCaption {...props} />,
+    // Override Fumadocs Callout components with Eclipse Alert for admonitions (:::ppg, :::error, :::success, :::warning)
+    CalloutTitle: ({ children }: any) => <>{children}</>,
+    CalloutDescription: ({ children }: any) => <>{children}</>,
+    CalloutContainer: ({ type, children, icon, ...props }: any) => {
+      const variantMap: Record<
+        string,
+        "ppg" | "error" | "success" | "warning"
+      > = {
+        ppg: "ppg",
+        error: "error",
+        success: "success",
+        warning: "warning",
+        info: "ppg",
+        note: "ppg",
+        tip: "success",
+        danger: "error",
+      };
+
+      return (
+        <Admonition variant={variantMap[type] || "ppg"} icon={icon} {...props}>
+          {children}
+        </Admonition>
+      );
+    },
   };
 }