feat: optimize documentation components

- Introduced a new `DynamicCodeBlock` component for interactive code examples.
- Updated documentation structure by creating a `lazy` module for dynamic imports of components.
- Removed the deprecated `UiOverview` component to streamline the documentation.
- Enhanced image handling in `CustomMDXContent` with a new `ImageZoom` integration for better user experience.
- Added a new `Wrapper` component for consistent styling across documentation elements.

content/blog/markdown.mdx

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

content/docs/customisation.mdx

@@ -5,9 +5,6 @@ description: An overview of Fumadocs UI
 
 ## Architecture
 
-<UiOverview />
-
-|               |                                                         |
 | ------------- | ------------------------------------------------------- |
 | **Sidebar**   | Display site title and navigation elements.             |
 | **Page Tree** | Passed by you, mainly rendered as the items of sidebar. |

content/docs/customisation.zh.mdx

@@ -5,8 +5,6 @@ description: Fumadocs UI 的概览
 
 ## 架构
 
-<UiOverview />
-
 |               |                                                         |
 | ------------- | ------------------------------------------------------- |
 | **侧边栏**   | 显示站点标题和导航元素。             |

src/app/[locale]/docs/[[...slug]]/page.tsx

@@ -1,4 +1,4 @@
-import * as Preview from '@/components/docs/preview';
+import * as Preview from '@/components/docs';
 import { CustomMDXContent } from '@/components/shared/custom-mdx-content';
 import { HoverCard, HoverCardContent, HoverCardTrigger, } from '@/components/ui/hover-card';
 import { LOCALES } from '@/i18n/routing';

src/components/docs/index.tsx

@@ -6,7 +6,7 @@ import {
   Folder,
   ImageZoom,
   InlineTOC,
-} from '@/components/docs/preview/lazy';
+} from '@/components/docs/lazy';
 import BannerImage from '@/public/images/docs/banner.png';
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import { Callout } from 'fumadocs-ui/components/callout';
@@ -19,8 +19,6 @@ import { TypeTable } from 'fumadocs-ui/components/type-table';
 import { Home } from 'lucide-react';
 import { type ReactNode } from 'react';
 import { Wrapper } from './wrapper';
-// import { owner, repo } from '@/lib/github';
-// import { GithubInfo } from 'fumadocs-ui/components/github-info';
 
 export function heading(): ReactNode {
   return (
@@ -256,16 +254,3 @@ export function banner(): ReactNode {
     </Wrapper>
   );
 }
-
-// export function githubInfo() {
-//   return (
-//     <Wrapper>
-//       <GithubInfo
-//         owner={owner}
-//         repo={repo}
-//         token={process.env.GITHUB_TOKEN}
-//         className="not-prose bg-fd-card"
-//       />
-//     </Wrapper>
-//   );
-// }

src/components/docs/ui-overview.tsx

@@ -1,111 +0,0 @@
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-
-export function UiOverview() {
-  return (
-    <Tabs
-      items={['Docs Layout', 'Docs Layout (Mobile)']}
-      className="bg-fd-background"
-    >
-      <Tab
-        value="Docs Layout"
-        className="not-prose text-sm text-center text-fd-muted-foreground overflow-auto"
-      >
-        <div className="flex flex-row gap-4 min-w-[600px] min-h-[400px]">
-          <div className="flex flex-col gap-2 w-1/4">
-            <p className="text-xs">Sidebar</p>
-            <div className="border p-2 bg-fd-muted">Title</div>
-            <div className="border p-2 bg-fd-muted">Sidebar Tabs</div>
-            <div className="border p-2 bg-fd-muted">Search</div>
-            <div className="flex items-center justify-center border p-2 flex-1 bg-fd-muted">
-              Page Tree
-            </div>
-            <div className="border p-2 mt-auto bg-fd-muted">Footer</div>
-          </div>
-          <div className="flex flex-col gap-2 flex-1">
-            <p className="text-xs">Docs Page</p>
-            <div className="bg-fd-muted border p-2">Article Title</div>
-            <div className="bg-fd-muted border p-2">Description</div>
-            <div className="bg-fd-muted border flex items-center justify-center flex-1 py-2">
-              Body
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="border p-2 bg-fd-muted">Edit on GitHub</div>
-              <div className="border p-2 bg-fd-muted">Last Updated</div>
-            </div>
-            <div className="border p-2">
-              <p className="text-xs mb-2">Footer</p>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="border p-2 bg-fd-muted">Previous</div>
-                <div className="border p-2 bg-fd-muted">Next</div>
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col gap-2 w-1/4">
-            <p className="text-xs">TOC</p>
-            <div className="border p-2 bg-fd-muted">Banner</div>
-            <div className="flex items-center justify-center border p-2 flex-1 bg-fd-muted">
-              Items
-            </div>
-            <div className="border p-2 bg-fd-muted">Footer</div>
-          </div>
-        </div>
-      </Tab>
-      <Tab
-        value="Docs Layout (Mobile)"
-        className="not-prose text-sm text-center text-fd-muted-foreground overflow-auto"
-      >
-        <div className="flex flex-row gap-4 min-w-[600px]">
-          <div className="flex flex-col gap-2 p-2 border">
-            <div className="border p-2">
-              <p className="text-xs">Nav</p>
-              <div className="grid grid-cols-3 gap-2">
-                <div className="bg-fd-muted border p-2">Title</div>
-                <div className="bg-fd-muted border p-2">Search</div>
-                <div className="bg-fd-muted border p-2">Menu</div>
-              </div>
-            </div>
-            <div className="bg-fd-muted border p-2">TOC Trigger</div>
-
-            <p className="text-xs">Docs Page</p>
-            <div className="bg-fd-muted border p-2">Article Title</div>
-            <div className="bg-fd-muted border p-2">Description</div>
-            <div className="bg-fd-muted border flex items-center justify-center flex-1 py-2">
-              Body
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="border p-2 bg-fd-muted">Edit on GitHub</div>
-              <div className="border p-2 bg-fd-muted">Last Updated</div>
-            </div>
-            <div className="border p-2">
-              <p className="text-xs mb-2">Footer</p>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="border p-2 bg-fd-muted">Previous</div>
-                <div className="border p-2 bg-fd-muted">Next</div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-2 p-2 border">
-            <div className="border p-2">
-              <p className="text-xs">Nav</p>
-              <div className="grid grid-cols-3 gap-2">
-                <div className="bg-fd-muted border p-2">Title</div>
-                <div className="bg-fd-muted border p-2">Search</div>
-                <div className="bg-fd-muted border p-2">Menu</div>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2 p-2 border h-full">
-              <p className="text-xs">Sidebar</p>
-              <div className="border p-2 bg-fd-muted">Sidebar Tabs</div>
-              <div className="border p-2 bg-fd-muted">Search</div>
-              <div className="flex items-center justify-center border p-2 flex-1 bg-fd-muted">
-                Page Tree
-              </div>
-              <div className="border p-2 mt-auto bg-fd-muted">Footer</div>
-            </div>
-          </div>
-        </div>
-      </Tab>
-    </Tabs>
-  );
-}

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

@@ -1,13 +1,14 @@
-import { Wrapper } from '@/components/docs/preview/wrapper';
-import { UiOverview } from '@/components/docs/ui-overview';
+import { Wrapper } from '@/components/docs/wrapper';
 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 { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { TypeTable } from 'fumadocs-ui/components/type-table';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
+import Image from 'next/image';
 import { ComponentProps, FC } from 'react';
 
 interface CustomMDXContentProps {
@@ -45,7 +46,26 @@ export async function CustomMDXContent({
       Folder,
       Files,
       blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
-      UiOverview,
+      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
+          />
+        );
+      },
     });
   }