fumadocs-ui 13.3.3 → 13.4.0

package/dist/mdx.d.ts

@@ -19,7 +19,7 @@ declare const defaultMdxComponents: {
     h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     table: typeof Table;
-    Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
+    Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
         title?: react.ReactNode;
         type?: "info" | "warn" | "error";
         icon?: react.ReactNode;

package/dist/og.d.ts

@@ -0,0 +1,22 @@
+import { ImageResponse } from 'next/og';
+import { ReactElement, ReactNode } from 'react';
+import { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
+
+interface GenerateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    primaryColor?: string;
+    primaryTextColor?: string;
+    site?: ReactNode;
+}
+declare function getImageMeta(baseUrl: string, slugs?: string[]): {
+    alt: string;
+    url: string;
+    width: number;
+    height: number;
+};
+declare function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse;
+declare function generate({ primaryColor, primaryTextColor, ...props }: GenerateProps): ReactElement;
+
+export { generate, generateOGImage, getImageMeta };

package/dist/og.js

@@ -0,0 +1,114 @@
+import "./chunk-MLKGABMK.js";
+
+// src/og.tsx
+import { ImageResponse } from "next/og";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getImageMeta(baseUrl, slugs = []) {
+  return {
+    alt: "Banner",
+    url: `/${[...baseUrl.split("/"), ...slugs, "og.png"].filter((v) => v.length > 0).join("/")}`,
+    width: 1200,
+    height: 630
+  };
+}
+function generateOGImage(options) {
+  const {
+    title,
+    description,
+    icon,
+    site,
+    primaryColor,
+    primaryTextColor,
+    ...rest
+  } = options;
+  return new ImageResponse(
+    generate({
+      title,
+      description,
+      icon,
+      site,
+      primaryTextColor,
+      primaryColor
+    }),
+    {
+      width: 1200,
+      height: 630,
+      ...rest
+    }
+  );
+}
+function generate({
+  primaryColor = "rgba(255,150,255,0.3)",
+  primaryTextColor = "rgb(255,150,255)",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        color: "white",
+        padding: "4rem",
+        backgroundColor: "#000000",
+        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent), linear-gradient(to top, #303030 2px, transparent 2px), linear-gradient(to right, #303030 2px, transparent 2px)`,
+        backgroundSize: "100% 100%, 40px 40px, 40px 40px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: "16px",
+              marginBottom: "12px",
+              color: primaryTextColor
+            },
+            children: [
+              props.icon,
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: "64px",
+                    fontWeight: 800
+                  },
+                  children: props.site
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              fontWeight: 800,
+              fontSize: "82px"
+            },
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              fontSize: "52px",
+              color: "rgba(240,240,240,0.8)"
+            },
+            children: props.description
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  generate,
+  generateOGImage,
+  getImageMeta
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "13.3.3",
+  "version": "13.4.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -51,6 +51,10 @@
     "./mdx": {
       "import": "./dist/mdx.js",
       "types": "./dist/mdx.d.ts"
+    },
+    "./og": {
+      "import": "./dist/og.js",
+      "types": "./dist/og.d.ts"
     }
   },
   "typesVersions": {
@@ -81,6 +85,9 @@
       ],
       "mdx": [
         "./dist/mdx.d.ts"
+      ],
+      "og": [
+        "./dist/og.d.ts"
       ]
     }
   },
@@ -103,7 +110,7 @@
     "react-medium-image-zoom": "^5.2.8",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2",
-    "fumadocs-core": "13.3.3"
+    "fumadocs-core": "13.4.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.24.0",