chore: add new ImageWrapper component

content/docs/index.zh.mdx

@@ -244,6 +244,10 @@ export const source = loader({
 
 </Accordions>
 
+## 视频教程
+
+<YoutubeVideo url="https://www.youtube.com/embed/BPnK-YbISHQ?si=TH_tI3e4MCgMHzGr" />
+
 ## 了解更多
 
-刚来这里？别担心，我们欢迎您的问题。 
+刚来这里？别担心，我们欢迎您的问题。

content/docs/markdown.mdx

@@ -337,6 +337,8 @@ Images are automatically optimized for `next/image`.
 ![Image](/image.png)
 ```
 
+![Image](/images/docs/notebook.png)
+
 ## Optional
 
 Some optional plugins you can enable.

content/docs/markdown.zh.mdx

@@ -246,7 +246,7 @@ console.log('Hello World');
 ```
 ````
 
-### 高亮行 
+### 高亮行
 
 ````md
 ```tsx
@@ -335,6 +335,8 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ![Image](/image.png)
 ```
 
+![Image](/images/docs/notebook.png)
+
 ## 可选功能
 
 一些您可以启用的可选插件。

src/components/docs/image-wrapper.tsx

@@ -0,0 +1,28 @@
+import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
+import type { ComponentProps, FC } from 'react';
+
+interface ImageWrapperProps extends ComponentProps<'img'> {
+  src: string;
+  alt?: string;
+}
+
+export const ImageWrapper = ({ src, alt }: ImageWrapperProps) => {
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <ImageZoom
+      src={src}
+      alt={alt || 'image'}
+      width={1400}
+      height={787}
+      style={{
+        width: '100%',
+        height: 'auto',
+        objectFit: 'contain',
+      }}
+      priority
+    />
+  );
+};

src/components/shared/custom-mdx-content.tsx

@@ -1,10 +1,10 @@
+import { ImageWrapper } from '@/components/docs/image-wrapper';
 import { Wrapper } from '@/components/docs/wrapper';
 import { YoutubeVideo } from '@/components/docs/youtube-video';
 import { MDXContent } from '@content-collections/mdx/react';
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import { Callout } from 'fumadocs-ui/components/callout';
 import { File, Files, Folder } from 'fumadocs-ui/components/files';
-import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { TypeTable } from 'fumadocs-ui/components/type-table';
@@ -52,26 +52,7 @@ export async function CustomMDXContent({
       Folder,
       Files,
       blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
-      img: (props: ComponentProps<'img'>) => {
-        if (!props.src) {
-          return null;
-        }
-
-        return (
-          <ImageZoom
-            src={props.src}
-            alt={props.alt || 'image'}
-            width={1400}
-            height={787}
-            style={{
-              width: '100%',
-              height: 'auto',
-              objectFit: 'contain',
-            }}
-            priority
-          />
-        );
-      },
+      img: ImageWrapper,
     });
   }