.gitignore

@@ -2,14 +2,14 @@
 /src/client/shared.ts
 /src/node/shared.ts
 *.log
+*.tgz
 .DS_Store
 .idea
+.temp
 .vite_opt_cache
 .vscode
 dist
+examples-temp
 node_modules
 pnpm-global
 TODOs.md
-.temp
-*.tgz
-examples-temp

CHANGELOG.md

@@ -1,3 +1,28 @@
+# [1.0.0-alpha.27](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.26...v1.0.0-alpha.27) (2022-11-03)
+
+
+### Bug Fixes
+
+* **build:** use addClass from shiki-processor ([#1557](https://github.com/vuejs/vitepress/issues/1557)) ([4b0b1ef](https://github.com/vuejs/vitepress/commit/4b0b1ef35f38461514f3e97e0a509029a70d3086)), closes [#1555](https://github.com/vuejs/vitepress/issues/1555)
+* **build:** use default slugify from mdit-vue ([#1554](https://github.com/vuejs/vitepress/issues/1554)) ([8cd1f7c](https://github.com/vuejs/vitepress/commit/8cd1f7c4aadb7a911158ac628233b3878a60786a))
+* prevent overlay getting hidden behind navbar ([#1547](https://github.com/vuejs/vitepress/issues/1547)) ([87d6c08](https://github.com/vuejs/vitepress/commit/87d6c085d6ccf084d5435216741e3af408c9897a))
+* remove shell code copy trailing newline ([#1561](https://github.com/vuejs/vitepress/issues/1561)) ([f36cd0d](https://github.com/vuejs/vitepress/commit/f36cd0d62625c3221533b9e1f83a58b2cd4429a2))
+* **theme:** use stored preference to be the value of `userPreference` ([#1543](https://github.com/vuejs/vitepress/issues/1543)) ([a7abf73](https://github.com/vuejs/vitepress/commit/a7abf73e432caa6b06b868e7c8c01c6f31b6cc54))
+
+
+### Features
+
+* **theme:** add built-in global component `Badge`  ([#1239](https://github.com/vuejs/vitepress/issues/1239)) ([ac8619f](https://github.com/vuejs/vitepress/commit/ac8619f841862b8629ea0416ba2f188faceebc70))
+* **theme:** add link feature in homepage features ([#984](https://github.com/vuejs/vitepress/issues/984)) ([#1404](https://github.com/vuejs/vitepress/issues/1404)) ([84b4abc](https://github.com/vuejs/vitepress/commit/84b4abc5fa29b353d52162508a31f55a4ea755e5)), closes [#1070](https://github.com/vuejs/vitepress/issues/1070)
+* **theme:** sort multiple sidebars ([#1552](https://github.com/vuejs/vitepress/issues/1552)) ([db1c343](https://github.com/vuejs/vitepress/commit/db1c343dfb7011825b18253b4b8a47b5d8f6f817))
+
+
+### Reverts
+
+* **#1530:** explicitly exit process after build to prevent hangup ([#1572](https://github.com/vuejs/vitepress/issues/1572)) ([01719fa](https://github.com/vuejs/vitepress/commit/01719fa58e245291e640d5b0bc51cac5a4a3085c)), closes [#1530](https://github.com/vuejs/vitepress/issues/1530)
+
+
+
 # [1.0.0-alpha.26](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.25...v1.0.0-alpha.26) (2022-10-27)
 
 

__tests__/client/theme-default/support/sidebar.spec.ts

@@ -0,0 +1,97 @@
+import { describe, test, expect } from 'vitest'
+import { getSidebar } from 'client/theme-default/support/sidebar'
+
+describe('client/theme-default/support/sidebar', () => {
+  const root = [
+    {
+      text: 'A',
+      collapsible: true,
+      items: [
+        {
+          text: 'A',
+          link: ''
+        }
+      ]
+    },
+    {
+      text: 'B',
+      items: [
+        {
+          text: 'B',
+          link: ''
+        }
+      ]
+    }
+  ]
+  const another = [
+    {
+      text: 'C',
+      items: [
+        {
+          text: 'C',
+          link: ''
+        }
+      ]
+    }
+  ]
+  describe('normal sidebar sort', () => {
+    const normalSidebar = {
+      '/': root,
+      '/multi-sidebar/': another
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(normalSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(normalSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(normalSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+  describe('reversed sidebar sort', () => {
+    const reversedSidebar = {
+      '/multi-sidebar/': another,
+      '/': root
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(reversedSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(reversedSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(reversedSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+  describe('nested sidebar sort', () => {
+    const nested = [
+      {
+        text: 'D',
+        items: [
+          {
+            text: 'D',
+            link: ''
+          }
+        ]
+      }
+    ]
+    const nestedSidebar = {
+      '/': root,
+      '/multi-sidebar/': another,
+      '/multi-sidebar/nested/': nested
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets /multi-sidebar/nested/ sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/multi-sidebar/nested/')).toBe(nested)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(nestedSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+})

docs/.vitepress/config.ts

@@ -108,6 +108,7 @@ function sidebarGuide() {
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Home Page', link: '/guide/theme-home-page' },
         { text: 'Team Page', link: '/guide/theme-team-page' },
+        { text: 'Badge', link: '/guide/theme-badge' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Search', link: '/guide/theme-search' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }

docs/config/frontmatter-configs.md

@@ -197,9 +197,23 @@ interface Feature {
 
   // Details of the feature.
   details: string
+
+  // Link when clicked on feature component. The link can
+  // be both internal or external.
+  //
+  // e.g. `guide/theme-home-page` or `htttps://example.com`
+  link?: string
+
+  // Link text to be shown inside feature component. Best
+  // used with `link` option.
+  //
+  // e.g. `Learn more`, `Visit page`, etc.
+  linkText?: string
 }
 ```
 
+You may learn more about it in [Theme: Home Page](../guide/theme-home-page).
+
 ## aside
 
 - Type: `boolean`

docs/guide/theme-badge.md

@@ -0,0 +1,83 @@
+# Badge
+
+The badge lets you add status to your headers. For example, it could be useful to specify the section's type, or supported version.
+
+## Usage
+
+You may use the `Badge` component which is globally available.
+
+```html
+### Title <Badge type="info" text="default" />
+### Title <Badge type="tip" text="^1.9.0" />
+### Title <Badge type="warning" text="beta" />
+### Title <Badge type="danger" text="caution" />
+```
+
+Code above renders like:
+
+### Title <Badge type="info" text="default" vertical="middle" />
+### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
+### Title <Badge type="warning" text="beta" vertical="middle" />
+### Title <Badge type="danger" text="caution" vertical="middle" />
+
+## Custom Children
+
+`<Badge>` accept `children`, which will be displayed in the badge.
+
+```html
+### Title <Badge type="info">custom element</Badge>
+```
+
+### Title <Badge type="info">custom element</Badge>
+
+## Customize Type Color
+
+you can customize `background-color` of typed `<Badge />` by override css vars. The following is he default values.
+
+```css
+:root {
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-white-soft);
+
+  --vp-badge-tip-border: var(--vp-c-green-dimm-1);
+  --vp-badge-tip-text: var(--vp-c-green-darker);
+  --vp-badge-tip-bg: var(--vp-c-green-dimm-3);
+
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
+  --vp-badge-warning-text: var(--vp-c-yellow-darker);
+  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
+
+  --vp-badge-danger-border: var(--vp-c-red-dimm-1);
+  --vp-badge-danger-text: var(--vp-c-red-darker);
+  --vp-badge-danger-bg: var(--vp-c-red-dimm-3);
+}
+
+.dark {
+  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-bg: var(--vp-c-black-mute);
+
+  --vp-badge-tip-border: var(--vp-c-green-dimm-2);
+  --vp-badge-tip-text: var(--vp-c-green-light);
+
+  --vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
+  --vp-badge-warning-text: var(--vp-c-yellow-light);
+
+  --vp-badge-danger-border: var(--vp-c-red-dimm-2);
+  --vp-badge-danger-text: var(--vp-c-red-light);
+}
+```
+
+## `<Badge>`
+
+`<Badge>` component accepts following props:
+
+```ts
+interface Props {
+  // When `<slot>` is passed, this value gets ignored.
+  text?: string
+
+  // Defaults to `tip`.
+  type?: 'info' | 'tip' | 'warning' | 'danger'
+}
+```

docs/guide/theme-home-page.md

@@ -115,5 +115,17 @@ interface Feature {
 
   // Details of the feature.
   details: string
+
+  // Link when clicked on feature component. The link can
+  // be both internal or external.
+  //
+  // e.g. `guide/theme-home-page` or `htttps://example.com`
+  link?: string
+
+  // Link text to be shown inside feature component. Best
+  // used with `link` option.
+  //
+  // e.g. `Learn more`, `Visit page`, etc.
+  linkText?: string
 }
 ```

docs/guide/theme-introduction.md

@@ -10,6 +10,7 @@ VitePress comes with its default theme providing many features out of the box. L
 - [Layout](./theme-layout)
 - [Home Page](./theme-home-page)
 - [Team Page](./theme-team-page)
+- [Badge](./theme-badge)
 - [Footer](./theme-footer)
 - [Search](./theme-search)
 - [Carbon Ads](./theme-carbon-ads)
@@ -109,9 +110,12 @@ import DefaultTheme from 'vitepress/theme'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
-    // register global components
-    app.component('MyGlobalComponent', /* ... */)
+  enhanceApp(ctx) {
+    // extend default theme custom behaviour.
+    DefaultTheme.enhanceApp(ctx)
+
+    // register your custom global components
+    ctx.app.component('MyGlobalComponent' /* ... */)
   }
 }
 ```

docs/guide/using-vue.md

@@ -62,7 +62,7 @@ const { page } = useData()
 
 ## Escaping
 
-By default, fenced code blocks are automatically wrapped with `v-pre`, unless you have set some language with `-vue` suffix like `js-vue` (in that case you can use Vue-style interpolation inside fences). To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
+By default, fenced code blocks are automatically wrapped with `v-pre`. To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
 
 **Input**
 
@@ -113,8 +113,9 @@ import DefaultTheme from 'vitepress/theme'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
-    app.component('VueClickAwayExample', VueClickAwayExample)
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('VueClickAwayExample', VueClickAwayExample)
   }
 }
 ```

examples/configured/.vitepress/config.js

@@ -24,6 +24,30 @@ export default defineConfig({
               link: '/static-data/data'
             }
           ]
+        },
+        {
+          text: 'Multi Sidebar Test',
+          items: [
+            {
+              text: 'Test Page',
+              link: '/multi-sidebar/'
+            }
+          ]
+        }
+      ],
+      '/multi-sidebar/': [
+        {
+          text: 'Multi Sidebar',
+          items: [
+            {
+              text: 'Test Page',
+              link: '/multi-sidebar/'
+            },
+            {
+              text: 'Back',
+              link: '/'
+            }
+          ]
         }
       ]
     }

examples/configured/__test__/multisidebar.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from 'vitest'
+import { page, vitePressTestUrl, waitForLayout } from '~utils'
+
+describe('test multi sidebar sort root', () => {
+  beforeAll(async () => {
+    await page.goto(
+      vitePressTestUrl + '/frontmatter/multiple-levels-outline.html'
+    )
+    await waitForLayout()
+  })
+
+  test('using / sidebar', async () => {
+    const sidebarLocator = await page.locator(
+      '.VPSidebarGroup .title .title-text'
+    )
+
+    const sidebarContent = await sidebarLocator.allTextContents()
+    expect(sidebarContent).toEqual([
+      'Frontmatter',
+      'Static Data',
+      'Multi Sidebar Test'
+    ])
+  })
+})
+
+describe('test multi sidebar sort other', () => {
+  beforeAll(async () => {
+    await page.goto(vitePressTestUrl + '/multi-sidebar/index.html')
+    await waitForLayout()
+  })
+
+  test('using /multi-sidebar/ sidebar', async () => {
+    const sidebarLocator = await page.locator(
+      '.VPSidebarGroup .title .title-text'
+    )
+
+    const sidebarContent = await sidebarLocator.allTextContents()
+    expect(sidebarContent).toEqual(['Multi Sidebar'])
+  })
+})