docs: fix code snippet

Signed-off-by: ZTL-UwU <[email protected]>

Author: ZTL-UwU

Diff for: .github/workflows/nuxthub.yml

@@ -3,7 +3,7 @@ on: push
 
 jobs:
   deploy:
-    name: "Deploy to NuxtHub"
+    name: Deploy to NuxtHub
     runs-on: ubuntu-latest
     environment:
       name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
@@ -22,7 +22,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install

Diff for: .vscode/extensions.json

@@ -5,6 +5,6 @@
     "antfu.goto-alias",
     "csstools.postcss",
     "dbaeumer.vscode-eslint",
-    "vue.volar",
+    "vue.volar"
   ]
 }

Diff for: .vscode/settings.json

@@ -16,6 +16,6 @@
     "node_modules": true,
     ".unlighthouse": true,
     ".output": true,
-    "dist": true,
-  },
+    "dist": true
+  }
 }

Diff for: assets/css/tailwind.css

@@ -87,19 +87,25 @@
   }
 
   html {
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
     /* @apply text-balance text-pretty; */
   }
 
   body {
     @apply bg-background text-foreground;
   }
 
-  footer>div {
+  footer > div {
     @apply flex !flex-row;
   }
 
-  .hero-card-group .iconify[class*="i-ph"] {
+  .hero-card-group .iconify[class*='i-ph'] {
     @apply text-primary;
   }
 

Diff for: components/content/CodeSnippet.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const { file, url, language, title, highlights, meta, start, offset } = defineProps<{
+  file?: string;
+  url?: string;
+  language: string;
+  title?: string;
+  highlights?: string;
+  meta?: string;
+  start?: number;
+  offset?: number;
+}>();
+
+const loadedCode = ref('');
+
+const rawFiles = import.meta.glob([
+  // Path you want to import
+], {
+  query: '?raw',
+  import: 'default',
+});
+
+if (file) {
+  const importer = rawFiles[file];
+  if (importer) {
+    loadedCode.value = (await importer()) as string;
+  }
+}
+else if (url) {
+  try {
+    const data = await $fetch(url, { parseResponse: txt => txt });
+    if (data) {
+      loadedCode.value = data as string;
+    }
+  }
+  catch {}
+}
+
+if (loadedCode.value && start && offset) {
+  const lines = loadedCode.value.split('\n');
+  loadedCode.value = lines.slice(Number(start || 1) - 1, Number(start || 1) - 1 + Number(offset)).join('\n');
+}
+
+const md = `
+::div
+\`\`\`\`${language} ${title && `[${title}]`} ${highlights && `{${highlights}}`} ${meta || ''}
+${loadedCode.value}
+\`\`\`\`
+::
+`;
+</script>
+
+<template>
+  <ClientOnly>
+    <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 || url }}</ProseCodeInline>
+      </UiAlertDescription>
+    </UiAlert>
+  </ClientOnly>
+</template>

Diff for: package.json

@@ -16,11 +16,11 @@
     "@iconify-json/ph": "^1.2.2",
     "nuxt": "^3.15.4",
     "nuxt-umami": "^3.2.0",
-    "shadcn-docs-nuxt": "^0.8.16",
+    "shadcn-docs-nuxt": "^0.8.19",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.3.0",
+    "@antfu/eslint-config": "^4.4.0",
     "@nuxt/icon": "^1.10.3",
     "eslint": "^9.21.0",
     "eslint-plugin-format": "^1.0.1"