feat(prose): code block custom icon

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 20, 2024 · 7295e57 · 7295e57
1 parent 4202d29
commit 7295e57
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -6,9 +6,9 @@
       inStack && 'mb-0 rounded-none border-none shadow-none',
     ]"
   >
-    <div v-if="!inGroup && filename" class="flex border-b p-3 font-mono text-sm">
-      <SmartIcon v-if="icon" :name="icon" class="mr-1.5 self-center" />
-      {{ filename }}
+    <div v-if="!inGroup && filename" class="flex items-center border-b p-3 font-mono text-sm">
+      <SmartIcon v-if="icon" :name="icon" class="mr-1.5" />
+      <span>{{ filename }}</span>
       <CodeCopy :code class="ml-auto mr-1" />
     </div>
 
@@ -69,7 +69,7 @@ const parsedMeta = computed(() => {
 const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
 const icon = computed(() => {
   const filenameLow = filename?.toLowerCase();
-  return (filenameLow && iconMap.get(filenameLow)) || (language && iconMap.get(language));
+  return parsedMeta.value.get('icon') || (filenameLow && iconMap.get(filenameLow)) || (language && iconMap.get(language));
 });
 </script>
 

diff --git a/content/2.components/1.prose.md b/content/2.components/1.prose.md
@@ -54,31 +54,36 @@ icon: lucide:letter-text
 
 ::code-group
   ::div{label="Preview" class="md:p-4"}
+  #### Code Block
   ```ts
   export default () => {
     console.log('Code block');
   };
   ```
 
-  ```ts [With Title]
-  export default () => {
-    console.log('Code block');
-  };
+  #### With Title
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    // My Nuxt config
+  });
   ```
 
-  ```ts{2} [Highlight Lines]
+  #### Highlight Lines
+  ```ts{2}
   export default () => {
     console.log('Code block');
   };
   ```
 
-  ```ts{1} [Line Numbers] line-numbers
+  #### Line Numbers
+  ```ts{1} line-numbers
   // line-numbers is enabled
   const line2 = 'This is line 2';
   const line3 = 'This is line 3';
   ```
 
-  ```ts [Fixed Height] height=150
+  #### Fixed Height
+  ```ts height=150
   const parsedMeta = computed(() => {
     const split = meta?.split(' ') ?? [];
     const params = new Map<string, string | undefined>();
@@ -91,34 +96,46 @@ icon: lucide:letter-text
     return params;
   });
   ```
+
+  #### Custom Icon
+  ```ts [Custom Icon] icon=lucide:code-xml line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
   ::
 
   ````md [Code]
+  #### Code Block
   ```ts
   export default () => {
     console.log('Code block');
   };
   ```
 
-  ```ts [With Title]
-  export default () => {
-    console.log('Code block');
-  };
+  #### With Title
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    // My Nuxt config
+  });
   ```
 
-  ```ts{2} [Highlight Lines]
+  #### Highlight Lines
+  ```ts{2}
   export default () => {
     console.log('Code block');
   };
   ```
 
-  ```ts{1} [Line Numbers] line-numbers
+  #### Line Numbers
+  ```ts{1} line-numbers
   // line-numbers is enabled
   const line2 = 'This is line 2';
   const line3 = 'This is line 3';
   ```
 
-  ```ts [Fixed Height] height=150
+  #### Fixed Height
+  ```ts height=150
   const parsedMeta = computed(() => {
     const split = meta?.split(' ') ?? [];
     const params = new Map<string, string | undefined>();
@@ -131,7 +148,14 @@ icon: lucide:letter-text
     return params;
   });
   ```
-````
+
+  #### Custom Icon
+  ```ts [Custom Icon] icon=lucide:code-xml line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
+  ````
 ::
 
 ### Inline Code