docs: show icons in code-groups and code titles, update sidebar (#6970)

docs/.vitepress/style/main.css

@@ -6,6 +6,10 @@ html:not(.dark) [img-dark] {
   display: none;
 }
 
+details summary {
+  cursor: pointer;
+}
+
 /* Overrides */
 
 .sp .sp-link.link:hover,

docs/.vitepress/theme/index.ts

@@ -10,6 +10,7 @@ import '../style/main.css'
 import '../style/vars.css'
 import 'uno.css'
 import '@shikijs/vitepress-twoslash/style.css'
+import 'virtual:group-icons.css'
 
 if (inBrowser) {
   import('./pwa')

docs/advanced/metadata.md

@@ -22,8 +22,7 @@ test('custom', ({ task }) => {
 
 Once a test is completed, Vitest will send a task including the result and `meta` to the Node.js process using RPC. To intercept and process this task, you can utilize the `onTaskUpdate` method available in your reporter implementation:
 
-```ts
-// custom-reporter.js
+```ts [custom-reporter.js]
 export default {
   // you can intercept packs if needed
   onTaskUpdate(packs) {

docs/advanced/reporters.md

@@ -18,8 +18,7 @@ Of course, you can create your reporter from scratch. Just extend the `BaseRepor
 
 And here is an example of a custom reporter:
 
-```ts
-// ./custom-reporter.js
+```ts [custom-reporter.js]
 import { BaseReporter } from 'vitest/reporters'
 
 export default class CustomReporter extends BaseReporter {
@@ -32,8 +31,7 @@ export default class CustomReporter extends BaseReporter {
 
 Or implement the `Reporter` interface:
 
-```ts
-// ./custom-reporter.js
+```ts [custom-reporter.js]
 import { Reporter } from 'vitest/reporters'
 
 export default class CustomReporter implements Reporter {
@@ -45,7 +43,7 @@ export default class CustomReporter implements Reporter {
 
 Then you can use your custom reporter in the `vitest.config.ts` file:
 
-```ts
+```ts [vitest.config.ts]
 import { defineConfig } from 'vitest/config'
 import CustomReporter from './custom-reporter.js'
 

docs/advanced/runner.md

@@ -246,8 +246,7 @@ Vitest exposes a `Custom` task type that allows users to reuse built-int reporte
 
 A task is an object that is part of a suite. It is automatically added to the current suite with a `suite.task` method:
 
-```js
-// ./utils/custom.js
+```js [custom.js]
 import { createTaskCollector, getCurrentSuite, setFn } from 'vitest/suite'
 
 export { afterAll, beforeAll, describe } from 'vitest'
@@ -270,9 +269,8 @@ export const myCustomTask = createTaskCollector(
 )
 ```
 
-```js
-// ./garden/tasks.test.js
-import { afterAll, beforeAll, describe, myCustomTask } from '../custom.js'
+```js [tasks.test.js]
+import { afterAll, beforeAll, describe, myCustomTask } from './custom.js'
 import { gardener } from './gardener.js'
 
 describe('take care of the garden', () => {

docs/api/vi.md

@@ -136,8 +136,7 @@ For example, you have this file structure:
 
 If you call `vi.mock` in a test file without a factory or options provided, it will find a file in the `__mocks__` folder to use as a module:
 
-```ts
-// increment.test.js
+```ts [increment.test.js]
 import { vi } from 'vitest'
 
 // axios is a default export from `__mocks__/axios.js`
@@ -175,14 +174,13 @@ import { increment } from './increment.js'
 ```
 :::
 
-```ts
-// ./increment.js
+```ts [increment.js]
 export function increment(number) {
   return number + 1
 }
 ```
 
-```ts
+```ts [increment.test.js]
 import { beforeEach, test } from 'vitest'
 import { increment } from './increment.js'
 
@@ -216,8 +214,7 @@ Type helper for TypeScript. Just returns the object that was passed.
 
 When `partial` is `true` it will expect a `Partial<T>` as a return value. By default, this will only make TypeScript believe that the first level values are mocked. You can pass down `{ deep: true }` as a second argument to tell TypeScript that the whole object is mocked, if it actually is.
 
-```ts
-// example.ts
+```ts [example.ts]
 export function add(x: number, y: number): number {
   return x + y
 }
@@ -227,8 +224,7 @@ export function fetchSomething(): Promise<Response> {
 }
 ```
 
-```ts
-// example.test.ts
+```ts [example.test.ts]
 import * as example from './example'
 
 vi.mock('./example')
@@ -277,14 +273,13 @@ Removes module from the mocked registry. All calls to import will return the ori
 
 The same as [`vi.unmock`](#vi-unmock), but is not hoisted to the top of the file. The next import of the module will import the original module instead of the mock. This will not unmock previously imported modules.
 
-```ts
-// ./increment.js
+```ts [increment.js]
 export function increment(number) {
   return number + 1
 }
 ```
 
-```ts
+```ts [increment.test.js]
 import { increment } from './increment.js'
 
 // increment is already mocked, because vi.mock is hoisted