feat: code snippet import (fix #67)

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/CodeSnippet.vue

@@ -0,0 +1,38 @@
+<template>
+  <MDC v-if="loadedCode" :value="md" class="[&:not(:first-child)]:mt-5" />
+  <UiAlert v-else variant="destructive">
+    <UiAlertTitle>Error</UiAlertTitle>
+    <UiAlertDescription>
+      Cannot load code: <ProseCodeInline>{{ file }}</ProseCodeInline>
+    </UiAlertDescription>
+  </UiAlert>
+</template>
+
+<script setup lang="ts">
+const { file, language, title, highlights, meta } = defineProps<{
+  file: string;
+  language: string;
+  title?: string;
+  highlights?: string;
+  meta?: string;
+}>();
+
+const rawFiles = import.meta.glob(['@/**/*', '!@/**/nuxt.config.ts'], {
+  query: '?raw',
+  import: 'default',
+});
+
+const importer = rawFiles[file];
+
+const loadedCode = ref('');
+if (importer)
+  loadedCode.value = await importer() as string;
+
+const md = `
+::div
+\`\`\`${language} ${title && `[${title}]`} ${highlights && `{${highlights}}`} ${meta}
+${loadedCode.value}
+\`\`\`
+::
+`;
+</script>

content/2.components/2.docs/code-snippet.md

@@ -0,0 +1,57 @@
+---
+title: Code Snippet
+icon: lucide:clipboard
+navBadges:
+  - value: New
+    type: lime
+badges:
+  - value: 0.8.11
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeSnippet.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+::
+```mdc
+:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+```
+::
+
+### Arguments
+
+::stack
+::div{class="p-4"}
+:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+::
+```mdc
+:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+```
+::
+
+Translates to:
+
+````md
+```ts [useBreadcrumb] {9-11} line-numbers height=300
+// code imported from /composables/useBreadcrumb.ts
+```
+````
+
+## Props
+
+::alert{icon="lucide:info"}
+The `/nuxt.config.ts` file can not be imported due to framework constraints
+::
+
+::field-group
+  :field{name="file" type="string"}[The path to the imported file]
+  :field{name="title" type="string"}[Code block title]
+  :field{name="language" type="string"}[Code block highlight language]
+  :field{name="highlights" type="string"}[Code block highlights lines]
+  :field{name="meta" type="string"}[Code block meta]
+::

package.json

@@ -46,17 +46,17 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.22",
+    "@iconify-json/lucide": "^1.2.23",
     "@iconify-json/vscode-icons": "^1.2.10",
     "@nuxt/content": "^2.13.4",
     "@nuxt/icon": "^1.10.3",
     "@nuxt/image": "^1.9.0",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@nuxtjs/tailwindcss": "^6.13.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "nuxt": "^3.15.1",
-    "nuxt-og-image": "^4.0.2",
+    "nuxt-og-image": "^4.0.3",
     "radix-vue": "^1.9.12",
     "shadcn-nuxt": "^0.11.3",
     "tailwind-merge": "^2.6.0",
@@ -66,14 +66,14 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.13.0",
+    "@antfu/eslint-config": "^3.14.0",
     "@nuxt/devtools": "^1.7.0",
     "@nuxt/kit": "^3.15.1",
     "@vueuse/core": "^12.4.0",
     "@vueuse/nuxt": "^12.4.0",
     "eslint": "^9.18.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
-    "shiki": "^1.26.1",
+    "shiki": "^1.27.2",
     "vue-tsc": "^2.2.0"
   }
 }