Content Collections: Fix remark image default config

fuma-nama · Dec 21, 2024 · 3550efc · 3550efc
1 parent bd0a140
commit 3550efc
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 36 deletions.
diff --git a/.changeset/wicked-kings-guess.md b/.changeset/wicked-kings-guess.md
@@ -0,0 +1,5 @@
+---
+'@fumadocs/content-collections': patch
+---
+
+Fix remark image default config
diff --git a/examples/content-collections/app/layout.tsx b/examples/content-collections/app/layout.tsx
@@ -9,7 +9,7 @@ const inter = Inter({
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={inter.className} suppressHydrationWarning>
       <body
         style={{
           display: 'flex',

diff --git a/examples/next-mdx/content/docs/test.mdx b/examples/next-mdx/content/docs/test.mdx
@@ -1,21 +1,24 @@
 ---
-title: Hello World
-description: Your first document
+title: Test
+description: A document to test Fumadocs
 ---
 
 Hey there!
 
-## Heading
+## Cards
 
 <Cards>
   <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
   <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
 </Cards>
 
-### Heading
+### CodeBlock
 
 ```js
 console.log('Hello World');
 ```
 
-#### Heading
+#### List
+
+- Hello
+- World
diff --git a/packages/content-collections/src/configuration.ts b/packages/content-collections/src/configuration.ts
@@ -17,6 +17,7 @@ import {
   type RemarkHeadingOptions,
   type RehypeCodeOptions,
   type StructuredData,
+  type RemarkImageOptions,
 } from 'fumadocs-core/mdx-plugins';
 import type { z as Zod } from 'zod';
 import {
@@ -39,6 +40,7 @@ export interface TransformOptions
 
   remarkHeadingOptions?: RemarkHeadingOptions | boolean;
   rehypeCodeOptions?: RehypeCodeOptions | boolean;
+  remarkImageOptions?: RemarkImageOptions | boolean;
 }
 
 /**
@@ -85,6 +87,7 @@ export async function transformMDX<D extends BaseDoc>(
     generateStructuredData = true,
     rehypeCodeOptions,
     remarkHeadingOptions,
+    remarkImageOptions,
     ...rest
   } = options;
 
@@ -109,7 +112,6 @@ export async function transformMDX<D extends BaseDoc>(
           rehypePlugins: resolvePlugins(
             (plugins) => [
               resolvePlugin(rehypeCode, rehypeCodeOptions ?? true),
-              [remarkImage, { useImport: false }],
               ...plugins,
             ],
             rest.rehypePlugins,
@@ -118,6 +120,9 @@ export async function transformMDX<D extends BaseDoc>(
             (plugins) => [
               remarkGfm,
               resolvePlugin(remarkHeading, remarkHeadingOptions ?? true),
+              resolvePlugin(remarkImage, remarkImageOptions, {
+                useImport: false,
+              }),
               ...plugins,
               generateStructuredData && remarkStructure,
               () => {

diff --git a/packages/content-collections/src/resolve-plugins.ts b/packages/content-collections/src/resolve-plugins.ts
@@ -21,8 +21,10 @@ export function resolvePlugin<Param>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- config type
   plugin: Plugin<[Param], any, any>,
   options: Param | boolean,
+  defaultOptions?: Param,
 ): Pluggable | false {
-  if (typeof options === 'boolean') return options ? plugin : false;
+  if (typeof options === 'boolean')
+    return options ? [plugin, defaultOptions] : false;
 
-  return [plugin, options];
+  return [plugin, { ...defaultOptions, ...options }];
 }
diff --git a/packages/mdx/src/loader-mdx.ts b/packages/mdx/src/loader-mdx.ts
@@ -1,12 +1,11 @@
-import path from 'node:path';
-import fs from 'node:fs/promises';
+import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
 import { parse } from 'node:querystring';
 import grayMatter from 'gray-matter';
 import { type LoaderContext } from 'webpack';
 import { type StructuredData } from 'fumadocs-core/mdx-plugins';
 import { getConfigHash, loadConfigCached } from '@/config/cached';
 import { buildMDX } from '@/utils/build-mdx';
-import { type TransformContext } from '@/config';
 import { getManifestEntryPath } from '@/map/manifest';
 import { formatError } from '@/utils/format-error';
 import { getGitTimestamp } from './utils/git-timestamp';
@@ -38,7 +37,7 @@ export interface MetaFile {
   };
 }
 
-function getQuery(query: string): {
+function parseQuery(query: string): {
   collection?: string;
   hash?: string;
 } {
@@ -71,10 +70,11 @@ export default async function loader(
   const matter = grayMatter(source);
 
   // notice that `resourceQuery` can be missing (e.g. on Turbopack)
-  const query = getQuery(this.resourceQuery);
-  const configHash = query.hash ?? (await getConfigHash(_ctx.configPath));
+  const {
+    hash: configHash = await getConfigHash(_ctx.configPath),
+    collection: collectionId,
+  } = parseQuery(this.resourceQuery);
   const config = await loadConfigCached(_ctx.configPath, configHash);
-  const collectionId = query.collection;
 
   let collection =
     collectionId !== undefined
@@ -87,28 +87,25 @@ export default async function loader(
 
   const mdxOptions = collection?.mdxOptions ?? config.defaultMdxOptions;
 
-  function getTransformContext(): TransformContext {
-    return {
-      async buildMDX(v, options = mdxOptions) {
-        const res = await buildMDX(
-          collectionId ?? 'global',
-          configHash,
-          v,
-          options,
-        );
-        return String(res.value);
-      },
-      source,
-      path: filePath,
-    };
-  }
-
   let frontmatter = matter.data;
   if (collection?.schema) {
-    const schema =
-      typeof collection.schema === 'function'
-        ? collection.schema(getTransformContext())
-        : collection.schema;
+    let schema = collection.schema;
+
+    if (typeof schema === 'function') {
+      schema = schema({
+        async buildMDX(v, options = mdxOptions) {
+          const res = await buildMDX(
+            collectionId ?? 'global',
+            configHash,
+            v,
+            options,
+          );
+          return String(res.value);
+        },
+        source,
+        path: filePath,
+      });
+    }
 
     const result = await schema.safeParseAsync(frontmatter);
     if (result.error) {