Refactor mdx

- refactor MdxCard component to parse md and file for examples section

Author: forestream

apps/landing/next.config.ts

@@ -1,7 +1,13 @@
 import { DevupUI } from '@devup-ui/next-plugin'
 import createMDX from '@next/mdx'
+import remarkGfm from 'remark-gfm'
 
-const withMDX = createMDX({})
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [remarkGfm],
+  },
+  extension: /\.mdx?$/,
+})
 
 export default withMDX(
   DevupUI(

apps/landing/package.json

@@ -11,29 +11,31 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "body-scroll-lock": "3.1.5",
-    "@devup-ui/react": "workspace:*",
     "@devup-ui/components": "workspace:*",
+    "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.4",
     "@types/mdx": "^2.0.13",
+    "body-scroll-lock": "3.1.5",
     "clsx": "^2.1.1",
     "next": "^15.3.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "8.0.6",
     "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.1",
     "sanitize.css": "^13.0.0"
   },
   "devDependencies": {
-    "@types/body-scroll-lock": "^3.1.2",
     "@devup-ui/next-plugin": "workspace:*",
+    "@types/body-scroll-lock": "^3.1.2",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "typescript": "^5",
     "glob": "^11.0.3",
-    "remark": "^15.0.1"
+    "remark": "^15.0.1",
+    "typescript": "^5"
   }
 }

apps/landing/src/app/(detail)/components/MdxCard.tsx

@@ -1,8 +1,40 @@
-import { css } from '@devup-ui/react'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+import { Box, css, VStack } from '@devup-ui/react'
+import ReactMarkdown from 'react-markdown'
+
+import { Code } from '@/components/Code'
+import { _components } from '@/mdx-components'
 
 import Card from './Card'
+import MdxCardFooter from './MdxCardFooter'
+
+export default async function MdxCard({
+  src,
+  demo,
+}: {
+  children: React.ReactNode
+  src: string
+  demo: React.ReactNode
+}) {
+  const content = await readFile(
+    join(
+      process.cwd(),
+      'src/app/(detail)/components',
+      src ?? 'button/demo/Variants.tsx',
+    ),
+    {
+      encoding: 'utf-8',
+    },
+  )
+  // extract comment
+  const comment = content.match(/\/\*\*[\s\S]*?\*\//)?.[0]
+  const code = content.replace('\n' + comment!, '')
+  const normalizedComment = comment
+    ?.replace(/\/\*\*|\*\//g, '')
+    ?.replace(/^\s*\*\s*/gm, '')
 
-export default function MdxCard({ children }: { children: React.ReactNode }) {
   return (
     <Card
       className={css({
@@ -23,9 +55,20 @@ export default function MdxCard({ children }: { children: React.ReactNode }) {
         _lastChild: {
           marginBottom: '0',
         },
+        typography: 'bodyReg',
+        color: '$text',
+        whiteSpace: 'pre-wrap',
       })}
     >
-      {children}
+      <VStack gap="30px" px="24px" py="32px">
+        <Box>{demo}</Box>
+        <ReactMarkdown components={_components}>
+          {normalizedComment ?? ''}
+        </ReactMarkdown>
+      </VStack>
+      <MdxCardFooter>
+        <Code language="tsx" value={code} />
+      </MdxCardFooter>
     </Card>
   )
 }

apps/landing/src/app/(detail)/components/MdxCardFooter.tsx

@@ -44,10 +44,9 @@ export default function MdxCardFooter({
         {isOpen && (
           <Box
             borderTop="1px solid $border"
-            maxW="100%"
             overflow="auto"
             px="24px"
-            py="32px"
+            py="16px"
           >
             {children}
           </Box>

apps/landing/src/app/(detail)/components/button/Api.mdx

@@ -66,4 +66,10 @@ button should have a width to be able to truncate the text.
 </Tr>
 </tbody>
 </Table>
-</div>
+</div>
+
+## aa
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |