feat(mdx): add MDX support and migrate markdown files to MDX

- Add @astrojs/mdx integration to enable MDX support - Migrate all markdown files (.md) to MDX (.mdx) format - Create HighlightBox component for enhanced content styling - Update astro config to include MDX integration - Add documentation guide for MDX integration
2025-06-20 11:36:11 +08:00
parent a446ce68bd
commit 398093dde9
9 changed files with 857 additions and 54 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,6 +6,8 @@ import react from "@astrojs/react";

 import sitemap from "@astrojs/sitemap";

+import mdx from '@astrojs/mdx';
+
 // https://astro.build/config
 export default defineConfig({
  site: 'https://zhaoguiyang.com',
@@ -14,6 +16,19 @@ export default defineConfig({
      theme: 'dracula',
    },
  },
+  integrations: [
+    react(), 
+    sitemap({
+      i18n: {
+        defaultLocale: 'en',
+        locales: {
+          en: 'en',
+          zh: 'zh'
+        },
+      },
+    }),
+    mdx()
+  ],
  vite: {
      plugins: [tailwindcss()],
  },
@@ -22,18 +37,10 @@ export default defineConfig({
    defaultLocale: "en",
    // A list of all locales supported by the site
    locales: ["en", "zh"],
+    // Enable routing strategy for detecting the locale from the URL path
    routing: {
      // URLs for the defaultLocale (en) will not have a /en/ prefix
      prefixDefaultLocale: false,
    }
  },
-  integrations: [react(), sitemap({
-    i18n: {
-      defaultLocale: 'en',
-      locales: {
-        en: 'en',
-        zh: 'zh'
-      },
-    },
-  })]
 });
--- a/mdx-integration-guide.md
+++ b/mdx-integration-guide.md
@@ -0,0 +1,101 @@
+# 在Astro中使用Markdown组件的问题解决指南
+
+## 问题分析
+
+在Astro项目中，您尝试在Markdown文件（`.md`）中使用`HighlightBox.astro`组件，但组件没有正确渲染。这是因为Astro的标准Markdown支持不允许直接在`.md`文件中使用Astro组件。
+
+## 解决方案
+
+要在Markdown文件中使用Astro组件（如`HighlightBox.astro`），您需要安装并配置`@astrojs/mdx`集成。MDX是Markdown的扩展，允许在Markdown内容中使用JSX表达式和组件。
+
+### 步骤1：安装MDX集成
+
+```bash
+npm install @astrojs/mdx
+```
+
+### 步骤2：配置Astro
+
+在`astro.config.mjs`文件中添加MDX集成：
+
+```javascript
+import { defineConfig } from 'astro/config';
+import tailwindcss from "@tailwindcss/vite";
+import react from "@astrojs/react";
+import sitemap from "@astrojs/sitemap";
+import mdx from '@astrojs/mdx'; // 添加这一行
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://zhaoguiyang.com',
+  markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+    },
+    remarkPlugins: [],
+    rehypePlugins: [],
+  },
+  integrations: [
+    react(), 
+    sitemap({
+      i18n: {
+        defaultLocale: 'en',
+        locales: {
+          en: 'en',
+          zh: 'zh'
+        },
+      },
+    }),
+    mdx(), // 添加这一行
+  ],
+  vite: {
+      plugins: [tailwindcss()],
+  },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "zh"],
+    routing: {
+      prefixDefaultLocale: false,
+    }
+  },
+});
+```
+
+### 步骤3：将Markdown文件转换为MDX
+
+将您的`.md`文件重命名为`.mdx`文件。例如：
+
+- `about.md` → `about.mdx`
+- `services.md` → `services.mdx`
+
+### 步骤4：确保正确导入组件
+
+在MDX文件中，确保正确导入组件：
+
+```mdx
+---
+title: "About Me"
+description: "Learn more about my background, skills, and experiences"
+layout: "../layouts/AboutLayout.astro"
+---
+
+import HighlightBox from '../components/markdown/HighlightBox.astro';
+
+# About Me
+
+<HighlightBox type="info" title="Information">
+  This is some important information.
+</HighlightBox>
+```
+
+## 替代方案
+
+如果您不想使用MDX，还有以下替代方案：
+
+1. **使用布局组件**：在Markdown文件中使用`layout`属性指定一个Astro布局组件，然后在布局组件中添加您的`HighlightBox`组件。
+
+2. **使用remark或rehype插件**：您可以创建自定义的remark或rehype插件来转换Markdown中的特定语法为您的组件。
+
+## 结论
+
+Astro默认不支持在标准Markdown文件中直接使用组件，这就是为什么您的`HighlightBox`组件没有正确渲染的原因。安装MDX集成是解决此问题的最直接方法，它允许您在Markdown内容中使用完整的组件功能。
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "astro": "astro"
  },
  "dependencies": {
+    "@astrojs/mdx": "^4.3.0",
    "@astrojs/react": "^4.2.1",
    "@astrojs/sitemap": "^3.4.1",
    "@radix-ui/react-scroll-area": "^1.2.9",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@astrojs/mdx':
+        specifier: ^4.3.0
+        version: 4.3.0(astro@5.9.2(@types/node@24.0.1)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.43.0)(typescript@5.8.3))
      '@astrojs/react':
        specifier: ^4.2.1
        version: 4.3.0(@types/node@24.0.1)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -85,6 +88,12 @@ packages:
  '@astrojs/markdown-remark@6.3.2':
    resolution: {integrity: sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==}

+  '@astrojs/mdx@4.3.0':
+    resolution: {integrity: sha512-OGX2KvPeBzjSSKhkCqrUoDMyzFcjKt5nTE5SFw3RdoLf0nrhyCXBQcCyclzWy1+P+XpOamn+p+hm1EhpCRyPxw==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+    peerDependencies:
+      astro: ^5.0.0
+
  '@astrojs/prism@3.3.0':
    resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
@@ -483,6 +492,9 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
+
  '@oslojs/encoding@1.1.0':
    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}

@@ -839,6 +851,9 @@ packages:
  '@types/debug@4.1.12':
    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}

+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
  '@types/estree@1.0.7':
    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}

@@ -854,6 +869,9 @@ packages:
  '@types/mdast@4.0.4':
    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}

+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
  '@types/ms@2.1.0':
    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}

@@ -877,6 +895,9 @@ packages:
  '@types/sax@1.2.7':
    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}

+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
  '@types/unist@3.0.3':
    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}

@@ -889,6 +910,11 @@ packages:
    peerDependencies:
      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0

+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
  acorn@8.15.0:
    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
    engines: {node: '>=0.4.0'}
@@ -929,6 +955,10 @@ packages:
  array-iterate@2.0.1:
    resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}

+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
  astro-i18next@1.0.0-beta.21:
    resolution: {integrity: sha512-1YPqwexumHpK/d9afEoi52CBFTu6k4MYv/oHjsaAasZDvFClU6U5VPttC/OgZcXRYggCM6ee2LOnyHqlmXOeLA==}
    hasBin: true
@@ -991,6 +1021,9 @@ packages:
  character-entities@2.0.2:
    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}

+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
  chokidar@4.0.3:
    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
    engines: {node: '>= 14.16.0'}
@@ -1021,6 +1054,9 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -1146,6 +1182,12 @@ packages:
  es-module-lexer@1.7.0:
    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}

+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
  esbuild-android-64@0.15.18:
    resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
    engines: {node: '>=12'}
@@ -1284,6 +1326,24 @@ packages:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
    engines: {node: '>=12'}

+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
  estree-walker@2.0.2:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}

@@ -1372,9 +1432,15 @@ packages:
  hast-util-raw@9.1.0:
    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}

+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
  hast-util-to-html@9.0.5:
    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}

+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
  hast-util-to-parse5@8.0.0:
    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}

@@ -1411,12 +1477,24 @@ packages:
  import-meta-resolve@4.1.0:
    resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}

+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
  iron-webcrypto@1.2.1:
    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}

+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
  is-arrayish@0.3.2:
    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}

+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
  is-docker@3.0.0:
    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1426,6 +1504,9 @@ packages:
    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
    engines: {node: '>=8'}

+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
  is-inside-container@1.0.0:
    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
    engines: {node: '>=14.16'}
@@ -1574,6 +1655,10 @@ packages:
  magicast@0.3.5:
    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}

+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
  markdown-table@3.0.4:
    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}

@@ -1604,6 +1689,18 @@ packages:
  mdast-util-gfm@3.1.0:
    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}

+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
  mdast-util-phrasing@4.1.0:
    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}

@@ -1643,12 +1740,30 @@ packages:
  micromark-extension-gfm@3.0.0:
    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}

+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
  micromark-factory-destination@2.0.1:
    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}

  micromark-factory-label@2.0.1:
    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}

+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
  micromark-factory-space@2.0.1:
    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}

@@ -1679,6 +1794,9 @@ packages:
  micromark-util-encode@2.0.1:
    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}

+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
  micromark-util-html-tag-name@2.0.1:
    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}

@@ -1793,6 +1911,9 @@ packages:
  pako@0.2.9:
    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}

+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
  parse-latin@7.0.0:
    resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==}

@@ -1855,6 +1976,18 @@ packages:
    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
    engines: {node: '>= 14.18.0'}

+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.0:
+    resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==}
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
  regex-recursion@6.0.2:
    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}

@@ -1870,6 +2003,9 @@ packages:
  rehype-raw@7.0.0:
    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}

+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
  rehype-stringify@10.0.1:
    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}

@@ -1879,6 +2015,9 @@ packages:
  remark-gfm@4.0.1:
    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}

+  remark-mdx@3.1.0:
+    resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
+
  remark-parse@11.0.0:
    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}

@@ -1953,6 +2092,10 @@ packages:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
  space-separated-tokens@2.0.2:
    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}

@@ -1978,6 +2121,12 @@ packages:
    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
    engines: {node: '>=12'}

+  style-to-js@1.1.17:
+    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+
+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+
  tailwind-merge@3.3.1:
    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}

@@ -2074,6 +2223,9 @@ packages:
  unist-util-modify-children@4.0.0:
    resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==}

+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
  unist-util-position@5.0.0:
    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}

@@ -2318,6 +2470,25 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@astrojs/mdx@4.3.0(astro@5.9.2(@types/node@24.0.1)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.43.0)(typescript@5.8.3))':
+    dependencies:
+      '@astrojs/markdown-remark': 6.3.2
+      '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
+      acorn: 8.15.0
+      astro: 5.9.2(@types/node@24.0.1)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.43.0)(typescript@5.8.3)
+      es-module-lexer: 1.7.0
+      estree-util-visit: 2.0.0
+      hast-util-to-html: 9.0.5
+      kleur: 4.1.5
+      rehype-raw: 7.0.0
+      remark-gfm: 4.0.1
+      remark-smartypants: 3.0.2
+      source-map: 0.7.4
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
  '@astrojs/prism@3.3.0':
    dependencies:
      prismjs: 1.30.0
@@ -2665,6 +2836,36 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@mdx-js/mdx@3.1.0(acorn@8.15.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.4
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - acorn
+      - supports-color
+
  '@oslojs/encoding@1.1.0': {}

  '@proload/core@0.3.3':
@@ -2965,6 +3166,10 @@ snapshots:
    dependencies:
      '@types/ms': 2.1.0

+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
  '@types/estree@1.0.7': {}

  '@types/estree@1.0.8': {}
@@ -2981,6 +3186,8 @@ snapshots:
    dependencies:
      '@types/unist': 3.0.3

+  '@types/mdx@2.0.13': {}
+
  '@types/ms@2.1.0': {}

  '@types/nlcst@2.0.3':
@@ -3005,6 +3212,8 @@ snapshots:
    dependencies:
      '@types/node': 24.0.1

+  '@types/unist@2.0.11': {}
+
  '@types/unist@3.0.3': {}

  '@ungap/structured-clone@1.3.0': {}
@@ -3021,6 +3230,10 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
  acorn@8.15.0: {}

  ansi-align@3.0.1:
@@ -3052,6 +3265,8 @@ snapshots:

  array-iterate@2.0.1: {}

+  astring@1.9.0: {}
+
  astro-i18next@1.0.0-beta.21(astro@5.9.2(@types/node@24.0.1)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.43.0)(typescript@5.8.3)):
    dependencies:
      '@proload/core': 0.3.3
@@ -3213,6 +3428,8 @@ snapshots:

  character-entities@2.0.2: {}

+  character-reference-invalid@2.0.1: {}
+
  chokidar@4.0.3:
    dependencies:
      readdirp: 4.1.2
@@ -3233,6 +3450,8 @@ snapshots:

  clsx@2.1.1: {}

+  collapse-white-space@2.1.0: {}
+
  color-convert@2.0.1:
    dependencies:
      color-name: 1.1.4
@@ -3339,6 +3558,20 @@ snapshots:

  es-module-lexer@1.7.0: {}

+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.15.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
  esbuild-android-64@0.15.18:
    optional: true

@@ -3456,6 +3689,35 @@ snapshots:

  escape-string-regexp@5.0.0: {}

+  estree-util-attach-comments@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  estree-util-build-jsx@3.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.4
+
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
  estree-walker@2.0.2: {}

  estree-walker@3.0.3:
@@ -3569,6 +3831,27 @@ snapshots:
      web-namespaces: 2.0.1
      zwitch: 2.0.4

+  hast-util-to-estree@3.1.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.17
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
  hast-util-to-html@9.0.5:
    dependencies:
      '@types/hast': 3.0.4
@@ -3583,6 +3866,26 @@ snapshots:
      stringify-entities: 4.0.4
      zwitch: 2.0.4

+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.17
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
  hast-util-to-parse5@8.0.0:
    dependencies:
      '@types/hast': 3.0.4
@@ -3636,15 +3939,28 @@ snapshots:

  import-meta-resolve@4.1.0: {}

+  inline-style-parser@0.2.4: {}
+
  iron-webcrypto@1.2.1: {}

+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
  is-arrayish@0.3.2:
    optional: true

+  is-decimal@2.0.1: {}
+
  is-docker@3.0.0: {}

  is-fullwidth-code-point@3.0.0: {}

+  is-hexadecimal@2.0.1: {}
+
  is-inside-container@1.0.0:
    dependencies:
      is-docker: 3.0.0
@@ -3752,6 +4068,8 @@ snapshots:
      '@babel/types': 7.27.6
      source-map-js: 1.2.1

+  markdown-extensions@2.0.0: {}
+
  markdown-table@3.0.4: {}

  mdast-util-definitions@6.0.0:
@@ -3841,6 +4159,55 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
  mdast-util-phrasing@4.1.0:
    dependencies:
      '@types/mdast': 4.0.4
@@ -3953,6 +4320,57 @@ snapshots:
      micromark-util-combine-extensions: 2.0.1
      micromark-util-types: 2.0.2

+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.2
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
  micromark-factory-destination@2.0.1:
    dependencies:
      micromark-util-character: 2.1.1
@@ -3966,6 +4384,18 @@ snapshots:
      micromark-util-symbol: 2.0.1
      micromark-util-types: 2.0.2

+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
  micromark-factory-space@2.0.1:
    dependencies:
      micromark-util-character: 2.1.1
@@ -4018,6 +4448,16 @@ snapshots:

  micromark-util-encode@2.0.1: {}

+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.2
+
  micromark-util-html-tag-name@2.0.1: {}

  micromark-util-normalize-identifier@2.0.1:
@@ -4136,6 +4576,16 @@ snapshots:

  pako@0.2.9: {}

+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
  parse-latin@7.0.0:
    dependencies:
      '@types/nlcst': 2.0.3
@@ -4192,6 +4642,36 @@ snapshots:

  readdirp@4.1.2: {}

+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.0(acorn@8.15.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
  regex-recursion@6.0.2:
    dependencies:
      regex-utilities: 2.3.0
@@ -4214,6 +4694,14 @@ snapshots:
      hast-util-raw: 9.1.0
      vfile: 6.0.3

+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
+
  rehype-stringify@10.0.1:
    dependencies:
      '@types/hast': 3.0.4
@@ -4238,6 +4726,13 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  remark-mdx@3.1.0:
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
  remark-parse@11.0.0:
    dependencies:
      '@types/mdast': 4.0.4
@@ -4385,6 +4880,8 @@ snapshots:

  source-map-js@1.2.1: {}

+  source-map@0.7.4: {}
+
  space-separated-tokens@2.0.2: {}

  stream-replace-string@2.0.0: {}
@@ -4414,6 +4911,14 @@ snapshots:
    dependencies:
      ansi-regex: 6.1.0

+  style-to-js@1.1.17:
+    dependencies:
+      style-to-object: 1.0.9
+
+  style-to-object@1.0.9:
+    dependencies:
+      inline-style-parser: 0.2.4
+
  tailwind-merge@3.3.1: {}

  tailwindcss@4.1.10: {}
@@ -4507,6 +5012,10 @@ snapshots:
      '@types/unist': 3.0.3
      array-iterate: 2.0.1

+  unist-util-position-from-estree@2.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
  unist-util-position@5.0.0:
    dependencies:
      '@types/unist': 3.0.3
--- a/src/components/markdown/HighlightBox.astro
+++ b/src/components/markdown/HighlightBox.astro
@@ -0,0 +1,136 @@
+---
+/**
+ * HighlightBox Component
+ * 
+ * A versatile component for highlighting content in Markdown files with different styles and icons.
+ * 
+ * Usage in Markdown:
+ * ```md
+ * <HighlightBox type="info" title="Information">
+ *   This is some important information.
+ * </HighlightBox>
+ * ```
+ */
+
+import { Info, AlertTriangle, CheckCircle, HelpCircle, Lightbulb } from 'lucide-react';
+
+interface Props {
+  /**
+   * The type of highlight box
+   * @default "info"
+   */
+  type?: 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note';
+  
+  /**
+   * Optional title for the highlight box
+   */
+  title?: string;
+  
+  /**
+   * Optional custom icon (SVG string)
+   */
+  icon?: string;
+}
+
+const { 
+  type = 'info',
+  title,
+  icon
+} = Astro.props;
+
+// Define styles based on type
+const styles = {
+  info: {
+    bg: 'bg-blue-500/10 dark:bg-blue-500/20',
+    border: 'border-blue-500/50 dark:border-blue-500/30',
+    title: 'text-blue-700 dark:text-blue-300',
+    icon: 'text-blue-500',
+    component: Info
+  },
+  warning: {
+    bg: 'bg-amber-500/10 dark:bg-amber-500/20',
+    border: 'border-amber-500/50 dark:border-amber-500/30',
+    title: 'text-amber-700 dark:text-amber-300',
+    icon: 'text-amber-500',
+    component: AlertTriangle
+  },
+  success: {
+    bg: 'bg-green-500/10 dark:bg-green-500/20',
+    border: 'border-green-500/50 dark:border-green-500/30',
+    title: 'text-green-700 dark:text-green-300',
+    icon: 'text-green-500',
+    component: CheckCircle
+  },
+  error: {
+    bg: 'bg-red-500/10 dark:bg-red-500/20',
+    border: 'border-red-500/50 dark:border-red-500/30',
+    title: 'text-red-700 dark:text-red-300',
+    icon: 'text-red-500',
+    component: AlertTriangle
+  },
+  tip: {
+    bg: 'bg-purple-500/10 dark:bg-purple-500/20',
+    border: 'border-purple-500/50 dark:border-purple-500/30',
+    title: 'text-purple-700 dark:text-purple-300',
+    icon: 'text-purple-500',
+    component: Lightbulb
+  },
+  note: {
+    bg: 'bg-gray-500/10 dark:bg-gray-500/20',
+    border: 'border-gray-500/50 dark:border-gray-500/30',
+    title: 'text-gray-700 dark:text-gray-300',
+    icon: 'text-gray-500',
+    component: HelpCircle
+  }
+};
+
+const style = styles[type];
+const IconComponent = style.component;
+
+// Default titles based on type if not provided
+const defaultTitles = {
+  info: 'Information',
+  warning: 'Warning',
+  success: 'Success',
+  error: 'Error',
+  tip: 'Tip',
+  note: 'Note'
+};
+
+const displayTitle = title || defaultTitles[type];
+---
+
+<div class={`rounded-lg p-3 my-4 border ${style.bg} ${style.border}`}>
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-2">
+      <div class={`flex-shrink-0 flex items-center justify-center ${style.icon}`}>
+        {icon ? (
+          <Fragment set:html={icon} />
+        ) : (
+          <IconComponent className="w-4 h-4" />
+        )}
+      </div>
+      {displayTitle && (
+        <h4 class={`text-sm font-medium flex items-center !m-0 ${style.title}`}>
+          {displayTitle}
+        </h4>
+      )}
+    </div>
+    <div class="prose dark:prose-invert max-w-none text-sm pl-1 highlight-content">
+      <slot />
+    </div>
+
+<style>
+  /* 自定义内容样式 */
+  .highlight-content :global(p) {
+    margin: 0;
+  }
+  .highlight-content :global(ul) {
+   margin: 0;
+  }
+  .highlight-content :global(li) {
+    margin: 0.5em 0;
+  }
+</style>
+  </div>
+</div>
--- a/src/pages/about.mdx
+++ b/src/pages/about.mdx
@@ -4,21 +4,30 @@ description: "Learn more about my background, skills, and experiences"
 layout: "../layouts/AboutLayout.astro"
 ---

+import HighlightBox from '../components/markdown/HighlightBox.astro';
+
 # Joy Zhao 👨‍💻

+<HighlightBox type="info" title="Introduction">
 I'm a TypeScript Full Stack Engineer who loves development, technology, and exploring new possibilities. I enjoy bringing digital projects to life. 🚀
+</HighlightBox>

 ## About me 🧠

-I started my programming journey in 2016 when I accidentally encountered programming. This opportunity became the catalyst for my coding adventure, and I fell in love with programming during my subsequent self-learning journey. I enjoy creating websites and applications with code and sharing them with users. The sense of achievement I get from this process makes me increasingly fascinated. My dream is to become a lifelong coder.
+I started my programming journey in 2016 when I accidentally encountered programming. This opportunity became the catalyst for my coding adventure, and I fell in love with programming during my subsequent self-learning journey. 

+I enjoy creating websites and applications with code and sharing them with users. The sense of achievement I get from this process makes me increasingly fascinated. My dream is to become a lifelong coder.
+
+<HighlightBox type="info">
 我相信这里是想法变为现实的地方。我正在探索自由职业者之路，努力成为数字游民中的一员。
+</HighlightBox>

 ## My Skills 💪

 Below are the technology stacks I'm currently familiar with or proficient in, as well as those I'm learning or planning to learn. If your project requires technologies I'm not familiar with, don't worry - I have excellent collaborative relationships with various tech experts, including but not limited to backend developers, app developers, UI designers, product managers, etc., and can provide any services you need.

-### Skills I've Mastered
+<HighlightBox type="tip" title="Skills I've Mastered">
+
 - **HTML, CSS, JavaScript**
 - **Frontend Frameworks**: Vue.js, React.js, Node.js, uniApp, WeChat Mini Program
 - **TypeScript**
@@ -26,24 +35,37 @@ Below are the technology stacks I'm currently familiar with or proficient in, as
 - **DevOps**: Linux, Git
 - **Others**: Markdown, Docker, Kubernetes, Nginx, Apache, etc.

-### Skills I'm Learning/Planning to Learn
+</HighlightBox>
+
+<HighlightBox type="note" title="Skills I'm Learning/Planning to Learn">
+
 - **Programming Languages**: Python, Java, Go
 - **Mobile Development**: Flutter, Dart
 - **iOS Development**: Swift, SwiftUI

+</HighlightBox>
+
 ## My Interests 🌈

+<HighlightBox type="success" title="Hobbies & Interests">
+
 - **Reading**: I enjoy reading various books, especially technical ones.
 - **Travel**: I like visiting different places, particularly on road trips.
 - **Food**: I enjoy various cuisines, especially hot pot.
 - **Mobile Games**: I like playing League of Legends, Honor of Kings, PUBG Mobile, and other mobile games.

+</HighlightBox>
+
 ## Contact Me 📫

-:::info
+<HighlightBox type="warning" title="Important Note">
 Since everyone's time is valuable, please add a note when contacting me, such as: collaboration, consultation, project requirements, etc. I may not reply to or might ignore messages without notes. Thank you for your cooperation!
-:::
+</HighlightBox>
+
+<HighlightBox type="info" title="Contact Information">

 - **Email**: zhaoguiyang18@gmail.com
 - **QQ**: 2770723534
- **WeChat**: JoyCodeing
+- **WeChat**: JoyCodeing
+
+</HighlightBox>
--- a/src/pages/services.mdx
+++ b/src/pages/services.mdx
@@ -4,9 +4,13 @@ description: "Explore the professional services I offer to help bring your digit
 layout: "../layouts/AboutLayout.astro"
 ---

+import HighlightBox from '../components/markdown/HighlightBox.astro';
+
 # Services I Provide 🛠️

+<HighlightBox type="tip">
 用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+</HighlightBox>

 ## Web Development 🌐

@@ -16,40 +20,22 @@ layout: "../layouts/AboutLayout.astro"
 - Developing backend systems with Node.js, Express, Django, or Flask
 - Optimizing website performance and user experience

-## App Development 📱
-
- Developing cross-platform mobile applications using React Native or Flutter
- Creating native iOS and Android applications
- Building progressive web apps (PWAs) for mobile-like experiences on the web
- Implementing offline functionality and push notifications
- Integrating with device features like camera, GPS, and sensors
-
-## WeChat Mini Program Development 💬
-
- Designing and developing WeChat Mini Programs for businesses
- Creating interactive and engaging user interfaces
- Implementing WeChat Pay and other WeChat APIs
- Optimizing for WeChat's ecosystem and requirements
- Building custom features and functionalities specific to your business needs
-
-## UI Design 🎨
-
- Creating modern, clean, and intuitive user interfaces
- Designing responsive layouts that work across all devices
- Developing brand identity and visual language
- Creating wireframes, prototypes, and high-fidelity mockups
- Implementing design systems for consistent user experiences
-
 ## Bug Fixing 🐛

+<HighlightBox type="error" title="Bug Fixing & Code Optimization">
+
 - Identifying and resolving issues in existing applications
 - Debugging complex problems in frontend and backend systems
 - Optimizing code for better performance and reliability
 - Refactoring legacy code to modern standards
 - Implementing automated testing to prevent future bugs

+</HighlightBox>
+
+# Services I Provide 🛠️
 ## Important Notes 📝

+<HighlightBox type="warning" title="Before Contacting Me">
 To avoid unnecessary misunderstandings, please read the following notes before contacting me:

 1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
@@ -57,9 +43,12 @@ To avoid unnecessary misunderstandings, please read the following notes before c
 3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
 4. I currently cannot provide invoicing services.
 5. Projects can be maintained free of charge for 3 months after completion.
+</HighlightBox>

+# Services I Provide 🛠️
 ## Collaboration Process 🤝

+<HighlightBox type="info" title="How We'll Work Together">
 1. Confirm the project
 2. Determine the collaboration method
 3. Confirm project functional requirements
@@ -70,17 +59,13 @@ To avoid unnecessary misunderstandings, please read the following notes before c
 8. Project testing
 9. Project launch
 10. Project maintenance
+</HighlightBox>

-## Payment Methods 💰
-
- WeChat Pay
- Alipay
- Bank Transfer
-
-**Note: All projects use the 442 payment method**
-
+# Services I Provide 🛠️
 ## Contact Information 📞

+<HighlightBox type="success" title="Get in Touch">
 - QQ: **2770723534**
 - WeChat: **JoyCodeing**
- Email: **zhaoguiyang18@gmail.com**
+- Email: **zhaoguiyang18@gmail.com**
+</HighlightBox>
--- a/src/pages/zh/about.mdx
+++ b/src/pages/zh/about.mdx
@@ -4,12 +4,16 @@ description: "了解更多关于我的背景、技能和经验"
 layout: "../../layouts/AboutLayout.astro"
 ---

+import HighlightBox from '../../components/markdown/HighlightBox.astro';
+
 # 关于我 👨‍💻

+<HighlightBox type="info" title="简介">
 我是Joy Zhao, 一名Ts全栈工程师，也是本站的站长。

 热爱生活、阅读以及编程，寻找远程工作的机会，探索自由职业的可能性。
 喜欢自驾，去追寻那些美丽的风景，尝试新的事物。
+</HighlightBox>

 ## 👨‍💻‍自我介绍 🧠

@@ -19,7 +23,8 @@ layout: "../../layouts/AboutLayout.astro"

 以下展示了我目前熟悉或精通的技术栈，以及正在/准备学习的技术栈。如果你的项目需要使用一些我不熟悉的技术，也请不要担心，我与一些技术大牛，包括不限于后端、App、UI设计师、产品经理等有着良好的合作关系，完全可以提供任何你需要的服务。

-### 已掌握的技能
+<HighlightBox type="info" title="已掌握的技能">
+
 - **HTML、CSS、JavaScript**
 - **Vue.js、React.js、Node.js、uniApp、微信小程序**等前端框架
 - **TypeScript**
@@ -27,24 +32,37 @@ layout: "../../layouts/AboutLayout.astro"
 - **Linux、Git**
 - **其他：Markdown、Docker、Kubernetes、Nginx、Apache**等技术

-### 正在/准备学习的技能
+</HighlightBox>
+
+<HighlightBox type="tip" title="正在/准备学习的技能">
+
 - **Python、Java、Go**
 - **Flutter、Dart**
 - **Swift、SwiftUI**

+</HighlightBox>
+
 ## 🌈 兴趣爱好

+<HighlightBox type="success" title="兴趣爱好">
+
 - 阅读：喜欢阅读各种书籍，尤其是技术类书籍。
 - 旅游：喜欢去不同的地方看看，尤其是自驾游。
 - 美食：喜欢吃各种美食，尤其是火锅。
 - 手游: 喜欢玩英雄联盟、王者荣耀、绝地求生等手游。

+</HighlightBox>
+
 ## 📱联系我

-:::info
+<HighlightBox type="warning" title="重要提示">
 由于大家的时间都很宝贵，所以请在联系我时添加备注，如：合作、咨询、项目需求等，不予备注的我可能不会回复或直接忽略，谢谢合作！
-:::
+</HighlightBox>
+
+<HighlightBox type="info" title="联系方式">

 - **邮箱：zhaoguiyang18@gmail.com**
 - **QQ: 2770723534**
- **微信：JoyCodeing**
+- **微信：JoyCodeing**
+
+</HighlightBox>
--- a/src/pages/zh/services.mdx
+++ b/src/pages/zh/services.mdx
@@ -4,8 +4,14 @@ description: "探索我提供的专业服务，帮助您实现数字项目"
 layout: "../../layouts/AboutLayout.astro"
 ---

+import HighlightBox from '../../components/markdown/HighlightBox.astro';
+
 # 提供服务 🛠️

+<HighlightBox type="tip" title="服务理念">
+用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+</HighlightBox>
+
 ## 网站开发 🌐

 - 使用最新技术构建响应式现代网站
@@ -40,14 +46,19 @@ layout: "../../layouts/AboutLayout.astro"

 ## BUg 修复 🐛

+<HighlightBox type="error" title="Bug修复与代码优化">
+
 - 识别和解决现有应用程序中的问题
 - 调试前端和后端系统中的复杂问题
 - 优化代码以提高性能和可靠性
 - 将旧代码重构为现代标准
 - 实施自动化测试以防止未来出现错误

+</HighlightBox>
+
 ## 注意事项 📝

+<HighlightBox type="warning" title="合作前须知">
 为了减少不必要的麻烦，请在沟通之前仔细阅读以下注意事项：

 1. 请提供详细的需求说明，有原型图或设计稿更佳（如果你不了解这些也没关系，我这边可以帮你整理）。
@@ -55,9 +66,12 @@ layout: "../../layouts/AboutLayout.astro"
 3. 一般情况下只接商单，其他形式的合作需要另行协商。
 4. 暂时无法提供开票服务。
 5. 项目完成后可免费维护3个月。
+</HighlightBox>

 ## 合作步骤 🤝

+<HighlightBox type="info" title="合作流程">
+
 1. 确定合作项目
 2. 确定合作方式
 3. 确定项目功能需求
@@ -69,16 +83,26 @@ layout: "../../layouts/AboutLayout.astro"
 9. 项目上线
 10. 项目维护

+</HighlightBox>
+
 ## 付款方式 💰

+<HighlightBox type="success" title="支付方式">
+
 - 微信支付
 - 支付宝支付
 - 银行转账

 **注：所有项目费用均为442付款制**

+</HighlightBox>
+
 ## 联系方式 📞

+<HighlightBox type="info" title="联系我">
+
 - QQ: **2770723534**
 - 微信：**JoyCodeing**
- 邮箱：**zhaoguiyang18@gmail.com**
+- 邮箱：**zhaoguiyang18@gmail.com**
+
+</HighlightBox>