feat: support code-group-icons, default not enable, close #509

demo/yun/valaxy.config.ts

@@ -109,4 +109,6 @@ export default defineValaxyConfig<ThemeConfig>({
     // }),
     addonTest(),
   ],
+
+  groupIcons: {},
 })

docs/components/CreateValaxyTooltip.vue

@@ -3,7 +3,7 @@ import pkg from '../../package.json'
 </script>
 
 <template>
-  <div text="white sm" bg="dark" rounded-lg>
+  <div class="p-4" text="white sm" bg="dark" rounded-lg>
     <pre>
   🌌 Valaxy  <span text-blue>v{{ pkg.version }}</span>
 

docs/pages/guide/markdown.md

@@ -669,7 +669,17 @@ Details Content
 
 ## Add Code Block Title {lang="en"}
 
-使用以下语法：
+默认**关闭**，你可以通过将其设置为空对象来开启：
+
+```ts [valaxy.config.ts]
+import { defineValaxyConfig } from 'valaxy'
+
+export default defineValaxyConfig({
+  groupIcons: {}
+})
+```
+
+此时，使用以下语法：
 
 ````md
 ```ts [valaxy.config.ts]

docs/valaxy.config.ts

@@ -223,4 +223,6 @@ export default defineValaxyConfig<PressTheme.Config>({
     ],
     // theme: 'material-theme-palenight',
   },
+
+  groupIcons: {},
 })

packages/valaxy/client/App.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// import it in setup/main.ts for ssg
+import 'virtual:group-icons.css'
 // import { defineAsyncComponent } from 'vue'
 /**
  * @see @valaxyjs/devtools

packages/valaxy/client/main.ts

@@ -14,8 +14,12 @@ import AppLink from './components/AppLink.vue'
 import setupMain from './setup/main'
 
 import { setupValaxyDevTools } from './utils/dev'
-// generate user styles
+/**
+ * user styles
+ * virtual module
+ */
 import '#valaxy/styles'
+import 'uno.css'
 
 const valaxyConfig = initValaxyConfig()
 

packages/valaxy/node/plugins/markdown/setup.ts

@@ -27,7 +27,6 @@ import footnotePlugin from 'markdown-it-footnote'
 // https://www.npmjs.com/package/markdown-it-image-figures
 import imageFigures from 'markdown-it-image-figures'
 import TaskLists from 'markdown-it-task-lists'
-import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
 import { linkPlugin } from './plugins/link'
 import { containerPlugin } from './plugins/markdown-it/container'
@@ -152,12 +151,15 @@ export async function setupMarkdownPlugins(
 
   md.use(TaskLists)
 
+  if (options?.config.groupIcons) {
+    const { groupIconMdPlugin } = await import('vitepress-plugin-group-icons')
+    md.use(groupIconMdPlugin, {
+      titleBar: { includeSnippet: true },
+    })
+  }
+
   if (mdOptions.config)
     mdOptions.config(md)
 
-  md.use(groupIconMdPlugin, {
-    titleBar: { includeSnippet: true },
-  })
-
   return md as MarkdownIt
 }

packages/valaxy/node/plugins/preset.ts

@@ -12,7 +12,6 @@ import { resolve } from 'pathe'
 import Components from 'unplugin-vue-components/vite'
 
 import Layouts from 'vite-plugin-vue-layouts'
-import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 import { customElements } from '../constants'
 import { createConfigPlugin } from './extendConfig'
 import { createMarkdownPlugin } from './markdown'
@@ -123,18 +122,44 @@ export async function ViteValaxyPlugins(
       include: roots.map(root => `${root}/locales/**`),
     }),
 
-    groupIconVitePlugin({
-      customIcon: {
-        nodejs: 'vscode-icons:file-type-node',
-        playwright: 'vscode-icons:file-type-playwright',
-        typedoc: 'vscode-icons:file-type-typedoc',
-        eslint: 'vscode-icons:file-type-eslint',
-      },
-      ...valaxyConfig.groupIcons,
-    }),
     createFixPlugins(options),
   ]
 
+  if (valaxyConfig.groupIcons) {
+    const { groupIconVitePlugin } = await import('vitepress-plugin-group-icons')
+    plugins.push(
+      groupIconVitePlugin({
+        customIcon: {
+          nodejs: 'vscode-icons:file-type-node',
+          playwright: 'vscode-icons:file-type-playwright',
+          typedoc: 'vscode-icons:file-type-typedoc',
+          eslint: 'vscode-icons:file-type-eslint',
+        },
+        ...valaxyConfig.groupIcons,
+      }),
+    )
+  }
+  else {
+    // virtual module placeholder
+    const virtualCssId = 'virtual:group-icons.css'
+    const resolvedVirtualCssId = `\0${virtualCssId}`
+    plugins.push({
+      name: 'valaxy:virtual:group-icons.css',
+      resolveId(id) {
+        if (id === virtualCssId) {
+          return resolvedVirtualCssId
+        }
+        return void 0
+      },
+      async load(id) {
+        if (id === resolvedVirtualCssId) {
+          return ''
+        }
+        return void 0
+      },
+    })
+  }
+
   if (valaxyConfig.visualizer) {
     try {
       const visualizer = (await import('rollup-plugin-visualizer')).visualizer

packages/valaxy/node/types.ts

@@ -160,7 +160,7 @@ export interface ValaxyExtendConfig {
    * @see https://github.com/btd/rollup-plugin-visualizer
    */
   visualizer?: PluginVisualizerOptions
-  groupIcons?: GroupIconsOptions
+  groupIcons?: Partial<GroupIconsOptions>
   /**
    * unocss presets
    * @see https://unocss.dev/guide/presets

packages/valaxy/node/virtual/styles.ts

@@ -38,8 +38,6 @@ export const templateStyles: VirtualModuleTemplate = {
     // https://unocss.dev/guide/style-reset#tailwind-compat
     // minus the background color override for buttons to avoid conflicts with UI frameworks
     imports.unshift(`import "${await resolveImportUrl('@unocss/reset/tailwind-compat.css')}"`)
-    imports.push('import "uno.css"')
-    imports.push('import "virtual:group-icons.css"')
 
     return imports.join('\n')
   },