feat: update Vitepress configuration and theme imports for improved module support

onmax · onmax · commit 85bb0512cda7 · 2025-03-19T16:59:54.000+01:00
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,4 +1,4 @@
-import { defineNimiqVitepressConfig } from 'nimiq-vitepress-theme'
+import { defineNimiqVitepressConfig } from '../../packages/nimiq-vitepress-theme/src/'
 import PreviewPlugin from './theme/plugins/component-preview'
 
 // @unocss-include
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,6 @@
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 
-import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme/client.js'
+import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme/theme.js'
 
 import ComponentPreview from './components/ComponentPreview.vue'
 
diff --git a/docs/.vitepress/theme/plugins/component-preview.ts b/docs/.vitepress/theme/plugins/component-preview.ts
@@ -1,8 +1,10 @@
+import type { PluginSimple } from 'markdown-it'
 import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
 import { dirname, resolve } from 'node:path'
 import { renderMarkdownItTokens } from 'render-markdown-it-tokens'
 
-export default function (md: MarkdownRenderer) {
+// PluginSimple
+export default function (md: MarkdownRenderer): PluginSimple {
   md.core.ruler.after('block', 'markdown-preview', (state) => {
     // Find all html_block tokens containing ComponentPreview
     for (let i = 0; i < state.tokens.length; i++) {
diff --git a/docs/package.json b/docs/package.json
@@ -1,12 +1,12 @@
 {
   "name": "docs",
+  "type": "module",
   "version": "1.0.0",
   "packageManager": "pnpm@10.5.1",
   "description": "",
   "author": "",
   "license": "ISC",
   "keywords": [],
-  "type": "module",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -8,7 +8,7 @@ import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import VueDevTools from 'vite-plugin-vue-devtools'
-import NimiqVitepressVite from '../packages/nimiq-vitepress-theme/src/vite'
+import { NimiqVitepressVitePlugin } from '../packages/nimiq-vitepress-theme/src/vite'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
@@ -30,6 +30,6 @@ export default defineConfig({
     GitChangelog({
       repoURL: 'https://github.com/onmax/nimiq-ui',
     }),
-    NimiqVitepressVite(),
+    NimiqVitepressVitePlugin(),
   ],
 })
diff --git a/packages/nimiq-vitepress-theme/package.json b/packages/nimiq-vitepress-theme/package.json
@@ -37,6 +37,7 @@
       "import": "./dist/*.mjs"
     }
   },
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
@@ -72,14 +73,15 @@
     "nimiq-icons": "workspace:*",
     "p-map": "catalog:",
     "reka-ui": "catalog:",
-    "vitepress-plugin-group-icons": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
   "devDependencies": {
+    "@iconify-json/vscode-icons": "catalog:",
     "@iconify/utils": "catalog:",
     "@shikijs/vitepress-twoslash": "catalog:",
     "@types/cross-spawn": "catalog:",
+    "@types/markdown-it": "catalog:",
     "@unocss/cli": "catalog:",
     "@unocss/reset": "catalog:",
     "bumpp": "catalog:",
@@ -91,7 +93,6 @@
     "unbuild": "catalog:",
     "unocss": "catalog:",
     "unocss-preset-animations": "catalog:",
-    "unocss-preset-onmax": "catalog:",
-    "unplugin-vue-components": "catalog:"
+    "unocss-preset-onmax": "catalog:"
   }
 }
diff --git a/packages/nimiq-vitepress-theme/src/assets/code-blocks.css b/packages/nimiq-vitepress-theme/src/assets/code-blocks.css
diff --git a/packages/nimiq-vitepress-theme/src/assets/index.css b/packages/nimiq-vitepress-theme/src/assets/index.css
@@ -1,6 +1,3 @@
 @import url('./layers.css');
 
 @import url('./uno.css') layer nq-vp;
-@import url('./typography.css') layer nq-vp;
-@import url('./github-callouts.css') layer nq-vp;
-@import url('./code-blocks.css') layer nq-vp;
diff --git a/packages/nimiq-vitepress-theme/src/code-groups/builtin-icons.ts b/packages/nimiq-vitepress-theme/src/code-groups/builtin-icons.ts
@@ -0,0 +1,58 @@
+export const builtinIcons = {
+  // package managers
+  'pnpm': 'vscode-icons:file-type-light-pnpm',
+  'npm': 'vscode-icons:file-type-npm',
+  'yarn': 'vscode-icons:file-type-yarn',
+  'bun': 'vscode-icons:file-type-bun',
+  'deno': 'vscode-icons:file-type-deno',
+  // frameworks
+  'vue': 'vscode-icons:file-type-vue',
+  'svelte': 'vscode-icons:file-type-svelte',
+  'angular': 'vscode-icons:file-type-angular',
+  'react': 'vscode-icons:file-type-reactjs',
+  'next': 'vscode-icons:file-type-light-next',
+  'nuxt': 'vscode-icons:file-type-nuxt',
+  // 'solid': 'logos:solidjs-icon',
+  'astro': 'vscode-icons:file-type-light-astro',
+  // bundlers
+  'rollup': 'vscode-icons:file-type-rollup',
+  'webpack': 'vscode-icons:file-type-webpack',
+  'vite': 'vscode-icons:file-type-vite',
+  'esbuild': 'vscode-icons:file-type-esbuild',
+  // configuration files
+  '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',
+  '.eslintignore': 'vscode-icons:file-type-eslint',
+  'eslint.config': 'vscode-icons:file-type-eslint',
+  '.gitignore': 'vscode-icons:file-type-git',
+  '.gitattributes': 'vscode-icons:file-type-git',
+  '.env': 'vscode-icons:file-type-dotenv',
+  '.env.example': 'vscode-icons:file-type-dotenv',
+  '.vscode': 'vscode-icons:file-type-vscode',
+  'tailwind.config': 'vscode-icons:file-type-tailwind',
+  'uno.config': 'vscode-icons:file-type-unocss',
+  'unocss.config': 'vscode-icons:file-type-unocss',
+  '.oxlintrc': 'vscode-icons:file-type-oxlint',
+  // filename extensions
+  'mts': 'vscode-icons:file-type-typescript',
+  'cts': 'vscode-icons:file-type-typescript',
+  'ts': 'vscode-icons:file-type-typescript',
+  'tsx': 'vscode-icons:file-type-typescript',
+  'mjs': 'vscode-icons:file-type-js',
+  'cjs': 'vscode-icons:file-type-js',
+  'json': 'vscode-icons:file-type-json',
+  'js': 'vscode-icons:file-type-js',
+  'jsx': 'vscode-icons:file-type-js',
+  'md': 'vscode-icons:file-type-markdown',
+  'py': 'vscode-icons:file-type-python',
+  'ico': 'vscode-icons:file-type-favicon',
+  'html': 'vscode-icons:file-type-html',
+  'css': 'vscode-icons:file-type-css',
+  'scss': 'vscode-icons:file-type-scss',
+  'yml': 'vscode-icons:file-type-light-yaml',
+  'yaml': 'vscode-icons:file-type-light-yaml',
+  'php': 'vscode-icons:file-type-php',
+}
diff --git a/packages/nimiq-vitepress-theme/src/code-groups/codegen.ts b/packages/nimiq-vitepress-theme/src/code-groups/codegen.ts
@@ -0,0 +1,41 @@
+import { icons } from '@iconify-json/vscode-icons'
+import { encodeSvgForCss, getIconData, iconToHTML, iconToSVG } from '@iconify/utils'
+import { builtinIcons } from './builtin-icons'
+
+export async function generateCSS(labels: Set<string>) {
+  const mergedIcons = { ...builtinIcons }
+  console.log({labels})
+  const matched = getMatchedLabels(labels, mergedIcons)
+  const css = await generateIconCSS(matched)
+  return { css }
+}
+
+function getMatchedLabels(labels: Set<string>, icons: Record<string, string>) {
+  const matched: Record<string, string[]> = {}
+  const sortedKeys = Object.keys(icons).sort((a, b) => b.length - a.length)
+  for (const label of labels) {
+    const key = sortedKeys.find(k => label?.toLowerCase().includes(k))
+    if (key) {
+      matched[icons[key]] = (matched[icons[key]] || []).concat(label)
+    }
+  }
+  return matched
+}
+
+async function generateIconCSS(matched: Record<string, string[]>) {
+  const iconCSS = await Promise.all(Object.entries(matched).map(async ([icon, labels]) => {
+    const [, iconName] = icon.split(':')
+    const iconData = getIconData(icons, iconName)
+    if (!iconData)
+      throw new Error(`Icon not found: ${iconName}`)
+    const { attributes, body } = iconToSVG(iconData)
+    const svg = encodeSvgForCss(iconToHTML(body, attributes))
+    const selector = labels.map(l => l.replace('.','')).map(
+      label => `:where([data-title$='${label}' i], [class$='language-${label}' i] .lang)::before`,
+    ).join(', ')
+    return `${selector} {--logo: url("data:image/svg+xml,${svg}");}`
+  }))
+  console.log({iconCSS,matched})
+
+  return iconCSS.sort().join('')
+}
diff --git a/packages/nimiq-vitepress-theme/src/code-groups/vite.ts b/packages/nimiq-vitepress-theme/src/code-groups/vite.ts
@@ -0,0 +1,70 @@
+// https://github.com/yuyinws/vitepress-plugin-group-icons/blob/main/src/vite.ts
+
+import type { Plugin, ViteDevServer } from 'vite'
+import { createFilter } from 'vite'
+import { generateCSS } from './codegen'
+
+const filter = createFilter([/\.md$/, /\.md\?vue/, /\.md\?v=/])
+
+export function groupIconVitePlugin(): Plugin {
+  const virtualCssId = 'virtual:group-icons.css'
+  const resolvedVirtualCssId = `\0${virtualCssId}`
+  const combinedRegex = /```(?:\S+)\s+\[(?:.*\.)?([^\]]+)\]/g;
+  const matches = new Set<string>()
+
+  let oldMatches: Set<string> = new Set()
+  let server: ViteDevServer | undefined
+
+  function handleUpdateModule() {
+    const mod = server?.moduleGraph.getModuleById(resolvedVirtualCssId)
+    if (mod) {
+      server!.moduleGraph.invalidateModule(mod)
+      server!.reloadModule(mod)
+    }
+  }
+
+  return {
+    name: 'vitepress-forked-plugin-group-icons',
+    resolveId(id) {
+      if (id === virtualCssId)
+        return resolvedVirtualCssId
+    },
+
+    configureServer(_server) {
+      server = _server
+    },
+
+    async load(id) {
+      if (id === resolvedVirtualCssId) {
+        const { css } = await generateCSS(matches)
+        oldMatches = new Set(matches)
+        return css
+      }
+    },
+    transform(code, id) {
+      if (!filter(id))
+        return
+
+      while (true) {
+        const match = combinedRegex.exec(code)
+        if (!match)
+          break
+        matches.add(match[1])
+      }
+      console.log('matches', matches)
+
+      if (!isSetEqual(matches, oldMatches))
+        handleUpdateModule()
+    },
+  }
+}
+
+function isSetEqual(set1: Set<string>, set2: Set<string>) {
+  if (set1.size !== set2.size)
+    return false
+  for (const item of set1) {
+    if (!set2.has(item))
+      return false
+  }
+  return true
+}
diff --git a/packages/nimiq-vitepress-theme/src/composables/useCurrentModule.ts b/packages/nimiq-vitepress-theme/src/composables/useCurrentModule.ts
@@ -1,8 +1,9 @@
 import type { NimiqVitepressThemeConfig, NimiqVitepressThemeNav } from '../types'
+import { createSharedComposable } from '@vueuse/core'
 import { useData, useRoute, withBase } from 'vitepress'
 import { computed } from 'vue'
 
-export function useCurrentModule() {
+export const useCurrentModule = createSharedComposable(() => {
   const { theme } = useData<NimiqVitepressThemeConfig>()
 
   const route = useRoute()
@@ -17,4 +18,4 @@ export function useCurrentModule() {
     text: computed(() => currentDocModule.value?.text),
     fullPath: computed(() => currentDocModule.value ? withBase(currentDocModule.value.subpath) : ''),
   }
-}
+})
diff --git a/packages/nimiq-vitepress-theme/src/composables/useSecondarySidebar.ts b/packages/nimiq-vitepress-theme/src/composables/useSecondarySidebar.ts
@@ -1,5 +1,5 @@
 import type { NimiqVitepressThemeConfig } from '../types'
-import { useScroll, useThrottleFn } from '@vueuse/core'
+import { createSharedComposable, useScroll, useThrottleFn } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
@@ -10,7 +10,7 @@ export interface SidebarHeading {
   items: SidebarHeading[]
 }
 
-export function useSecondarySidebar() {
+export const useSecondarySidebar = createSharedComposable(() => {
   const { frontmatter } = useData<NimiqVitepressThemeConfig>()
   const headingTree = ref<SidebarHeading[]>([])
   const activeHeadings = ref<string[]>([])
@@ -111,4 +111,4 @@ export function useSecondarySidebar() {
     showWidget,
     showSecondarySidebar,
   }
-}
+})
diff --git a/packages/nimiq-vitepress-theme/src/index.ts b/packages/nimiq-vitepress-theme/src/index.ts
@@ -2,28 +2,25 @@ import type { NimiqVitepressThemeConfig } from 'nimiq-vitepress-theme/types.js'
 import type { UserConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs'
-import { defu } from 'defu'
 import { defineConfigWithTheme } from 'vitepress'
-import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
-const defaultConfig: UserConfig<NimiqVitepressThemeConfig> = {
-  title: 'Nimiq Vitepress',
-  description: 'Build awesome docs with the Nimiq Style',
-  markdown: {
-    config: (md) => {
-      md.use(groupIconMdPlugin)
+export function defineNimiqVitepressConfig<T = NimiqVitepressThemeConfig>(config: UserConfig<T>): UserConfig<T> {
+  const defaultConfig: UserConfig<T> = {
+    title: 'Nimiq Vitepress',
+    description: 'Build awesome docs with the Nimiq Style',
+    markdown: {
+      theme: 'vitesse-dark',
+      languages: ['vue', 'vue-html', 'js', 'ts', 'markdown', 'json', 'rs'],
+      codeTransformers: [
+        transformerTwoslash({
+          typesCache: createFileSystemTypesCache(),
+        }),
+      ],
     },
-    theme: 'vitesse-dark',
-    languages: ['vue', 'vue-html', 'js', 'ts', 'markdown', 'json', 'rs'],
-    codeTransformers: [
-      transformerTwoslash({
-        typesCache: createFileSystemTypesCache(),
-      }),
-    ],
-  },
-}
+  }
 
-export function defineNimiqVitepressConfig<T extends NimiqVitepressThemeConfig>(config: UserConfig<T>) {
-  const mergedConfig = defu(config, defaultConfig) as UserConfig<NimiqVitepressThemeConfig>
-  return defineConfigWithTheme(mergedConfig)
+  return defineConfigWithTheme<T>({
+    extends: defaultConfig,
+    ...config,
+  })
 }
diff --git a/packages/nimiq-vitepress-theme/src/layout/SecondarySidebar.vue b/packages/nimiq-vitepress-theme/src/layout/SecondarySidebar.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
-import '../assets/code-blocks.css'
-import '../assets/typography.css'
-import '../assets/github-callouts.css'
 
 const { headingTree, isHeadingActive, showOutline, showWidget } = useSecondarySidebar()
 </script>
diff --git a/packages/nimiq-vitepress-theme/src/theme.ts b/packages/nimiq-vitepress-theme/src/theme.ts
@@ -6,6 +6,7 @@ import NqLargeCard from './components/NqLargeCard.vue'
 import Layout from './layout/Layout.vue'
 
 import './assets/index.css'
+import 'virtual:group-icons.css'
 
 export function defineNimiqThemeConfig(options: DefineThemeNqVpOptions): Theme {
   return {
diff --git a/packages/nimiq-vitepress-theme/src/vite.ts b/packages/nimiq-vitepress-theme/src/vite.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { defineNimiqVitepressConfig } from 'nimiq-vitepress-theme'`
	`1`	`+import { defineNimiqVitepressConfig } from '../../packages/nimiq-vitepress-theme/src/'`
`2`	`2`	`import PreviewPlugin from './theme/plugins/component-preview'`
`3`	`3`
`4`	`4`	`// @unocss-include`