Merge branch 'main' of github.com:vuejs/vitepress

.github/workflows/lock-threads.yml

@@ -17,7 +17,7 @@ jobs:
     if: github.repository == 'vuejs/vitepress'
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           issue-inactive-days: 7
           pr-inactive-days: 7

.github/workflows/release-tag.yml

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Create Release for Tag
         id: release_tag

.github/workflows/stale.yml

@@ -6,7 +6,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v8
+      - uses: actions/stale@v9
         with:
           days-before-stale: 30
           days-before-close: -1

.github/workflows/test.yml

@@ -27,13 +27,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node_version }}
           cache: pnpm

CHANGELOG.md

@@ -1,3 +1,69 @@
+# [1.0.0-rc.44](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.43...v1.0.0-rc.44) (2024-2-19)
+
+### Reverts
+
+- types for internal components ([e703429](https://github.com/vuejs/vitepress/commit/e7034294731493a198cdd4789198f1c94f21b181))
+
+# [1.0.0-rc.43](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.42...v1.0.0-rc.43) (2024-2-17)
+
+### Bug Fixes
+
+- handle process.env being undefined while process is not ([b63e0a0](https://github.com/vuejs/vitepress/commit/b63e0a0c57f886f49aa7e073ff623c918164bd0b)), closes [#3579](https://github.com/vuejs/vitepress/issues/3579)
+- make local search work in combination with vue-i18n ([#3559](https://github.com/vuejs/vitepress/issues/3559)) ([6624bb7](https://github.com/vuejs/vitepress/commit/6624bb748610079b88e2dcef7ea1810833a54a85))
+- **theme:** adjust mathjax svg styles ([#3567](https://github.com/vuejs/vitepress/issues/3567)) ([2051100](https://github.com/vuejs/vitepress/commit/20511006dba516ca8c06ed1dd3516547af668a0e))
+
+### Features
+
+- **theme:** auto style markdown content in home page ([#3561](https://github.com/vuejs/vitepress/issues/3561)) ([0903027](https://github.com/vuejs/vitepress/commit/09030272b4a5c8f723b7e11303265f24b7481575))
+
+### Performance Improvements
+
+- **theme:** move svg icons to css ([#3537](https://github.com/vuejs/vitepress/issues/3537)) ([636cca0](https://github.com/vuejs/vitepress/commit/636cca042dfbca006af2d702ddec0a2ff601cb46))
+
+### BREAKING CHANGES
+
+- The default theme now styles the markdown content in the home page. If you have custom styles that rely on the markdown content not being styled, you may need to adjust your styles, or add `markdownStyles: false` to the frontmatter of your home page.
+
+# [1.0.0-rc.42](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.41...v1.0.0-rc.42) (2024-2-6)
+
+### Bug Fixes
+
+- **md:** dont break on nesting blockquotes inside gfm alerts ([8f8a6fe](https://github.com/vuejs/vitepress/commit/8f8a6feb053b3f521a2c90e343dffa7f98bb63b3)), closes [#3512](https://github.com/vuejs/vitepress/issues/3512)
+- **theme:** correctly normalize paths ending with "index" ([#3544](https://github.com/vuejs/vitepress/issues/3544)) ([c582a8d](https://github.com/vuejs/vitepress/commit/c582a8d5fd82b84d412c7e6c84e74faeb23beac6))
+
+# [1.0.0-rc.41](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.40...v1.0.0-rc.41) (2024-2-1)
+
+### Bug Fixes
+
+- handle CRLF in snippet plugin ([5811b62](https://github.com/vuejs/vitepress/commit/5811b626576ec4569fa0079d921b8e328d87ca91)), closes [#3499](https://github.com/vuejs/vitepress/issues/3499)
+- lazy evaluate known extensions to allow env set in config ([04f794b](https://github.com/vuejs/vitepress/commit/04f794bf55f8191ea9eed62f545b812f346017d8))
+
+### Features
+
+- **home:** add target and rel attribute to home actions ([#3528](https://github.com/vuejs/vitepress/issues/3528)) ([ab39fd8](https://github.com/vuejs/vitepress/commit/ab39fd8592c994fbc6feba5ee369ca1205c50f04))
+- rename shiki packages ([#3506](https://github.com/vuejs/vitepress/issues/3506)) ([b8487d3](https://github.com/vuejs/vitepress/commit/b8487d3a97679f5b2eb225ee1eb85754b66fee30))
+- wrap site title in span ([#3522](https://github.com/vuejs/vitepress/issues/3522)) ([6b1f951](https://github.com/vuejs/vitepress/commit/6b1f951928a3b9e53dcc9697327b5aba4a5905e2))
+- **theme:** add hero slots that are inside container ([#3524](https://github.com/vuejs/vitepres/issues/3524)) ([28870e6](https://github.com/vuejs/vitepress/commit/28870e68faf0ddaa418ffe0d4371316f6b0bcd02))
+
+### BREAKING CHANGES
+
+- vitepress now uses shiki instead of shikiji. If you’re on the latest version and using shikiji specific features, you just need to change imports. The shikijiSetup hook is renamed to shikiSetup.
+
+# [1.0.0-rc.40](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.39...v1.0.0-rc.40) (2024-1-22)
+
+### Bug Fixes
+
+- **client:** handle head orphans added in initial load ([#3474](https://github.com/vuejs/vitepress/issues/3474)) ([5e2d853](https://github.com/vuejs/vitepress/commit/5e2d853e1a315216dce5fc98ee2efd15c724a25d))
+- **theme:** avoid selecting summary on toggling details ([77a318c](https://github.com/vuejs/vitepress/commit/77a318c2a348d341dd3ea1e1650fcf8ad3abfcd7))
+- **theme:** hover color for code links inside custom containers ([#3467](https://github.com/vuejs/vitepress/issues/3467)) ([d529ed4](https://github.com/vuejs/vitepress/commit/d529ed49756841f055024c559d09875501bc6d76))
+- **type:** fix missed `VPBadge` type in `theme.d.ts` ([#3470](https://github.com/vuejs/vitepress/issues/3470)) ([fcf828c](https://github.com/vuejs/vitepress/commit/fcf828c2a71892dad5af8d21e405f4d1e2cc280c))
+
+### Features
+
+- support GitHub-flavored alerts ([#3482](https://github.com/vuejs/vitepress/issues/3482)) ([ac87d19](https://github.com/vuejs/vitepress/commit/ac87d19ca1bbc966e5fe1cca5f433f5ea4b11be3))
+- support specifying custom extensions to escape routing ([#3466](https://github.com/vuejs/vitepress/issues/3466)) ([c22f5d9](https://github.com/vuejs/vitepress/commit/c22f5d983f3e5d5c4f0ed0683a93ece564487c13))
+- **theme:** add npm icon ([#3483](https://github.com/vuejs/vitepress/issues/3483)) ([c882fa1](https://github.com/vuejs/vitepress/commit/c882fa1469a7bd0d6e28196e7a841adf48e803f1))
+
 # [1.0.0-rc.39](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.38...v1.0.0-rc.39) (2024-01-16)
 
 ### Bug Fixes

docs/.vitepress/config/shared.ts

@@ -6,6 +6,7 @@ export const shared = defineConfig({
 
   lastUpdated: true,
   cleanUrls: true,
+  metaChunk: true,
 
   markdown: {
     math: true,
@@ -31,10 +32,12 @@ export const shared = defineConfig({
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/vitepress-logo-mini.svg' }],
     ['link', { rel: 'icon', type: 'image/png', href: '/vitepress-logo-mini.png' }],
     ['meta', { name: 'theme-color', content: '#5f67ee' }],
-    ['meta', { name: 'og:type', content: 'website' }],
-    ['meta', { name: 'og:locale', content: 'en' }],
-    ['meta', { name: 'og:site_name', content: 'VitePress' }],
-    ['meta', { name: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:locale', content: 'en' }],
+    ['meta', { property: 'og:title', content: 'VitePress | Vite & Vue Powered Static Site Generator' }],
+    ['meta', { property: 'og:site_name', content: 'VitePress' }],
+    ['meta', { property: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }],
+    ['meta', { property: 'og:url', content: 'https://vitepress.dev/' }],
     ['script', { src: 'https://cdn.usefathom.com/script.js', 'data-site': 'AZBRSFGG', 'data-spa': 'auto', defer: '' }]
   ],
 

docs/guide/asset-handling.md

@@ -12,6 +12,10 @@ You can reference static assets in your markdown files, your `*.vue` components
 
 Common image, media, and font filetypes are detected and included as assets automatically.
 
+::: tip Linked files are not treated as assets
+PDFs or other documents referenced by links within markdown files are not automatically treated as assets. To make linked files accessible, you must manually place them within the [`public`](#the-public-directory) directory of your project.
+:::
+
 All referenced assets, including those using absolute paths, will be copied to the output directory with a hashed file name in the production build. Never-referenced assets will not be copied. Image assets smaller than 4kb will be base64 inlined - this can be configured via the [`vite`](../reference/site-config#vite) config option.
 
 All **static** path references, including absolute paths, should be based on your working directory structure.

docs/guide/custom-theme.md

@@ -196,7 +196,7 @@ export default {
 If the theme requires special VitePress config, you will need to also extend it in your own config:
 
 ```ts
-// .vitepress/theme/config.ts
+// .vitepress/config.ts
 import baseConfig from 'awesome-vitepress-theme/config'
 
 export default {
@@ -208,7 +208,7 @@ export default {
 Finally, if the theme provides types for its theme config:
 
 ```ts
-// .vitepress/theme/config.ts
+// .vitepress/config.ts
 import baseConfig from 'awesome-vitepress-theme/config'
 import { defineConfigWithTheme } from 'vitepress'
 import type { ThemeConfig } from 'awesome-vitepress-theme'

docs/guide/deploy.md

@@ -153,26 +153,24 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
-           uses: actions/checkout@v3
+           uses: actions/checkout@v4
            with:
              fetch-depth: 0 # Not needed if lastUpdated is not enabled
          # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
          # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
          - name: Setup Node
-           uses: actions/setup-node@v3
+           uses: actions/setup-node@v4
            with:
-             node-version: 18
+             node-version: 20
              cache: npm # or pnpm / yarn
          - name: Setup Pages
-           uses: actions/configure-pages@v3
+           uses: actions/configure-pages@v4
          - name: Install dependencies
            run: npm ci # or pnpm install / yarn install / bun install
          - name: Build with VitePress
-           run: |
-             npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
-             touch docs/.vitepress/dist/.nojekyll
+           run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
          - name: Upload artifact
-           uses: actions/upload-pages-artifact@v2
+           uses: actions/upload-pages-artifact@v3
            with:
              path: docs/.vitepress/dist
 
@@ -187,7 +185,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
-           uses: actions/deploy-pages@v2
+           uses: actions/deploy-pages@v4
    ```
 
    ::: warning

docs/guide/extending-default-theme.md

@@ -195,7 +195,10 @@ Full list of slots available in the default theme layout:
   - `aside-ads-after`
 - When `layout: 'home'` is enabled via frontmatter:
   - `home-hero-before`
+  - `home-hero-info-before`
   - `home-hero-info`
+  - `home-hero-info-after`
+  - `home-hero-actions-after`
   - `home-hero-image`
   - `home-hero-after`
   - `home-features-before`

docs/guide/markdown.md

@@ -263,9 +263,45 @@ Wraps in a <div class="vp-raw">
   })
   ```
 
+## GitHub-flavored Alerts
+
+VitePress also supports [GitHub-flavored alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) to render as callouts. They will be rendered the same as the [custom containers](#custom-containers).
+
+```md
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+```
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
 ## Syntax Highlighting in Code Blocks
 
-VitePress uses [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
+VitePress uses [Shiki](https://github.com/shikijs/shiki) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
 
 **Input**
 
@@ -305,7 +341,7 @@ export default {
 </ul>
 ```
 
-A [list of valid languages](https://github.com/antfu/shikiji/blob/main/docs/languages.md) is available on Shikiji's repository.
+A [list of valid languages](https://shiki.style/languages) is available on Shiki's repository.
 
 You may also customize syntax highlight theme in app config. Please see [`markdown` options](../reference/site-config#markdown) for more details.
 

docs/lunaria.config.json

@@ -26,5 +26,6 @@
       "lang": "zh"
     }
   ],
-  "outDir": ".vitepress/dist/_translations"
+  "outDir": ".vitepress/dist/_translations",
+  "ignoreKeywords": ["lunaria-ignore"]
 }

docs/package.json

@@ -10,7 +10,7 @@
     "lunaria:open": "open-cli .vitepress/dist/_translations/index.html"
   },
   "devDependencies": {
-    "@lunariajs/core": "npm:@brc-dd/lunaria-core@latest",
+    "@lunariajs/core": "^0.0.28",
     "markdown-it-mathjax3": "^4.3.2",
     "open-cli": "^8.0.0",
     "vitepress": "workspace:*"

docs/reference/default-theme-config.md

@@ -244,8 +244,10 @@ type SocialLinkIcon =
   | 'instagram'
   | 'linkedin'
   | 'mastodon'
+  | 'npm'
   | 'slack'
   | 'twitter'
+  | 'x'
   | 'youtube'
   | { svg: string }
 ```

docs/reference/default-theme-home-page.md

@@ -69,6 +69,12 @@ interface HeroAction {
 
   // Destination link of the button.
   link: string
+
+  // Link target attribute.
+  target?: string
+
+  // Link rel attribute.
+  rel?: string
 }
 ```
 
@@ -144,6 +150,9 @@ interface Feature {
   //
   // e.g. `external`
   rel?: string
+
+  // Link target attribute for the `link` option.
+  target?: string
 }
 
 type FeatureIcon =
@@ -157,3 +166,30 @@ type FeatureIcon =
       height: string
     }
 ```
+
+## Markdown Content
+
+You can add additional content to your site's homepage just by adding Markdown below the `---` frontmatter divider.
+
+````md
+---
+layout: home
+
+hero:
+  name: VitePress
+  text: Vite & Vue powered static site generator.
+---
+
+## Getting Started
+
+You can get started using VitePress right away using `npx`!
+
+```sh
+npm init
+npx vitepress init
+```
+````
+
+::: info
+VitePress didn't always auto-style the extra content of the `layout: home` page. To revert to older behavior, you can add `markdownStyles: false` to the frontmatter.
+:::

docs/reference/site-config.md

@@ -31,10 +31,10 @@ If you need to dynamically generate the config, you can also default export a fu
 ```ts
 import { defineConfig } from 'vitepress'
 
-export default async () => defineConfig({
+export default async () => {
   const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
 
-  return {
+  return defineConfig({
     // app level config options
     lang: 'en-US',
     title: 'VitePress',
@@ -49,8 +49,8 @@ export default async () => defineConfig({
         }))
       ]
     }
-  }
-})
+  })
+}
 ```
 
 You can also use top-level `await`. For example:
@@ -510,7 +510,7 @@ When using the default theme, enabling this option will display each page's last
 
 - Type: `MarkdownOption`
 
-Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
+Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shiki](https://github.com/shikijs/shiki) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
 
 ```js
 export default {
@@ -645,6 +645,24 @@ export default {
 }
 ```
 
+#### Example: Adding a canonical URL `<link>`
+
+```ts
+export default {
+  transformPageData(pageData) {
+    const canonicalUrl = `https://example.com/${pageData.relativePath}`
+      .replace(/index\.md$/, '')
+      .replace(/\.md$/, '.html')
+
+    pageData.frontmatter.head ??= []
+    pageData.frontmatter.head.push([
+      'link',
+      { rel: 'canonical', href: canonicalUrl }
+    ])
+  }
+}
+```
+
 ### transformHtml
 
 - Type: `(code: string, id: string, context: TransformContext) => Awaitable<string | void>`

docs/zh/guide/asset-handling.md

@@ -2,7 +2,7 @@
 
 ## 引用静态资源 {#referencing-static-assets}
 
-所有的 Markdown 文件都会被编译成 Vue 组件，并由 [Vite](https://vitejs.dev/guide/assets.html) 处理。可以**并且应该**使用相对路径来引用资源：
+所有的 Markdown 文件都会被编译成 Vue 组件，并由 [Vite](https://cn.vitejs.dev/guide/assets.html) 处理。可以**并且应该**使用相对路径来引用资源：
 
 ```md
 ![An image](./image.png)
@@ -12,6 +12,10 @@
 
 常见的图像，媒体和字体文件会被自动检测并视作资源。
 
+::: tip 通过链接引用的文件不会视作资源
+在 Markdown 内，通过链接引用的 PDF 或者其他文档不会被自动视作资源。要使这些文件可用，你必须手动将其放在项目的 [`public`](#the-public-directory) 目录内。
+:::
+
 所有引用的资源，包括那些使用绝对路径的，都会在生产构建过程中被复制到输出目录，并使用哈希文件名。从未使用过的资源将不会被复制。小于 4kb 的图像资源将会采用 base64 内联——这可以通过 [`vite`](../reference/site-config#vite) 配置选项进行配置。
 
 所有**静态**路径引用，包括绝对路径，都应基于你的工作目录的结构。

docs/zh/guide/custom-theme.md

@@ -196,7 +196,7 @@ export default {
 如果主题需要特殊的 VitePress 配置，也需要在配置中扩展：
 
 ```ts
-// .vitepress/theme/config.ts
+// .vitepress/config.ts
 import baseConfig from 'awesome-vitepress-theme/config'
 
 export default {
@@ -208,7 +208,7 @@ export default {
 最后，如果主题为其主题配置提供了类型：
 
 ```ts
-// .vitepress/theme/config.ts
+// .vitepress/config.ts
 import baseConfig from 'awesome-vitepress-theme/config'
 import { defineConfigWithTheme } from 'vitepress'
 import type { ThemeConfig } from 'awesome-vitepress-theme'

docs/zh/guide/deploy.md

@@ -153,26 +153,24 @@ Cache-Control: max-age=31536000,immutable
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
-           uses: actions/checkout@v3
+           uses: actions/checkout@v4
            with:
              fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
          # - uses: pnpm/action-setup@v2 # 如果使用 pnpm，请取消注释
          # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
          - name: Setup Node
-           uses: actions/setup-node@v3
+           uses: actions/setup-node@v4
            with:
-             node-version: 18
+             node-version: 20
              cache: npm # 或 pnpm / yarn
          - name: Setup Pages
-           uses: actions/configure-pages@v3
+           uses: actions/configure-pages@v4
          - name: Install dependencies
            run: npm ci # 或 pnpm install / yarn install / bun install
          - name: Build with VitePress
-           run: |
-             npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
-             touch docs/.vitepress/dist/.nojekyll
+           run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
          - name: Upload artifact
-           uses: actions/upload-pages-artifact@v2
+           uses: actions/upload-pages-artifact@v3
            with:
              path: docs/.vitepress/dist
 
@@ -187,7 +185,7 @@ Cache-Control: max-age=31536000,immutable
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
-           uses: actions/deploy-pages@v2
+           uses: actions/deploy-pages@v4
    ```
 
    ::: warning

docs/zh/guide/extending-default-theme.md

@@ -194,7 +194,10 @@ export default {
   - `aside-ads-after`
 - 当 `layout: 'home'` 在 frontmatter 中被启用时:
   - `home-hero-before`
+  - `home-hero-info-before`
   - `home-hero-info`
+  - `home-hero-info-after`
+  - `home-hero-actions-after`
   - `home-hero-image`
   - `home-hero-after`
   - `home-features-before`

docs/zh/guide/frontmatter.md

@@ -2,7 +2,7 @@
 
 ## 用法 {#usage}
 
-VitePress 支持在所有 Markdown 文件中使用 YAML frontmatter，并使用 [gray-matter](https://github.com/jonschlinkert/gray-matter) 解析。frontmatter 必须位于 Markdown 文件的顶部 (在任何元素之前，包括 `<script>` 标签)，并且需要在三条虚线之间的采用有效的 YAML 格式。例如：
+VitePress 支持在所有 Markdown 文件中使用 YAML frontmatter，并使用 [gray-matter](https://github.com/jonschlinkert/gray-matter) 解析。frontmatter 必须位于 Markdown 文件的顶部 (在任何元素之前，包括 `<script>` 标签)，并且需要在三条虚线之间采用有效的 YAML 格式。例如：
 
 ```md
 ---

docs/zh/guide/markdown.md

@@ -263,9 +263,45 @@ Wraps in a <div class="vp-raw">
   })
   ```
 
+## GitHub 风格的警报 {#github-flavored-alerts}
+
+VitePress 同样支持以标注的方式渲染 [GitHub 风格的警报](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。它们和[自定义容器](#custom-containers)的渲染方式相同。
+
+```md
+> [!NOTE]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+```
+
+> [!NOTE]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+
 ## 代码块中的语法高亮 {#syntax-highlighting-in-code-blocks}
 
-VitePress 使用 [Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
+VitePress 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
 
 **输入**
 
@@ -305,7 +341,7 @@ export default {
 </ul>
 ```
 
-在 Shikiji 的代码仓库中，可以找到[合法的编程语言列表](https://github.com/antfu/shikiji/blob/main/docs/languages.md)。
+在 Shiki 的代码仓库中，可以找到[合法的编程语言列表](https://shiki.style/languages)。
 
 还可以全局配置中自定义语法高亮主题。有关详细信息，参见 [`markdown` 选项](../reference/site-config#markdown)得到更多信息。
 

docs/zh/guide/routing.md

@@ -129,9 +129,9 @@ src/getting-started.md  -->  /getting-started.html
 
 默认情况下，VitePress 将入站链接解析为以 `.html` 结尾的 URL。但是，一些用户可能更喜欢没有 .html 扩展名的“简洁 URL”——例如，`example.com/path` 而不是 `example.com/path.html`。
 
-某些服务器或托管平台 (例如 Netlify 或 Vercel) 提供将 `/foo` 之类的 URL 映射到 `/foo.html` (如果存在) 的功能，而无需重定向：
+某些服务器或托管平台 (例如 Netlify、Vercel 或 GitHub Pages) 提供将 `/foo` 之类的 URL 映射到 `/foo.html` (如果存在) 的功能，而无需重定向：
 
-- Netlify 默认支持。
+- Netlify 和 GitHub Pages 是默认支持的。
 - Vercel 需要在 [vercel.json 中启用 cleanUrls 选项](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls)。
 
 如果可以使用此功能，还可以启用 VitePress 自己的 [`cleanUrls`](../reference/site-config#cleanurls) 配置选项，以便：
@@ -139,7 +139,7 @@ src/getting-started.md  -->  /getting-started.html
 - 页面之间的入站链接是在没有 `.html` 扩展名的情况下生成的。
 - 如果当前路径以 `.html` 结尾，路由器将执行客户端重定向到无扩展路径。
 
-但是，如果无法为服务器配置此类支持 (例如 GitHub Pages)，则必须手动采用以下目录结构：
+但是，如果无法为服务器配置此类支持，则必须手动采用以下目录结构：
 
 ```
 .

docs/zh/reference/default-theme-config.md

@@ -29,7 +29,7 @@ export default {
 
 - 类型：`ThemeableImage`
 
-导航栏上显示的 Logo，位于站点标题右侧。可以接受一个路径字符串，或者一个对象来设置在浅色/深色模式下不同的 Logo。
+导航栏上显示的 Logo，位于站点标题前。可以接受一个路径字符串，或者一个对象来设置在浅色/深色模式下不同的 Logo。
 
 ```ts
 export default {
@@ -244,8 +244,10 @@ type SocialLinkIcon =
   | 'instagram'
   | 'linkedin'
   | 'mastodon'
+  | 'npm'
   | 'slack'
   | 'twitter'
+  | 'x'
   | 'youtube'
   | { svg: string }
 ```

docs/zh/reference/default-theme-home-page.md

@@ -37,10 +37,12 @@ hero:
 
 ```ts
 interface Hero {
-  // `text` 上方的字符，带有品牌颜色，预计简短，例如产品名称
+  // `text` 上方的字符，带有品牌颜色
+  // 预计简短，例如产品名称
   name?: string
 
-  // hero 部分的主要文字，被定义为 `h1` 标签
+  // hero 部分的主要文字，
+  // 被定义为 `h1` 标签
   text: string
 
   // `text` 下方的标语
@@ -67,6 +69,12 @@ interface HeroAction {
 
   // 按钮的目标链接
   link: string
+
+  // 链接的 target 属性
+  target?: string
+
+  // 链接的 rel 属性
+  rel?: string
 }
 ```
 
@@ -128,11 +136,13 @@ interface Feature {
 
   // 点击 feature 组件时的链接，可以是内部链接，也可以是外部链接。
   //
+  //
   // 例如 `guide/reference/default-theme-home-page` 或 `https://example.com`
   link?: string
 
   // feature 组件内显示的链接文本，最好与 `link` 选项一起使用
   //
+  //
   // 例如 `Learn more`, `Visit page` 等
   linkText?: string
 
@@ -140,6 +150,9 @@ interface Feature {
   //
   // 例如 `external`
   rel?: string
+
+  // `link` 选项的链接 target 属性
+  target?: string
 }
 
 type FeatureIcon =
@@ -152,4 +165,31 @@ type FeatureIcon =
       width?: string
       height: string
     }
-```
+```
+
+## Markdown 内容 {#markdown-content}
+
+可以在 frontmatter 的分隔符 `---` 下方为站点主页添加额外的 Markdown 内容。
+
+````md
+---
+layout: home
+
+hero:
+  name: VitePress
+  text: Vite & Vue powered static site generator.
+---
+
+## Getting Started
+
+You can get started using VitePress right away using `npx`!
+
+```sh
+npm init
+npx vitepress init
+```
+````
+
+::: info
+VitePress 并不总是为 `layout: home` 页面里额外的内容自动添加样式。要回到以前的行为，可以在 fortmatter 中添加 `markdownStyles: false`。
+:::

docs/zh/reference/site-config.md

@@ -31,16 +31,16 @@ export default {
 ```ts
 import { defineConfig } from 'vitepress'
 
-export default async () => defineConfig({
+export default async () => {
   const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
 
-  return {
+  return defineConfig({
     // 应用级配置选项
     lang: 'en-US',
     title: 'VitePress',
     description: 'Vite & Vue powered static site generator.',
 
-    // 主题级别配置选项
+    // 主题级配置选项
     themeConfig: {
       sidebar: [
         ...posts.map((post) => ({
@@ -49,8 +49,8 @@ export default async () => defineConfig({
         }))
       ]
     }
-  }
-})
+  })
+}
 ```
 
 也可以在最外层使用 `await`。例如：
@@ -510,7 +510,7 @@ export default {
 
 - 类型：`MarkdownOption`
 
-配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器，使用 [Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 来高亮不同语言语法。在此选项中，可以传递各种 Markdown 相关选项以满足你的需要。
+配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器，使用 [Shiki](https://github.com/shikijs/shiki) 来高亮不同语言语法。在此选项中，可以传递各种 Markdown 相关选项以满足你的需要。
 
 ```js
 export default {
@@ -645,6 +645,24 @@ export default {
 }
 ```
 
+#### 示例：添加 canonical URL `<link>` {#example-adding-a-canonical-url-link} 
+
+```ts
+export default {
+  transformPageData(pageData) {
+    const canonicalUrl = `https://example.com/${pageData.relativePath}`
+      .replace(/index\.md$/, '')
+      .replace(/\.md$/, '.html')
+
+    pageData.frontmatter.head ??= []
+    pageData.frontmatter.head.push([
+      'link',
+      { rel: 'canonical', href: canonicalUrl }
+    ])
+  }
+}
+```
+
 ### transformHtml
 
 - 类型：`(code: string, id: string, context: TransformContext) => Awaitable<string | void>`

package.json

@@ -1,9 +1,9 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-rc.39",
+  "version": "1.0.0-rc.44",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.3",
   "main": "dist/node/index.js",
   "types": "types/index.d.ts",
   "exports": {
@@ -95,22 +95,22 @@
     "@docsearch/css": "^3.5.2",
     "@docsearch/js": "^3.5.2",
     "@types/markdown-it": "^13.0.7",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/devtools-api": "^6.5.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/devtools-api": "^7.0.14",
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^10.7.2",
     "focus-trap": "^7.5.4",
     "mark.js": "8.11.1",
     "minisearch": "^6.3.0",
-    "shikiji": "^0.9.19",
-    "shikiji-core": "^0.9.19",
-    "shikiji-transformers": "^0.9.19",
-    "vite": "^5.0.11",
-    "vue": "^3.4.14"
+    "shiki": "^1.1.5",
+    "@shikijs/core": "^1.1.5",
+    "@shikijs/transformers": "^1.1.5",
+    "vite": "^5.1.3",
+    "vue": "^3.4.19"
   },
   "peerDependencies": {
     "markdown-it-mathjax3": "^4.3.2",
-    "postcss": "^8.4.33"
+    "postcss": "^8.4.35"
   },
   "peerDependenciesMeta": {
     "markdown-it-mathjax3": {
@@ -146,25 +146,25 @@
     "@types/markdown-it-emoji": "^2.0.4",
     "@types/micromatch": "^4.0.6",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.11.2",
+    "@types/node": "^20.11.19",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/prompts": "^2.4.9",
-    "@vue/shared": "^3.4.14",
-    "chokidar": "^3.5.3",
+    "@vue/shared": "^3.4.19",
+    "chokidar": "^3.6.0",
     "compression": "^1.7.4",
     "conventional-changelog-cli": "^4.1.0",
     "cross-spawn": "^7.0.3",
     "debug": "^4.3.4",
-    "esbuild": "^0.19.11",
+    "esbuild": "^0.20.1",
     "escape-html": "^1.0.3",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "get-port": "^7.0.0",
     "gray-matter": "^4.0.3",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
     "lodash.template": "^4.5.0",
-    "lru-cache": "^10.1.0",
+    "lru-cache": "^10.2.0",
     "markdown-it": "^14.0.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
@@ -173,30 +173,30 @@
     "markdown-it-mathjax3": "^4.3.2",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.8",
-    "nanoid": "^5.0.4",
+    "nanoid": "^5.0.5",
     "npm-run-all": "^4.1.5",
     "ora": "^8.0.1",
     "p-map": "^7.0.1",
     "path-to-regexp": "^6.2.1",
     "picocolors": "^1.0.0",
     "pkg-dir": "^8.0.0",
-    "playwright-chromium": "^1.40.1",
-    "polka": "1.0.0-next.23",
+    "playwright-chromium": "^1.41.2",
+    "polka": "1.0.0-next.24",
     "postcss-prefix-selector": "^1.16.0",
-    "prettier": "^3.2.2",
+    "prettier": "^3.2.5",
     "prompts": "^2.4.2",
     "punycode": "^2.3.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.5",
+    "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.0",
-    "semver": "^7.5.4",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "semver": "^7.6.0",
     "simple-git-hooks": "^2.9.0",
     "sirv": "^2.0.4",
     "sitemap": "^7.1.1",
     "supports-color": "^9.4.0",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.0",
+    "vitest": "^1.3.0",
     "vue-tsc": "^1.8.27",
     "wait-on": "^7.2.0"
   },

src/client/app/composables/head.ts

@@ -8,14 +8,23 @@ import {
 import type { Route } from '../router'
 
 export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
-  let managedHeadElements: (HTMLElement | undefined)[] = []
   let isFirstUpdate = true
+  let managedHeadElements: (HTMLElement | undefined)[] = []
 
   const updateHeadTags = (newTags: HeadConfig[]) => {
     if (import.meta.env.PROD && isFirstUpdate) {
       // in production, the initial meta tags are already pre-rendered so we
       // skip the first update.
       isFirstUpdate = false
+      newTags.forEach((tag) => {
+        const headEl = createHeadElement(tag)
+        for (const el of document.head.children) {
+          if (el.isEqualNode(headEl)) {
+            managedHeadElements.push(el as HTMLElement)
+            return
+          }
+        }
+      })
       return
     }
 

src/client/app/devtools.ts

@@ -1,4 +1,4 @@
-import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import { setupDevToolsPlugin } from '@vue/devtools-api'
 import type { App } from 'vue'
 import type { Router } from './router'
 import type { VitePressData } from './data'
@@ -10,7 +10,7 @@ export const setupDevtools = (
   router: Router,
   data: VitePressData
 ): void => {
-  setupDevtoolsPlugin(
+  setupDevToolsPlugin(
     {
       // fix recursive reference
       app: app as any,
@@ -21,7 +21,8 @@ export const setupDevtools = (
       componentStateTypes: [COMPONENT_STATE_TYPE]
     },
     (api) => {
-      api.on.inspectComponent((payload) => {
+      // TODO: remove any
+      api.on.inspectComponent((payload: any) => {
         payload.instanceData.state.push({
           type: COMPONENT_STATE_TYPE,
           key: 'route',

src/client/theme-default/Layout.vue

@@ -56,7 +56,10 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 
       <template #not-found><slot name="not-found" /></template>
       <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>

src/client/theme-default/components/VPButton.vue

@@ -9,6 +9,8 @@ interface Props {
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
+  target?: string;
+  rel?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
@@ -30,8 +32,8 @@ const component = computed(() => {
     class="VPButton"
     :class="[size, theme]"
     :href="href ? normalizeLink(href) : undefined"
-    :target="isExternal ? '_blank' : undefined"
-    :rel="isExternal ? 'noreferrer' : undefined"
+    :target="props.target ?? (isExternal ? '_blank' : undefined)"
+    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
     {{ text }}
   </component>

src/client/theme-default/components/VPContent.vue

@@ -28,7 +28,10 @@ const { hasSidebar } = useSidebar()
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
       <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>

src/client/theme-default/components/VPDocFooter.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
-import VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
 import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
 
@@ -30,7 +29,7 @@ const showFooter = computed(() => {
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
       <div v-if="hasEditLink" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
-          <VPIconEdit class="edit-link-icon" aria-label="edit icon"/>
+          <span class="vpi-square-pen edit-link-icon" />
           {{ editLink.text }}
         </VPLink>
       </div>
@@ -92,9 +91,6 @@ const showFooter = computed(() => {
 
 .edit-link-icon {
   margin-right: 8px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
 }
 
 .prev-next {

src/client/theme-default/components/VPFeature.vue

@@ -2,7 +2,6 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import VPImage from './VPImage.vue'
 import VPLink from './VPLink.vue'
-import VPIconArrowRight from './icons/VPIconArrowRight.vue'
 
 defineProps<{
   icon?: DefaultTheme.FeatureIcon
@@ -46,7 +45,7 @@ defineProps<{
 
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
-          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
+          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
         </p>
       </div>
     </article>
@@ -119,10 +118,6 @@ defineProps<{
 }
 
 .link-text-icon {
-  display: inline-block;
   margin-left: 6px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
 }
 </style>

src/client/theme-default/components/VPFlyout.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useFlyout } from '../composables/flyout'
-import VPIconChevronDown from './icons/VPIconChevronDown.vue'
-import VPIconMoreHorizontal from './icons/VPIconMoreHorizontal.vue'
 import VPMenu from './VPMenu.vue'
 
 defineProps<{
-  icon?: any
+  icon?: string
   button?: string
   label?: string
   items?: any[]
@@ -38,12 +36,12 @@ function onBlur() {
       @click="open = !open"
     >
       <span v-if="button || icon" class="text">
-        <component v-if="icon" :is="icon" class="option-icon" />
+        <span v-if="icon" :class="[icon, 'option-icon']" />
         <span v-if="button" v-html="button"></span>
-        <VPIconChevronDown class="text-icon" />
+        <span class="vpi-chevron-down text-icon" />
       </span>
 
-      <VPIconMoreHorizontal v-else class="icon" />
+      <span v-else class="vpi-more-horizontal icon" />
     </button>
 
     <div class="menu">
@@ -114,22 +112,16 @@ function onBlur() {
 
 .option-icon {
   margin-right: 0px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 16px;
 }
 
 .text-icon {
   margin-left: 4px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
+  font-size: 14px;
 }
 
 .icon {
-  width: 20px;
-  height: 20px;
-  fill: currentColor;
+  font-size: 20px;
   transition: fill 0.25s;
 }
 

src/client/theme-default/components/VPHero.vue

@@ -8,6 +8,8 @@ export interface HeroAction {
   theme?: 'brand' | 'alt'
   text: string
   link: string
+  target?: string
+  rel?: string
 }
 
 defineProps<{
@@ -25,6 +27,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
     <div class="container">
       <div class="main">
+        <slot name="home-hero-info-before" />
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
             <span v-html="name" class="clip"></span>
@@ -32,6 +35,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
           <p v-if="text" v-html="text" class="text"></p>
           <p v-if="tagline" v-html="tagline" class="tagline"></p>
         </slot>
+        <slot name="home-hero-info-after" />
 
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">
@@ -41,9 +45,12 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
               :theme="action.theme"
               :text="action.text"
               :href="action.link"
+              :target="action.target"
+              :rel="action.rel"
             />
           </div>
         </div>
+        <slot name="home-hero-actions-after" />
       </div>
 
       <div v-if="image || heroImageSlotExists" class="image">

src/client/theme-default/components/VPHome.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import VPHomeHero from './VPHomeHero.vue'
 import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeContent from './VPHomeContent.vue'
+import { useData } from '../composables/data'
+
+const { frontmatter } = useData()
 </script>
 
 <template>
   <div class="VPHome">
     <slot name="home-hero-before" />
     <VPHomeHero>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
     </VPHomeHero>
     <slot name="home-hero-after" />
@@ -16,23 +23,21 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
     <VPHomeFeatures />
     <slot name="home-features-after" />
 
-    <Content />
+    <VPHomeContent v-if="frontmatter.markdownStyles !== false">
+      <Content />
+    </VPHomeContent>
+    <Content v-else />
   </div>
 </template>
 
 <style scoped>
 .VPHome {
-  padding-bottom: 96px;
-}
-
-.VPHome :deep(.VPHomeSponsors) {
-  margin-top: 112px;
-  margin-bottom: -128px;
+  margin-bottom: 96px;
 }
 
 @media (min-width: 768px) {
   .VPHome {
-    padding-bottom: 128px;
+    margin-bottom: 128px;
   }
 }
 </style>

src/client/theme-default/components/VPHomeContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+
+const { width: vw } = useWindowSize({ includeScrollbar: false })
+</script>
+
+<template>
+  <div
+    class="vp-doc container"
+    :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  margin: auto;
+  width: 100%;
+  max-width: 1280px;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    width: 100%;
+    padding: 0 64px;
+  }
+}
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+  margin-left: var(--vp-offset, calc(50% - 50vw));
+  margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+  border-top: none;
+  letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a){
+  text-decoration: none;
+}
+</style>

src/client/theme-default/components/VPHomeHero.vue

@@ -15,7 +15,10 @@ const { frontmatter: fm } = useData()
     :image="fm.hero.image"
     :actions="fm.hero.actions"
   >
+    <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
     <template #home-hero-info><slot name="home-hero-info" /></template>
+    <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+    <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
     <template #home-hero-image><slot name="home-hero-image" /></template>
   </VPHero>
 </template>

src/client/theme-default/components/VPHomeSponsors.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import VPIconHeart from './icons/VPIconHeart.vue'
 import VPButton from './VPButton.vue'
 import VPSponsors from './VPSponsors.vue'
 
@@ -30,7 +29,9 @@ withDefaults(defineProps<Props>(), {
   <section class="VPHomeSponsors">
     <div class="container">
       <div class="header">
-        <div class="love"><VPIconHeart class="icon" /></div>
+        <div class="love">
+          <span class="vpi-heart icon" />
+        </div>
         <h2 v-if="message" class="message">{{ message }}</h2>
       </div>
 
@@ -48,8 +49,33 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-gutter);
-  padding: 88px 24px 96px;
-  background-color: var(--vp-c-bg);
+  padding-top: 88px !important;
+}
+
+.VPHomeSponsors {
+  margin: 96px 0;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    margin: 128px 0;
+  }
+}
+
+.VPHomeSponsors {
+  padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHomeSponsors {
+    padding: 0 64px;
+  }
 }
 
 .container {
@@ -59,15 +85,13 @@ withDefaults(defineProps<Props>(), {
 
 .love {
   margin: 0 auto;
-  width: 28px;
-  height: 28px;
+  width: fit-content;
+  font-size: 28px;
   color: var(--vp-c-text-3);
 }
 
 .icon {
-  width: 28px;
-  height: 28px;
-  fill: currentColor;
+  display: inline-block;
 }
 
 .message {

src/client/theme-default/components/VPLocalNav.vue

@@ -7,7 +7,6 @@ import { useLocalNav } from '../composables/local-nav'
 import { getHeaders } from '../composables/outline'
 import { useSidebar } from '../composables/sidebar'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
-import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
 defineProps<{
   open: boolean
@@ -67,7 +66,7 @@ const classes = computed(() => {
         aria-controls="VPSidebarNav"
         @click="$emit('open-menu')"
       >
-        <VPIconAlignLeft class="menu-icon" />
+        <span class="vpi-align-left menu-icon"></span>
         <span class="menu-text">
           {{ theme.sidebarMenuLabel || 'Menu' }}
         </span>
@@ -157,9 +156,7 @@ const classes = computed(() => {
 
 .menu-icon {
   margin-right: 8px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 14px;
 }
 
 .VPOutlineDropdown {

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -5,7 +5,6 @@ import { nextTick, ref } from 'vue'
 import { useData } from '../composables/data'
 import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
 const props = defineProps<{
   headers: MenuItem[]
@@ -61,7 +60,7 @@ function scrollToTop() {
   >
     <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
       {{ resolveTitle(theme) }}
-      <VPIconChevronRight class="icon" />
+      <span class="vpi-chevron-right icon" />
     </button>
     <button @click="scrollToTop" v-else>
       {{ theme.returnToTopLabel || 'Return to top' }}
@@ -111,19 +110,23 @@ function scrollToTop() {
   color: var(--vp-c-text-1);
 }
 
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  font-size: 14px;
+  transform: rotate(0deg);
+  transition: transform 0.25s;
+}
+
 @media (min-width: 960px) {
   .VPLocalNavOutlineDropdown button {
     font-size: 14px;
   }
-}
 
-.icon {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 2px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
+  .icon {
+    font-size: 16px;
+  }
 }
 
 .open > .icon {

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -362,7 +362,7 @@ const defaultTranslations: { modal: ModalTranslations } = {
   }
 }
 
-const $t = createSearchTranslate(defaultTranslations)
+const translate = createSearchTranslate(defaultTranslations)
 
 // Back
 
@@ -430,46 +430,15 @@ function formMarkRegex(terms: Set<string>) {
             id="localsearch-label"
             for="localsearch-input"
           >
-            <svg
-              class="search-icon"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <g
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <path d="m21 21l-4.35-4.35" />
-              </g>
-            </svg>
+            <span aria-hidden="true" class="vpi-search search-icon local-search-icon" />
           </label>
           <div class="search-actions before">
             <button
               class="back-button"
-              :title="$t('modal.backButtonTitle')"
+              :title="translate('modal.backButtonTitle')"
               @click="$emit('close')"
             >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M19 12H5m7 7l-7-7l7-7"
-                />
-              </svg>
+              <span class="vpi-arrow-left local-search-icon" />
             </button>
           </div>
           <input
@@ -486,50 +455,22 @@ function formMarkRegex(terms: Set<string>) {
               class="toggle-layout-button"
               type="button"
               :class="{ 'detailed-list': showDetailedList }"
-              :title="$t('modal.displayDetails')"
+              :title="translate('modal.displayDetails')"
               @click="
                 selectedIndex > -1 && (showDetailedList = !showDetailedList)
               "
             >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
-                />
-              </svg>
+              <span class="vpi-layout-list local-search-icon" />
             </button>
 
             <button
               class="clear-button"
               type="reset"
               :disabled="disableReset"
-              :title="$t('modal.resetButtonTitle')"
+              :title="translate('modal.resetButtonTitle')"
               @click="resetSearch"
             >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
-                />
-              </svg>
+              <span class="vpi-delete local-search-icon" />
             </button>
           </div>
         </form>
@@ -568,16 +509,7 @@ function formMarkRegex(terms: Set<string>) {
                     class="title"
                   >
                     <span class="text" v-html="t" />
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m9 18l6-6l-6-6"
-                      />
-                    </svg>
+                    <span class="vpi-chevron-right local-search-icon" />
                   </span>
                   <span class="title main">
                     <span class="text" v-html="p.title" />
@@ -598,59 +530,30 @@ function formMarkRegex(terms: Set<string>) {
             v-if="filterText && !results.length && enableNoResults"
             class="no-results"
           >
-            {{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
+            {{ translate('modal.noResultsText') }} "<strong>{{ filterText }}</strong
             >"
           </li>
         </ul>
 
         <div class="search-keyboard-shortcuts">
           <span>
-            <kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19V5m-7 7l7-7l7 7"
-                />
-              </svg>
+            <kbd :aria-label="translate('modal.footer.navigateUpKeyAriaLabel')">
+              <span class="vpi-arrow-up navigate-icon" />
             </kbd>
-            <kbd :aria-label="$t('modal.footer.navigateDownKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 5v14m7-7l-7 7l-7-7"
-                />
-              </svg>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="vpi-arrow-down navigate-icon" />
             </kbd>
-            {{ $t('modal.footer.navigateText') }}
+            {{ translate('modal.footer.navigateText') }}
           </span>
           <span>
-            <kbd :aria-label="$t('modal.footer.selectKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <g
-                  fill="none"
-                  stroke="currentcolor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                >
-                  <path d="m9 10l-5 5l5 5" />
-                  <path d="M20 4v7a4 4 0 0 1-4 4H4" />
-                </g>
-              </svg>
+            <kbd :aria-label="translate('modal.footer.selectKeyAriaLabel')">
+              <span class="vpi-corner-down-left navigate-icon" />
             </kbd>
-            {{ $t('modal.footer.selectText') }}
+            {{ translate('modal.footer.selectText') }}
           </span>
           <span>
-            <kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
-            {{ $t('modal.footer.closeText') }}
+            <kbd :aria-label="translate('modal.footer.closeKeyAriaLabel')">esc</kbd>
+            {{ translate('modal.footer.closeText') }}
           </span>
         </div>
       </div>
@@ -716,6 +619,16 @@ function formMarkRegex(terms: Set<string>) {
   border-color: var(--vp-c-brand-1);
 }
 
+.local-search-icon {
+  display: block;
+  font-size: 18px;
+}
+
+.navigate-icon {
+  display: block;
+  font-size: 14px;
+}
+
 .search-icon {
   margin: 8px;
 }

src/client/theme-default/components/VPNavBarSearchButton.vue

@@ -10,29 +10,14 @@ const defaultTranslations: { button: ButtonTranslations } = {
   }
 }
 
-const $t = createSearchTranslate(defaultTranslations)
+const translate = createSearchTranslate(defaultTranslations)
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
+  <button type="button" class="DocSearch DocSearch-Button" :aria-label="translate('button.buttonAriaLabel')">
     <span class="DocSearch-Button-Container">
-      <svg
-        class="DocSearch-Search-Icon"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        aria-label="search icon"
-      >
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
+      <span class="vp-icon DocSearch-Search-Icon"></span>
+      <span class="DocSearch-Button-Placeholder">{{ translate('button.buttonText') }}</span>
     </span>
     <span class="DocSearch-Button-Keys">
       <kbd class="DocSearch-Button-Key"></kbd>
@@ -216,4 +201,8 @@ const $t = createSearchTranslate(defaultTranslations)
 .DocSearch-Button .DocSearch-Button-Key:first-child > * {
   display: none;
 }
+
+.DocSearch-Search-Icon {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E");
+}
 </style>

src/client/theme-default/components/VPNavBarTitle.vue

@@ -39,8 +39,8 @@ const target = computed(() =>
     >
       <slot name="nav-bar-title-before" />
       <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
-      <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
-      <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
+      <template v-if="theme.siteTitle"><span>{{ theme.siteTitle }}</span></template>
+      <template v-else-if="theme.siteTitle === undefined"><span>{{ site.title }}</span></template>
       <slot name="nav-bar-title-after" />
     </a>
   </div>

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
 import { useData } from '../composables/data'
@@ -13,7 +12,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
   <VPFlyout
     v-if="localeLinks.length && currentLang.label"
     class="VPNavBarTranslations"
-    :icon="VPIconLanguages"
+    icon="vpi-languages"
     :label="theme.langMenuLabel || 'Change language'"
   >
     <div class="items">

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import VPIconPlus from './icons/VPIconPlus.vue'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
 
@@ -29,7 +28,7 @@ function toggle() {
       @click="toggle"
     >
       <span class="button-text" v-html="text"></span>
-      <VPIconPlus class="button-icon" />
+      <span class="vpi-plus button-icon" />
     </button>
 
     <div :id="groupId" class="items">
@@ -98,10 +97,7 @@ function toggle() {
 }
 
 .button-icon {
-  width: 14px;
-  height: 14px;
-  fill: var(--vp-c-text-2);
-  transition: fill 0.5s, transform 0.25s;
+  transition: transform 0.25s;
 }
 
 .group:first-child {

src/client/theme-default/components/VPNavScreenTranslations.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import VPIconChevronDown from './icons/VPIconChevronDown.vue'
-import VPIconLanguages from './icons/VPIconLanguages.vue'
 import { useLangs } from '../composables/langs'
 import VPLink from './VPLink.vue'
 
@@ -20,9 +18,9 @@ function toggle() {
     :class="{ open: isOpen }"
   >
     <button class="title" @click="toggle">
-      <VPIconLanguages class="icon lang" />
+      <span class="vpi-languages icon lang" />
       {{ currentLang.label }}
-      <VPIconChevronDown class="icon chevron" />
+      <span class="vpi-chevron-down icon chevron" />
     </button>
 
     <ul class="list">
@@ -52,9 +50,7 @@ function toggle() {
 }
 
 .icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 16px;
 }
 
 .icon.lang {

src/client/theme-default/components/VPSidebarItem.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import { useSidebarControl } from '../composables/sidebar'
-import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 import VPLink from './VPLink.vue'
 
 const props = defineProps<{
@@ -91,7 +90,7 @@ function onCaretClick() {
         @keydown.enter="onCaretClick"
         tabindex="0"
       >
-        <VPIconChevronRight class="caret-icon" />
+        <span class="vpi-chevron-right caret-icon" />
       </div>
     </div>
 
@@ -227,9 +226,7 @@ function onCaretClick() {
 }
 
 .caret-icon {
-  width: 18px;
-  height: 18px;
-  fill: currentColor;
+  font-size: 18px;
   transform: rotate(90deg);
   transition: transform 0.25s;
 }

src/client/theme-default/components/VPSocialLink.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
-import { icons } from '../support/socialIcons'
 
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
@@ -11,7 +10,7 @@ const props = defineProps<{
 
 const svg = computed(() => {
   if (typeof props.icon === 'object') return props.icon.svg
-  return icons[props.icon]
+  return `<span class="vpi-social-${props.icon}" />`
 })
 </script>
 
@@ -23,8 +22,7 @@ const svg = computed(() => {
     target="_blank"
     rel="noopener"
     v-html="svg"
-  >
-  </a>
+  ></a>
 </template>
 
 <style scoped>
@@ -43,7 +41,8 @@ const svg = computed(() => {
   transition: color 0.25s;
 }
 
-.VPSocialLink > :deep(svg) {
+.VPSocialLink > :deep(svg),
+.VPSocialLink > :deep([class^="vpi-social-"]) {
   width: 20px;
   height: 20px;
   fill: currentColor;

src/client/theme-default/components/VPSwitch.vue

@@ -47,17 +47,17 @@
   overflow: hidden;
 }
 
-.icon :deep(svg) {
+.icon :deep([class^='vpi-']) {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 12px;
   height: 12px;
-  fill: var(--vp-c-text-2);
+  color: var(--vp-c-text-2);
 }
 
-.dark .icon :deep(svg) {
-  fill: var(--vp-c-text-1);
+.dark .icon :deep([class^='vpi-']) {
+  color: var(--vp-c-text-1);
   transition: opacity 0.25s !important;
 }
 </style>

src/client/theme-default/components/VPSwitchAppearance.vue

@@ -2,8 +2,6 @@
 import { inject, computed } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
-import VPIconMoon from './icons/VPIconMoon.vue'
-import VPIconSun from './icons/VPIconSun.vue'
 
 const { isDark, theme } = useData()
 
@@ -25,8 +23,8 @@ const switchTitle = computed(() => {
     :aria-checked="isDark"
     @click="toggleAppearance"
   >
-    <VPIconSun class="sun" />
-    <VPIconMoon class="moon" />
+    <span class="vpi-sun sun" />
+    <span class="vpi-moon moon" />
   </VPSwitch>
 </template>
 

src/client/theme-default/components/VPTeamMembersItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
-import VPIconHeart from './icons/VPIconHeart.vue'
 import VPLink from './VPLink.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
@@ -47,7 +46,7 @@ withDefaults(defineProps<Props>(), {
     </div>
     <div v-if="member.sponsor" class="sp">
       <VPLink class="sp-link" :href="member.sponsor" no-icon>
-        <VPIconHeart class="sp-icon" /> {{ member.actionText || 'Sponsor' }}
+        <span class="vpi-heart sp-icon" /> {{ member.actionText || 'Sponsor' }}
       </VPLink>
     </div>
   </article>
@@ -221,8 +220,6 @@ withDefaults(defineProps<Props>(), {
 
 .sp-icon {
   margin-right: 8px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 16px;
 }
 </style>

src/client/theme-default/components/VPTeamPage.vue

@@ -6,15 +6,20 @@
 
 <style scoped>
 .VPTeamPage {
-  padding-bottom: 96px;
+  margin: 96px 0;
 }
 
 @media (min-width: 768px) {
   .VPTeamPage {
-    padding-bottom: 128px;
+    margin: 128px 0;
   }
 }
 
+.VPHome :slotted(.VPTeamPageTitle) {
+  border-top: 1px solid var(--vp-c-gutter);
+  padding-top: 88px !important;
+}
+
 :slotted(.VPTeamPageSection + .VPTeamPageSection),
 :slotted(.VPTeamMembers + .VPTeamPageSection) {
   margin-top: 64px;

src/client/theme-default/styles/base.css

@@ -247,5 +247,6 @@ mjx-container {
 }
 
 mjx-container > svg {
+  display: inline-block;
   margin: auto;
 }

src/client/theme-default/styles/components/custom-block.css

@@ -27,6 +27,26 @@
   background-color: var(--vp-custom-block-info-code-bg);
 }
 
+.custom-block.note {
+  border-color: var(--vp-custom-block-note-border);
+  color: var(--vp-custom-block-note-text);
+  background-color: var(--vp-custom-block-note-bg);
+}
+
+.custom-block.note a,
+.custom-block.note code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.note code {
+  background-color: var(--vp-custom-block-note-code-bg);
+}
+
 .custom-block.tip {
   border-color: var(--vp-custom-block-tip-border);
   color: var(--vp-custom-block-tip-text);
@@ -47,6 +67,26 @@
   background-color: var(--vp-custom-block-tip-code-bg);
 }
 
+.custom-block.important {
+  border-color: var(--vp-custom-block-important-border);
+  color: var(--vp-custom-block-important-text);
+  background-color: var(--vp-custom-block-important-bg);
+}
+
+.custom-block.important a,
+.custom-block.important code {
+  color: var(--vp-c-important-1);
+}
+
+.custom-block.important a:hover,
+.custom-block.important a:hover > code {
+  color: var(--vp-c-important-2);
+}
+
+.custom-block.important code {
+  background-color: var(--vp-custom-block-important-code-bg);
+}
+
 .custom-block.warning {
   border-color: var(--vp-custom-block-warning-border);
   color: var(--vp-custom-block-warning-text);
@@ -87,6 +127,26 @@
   background-color: var(--vp-custom-block-danger-code-bg);
 }
 
+.custom-block.caution {
+  border-color: var(--vp-custom-block-caution-border);
+  color: var(--vp-custom-block-caution-text);
+  background-color: var(--vp-custom-block-caution-bg);
+}
+
+.custom-block.caution a,
+.custom-block.caution code {
+  color: var(--vp-c-caution-1);
+}
+
+.custom-block.caution a:hover,
+.custom-block.caution a:hover > code {
+  color: var(--vp-c-caution-2);
+}
+
+.custom-block.caution code {
+  background-color: var(--vp-custom-block-caution-code-bg);
+}
+
 .custom-block.details {
   border-color: var(--vp-custom-block-details-border);
   color: var(--vp-custom-block-details-text);
@@ -118,6 +178,7 @@
   margin: 0 0 8px;
   font-weight: 700;
   cursor: pointer;
+  user-select: none;
 }
 
 .custom-block.details summary + p {

src/client/theme-default/styles/components/vp-doc.css

@@ -540,6 +540,10 @@
   max-width: calc((100% - 24px) / 2) !important;
 }
 
+/**
+ * External links
+ * -------------------------------------------------------------------------- */
+
 /* prettier-ignore */
 :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(.no-icon)::after {
   display: inline-block;

src/client/theme-default/styles/components/vp-sponsor.css

@@ -16,9 +16,9 @@
 }
 
 .vp-sponsor-tier {
-  margin-bottom: 4px;
+  margin: 0 0 4px !important;
   text-align: center;
-  letter-spacing: 1px;
+  letter-spacing: 1px !important;
   line-height: 24px;
   width: 100%;
   font-weight: 600;

src/client/theme-default/styles/icons.css

@@ -0,0 +1,123 @@
+[class^='vpi-'],
+[class*=' vpi-'],
+.vp-icon {
+  width: 1em;
+  height: 1em;
+}
+[class^='vpi-'].bg,
+[class*=' vpi-'].bg,
+.vp-icon.bg {
+  background-size: 100% 100%;
+  background-color: transparent;
+}
+[class^='vpi-']:not(.bg),
+[class*=' vpi-']:not(.bg),
+.vp-icon:not(.bg) {
+  -webkit-mask: var(--icon) no-repeat;
+  mask: var(--icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+}
+
+/* internal icons - used under ISC from https://lucide.dev/ */
+.vpi-align-left {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
+}
+.vpi-arrow-right,
+.vpi-arrow-down,
+.vpi-arrow-left,
+.vpi-arrow-up {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
+}
+.vpi-chevron-right,
+.vpi-chevron-down,
+.vpi-chevron-left,
+.vpi-chevron-up {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+}
+.vpi-chevron-down,
+.vpi-arrow-down {
+  transform: rotate(90deg);
+}
+.vpi-chevron-left,
+.vpi-arrow-left {
+  transform: rotate(180deg);
+}
+.vpi-chevron-up,
+.vpi-arrow-up {
+  transform: rotate(-90deg);
+}
+.vpi-square-pen {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E");
+}
+.vpi-plus {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
+}
+.vpi-sun {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
+}
+.vpi-moon {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
+}
+.vpi-more-horizontal {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
+}
+.vpi-languages {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
+}
+.vpi-heart {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
+}
+.vpi-search {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+}
+.vpi-layout-list {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E");
+}
+.vpi-delete {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E");
+}
+.vpi-corner-down-left {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
+}
+:root {
+  /* clipboard */
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
+  /* clipboard-copy */
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
+}
+
+/* social icons - used under CC0 1.0 from https://simpleicons.org/ */
+.vpi-social-discord {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E");
+}
+.vpi-social-facebook {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
+}
+.vpi-social-github {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+}
+.vpi-social-instagram {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38C19.074.322 18.202.12 16.924.066 15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008'/%3E%3C/svg%3E");
+}
+.vpi-social-linkedin {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
+}
+.vpi-social-mastodon {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E");
+}
+.vpi-social-npm {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z'/%3E%3C/svg%3E");
+}
+.vpi-social-slack {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
+}
+.vpi-social-twitter,
+.vpi-social-x {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
+}
+.vpi-social-youtube {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
+}

src/client/theme-default/styles/vars.css

@@ -54,6 +54,11 @@
   --vp-c-indigo-3: #5672cd;
   --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
 
+  --vp-c-purple-1: #6f42c1;
+  --vp-c-purple-2: #7e4cc9;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
+
   --vp-c-green-1: #18794e;
   --vp-c-green-2: #299764;
   --vp-c-green-3: #30a46c;
@@ -83,6 +88,11 @@
   --vp-c-indigo-3: #3e63dd;
   --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
 
+  --vp-c-purple-1: #c8abfa;
+  --vp-c-purple-2: #a879e6;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
+
   --vp-c-green-1: #3dd68c;
   --vp-c-green-2: #30a46c;
   --vp-c-green-3: #298459;
@@ -215,11 +225,21 @@
   --vp-c-tip-3: var(--vp-c-brand-3);
   --vp-c-tip-soft: var(--vp-c-brand-soft);
 
+  --vp-c-note-1: var(--vp-c-brand-1);
+  --vp-c-note-2: var(--vp-c-brand-2);
+  --vp-c-note-3: var(--vp-c-brand-3);
+  --vp-c-note-soft: var(--vp-c-brand-soft);
+
   --vp-c-success-1: var(--vp-c-green-1);
   --vp-c-success-2: var(--vp-c-green-2);
   --vp-c-success-3: var(--vp-c-green-3);
   --vp-c-success-soft: var(--vp-c-green-soft);
 
+  --vp-c-important-1: var(--vp-c-purple-1);
+  --vp-c-important-2: var(--vp-c-purple-2);
+  --vp-c-important-3: var(--vp-c-purple-3);
+  --vp-c-important-soft: var(--vp-c-purple-soft);
+
   --vp-c-warning-1: var(--vp-c-yellow-1);
   --vp-c-warning-2: var(--vp-c-yellow-2);
   --vp-c-warning-3: var(--vp-c-yellow-3);
@@ -229,6 +249,11 @@
   --vp-c-danger-2: var(--vp-c-red-2);
   --vp-c-danger-3: var(--vp-c-red-3);
   --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-c-caution-1: var(--vp-c-red-1);
+  --vp-c-caution-2: var(--vp-c-red-2);
+  --vp-c-caution-3: var(--vp-c-red-3);
+  --vp-c-caution-soft: var(--vp-c-red-soft);
 }
 
 /**
@@ -275,15 +300,6 @@
   }
 }
 
-/**
- * Icons
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
-  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
-}
-
 /**
  * Layouts
  * -------------------------------------------------------------------------- */
@@ -394,11 +410,21 @@
   --vp-custom-block-info-bg: var(--vp-c-default-soft);
   --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
 
+  --vp-custom-block-note-border: transparent;
+  --vp-custom-block-note-text: var(--vp-c-text-1);
+  --vp-custom-block-note-bg: var(--vp-c-default-soft);
+  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);
+
   --vp-custom-block-tip-border: transparent;
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
 
+  --vp-custom-block-important-border: transparent;
+  --vp-custom-block-important-text: var(--vp-c-text-1);
+  --vp-custom-block-important-bg: var(--vp-c-important-soft);
+  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);
+
   --vp-custom-block-warning-border: transparent;
   --vp-custom-block-warning-text: var(--vp-c-text-1);
   --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
@@ -409,6 +435,11 @@
   --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
   --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
 
+  --vp-custom-block-caution-border: transparent;
+  --vp-custom-block-caution-text: var(--vp-c-text-1);
+  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
+  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
+
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
   --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);

src/client/theme-default/support/socialIcons.ts

@@ -1,22 +0,0 @@
-// used under CC0 1.0 from https://simpleicons.org/
-export const icons = {
-  discord:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>',
-  facebook:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',
-  github:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>',
-  instagram:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>',
-  linkedin:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',
-  mastodon:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>',
-  slack:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>',
-  twitter:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>',
-  x: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>',
-  youtube:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'
-} as const

src/client/theme-default/without-fonts.ts

@@ -1,5 +1,6 @@
 import './styles/vars.css'
 import './styles/base.css'
+import './styles/icons.css'
 import './styles/utils.css'
 import './styles/components/custom-block.css'
 import './styles/components/vp-code.css'

src/node/markdown/markdown.ts

@@ -23,9 +23,9 @@ import type {
   BuiltinTheme,
   Highlighter,
   LanguageInput,
-  ShikijiTransformer,
+  ShikiTransformer,
   ThemeRegistrationAny
-} from 'shikiji'
+} from 'shiki'
 import type { Logger } from 'vite'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { highlight } from './plugins/highlight'
@@ -35,6 +35,7 @@ import { lineNumberPlugin } from './plugins/lineNumbers'
 import { linkPlugin } from './plugins/link'
 import { preWrapperPlugin } from './plugins/preWrapper'
 import { snippetPlugin } from './plugins/snippet'
+import { gitHubAlertsPlugin } from './plugins/githubAlerts'
 
 export type { Header } from '../shared'
 
@@ -74,21 +75,21 @@ export interface MarkdownOptions extends MarkdownIt.Options {
    * @example { theme: { light: 'github-light', dark: 'github-dark' } }
    *
    * You can use an existing theme.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#all-themes
+   * @see https://shiki.style/themes
    * Or add your own theme.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#load-custom-themes
+   * @see https://shiki.style/guide/load-theme
    */
   theme?: ThemeOptions
   /**
    * Languages for syntax highlighting.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/languages.md#all-themes
+   * @see https://shiki.style/languages
    */
   languages?: LanguageInput[]
   /**
    * Custom language aliases.
    *
    * @example { 'my-lang': 'js' }
-   * @see https://github.com/antfu/shikiji/tree/main#custom-language-aliases
+   * @see https://shiki.style/guide/load-lang#custom-language-aliases
    */
   languageAlias?: Record<string, string>
   /**
@@ -102,13 +103,13 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   defaultHighlightLang?: string
   /**
    * Transformers applied to code blocks
-   * @see https://github.com/antfu/shikiji#hast-transformers
+   * @see https://shiki.style/guide/transformers
    */
-  codeTransformers?: ShikijiTransformer[]
+  codeTransformers?: ShikiTransformer[]
   /**
-   * Setup Shikiji instance
+   * Setup Shiki instance
    */
-  shikijiSetup?: (shikiji: Highlighter) => void | Promise<void>
+  shikiSetup?: (shiki: Highlighter) => void | Promise<void>
 
   /* ==================== Markdown It Plugins ==================== */
 
@@ -176,6 +177,12 @@ export interface MarkdownOptions extends MarkdownIt.Options {
    */
   math?: boolean | any
   image?: ImageOptions
+  /**
+   * Allows disabling the github alerts plugin
+   * @default true
+   * @see https://vitepress.dev/guide/markdown#github-flavored-alerts
+   */
+  gfmAlerts?: boolean
 }
 
 export type MarkdownRenderer = MarkdownIt
@@ -216,6 +223,10 @@ export const createMarkdownRenderer = async (
     )
     .use(lineNumberPlugin, options.lineNumbers)
 
+  if (options.gfmAlerts !== false) {
+    md.use(gitHubAlertsPlugin)
+  }
+
   // 3rd party plugins
   if (!options.attrs?.disable) {
     md.use(attrsPlugin, options.attrs)

src/node/markdown/plugins/containers.ts

@@ -129,8 +129,11 @@ function createCodeGroup(options: Options): ContainerArgs {
 
 export interface ContainerOptions {
   infoLabel?: string
+  noteLabel?: string
   tipLabel?: string
   warningLabel?: string
   dangerLabel?: string
   detailsLabel?: string
+  importantLabel?: string
+  cautionLabel?: string
 }

src/node/markdown/plugins/githubAlerts.ts

@@ -0,0 +1,67 @@
+import type MarkdownIt from 'markdown-it'
+import type { ContainerOptions } from './containers'
+
+const markerRE =
+  /^\[\!(TIP|NOTE|INFO|IMPORTANT|WARNING|CAUTION|DANGER)\]([^\n\r]*)/i
+
+export const gitHubAlertsPlugin = (
+  md: MarkdownIt,
+  options?: ContainerOptions
+) => {
+  const titleMark = {
+    tip: options?.tipLabel || 'TIP',
+    note: options?.noteLabel || 'NOTE',
+    info: options?.infoLabel || 'INFO',
+    important: options?.importantLabel || 'IMPORTANT',
+    warning: options?.warningLabel || 'WARNING',
+    caution: options?.cautionLabel || 'CAUTION',
+    danger: options?.dangerLabel || 'DANGER'
+  } as Record<string, string>
+
+  md.core.ruler.after('block', 'github-alerts', (state) => {
+    const tokens = state.tokens
+    for (let i = 0; i < tokens.length; i++) {
+      if (tokens[i].type === 'blockquote_open') {
+        const startIndex = i
+        const open = tokens[startIndex]
+        let endIndex = i + 1
+        while (
+          endIndex < tokens.length &&
+          (tokens[endIndex].type !== 'blockquote_close' ||
+            tokens[endIndex].level !== open.level)
+        )
+          endIndex++
+        if (endIndex === tokens.length) continue
+        const close = tokens[endIndex]
+        const firstContent = tokens
+          .slice(startIndex, endIndex + 1)
+          .find((token) => token.type === 'inline')
+        if (!firstContent) continue
+        const match = firstContent.content.match(markerRE)
+        if (!match) continue
+        const type = match[1].toLowerCase()
+        const title = match[2].trim() || titleMark[type] || capitalize(type)
+        firstContent.content = firstContent.content
+          .slice(match[0].length)
+          .trimStart()
+        open.type = 'github_alert_open'
+        open.tag = 'div'
+        open.meta = {
+          title,
+          type
+        }
+        close.type = 'github_alert_close'
+        close.tag = 'div'
+      }
+    }
+  })
+  md.renderer.rules.github_alert_open = function (tokens, idx) {
+    const { title, type } = tokens[idx].meta
+    const attrs = ''
+    return `<div class="${type} custom-block github-alert"${attrs}><p class="custom-block-title">${title}</p>\n`
+  }
+}
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

src/node/markdown/plugins/highlight.ts

@@ -1,13 +1,7 @@
 import { customAlphabet } from 'nanoid'
 import c from 'picocolors'
-import type { ShikijiTransformer } from 'shikiji'
-import {
-  addClassToHast,
-  bundledLanguages,
-  getHighlighter,
-  isPlaintext as isPlainLang,
-  isSpecialLang
-} from 'shikiji'
+import type { ShikiTransformer } from 'shiki'
+import { bundledLanguages, getHighlighter, isSpecialLang } from 'shiki'
 import {
   transformerCompactLineOptions,
   transformerNotationDiff,
@@ -15,7 +9,7 @@ import {
   transformerNotationFocus,
   transformerNotationHighlight,
   type TransformerCompactLineOption
-} from 'shikiji-transformers'
+} from '@shikijs/transformers'
 import type { Logger } from 'vite'
 import type { MarkdownOptions, ThemeOptions } from '../markdown'
 
@@ -72,9 +66,9 @@ export async function highlight(
     langAlias: options.languageAlias
   })
 
-  await options?.shikijiSetup?.(highlighter)
+  await options?.shikiSetup?.(highlighter)
 
-  const transformers: ShikijiTransformer[] = [
+  const transformers: ShikiTransformer[] = [
     transformerNotationDiff(),
     transformerNotationFocus({
       classActiveLine: 'has-focus',
@@ -85,7 +79,7 @@ export async function highlight(
     {
       name: 'vitepress:add-class',
       pre(node) {
-        addClassToHast(node, 'vp-code')
+        this.addClassToHast(node, 'vp-code')
       }
     },
     {
@@ -113,7 +107,7 @@ export async function highlight(
 
     if (lang) {
       const langLoaded = highlighter.getLoadedLanguages().includes(lang as any)
-      if (!langLoaded && !isPlainLang(lang) && !isSpecialLang(lang)) {
+      if (!langLoaded && !isSpecialLang(lang)) {
         logger.warn(
           c.yellow(
             `\nThe language '${lang}' is not loaded, falling back to '${

src/node/markdown/plugins/snippet.ts

@@ -170,10 +170,10 @@ export const snippetPlugin = (md: MarkdownIt, srcDir: string) => {
       return fence(...args)
     }
 
-    let content = fs.readFileSync(src, 'utf8')
+    let content = fs.readFileSync(src, 'utf8').replace(/\r\n/g, '\n')
 
     if (regionName) {
-      const lines = content.split(/\r?\n/)
+      const lines = content.split('\n')
       const region = findRegion(lines, regionName)
 
       if (region) {

src/shared/shared.ts

@@ -23,8 +23,10 @@ export type SidebarItem = DefaultTheme.SidebarItem
 
 export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i
 export const APPEARANCE_KEY = 'vitepress-theme-appearance'
-export const HASH_RE = /#.*$/
-export const EXT_RE = /(index)?\.(md|html)$/
+
+const HASH_RE = /#.*$/
+const HASH_OR_QUERY_RE = /[?#].*$/
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
 
 export const inBrowser = typeof document !== 'undefined'
 
@@ -67,8 +69,10 @@ export function isActive(
   return true
 }
 
-export function normalize(path: string): string {
-  return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
+function normalize(path: string): string {
+  return decodeURI(path)
+    .replace(HASH_OR_QUERY_RE, '')
+    .replace(INDEX_OR_EXT_RE, '$1')
 }
 
 export function isExternal(path: string): boolean {
@@ -182,24 +186,29 @@ export function slash(p: string): string {
   return p.replace(/\\/g, '/')
 }
 
-const extraExts =
-  (typeof process === 'object' && process.env.VITE_EXTRA_EXTENSIONS) ||
-  (import.meta as any).env?.VITE_EXTRA_EXTENSIONS ||
-  ''
-
-// md, html? are intentionally omitted, see treatAsHtml
-const KNOWN_EXTENSIONS = new Set(
-  (
-    '3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,doc,' +
-    'eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,man,' +
-    'mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,opus,otf,' +
-    'p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,tiff,tr,ts,' +
-    'tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,yaml,yml,zip' +
-    (extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
-  ).split(',')
-)
+const KNOWN_EXTENSIONS = new Set()
 
 export function treatAsHtml(filename: string): boolean {
+  if (KNOWN_EXTENSIONS.size === 0) {
+    const extraExts =
+      (typeof process === 'object' && process.env?.VITE_EXTRA_EXTENSIONS) ||
+      (import.meta as any).env?.VITE_EXTRA_EXTENSIONS ||
+      ''
+
+    // md, html? are intentionally omitted
+    ;(
+      '3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
+      'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
+      'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
+      'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
+      'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
+      'yaml,yml,zip' +
+      (extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
+    )
+      .split(',')
+      .forEach((ext) => KNOWN_EXTENSIONS.add(ext))
+  }
+
   const ext = filename.split('.').pop()
 
   return ext == null || !KNOWN_EXTENSIONS.has(ext.toLowerCase())

template/markdown-examples.md

@@ -4,7 +4,7 @@ This page demonstrates some of the built-in markdown extensions provided by Vite
 
 ## Syntax Highlighting
 
-VitePress provides Syntax Highlighting powered by [Shikiji](https://github.com/antfu/shikiji), with additional features like line-highlighting:
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
 
 **Input**
 

theme.d.ts

@@ -16,6 +16,7 @@ export declare const useSidebar: () => DefaultTheme.DocSidebar
 export declare const useLocalNav: () => DefaultTheme.DocLocalNav
 
 // TODO: add props for these
+export declare const VPBadge: DefineComponent
 export declare const VPButton: DefineComponent
 export declare const VPDocAsideSponsors: DefineComponent
 export declare const VPHomeFeatures: DefineComponent

types/default-theme.d.ts

@@ -334,6 +334,7 @@ export namespace DefaultTheme {
     | 'instagram'
     | 'linkedin'
     | 'mastodon'
+    | 'npm'
     | 'slack'
     | 'twitter'
     | 'x'