Merge branch 'main' into theme-hope

.gitattributes

@@ -8,3 +8,5 @@
 *.tff binary
 *.woff binary
 *.woff2 binary
+
+docs/.vuepress/** -linguist-documentation

.github/workflows/check-docs.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Lint
+        run: pnpm lint
+
       - name: Build docs with ${{ matrix.bundler }}
         run: pnpm docs:build
         env:

.prettierignore

@@ -1,3 +1 @@
 pnpm-lock.yaml
-*.html
-*.md

.vscode/settings.json

@@ -33,6 +33,7 @@
     "preload",
     "prismjs",
     "shiki",
+    "shikiji",
     "slugify",
     "unmount",
     "vuejs",

docs/.vuepress/config.ts

@@ -11,6 +11,7 @@ import theme from './theme.js'
 
 const __dirname = getDirname(import.meta.url)
 const require = createRequire(import.meta.url)
+const isProd = process.env.NODE_ENV === 'production'
 
 export default defineUserConfig({
   // set site base to default value

docs/.vuepress/configs/navbar/en.ts

@@ -5,7 +5,20 @@ export const enNavbar = navbar([
   {
     text: 'Guide',
     icon: 'fa6-solid:lightbulb',
-    link: '/guide/',
+    children: [
+      '/guide/introduction.md',
+      '/guide/getting-started.md',
+      '/guide/configuration.md',
+      '/guide/page.md',
+      '/guide/markdown.md',
+      '/guide/assets.md',
+      '/guide/i18n.md',
+      '/guide/deployment.md',
+      '/guide/theme.md',
+      '/guide/plugin.md',
+      '/guide/bundler.md',
+      '/guide/migration.md',
+    ],
   },
   {
     text: 'Reference',
@@ -111,7 +124,7 @@ export const enNavbar = navbar([
         children: [
           {
             text: 'Contributing Guide',
-            link: 'https://github.com/vuepress/vuepress-next/blob/main/CONTRIBUTING.md',
+            link: 'https://github.com/vuepress/core/blob/main/CONTRIBUTING.md',
           },
           {
             text: 'Awesome VuePress',
@@ -131,7 +144,6 @@ export const enNavbar = navbar([
     children: [
       {
         text: 'Changelog',
-        icon: 'fa6-solid:clock',
         link: 'https://github.com/vuepress/vuepress-next/blob/main/CHANGELOG.md',
       },
       {

docs/.vuepress/configs/navbar/zh.ts

@@ -5,7 +5,20 @@ export const zhNavbar = navbar([
   {
     text: '指南',
     icon: 'fa6-solid:lightbulb',
-    link: '/zh/guide/',
+    children: [
+      '/zh/guide/introduction.md',
+      '/zh/guide/getting-started.md',
+      '/zh/guide/configuration.md',
+      '/zh/guide/page.md',
+      '/zh/guide/markdown.md',
+      '/zh/guide/assets.md',
+      '/zh/guide/i18n.md',
+      '/zh/guide/deployment.md',
+      '/zh/guide/theme.md',
+      '/zh/guide/plugin.md',
+      '/zh/guide/bundler.md',
+      '/zh/guide/migration.md',
+    ],
   },
   {
     text: '参考',
@@ -107,7 +120,7 @@ export const zhNavbar = navbar([
         children: [
           {
             text: '贡献指南',
-            link: 'https://github.com/vuepress/vuepress-next/blob/main/CONTRIBUTING_zh.md',
+            link: 'https://github.com/vuepress/core/blob/main/CONTRIBUTING_zh.md',
           },
           {
             text: 'Awesome VuePress',
@@ -127,7 +140,6 @@ export const zhNavbar = navbar([
     children: [
       {
         text: '更新日志',
-        icon: 'fa6-solid:clock',
         link: 'https://github.com/vuepress/vuepress-next/blob/main/CHANGELOG.md',
       },
       {

docs/.vuepress/configs/sidebar/en.ts

@@ -2,7 +2,7 @@ import { sidebar } from 'vuepress-theme-hope'
 
 export const enSidebar = sidebar({
   '/guide/': [
-    '',
+    'introduction',
     'getting-started',
     'configuration',
     'page',

docs/.vuepress/configs/sidebar/zh.ts

@@ -2,7 +2,7 @@ import { sidebar } from 'vuepress-theme-hope'
 
 export const zhSidebar = sidebar({
   '/zh/guide/': [
-    '',
+    'introduction',
     'getting-started',
     'configuration',
     'page',

docs/.vuepress/public/new.html

@@ -1 +1,3 @@
-<script>window.location = 'https://stackblitz.com/fork/vuepress'</script>
+<script>
+  window.location = 'https://stackblitz.com/fork/vuepress'
+</script>

docs/README.md

@@ -8,7 +8,7 @@ actions:
     link: /guide/getting-started.html
     type: primary
   - text: Introduction
-    link: /guide/
+    link: /guide/introduction.html
     type: secondary
   - text: Marketplace
     link: https://marketplace.vuejs.press/

docs/advanced/cookbook/adding-extra-pages.md

@@ -13,7 +13,7 @@ With the help of [Plugin API](../../reference/plugin-api.md) and [Node API](../.
 As a theme author, you may not require users to create a `/README.md` file as the homepage, but you want to provide a default one:
 
 ```ts
-import { createPage } from '@vuepress/core'
+import { createPage } from 'vuepress/core'
 
 export default {
   // all pages have been loaded after initialization

docs/advanced/cookbook/making-a-theme-extendable.md

@@ -33,8 +33,8 @@ This approach requires you to consider which components of your theme should be
 First, set `alias` for replaceable components of you theme:
 
 ```ts
-import type { Theme } from '@vuepress/core'
-import { getDirname } from '@vuepress/utils'
+import type { Theme } from 'vuepress/core'
+import { getDirname } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 

docs/advanced/cookbook/markdown-and-vue-sfc.md

@@ -31,13 +31,14 @@ _Current count is: {{ count }}_
 <script setup>
 import { h, ref } from 'vue'
 
-const RedDiv = (_, ctx) => h(
-  'div',
-  {
-    class: 'red-div',
-  },
-  ctx.slots.default()
-)
+const RedDiv = (_, ctx) =>
+  h(
+    'div',
+    {
+      class: 'red-div',
+    },
+    ctx.slots.default(),
+  )
 const msg = 'Vue in Markdown'
 const count = ref(0)
 </script>

docs/advanced/cookbook/passing-data-to-client-code.md

@@ -47,7 +47,10 @@ First, write a temp file `foo.js`, which will be generated in the [temp](../../r
 export default (options) => ({
   async onPrepared(app) {
     // write temp file
-    await app.writeTemp('foo.js', `export const foo = ${JSON.stringify(options.foo)}`)
+    await app.writeTemp(
+      'foo.js',
+      `export const foo = ${JSON.stringify(options.foo)}`,
+    )
   },
 })
 ```

docs/advanced/cookbook/usage-of-client-config.md

@@ -7,7 +7,7 @@ icon: fa6-solid:gear
 You can make use of the [client config file](../../guide/configuration.md#client-config-file) directly in your project, or specify the file path in your plugin or theme via [clientConfigFile](../../reference/plugin-api.md#clientconfigfile) hook:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -16,10 +16,10 @@ const pluginOrTheme = {
 }
 ```
 
-Inside the client config file, `@vuepress/client` package provides a helper function [defineClientConfig](../../reference/client-api.md#defineclientconfig) to help you define the client config:
+Inside the client config file, `vuepress/client` provides a helper function [defineClientConfig](../../reference/client-api.md#defineclientconfig) to help you define the client config:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ app, router, siteData }) {},
@@ -44,7 +44,7 @@ The `enhance` function will be invoked after the client app is created. It's pos
 You can register global Vue components via the [app.component](https://vuejs.org/api/application.html#app-component) method:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyComponent from './MyComponent.vue'
 
 export default defineClientConfig({
@@ -63,7 +63,7 @@ We already provides a [ClientOnly](../../reference/components.md#clientonly) com
 In the `enhance` function, you can make use of the [`__VUEPRESS_SSR__`](../../reference/client-api.md#ssr) flag for that purpose.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   async enhance() {
@@ -80,7 +80,7 @@ export default defineClientConfig({
 You can make use of the [Router Methods](https://router.vuejs.org/api/#router-methods) that provided by vue-router. For example, add navigation guard:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   enhance({ router }) {
@@ -110,9 +110,9 @@ The `setup` function would be invoked inside the [setup](https://vuejs.org/api/c
 You can take the `setup` function as part of the [setup](https://vuejs.org/api/composition-api-setup.html) hook of the root component. Thus, all composition APIs are available here.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
 import { provide, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { defineClientConfig } from 'vuepress/client'
 
 export default defineClientConfig({
   setup() {
@@ -134,7 +134,7 @@ In the `setup` function, the [`__VUEPRESS_SSR__`](../../reference/client-api.md#
 Another way to use non-ssr-friendly features is to put them inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) hook:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import { onMounted } from 'vue'
 
 export default defineClientConfig({
@@ -152,7 +152,7 @@ export default defineClientConfig({
 The `layouts` options is to set layout components. After layout components are registered here, users can use it via [layout](../../reference/frontmatter.md#layout) frontmatter.
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import MyLayout from './layouts/MyLayout.vue'
 
 export default defineClientConfig({
@@ -169,7 +169,7 @@ The `rootComponents` is a components array to be placed directly into the root n
 Typical usage of this option is to put some global UI components, like global popup or so:
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import GlobalPopup from './components/GlobalPopup.vue'
 
 export default defineClientConfig({

docs/advanced/plugin.md

@@ -10,7 +10,7 @@ Before reading this guide, you'd better learn the VuePress [architecture](./arch
 
 ## Create a Plugin
 
-A plugin should be a plain JavaScript object that satisfies the [Plugin API](../reference/plugin-api.md), which is called a *Plugin Object*:
+A plugin should be a plain JavaScript object that satisfies the [Plugin API](../reference/plugin-api.md), which is called a _Plugin Object_:
 
 ```ts
 const fooPlugin = {
@@ -19,7 +19,7 @@ const fooPlugin = {
 }
 ```
 
-A plugin could also be a function that receives the [app instance](../reference/node-api.md#app) as the param and returns a *Plugin Object*, which is called a *Plugin Function*:
+A plugin could also be a function that receives the [app instance](../reference/node-api.md#app) as the param and returns a _Plugin Object_, which is called a _Plugin Function_:
 
 ```ts
 const barPlugin = (app) => {
@@ -30,7 +30,7 @@ const barPlugin = (app) => {
 }
 ```
 
-A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a *Plugin Object* or a *Plugin Function*. Then your plugin should be converted like this:
+A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a _Plugin Object_ or a _Plugin Function_. Then your plugin should be converted like this:
 
 ```ts
 const fooPlugin = (options) => {
@@ -57,11 +57,9 @@ After creating a plugin, you should follow some conventions in the [package.json
 ```json
 {
   "name": "vuepress-plugin-foo",
-  "keywords": [
-    "vuepress-plugin"
-  ]
+  "keywords": ["vuepress-plugin"]
 }
 ```
 
-- Set `name` to follow the naming convention, i.e. `vuepress-plugin-xxx` or `@org/vuepress-plugin-xxx`, which should be consistent with the [name](../reference/plugin-api.md#name) field of the *Plugin Object*.
+- Set `name` to follow the naming convention, i.e. `vuepress-plugin-xxx` or `@org/vuepress-plugin-xxx`, which should be consistent with the [name](../reference/plugin-api.md#name) field of the _Plugin Object_.
 - Set `keywords` to include `vuepress-plugin`, so that users can search your plugin on NPM.

docs/advanced/theme.md

@@ -10,10 +10,10 @@ Before reading this guide, you'd better learn the guide of [Writing a Plugin](./
 
 ## Create a Theme
 
-A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a *Theme Object* or a *Theme Function*, and could be wrapped with a function to receive options:
+A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a _Theme Object_ or a _Theme Function_, and could be wrapped with a function to receive options:
 
 ```ts
-import { getDirname, path } from '@vuepress/utils'
+import { getDirname, path } from 'vuepress/utils'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -26,7 +26,7 @@ const fooTheme = (options) => {
     clientConfigFile: path.resolve(__dirname, 'client.js'),
 
     // set custom dev / build template
-    // if the template is not specified, the default template from `@vuepress/client` will be used
+    // if the template is not specified, the default template
     templateBuild: path.resolve(__dirname, 'templates/build.html'),
     templateDev: path.resolve(__dirname, 'templates/dev.html'),
 
@@ -53,7 +53,7 @@ const barTheme = (options) => {
 Then, create theme's client config file `client.js` :
 
 ```ts
-import { defineClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
@@ -94,11 +94,9 @@ Also, there are some conventions for theme in [package.json](https://docs.npmjs.
 ```json
 {
   "name": "vuepress-theme-foo",
-  "keywords": [
-    "vuepress-theme"
-  ]
+  "keywords": ["vuepress-theme"]
 }
 ```
 
-- Set `name` to follow the naming convention: `vuepress-theme-xxx` or `@org/vuepress-theme-xxx`, which should be consistent with the [name](../reference/theme-api.md#name) field of the *Theme Object*.
+- Set `name` to follow the naming convention: `vuepress-theme-xxx` or `@org/vuepress-theme-xxx`, which should be consistent with the [name](../reference/theme-api.md#name) field of the _Theme Object_.
 - Set `keywords` to include `vuepress-theme`, so that users can search your theme on NPM.