feat: integrate group icon plugin and update Vitepress configuration

Author: onmax

docs/.vitepress/config.ts

@@ -1,13 +1,9 @@
-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 { defineConfigWithTheme } from 'vitepress'
+import { defineNimiqVitepressConfig } from 'nimiq-vitepress-theme'
 import PreviewPlugin from './theme/plugins/component-preview'
 
 // @unocss-include
 
-export default defineConfigWithTheme<NimiqVitepressThemeConfig>({
+export default defineNimiqVitepressConfig({
   title: 'Nimiq UI',
   description: 'Build awesome apps with the Nimiq Style',
   base: '/nimiq-ui/',
@@ -151,12 +147,5 @@ export default defineConfigWithTheme<NimiqVitepressThemeConfig>({
     preConfig(md) {
       md.use(PreviewPlugin)
     },
-    theme: 'vitesse-dark',
-    languages: ['vue', 'vue-html', 'js', 'ts', 'markdown'],
-    codeTransformers: [
-      transformerTwoslash({
-        typesCache: createFileSystemTypesCache(),
-      }),
-    ],
   },
-} satisfies UserConfig<NimiqVitepressThemeConfig>)
+})

packages/nimiq-vitepress-theme/package.json

@@ -76,16 +76,19 @@
     "nimiq-icons": "workspace:*",
     "p-map": "catalog:",
     "reka-ui": "catalog:",
+    "vitepress-plugin-group-icons": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
   "devDependencies": {
     "@iconify/utils": "catalog:",
+    "@shikijs/vitepress-twoslash": "catalog:",
     "@types/cross-spawn": "catalog:",
     "@unocss/cli": "catalog:",
     "@unocss/reset": "catalog:",
     "bumpp": "catalog:",
     "cross-spawn": "catalog:",
+    "defu": "catalog:",
     "nimiq-css": "workspace:*",
     "pathe": "catalog:",
     "typescript": "catalog:",

packages/nimiq-vitepress-theme/src/index.ts

@@ -0,0 +1,29 @@
+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)
+    },
+    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)
+}

packages/nimiq-vitepress-theme/src/layout/Changelog.vue

@@ -12,14 +12,10 @@ const [DefineCommitRegularLine, CommitRegularLine] = createReusableTemplate<Comm
 </script>
 
 <template>
-  <h2 id="changelog" px-48>
+  <h2 id="changelog" sr-only>
     Changelog
-    <a class="header-anchor" href="#changelog" aria-label="Permalink to Changelog" />
   </h2>
-  <div v-if="!commits.length" px-32 mt-6 italic op-60>
-    No Logs
-  </div>
-  <Collapsible.Root v-else class="nq-raw" px-32 bg-neutral-200 rounded-8>
+  <Collapsible.Root v-if="commits.length > 0" class="nq-raw" px-32 bg-neutral-200 rounded-8 f-mt-lg>
     <Collapsible.Trigger bg-transparent w-full f-mt-2xs z-10 flex f-px-xs f-py-2xs>
       <div i-nimiq:watch-1-50 />
       See changelog of this file

packages/nimiq-vitepress-theme/src/vite.ts

@@ -1,14 +1,20 @@
 import type { Plugin } from 'vite'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 export interface NimiqVitepressVitePluginOptions {
 
 }
 
 export function NimiqVitepressVitePlugin(_options: NimiqVitepressVitePluginOptions = {}): Plugin {
+  const plugins: Plugin[] = [
+    groupIconVitePlugin(),
+  ]
+
   return {
     name: 'nimiq-vitepress-plugin',
-    // enforce: 'pre',
+
     config: () => ({
+      plugins,
       optimizeDeps: {
         exclude: [
           'nimiq-vitepress-theme/client',