fumadocs-core 13.2.0 → 13.2.2

package/dist/{chunk-YKIM647L.js → chunk-UQV4A7HQ.js}

@@ -20,6 +20,12 @@ function remarkHeading({
   return (root, file) => {
     const toc = [];
     slugger.reset();
+    if (file.data.frontmatter) {
+      const frontmatter = file.data.frontmatter;
+      if (frontmatter._openapi?.toc) {
+        toc.push(...frontmatter._openapi.toc);
+      }
+    }
     visit(root, "heading", (heading) => {
       heading.data ||= {};
       heading.data.hProperties ||= {};

package/dist/mdx-plugins/index.d.ts

@@ -43,17 +43,41 @@ type RehypeCodeOptions = RehypeShikiOptions & {
 declare function rehypeCode(this: Processor, options?: Partial<RehypeCodeOptions>): Transformer<Root, Root>;
 
 interface RemarkImageOptions {
+    /**
+     * Directory to resolve absolute image paths
+     */
+    publicDir?: string;
     /**
      * Preferred placeholder type
      *
      * @defaultValue 'blur'
      */
     placeholder?: 'blur' | 'none';
+    /**
+     * Import images in the file, and let bundlers handle it.
+     *
+     * ```tsx
+     * import MyImage from "./public/img.png";
+     *
+     * <img src={MyImage} />
+     * ```
+     *
+     * When disabled, `placeholder` will be ignored.
+     *
+     * @defaultValue true
+     */
+    useImport?: boolean;
+    /**
+     * Fetch image size of external URLs
+     *
+     * @defaultValue true
+     */
+    external?: boolean;
 }
 /**
- * Turn images into static imports
+ * Turn images into Next.js Image compatible usage.
  */
-declare function remarkImage({ placeholder, }?: RemarkImageOptions): Transformer<Root$1, Root$1>;
+declare function remarkImage({ placeholder, external, useImport, publicDir, }?: RemarkImageOptions): Transformer<Root$1, Root$1>;
 
 declare module 'mdast' {
     interface HeadingData extends Data {

package/dist/mdx-plugins/index.js

@@ -1,7 +1,7 @@
 import {
   flattenNode,
   remarkHeading
-} from "../chunk-YKIM647L.js";
+} from "../chunk-UQV4A7HQ.js";
 import {
   slash
 } from "../chunk-UWEEHUJV.js";
@@ -270,68 +270,104 @@ function transformerTab() {
 }
 
 // src/mdx-plugins/remark-image.ts
-import { existsSync } from "fs";
 import path from "path";
 import { visit } from "unist-util-visit";
+import sizeOf from "image-size";
 var VALID_BLUR_EXT = [".jpeg", ".png", ".webp", ".avif", ".jpg"];
 var EXTERNAL_URL_REGEX = /^https?:\/\//;
-var PUBLIC_DIR = path.join(process.cwd(), "public");
 function remarkImage({
-  placeholder = "blur"
+  placeholder = "blur",
+  external = true,
+  useImport = true,
+  publicDir = path.join(process.cwd(), "public")
 } = {}) {
-  return (tree, _file, done) => {
+  return async (tree) => {
     const importsToInject = [];
+    const promises = [];
     visit(tree, "image", (node) => {
-      let url = decodeURI(node.url);
-      if (!url || EXTERNAL_URL_REGEX.test(url)) {
-        return;
-      }
-      if (url.startsWith("/")) {
-        const urlPath = path.join(PUBLIC_DIR, url);
-        if (!existsSync(urlPath)) {
-          return;
-        }
-        url = slash(urlPath);
-      }
-      const variableName = `__img${importsToInject.length.toString()}`;
-      const hasBlur = placeholder === "blur" && VALID_BLUR_EXT.some((ext) => url.endsWith(ext));
-      importsToInject.push({ variableName, importPath: url });
-      Object.assign(node, {
-        type: "mdxJsxFlowElement",
-        name: "img",
-        attributes: [
-          {
-            type: "mdxJsxAttribute",
-            name: "alt",
-            value: node.alt ?? "image"
-          },
-          hasBlur && {
-            type: "mdxJsxAttribute",
-            name: "placeholder",
-            value: "blur"
-          },
-          {
-            type: "mdxJsxAttribute",
-            name: "src",
-            value: {
-              type: "mdxJsxAttributeValueExpression",
-              value: variableName,
-              data: {
-                estree: {
-                  body: [
-                    {
-                      type: "ExpressionStatement",
-                      expression: { type: "Identifier", name: variableName }
-                    }
-                  ]
+      const src = decodeURI(node.url);
+      if (!src) return;
+      const isExternal = EXTERNAL_URL_REGEX.test(src);
+      if (isExternal && external || !useImport) {
+        promises.push(
+          getImageSize(src, publicDir).then((size) => {
+            if (!size.width || !size.height) return;
+            Object.assign(node, {
+              type: "mdxJsxFlowElement",
+              name: "img",
+              attributes: [
+                {
+                  type: "mdxJsxAttribute",
+                  name: "alt",
+                  value: node.alt ?? "image"
+                },
+                {
+                  type: "mdxJsxAttribute",
+                  name: "src",
+                  value: src
+                },
+                {
+                  type: "mdxJsxAttribute",
+                  name: "width",
+                  value: size.width.toString()
+                },
+                {
+                  type: "mdxJsxAttribute",
+                  name: "height",
+                  value: size.height.toString()
+                }
+              ]
+            });
+          })
+        );
+      } else if (!isExternal) {
+        const variableName = `__img${importsToInject.length.toString()}`;
+        const hasBlur = placeholder === "blur" && VALID_BLUR_EXT.some((ext) => src.endsWith(ext));
+        importsToInject.push({
+          variableName,
+          importPath: slash(
+            // with imports, relative paths don't have to be absolute
+            src.startsWith("/") ? path.join(publicDir, src) : src
+          )
+        });
+        Object.assign(node, {
+          type: "mdxJsxFlowElement",
+          name: "img",
+          attributes: [
+            {
+              type: "mdxJsxAttribute",
+              name: "alt",
+              value: node.alt ?? "image"
+            },
+            hasBlur && {
+              type: "mdxJsxAttribute",
+              name: "placeholder",
+              value: "blur"
+            },
+            {
+              type: "mdxJsxAttribute",
+              name: "src",
+              value: {
+                type: "mdxJsxAttributeValueExpression",
+                value: variableName,
+                data: {
+                  estree: {
+                    body: [
+                      {
+                        type: "ExpressionStatement",
+                        expression: { type: "Identifier", name: variableName }
+                      }
+                    ]
+                  }
                 }
               }
             }
-          }
-        ].filter(Boolean)
-      });
+          ].filter(Boolean)
+        });
+      }
     });
-    if (importsToInject.length) {
+    await Promise.all(promises);
+    if (importsToInject.length > 0) {
       const imports = importsToInject.map(
         ({ variableName, importPath }) => ({
           type: "mdxjsEsm",
@@ -355,9 +391,20 @@ function remarkImage({
       );
       tree.children.unshift(...imports);
     }
-    done();
   };
 }
+function resolveSrc(src, dir) {
+  return src.startsWith("/") || !path.isAbsolute(src) ? path.join(dir, src) : src;
+}
+async function getImageSize(src, dir) {
+  if (EXTERNAL_URL_REGEX.test(src)) {
+    const res = await fetch(src);
+    return sizeOf(
+      await res.arrayBuffer().then((buffer) => new Uint8Array(buffer))
+    );
+  }
+  return sizeOf(resolveSrc(src, dir));
+}
 
 // src/mdx-plugins/remark-structure.ts
 import Slugger from "github-slugger";
@@ -373,6 +420,13 @@ function remarkStructure({
     slugger.reset();
     const data = { contents: [], headings: [] };
     let lastHeading = "";
+    if (file.data.frontmatter) {
+      const frontmatter = file.data.frontmatter;
+      if (frontmatter._openapi?.structuredData) {
+        data.headings.push(...frontmatter._openapi.structuredData.headings);
+        data.contents.push(...frontmatter._openapi.structuredData.contents);
+      }
+    }
     visit2(node, types, (element) => {
       if (element.type === "root") return;
       const content = flattenNode(element).trim();

package/dist/server/index.js

@@ -1,6 +1,6 @@
 import {
   remarkHeading
-} from "../chunk-YKIM647L.js";
+} from "../chunk-UQV4A7HQ.js";
 import "../chunk-MLKGABMK.js";
 
 // src/server/get-toc.ts

package/dist/toc.js

@@ -36,12 +36,14 @@ function useAnchorObserver(watch) {
           return f ?? watch[0];
         });
       },
-      { rootMargin: `-100px 0% -75% 0%`, threshold: 1 }
+      { rootMargin: `-80px 0% -78% 0%`, threshold: 1 }
     );
     const scroll = () => {
       const element = document.scrollingElement;
       if (!element) return;
-      if (element.scrollTop >= // assume you have a 10px margin
+      if (element.scrollTop === 0) {
+        setActiveAnchor(watch.at(0));
+      } else if (element.scrollTop >= // assume you have a 10px margin
       element.scrollHeight - element.clientHeight - 10) {
         setActiveAnchor(watch.at(-1));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "13.2.0",
+  "version": "13.2.2",
   "description": "The library for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -120,10 +120,11 @@
   ],
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@shikijs/rehype": "^1.11.1",
-    "@shikijs/transformers": "^1.11.1",
+    "@shikijs/rehype": "^1.12.1",
+    "@shikijs/transformers": "^1.12.1",
     "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
+    "image-size": "^1.1.1",
     "negotiator": "^0.6.3",
     "npm-to-yarn": "^2.2.1",
     "react-remove-scroll": "^2.5.10",
@@ -131,7 +132,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^1.11.1",
+    "shiki": "^1.12.1",
     "swr": "^2.2.5",
     "unist-util-visit": "^5.0.0"
   },