From e9569fc0d771d81b9bd0af386bfc79fb5e8a61b4 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Fri, 24 Jan 2025 20:39:50 +0000
Subject: [PATCH] Add vitepress-plugin-group-icons
---
docs/.vitepress/config.mts | 18 ++++
docs/.vitepress/theme/custom.css | 6 ++
docs/.vitepress/theme/index.ts | 1 +
docs/faq/accessing-the-route.md | 14 +--
docs/faq/blank-page-in-production.md | 4 +-
docs/faq/no-active-pinia.md | 32 +++---
docs/faq/unique-element-ids.md | 2 +-
package.json | 3 +-
pnpm-lock.yaml | 151 +++++++++++++++++++++++++++
9 files changed, 197 insertions(+), 34 deletions(-)
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 2255230..908db2c 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,4 +1,5 @@
import { defineConfig } from 'vitepress'
+import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'
export default defineConfig({
title: 'Vue Land FAQ',
@@ -21,6 +22,23 @@ export default defineConfig({
}
},
+ markdown: {
+ config(md) {
+ md.use(groupIconMdPlugin)
+ },
+ },
+
+ vite: {
+ plugins: [
+ groupIconVitePlugin({
+ customIcon: {
+ '.vue': 'vscode-icons:file-type-vue',
+ 'vue': 'vscode-icons:file-type-js'
+ }
+ })
+ ],
+ },
+
themeConfig: {
logo: '/logo.svg',
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 416e117..df73fe6 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -47,6 +47,12 @@ html:not(.dark) {
border-top: 0 none;
}
+.vp-code-block-title-bar {
+ border: 1px solid var(--vue-land-code-block-border);
+ border-bottom: 0 none;
+ box-shadow: none;
+}
+
/* Inline code in a custom block looks too much like a link */
.custom-block.info code, .custom-block.tip code {
color: var(--vp-code-color);
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 42fe9a9..3a5876d 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,4 +1,5 @@
import DefaultTheme from 'vitepress/theme'
+import 'virtual:group-icons.css'
import './custom.css'
export default DefaultTheme
diff --git a/docs/faq/accessing-the-route.md b/docs/faq/accessing-the-route.md
index 63ab2e7..bc496bd 100644
--- a/docs/faq/accessing-the-route.md
+++ b/docs/faq/accessing-the-route.md
@@ -58,8 +58,7 @@ It is still possible to access `useRoute()` or `this.$route` during that initial
Consider the following example. It tries to use the current route in `App.vue` to decide which layout to wrap around the `RouterView`:
-```vue
-
+```vue [App.vue]
@@ -79,10 +78,7 @@ There are a few ways we might fix this problem.
Vue Router provides the method [`isReady()`](https://router.vuejs.org/api/interfaces/Router.html#isReady), which can be used to wait until it has resolved the route. We could use it to defer mounting the application until the route is ready:
-```js
-// main.js or main.ts
-// ...
-
+```js [main.js]
const app = createApp(App)
app.use(router)
@@ -102,8 +98,7 @@ Depending on your application, that might not matter. A brief pause before the p
With a bit of extra effort, we could show a loading indicator if the route isn't resolved yet. There are a few ways we might implement this. One approach would be to use `router.isReady()` inside `App.vue` to track when the router is ready. e.g.:
-```vue
-
+```vue [App.vue]