feat: code block icon

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · May 25, 2024 · 115bf3d · 115bf3d
1 parent a26254a
commit 115bf3d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 0 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -49,6 +49,47 @@ export default defineAppConfig({
     main: {
       breadCrumb: true,
       showTitle: true,
+      codeIcon: {
+        'package.json': 'vscode-icons:file-type-node',
+        'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+        '.npmrc': 'vscode-icons:file-type-npm',
+        '.editorconfig': 'vscode-icons:file-type-editorconfig',
+        '.eslintrc': 'vscode-icons:file-type-eslint',
+        '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+        '.eslintignore': 'vscode-icons:file-type-eslint',
+        'eslint.config.js': 'vscode-icons:file-type-eslint',
+        'eslint.config.mjs': 'vscode-icons:file-type-eslint',
+        'eslint.config.cjs': 'vscode-icons:file-type-eslint',
+        '.gitignore': 'vscode-icons:file-type-git',
+        'yarn.lock': 'vscode-icons:file-type-yarn',
+        '.env': 'vscode-icons:file-type-dotenv',
+        '.env.example': 'vscode-icons:file-type-dotenv',
+        '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+        'nuxt': 'vscode-icons:file-type-nuxt',
+        '.nuxtrc': 'vscode-icons:file-type-nuxt',
+        '.nuxtignore': 'vscode-icons:file-type-nuxt',
+        'nuxt.config.js': 'vscode-icons:file-type-nuxt',
+        'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+        'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+        'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+        'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+        'vue': 'vscode-icons:file-type-vue',
+        'ts': 'vscode-icons:file-type-typescript',
+        'tsx': 'vscode-icons:file-type-typescript',
+        'mjs': 'vscode-icons:file-type-js',
+        'cjs': 'vscode-icons:file-type-js',
+        'js': 'vscode-icons:file-type-js',
+        'jsx': 'vscode-icons:file-type-js',
+        'md': 'vscode-icons:file-type-markdown',
+        'py': 'vscode-icons:file-type-python',
+        'npm': 'vscode-icons:file-type-npm',
+        'pnpm': 'vscode-icons:file-type-pnpm',
+        'npx': 'vscode-icons:file-type-npm',
+        'yarn': 'vscode-icons:file-type-yarn',
+        'bun': 'vscode-icons:file-type-bun',
+        'yml': 'vscode-icons:file-type-yaml',
+        'terminal': 'lucide:terminal',
+      },
     },
     footer: {
       credits: 'Copyright © 2024',

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -1,6 +1,7 @@
 <template>
   <UiCard class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden">
     <div v-if="filename" class="p-3 border-b flex text-sm font-mono">
+      <Icon v-if="icon" :name="icon" class="self-center mr-1.5" />
       {{ filename }}
       <span class="ml-auto mr-1">
         <Transition name="fade" mode="out-in">
@@ -84,6 +85,9 @@ const checkIconRef = ref<HTMLElement>();
 onClickOutside(checkIconRef, () => {
   copied.value = false;
 });
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
+const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.language);
 </script>
 
 <style>

diff --git a/content/1.getting-started/1.aaa/1.aaa.md b/content/1.getting-started/1.aaa/1.aaa.md
@@ -79,6 +79,10 @@ export default defineAppConfig({
 });
 ```
 
+```[as]
+sdadsa
+```
+
 ### Footer
 
 ```ts [app.config.ts]

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.18.1",
     "@iconify-json/lucide": "^1.1.187",
+    "@iconify-json/vscode-icons": "^1.1.34",
     "@vueuse/core": "^10.9.0",
     "@vueuse/nuxt": "^10.9.0",
     "eslint": "9.2.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,6 +79,10 @@ export default defineAppConfig({ @@
     });
     ```
+    ```[as]
+    sdadsa
+    ```
     ### Footer
     ```ts [app.config.ts]
@@ Expand Down @@