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]