Add vitepress-plugin-group-icons (#46)

Author: skirtles-code

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',
 

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);

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

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
-<!-- App.vue -->
+```vue [App.vue]
 <script setup>
 import DefaultLayout from './layouts/DefaultLayout.vue'
 </script>
@@ -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
-<!-- App.vue -->
+```vue [App.vue]
 <script setup>
 import { shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
@@ -128,8 +123,7 @@ Here we're using the `LoadingIndicator` component in place of the layout. The `L
 
 We could also implement this using the slot of `RouterView`:
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <script setup>
 import DefaultLayout from './layouts/DefaultLayout.vue'
 import LoadingIndicator from './components/LoadingIndicator.vue'

docs/faq/blank-page-in-production.md

@@ -121,7 +121,7 @@ Usually it's fairly obvious when this is happening, as the rest of the page rend
 
 However, it can be tricky to tell whether routing is the problem if `App.vue` doesn't contain anything else. For example, imagine that `App.vue` just contains this:
 
-```vue
+```vue [App.vue]
 <template>
   <RouterView />
 </template>
@@ -131,7 +131,7 @@ As `App.vue` only renders `<RouterView />`, we can't easily tell whether the pro
 
 To help isolate the source of the problem, it is worth adding some extra temporary code to `App.vue`, to confirm that it is rendering correctly. For example:
 
-```vue
+```vue [App.vue]
 <template>
   <h1>Hello world!</h1>
   <RouterView />

docs/faq/no-active-pinia.md

@@ -189,15 +189,13 @@ The error is shown when step 3 occurs before step 2. The Pinia instance must be
 
 But, in practice, it probably isn't that simple. In a real application, those 3 steps usually don't sit in the same file. More likely, they're in 3 separate files, something like this:
 
-```js
-// useProductsStore.js
+```js [useProductsStore.js]
 export const useProductsStore = defineStore('products', {
   // ...
 })
 ```
 
-```js
-// main.js
+```js [main.js]
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from 'App.vue'
@@ -221,15 +219,13 @@ To understand that, we first need to understand `import`, and specifically how J
 
 Let's start with a plain `.js` example. It works much the same way with `.ts` and we'll stick to `.js` throughout this page. It's a bit more complicated with `.vue` files, but we'll cover those later.
 
-```js
-// main.js
+```js [main.js]
 import { data } from './store.js'
 
 console.log('main.js', data)
 ```
 
-```js
-// store.js
+```js [store.js]
 const data = { name: 'Vue' }
 
 console.log('store.js', data)
@@ -382,8 +378,7 @@ Generally speaking, you shouldn't be trying to access the store in top-level cod
 
 Let's say we have some code like this:
 
-```js
-// product-utils.js
+```js [product-utils.js]
 import { useProductsStore } from '@/stores/products'
 
 const products = useProductsStore()
@@ -401,8 +396,7 @@ When exactly this happens will depend on exactly where this file is imported. If
 
 In the example above, we might fix it by moving the call to `useProductsStore()` inside `fetchProduct()`:
 
-```js
-// product-utils.js
+```js [product-utils.js]
 import { useProductsStore } from '@/stores/products'
 
 export function fetchProduct(id) {
@@ -572,8 +566,7 @@ This can cause a lot of confusion, as top-level code can appear to work in some
 
 Let's revisit an example we saw earlier:
 
-```js
-// product-utils.js
+```js [product-utils.js]
 import { useProductsStore } from '@/stores/products'
 
 const products = useProductsStore()
@@ -607,7 +600,7 @@ The Pinia instance will be created when the page first loads. If you edit one of
 
 Let's imagine we have code like this in our `main.js`:
 
-```js
+```js [main.js]
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
@@ -630,7 +623,7 @@ Yes, we can. This almost certainly isn't a good idea, but it can work.
 
 For example, let's move some of the code above into a file called `app-create.js`:
 
-```js
+```js [app-create.js]
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
@@ -643,7 +636,7 @@ export { app }
 
 Then, we could change our `main.js` to this:
 
-```js
+```js [main.js]
 import { app } from './app-create'
 import router from './router'
 
@@ -664,8 +657,7 @@ In the case of Pinia, it aims to be global in the same way that [`app.config.glo
 
 Let's imagine you choose not to use Pinia and instead do something like this:
 
-```js
-// store.js
+```js [store.js]
 import { reactive } from 'vue'
 
 export const state = reactive({})
@@ -731,7 +723,7 @@ import { loadProducts } from './products'
 
 So far, no store. Now let's take a look at `products.js`:
 
-```js
+```js [products.js]
 import { useProductsStore } from '@/stores/products'
 
 export async function loadProducts() {

docs/faq/unique-element-ids.md

@@ -10,7 +10,7 @@ In many cases, it's sufficient to use a simple counter to generate a suitable `i
 
 Put something like this in a `.js` file:
 
-```js
+```js [utils/id.js]
 let count = 0
 
 export function newId(prefix = 'id-') {

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "rimraf": "^6.0.1",
-    "vitepress": "^1.4.3"
+    "vitepress": "^1.4.3",
+    "vitepress-plugin-group-icons": "^1.3.3"
   }
 }