docs: improve readability (code group icons + code titles)

docs/.vitepress/config/index.ts

@@ -38,7 +38,15 @@ export default defineConfig({
   },
   vite: {
     plugins: [
-      groupIconVitePlugin(),
+      groupIconVitePlugin({
+        customIcon: {
+          'nuxt': 'catppuccin:nuxt',
+          '.ts': 'catppuccin:typescript',
+          'pnpm': 'catppuccin:pnpm',
+          'npm': 'catppuccin:npm',
+          'yarn': 'catppuccin:yarn',
+        },
+      }),
     ],
   },
   themeConfig: {

docs/.vitepress/theme/style.css

@@ -204,3 +204,10 @@
 :root {
   --vp-nav-logo-height: 36px;
 }
+
+.vp-code-block-title [data-title]::before,
+.vp-code-group [data-title]::before {
+  width: 1.2em !important;
+  height: 1.2em !important;
+  margin-bottom: -0.25em !important;
+}

docs/frameworks/nuxt.md

@@ -17,8 +17,8 @@ The `pinia-plugin-persistedstate` package comes with a Nuxt module to offer an S
   ```
   :::
 
-2. Add the module to the Nuxt config (`nuxt.config.ts`):
-```ts
+1. Add the module to the Nuxt config:
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: [
     '@pinia/nuxt',
@@ -152,12 +152,12 @@ The module accepts some options defined in `nuxt.config.ts` under the `piniaPlug
 - [`cookieOptions`](#cookies)
 - `debug`
 - [`key`](#global-key)
-- - `storage`
+- `storage`
 
 > [!NOTE]
 > The global storage option only accepts string values of pre-configured storages (`'cookies'`, `'localStorage'`, `'sessionStorage'`). This is due Nuxt's way of [passing module options to runtime](https://nuxt.com/docs/guide/going-further/modules#exposing-options-to-runtime).
 
-```ts{6-12}
+```ts{6-12} [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: [
     '@pinia/nuxt',
@@ -177,7 +177,7 @@ export default defineNuxtConfig({
 
 You can provide a template string to prefix/postfix keys used globally. The provided key must include the token `%id` which will be replaced by the corresponding store's id.
 
-```ts{6}
+```ts{6} [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: [
     '@pinia/nuxt',

package.json

@@ -89,6 +89,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.6.0",
+    "@iconify-json/catppuccin": "^1.2.2",
     "@nuxt/devtools": "^1.4.2",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.13.1",
@@ -113,6 +114,12 @@
     "vue": "^3.5.5",
     "vue-tsc": "^2.1.6"
   },
+  "pnpm": {
+    "patchedDependencies": {
+      "@iconify-json/catppuccin": "patches/@iconify-json__catppuccin.patch",
+      "vitepress-plugin-group-icons": "patches/vitepress-plugin-group-icons.patch"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },

patches/@iconify-json__catppuccin.patch

@@ -0,0 +1,12 @@
+diff --git a/icons.json b/icons.json
+index 9c70e49c6f28a18f7d601b641d182c94e7710f1f..44d3776aff994b8e64df9040a7408aaa9cd5ed4d 100644
+--- a/icons.json
++++ b/icons.json
+@@ -1609,5 +1609,7 @@
+ 			"parent": "apache"
+ 		}
+ 	},
++	"width": 16,
++	"height": 16,
+ 	"lastModified": 1726289695
+ }

patches/vitepress-plugin-group-icons.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 7960fa7137696d6a6751359bb634aa215a18a3e9..f21c9b4a2fbf4e6ca02c54b9e81d098ba4ae1431 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -103,7 +103,7 @@ async function generateCSS(labels, options) {
+   border-top-right-radius: 0 !important;
+ }
+ `;
+-  const mergedIcons = { ...options.customIcon, ...builtinIcons };
++  const mergedIcons = { ...builtinIcons, ...options.customIcon };
+   const matched = getMatchedLabels(labels, mergedIcons);
+   const css = baseCSS + await generateIconCSS(matched);
+   return { css };