Clear and concise description of the problem

I have a feeling that a serious documentation contributor has lots of things to do before editing a page:

• Examine the page source.
• Search for existing issues.
• Read the contributing guide.
• Fork the repository.
• Create a development branch.

From this point of view, the "Edit this page" link (editLink) of the default theme is a bit useless and inconvenient.

Suggested solution

Could VuePress give a design explanation on the topic?

Or, just introduce a "View source" link in the default theme?

Alternative

No response

Additional context

• On Microsoft Docs, the "Edit This Document" link (pencil button around the beginning of a page) is actually a "view source" link.

• On MDN Web Docs, both "Source" and "Edit" links exist near the footer of a page.

Description

When set a very long title for the project, the title can't hide correctly, and the button for the dark/light and search can be blocked

it sometimes happens on the mobile devices

Reproduction

https://ls-bot.9595095.xyz/

Used Package Manager

yarn

System Info

build correctly

Clear and concise description of the problem

Add e2e testings for ecosystem repo

Suggested solution

Use cypress for e2e testing like the core repo.

Alternative

No response

Additional context

No response

copy code 无法在微信H5中使用，点击无响应

但通过 extendsMarkdown的方式 注入 markdown-it-copy 可以成功复制，但UI 需要自定义调整，有点麻烦

Description

When copying the text does not work: undefined

Reproduction

https://gravitlauncher.com/install/

Used Package Manager

yarn

System Info

Sorry. i'm use yarn manager
`vuepress: command not found`

Description

plugin-pwa replaces the viewport meta element forces user-scalable=no to be set.
https://github.com/vuepress/ecosystem/blob/3bddc56a1d33707fc2e50674bb2ba678de53fc1b/plugins/plugin-pwa/src/node/injectLinksToHead.ts#L89C64-L89C80

Is there a reason we needed to do this? It violates the WCAG standard to not disable zoom and scaling features of the browser for low vision users.

https://dequeuniversity.com/rules/axe/4.8/meta-viewport?application=AxeChrome
https://www.boia.org/blog/web-accessibility-tips-dont-disable-zooming-yes-even-on-mobile

Reproduction

https://datagridvue.com/

Used Package Manager

pnpm

System Info

NA

Clear and concise description of the problem

The appearance of currect default theme is really "aweful" comparing to:

• Vitepress: https://vitepress.vuejs.org/
• Astro: https://docs.astro.build/en/getting-started/
• Docusaurus: https://docusaurus.io/zh-CN/
• ....

Mainly because it lacks some basic function:

• Desktop TOC (Importanted)
• Breadcrumbs (Nice to have)
• Global footer support (Nice to have)
• ...

Any poor appreance in:

• Repo link

• Editlink

• Page nav

• Navbar dropdown

  • adding animation such as http://vuepress-theme-hope.github.io/v2/ (important)

    Current menu is too "Hard"

• Sidebar

  Have to say that the above tool listed all have better outlook

• ...

A good official theme is important for such tools to atract users. People probably won't choose a tool which it's project docs have the poorest appearance.

Suggested solution

Implement the above ones.

Alternative

No response

Additional context

No response

Clear and concise description of the problem

Add some helper functions for developer.

They might be commonly used while developing plugins and themes, but not part of functionality of vuepress core.

Suggested solution

A new @vuepress/helper package.

Details

Client

Noop module

Proving @vuepress/helper/noopModule and @vuepress/helper/noopComponent for empty pkg and vue component.

This can be useful when developers want to do tree-shaking with alias.

Node

Bundler Related

We provide a lot of bundler related files, as it's likely for a plugin or theme to modify bundler config.

Writing codes directly can be annoying, see the following example:

-    // extends options of @vuepress/bundler-vite
-    if (app.options.bundler.name === '@vuepress/bundler-vite') {
-      bundlerOptions.vuePluginOptions ??= {}
-      bundlerOptions.vuePluginOptions.template ??= {}
-      bundlerOptions.vuePluginOptions.template.compilerOptions ??= {}
-      const isCustomElement = bundlerOptions.vuePluginOptions.template.compilerOptions.isCustomElement
-      bundlerOptions.vuePluginOptions.template.compilerOptions.isCustomElement = (tag) => {
-        if (isCustomElement?.(tag)) return true
-        if (tag === 'my-custom-element') return true
-      }
-    // extends options of @vuepress/bundler-webpack
-    if (app.options.bundler.name === '@vuepress/bundler-webpack') {
-      bundlerOptions.vue ??= {}
-      bundlerOptions.vue.compilerOptions ??= {}
-      const isCustomElement = bundlerOptions.vue.compilerOptions.isCustomElement
-      bundlerOptions.vue.compilerOptions.isCustomElement = (tag) => {
-        if (isCustomElement?.(tag)) return true
-        if (tag === 'my-custom-element') return true
-      }
+    addCustomElement(bundlerOptions, app, 'my-custom-element')

The main problem is that we need to ensure the parent scope of our config exists and we should not drop any existing config. So that's our helper goal.

Docs already exists at https://shared.vuejs.press/node/bundler.html (published as vuepress-shared)

Excerpt Related

For seo feed or blogging, we need a concept called excerpt to describe a page main content using html, while VuePress2 remove this from core.

A good generator should do the following things:

1. removing Vue Components because they can not be rendered outside page.
2. adjusting contents, like removing header anchor, code block line numbers and highlight lines, removing image with relative path, converting <RouterLink> to <a> tag and so on.
3. Support stopeed with excerpt marker, or stop when reaching a theahold.

So that's getPageExcerpt for.

Clear and concise description of the problem

No control over generated content for robots.txt

Suggested solution

If it exists under the public directory, it should not be generated or provide the option to generate content.

Alternative

If it exists under the public directory, it should not be generated

Additional context

plugins/plugin-seo/src/node/generateRobotsTxt.ts
no

Description

The URL path is missing for links to headings in the sidebar. This is also occurring on the docs of the default theme. This issue can be seen when hovering over any of the links to headings on the provided reproduction page.

Reproduction

https://ecosystem.vuejs.press/themes/default/config.html

Used Package Manager

npm

System Info

-

Description

Dequeue recommends all HTML landmarks have a unique role, title or aria-label. If the page is using the auto link page nav there are two nav elements on the page with the same landmark role.
https://dequeuniversity.com/rules/axe/4.8/landmark-unique?application=AxeChrome

Reproduction

NA

Used Package Manager

npm

System Info

NA

Feature request

Note: this is a variant of an issue which has been reported for v1 but also applies for v2: vuejs/vuepress#2398

Description

Most modern documentations are using layout where page TOC (anchors) links are shown in a sidebar on the right and page tree (h1) is shown on the left sidebar. As of now, vuepress@next default theme shows page tree as well page TOC in-lined. Being able to display page TOC on right would reduce the left nav tree and can significantly improve the readability of docs.

Some themes, like vuepress-theme-hope, and the vuepress-plugin-right-anchor plugin offer this option, but this has become such a common feature with on-line documentations that it should be implemented to VuePress v2 default theme.

Proposed Solution

Something like what @Mister-Hope did with his theme would be just perfect - with an option like themeConfig.pageTocRightSidebar with values true or false.

Clear and concise description of the problem

The auto sidebar feature of the default theme is quite useful, especially in cases where the pages are autogenerated documentation from something like TypeDoc.

Currently you can only use the auto feature on all pages or manually specify the sidebar for every page. It would be great if you could turn the feature on per page as well.

I was able to hack it to make it work for the data-grid-vue site using vue router nav guards but its not maintainable and would probably be pretty easy to implement in the theme unless the changes to not use the vue router are going to make the auto sidebar feature more difficult to implement in general.
https://github.com/nruffing/data-grid-vue/blob/main/vuepress/.vuepress/client.ts#L63

Suggested solution

Implement passing 'auto' to a SidebarConfigArray for a given page in the theme's config object.

We could also change SidebarConfigObject to allow a string directly.

export type SidebarAuto = 'auto'
export type SidebarConfigObject = Record<string, SidebarConfigArray | SidebarAuto>

sidebar: {
  '/guide/': [
    {
      text: 'Guide',
      children: [
        '/guide/README.md',
        '/guide/columns.md',
        '/guide/sorting.md',
        '/guide/filtering.md',
        '/guide/paging.md',
        '/guide/more-coming-soon.md',
      ],
    },
  ],
  '/generated/': 'auto'
  '/dotnet-generated/': 'auto',
},

Alternative

No response

Additional context

No response

Feature request

Description

Since Apple introduced new Safari design in WWDC 2021, personally, I think that changing theme-color with dark mode dynamically would have a nicer look for upcoming Safari 15.x (maybe improve other browsers too). Or in another word the current theme-color is too bright for the dark mode, compared in the attached video.

Proposed Solution

Not experienced in Vue but I think something like this would did help:

// ToggleDarkButton.vue

…

const changeThemeColor = (): void => {
  const themeColorEl = window?.document.querySelector(
    'meta[name="theme-color"]'
  )

  themeColorEl?.setAttribute('content', !isDark.value ? '#3eaf7c' : '#22272e')
}

…

const setDark = (): void => {
  setDarkClass()
  changeThemeColor()
}

onMounted(() => {
  …

  watch(isDark, setDark, { immediate: true })
})

If it fine I could pull a request, thanks for reviewing.

Clear and concise description of the problem

默认主题当前还不支持右侧的锚点功能，如果单个md文档内容过多，容易导致sidebar太长，现有的插件往往和最新vuepress版本之间存在兼容性问题

Suggested solution

添加配置开关，用户可进行选择是否使用右侧锚点

Alternative

No response

Additional context

No response

Clear and concise description of the problem

Dequeue/Axe recommends not to include alt text on an image that is also already displayed next to it. A screen reader will then read it twice.
https://dequeuniversity.com/rules/axe/4.8/image-redundant-alt?application=AxeChrome

Currently the brand image in the default theme will also use the site title it displays as the alt text of the brand image.

Suggested solution

I think we should add a theme option to specify the brand image alt text and default it to an empty string but still render the attribute like Dequeue recommends.

We will also need to make sure this works appropriately with screen readers when in a mobile resolution where the brand image is displayed but the title is hidden.

Alternative

No response

Additional context

No response

Description

Currently the template of create-vuepress package is not align with the getting started guide of our docs. The source dir should be docs instead of src

Reproduction

pnpm create-vuepress vuepress-starter

Used Package Manager

pnpm

System Info

noop

Description

See https://ecosystem.vuejs.press/

Reproduction

https://ecosystem.vuejs.press/

Used Package Manager

pnpm

System Info

Not needed

Clear and concise description of the problem

Some websites that are not open to the public and do not want to be indexed by search engines.

Suggested solution

interface SeoPluginOptions {
  /**
   * Whether to block search engine indexing
   *
   * 是否阻止搜索引擎收录
   */
  block?: boolean
}

-> robots.txt:

User-agent: *
Disallow: /

Alternative

No response

Additional context

No response

Clear and concise description of the problem

The default icon, is emm....

Suggested solution

Procide a icon option for people to inejct svg strings or html string to customize back-to-top plugin.

Alternative

No response

Additional context

No response

Clear and concise description of the problem

Provide client config file for theme and plugins, so that user can modify client-only options to get an HMR instead of a server restart.

Suggested solution

See vuepress/core#914 (comment)

Alternative

No response

Additional context

No response

Description

See https://bornforthis.cn/home.html#_5-%E6%88%91%E7%9A%84%E5%85%A8%E9%83%A8%E5%8D%9A%E5%AE%A2%E5%B9%B3%E5%8F%B0

The page has a table with display: block and overflow-x: scroll, and the table is having long content which it's horizontal scrollable.

If any external link is outside the initial width of page, the external link will break the page layout:

The whole page is scrollable

If setting display: none to .external-link-icon-sr-only, then the page layout becomes normal again.

I would prefer this is a bug.

Reproduction

Not needed

Used Package Manager

pnpm

System Info

Not related

Description

When I use vue 3.4.0 and then run pnpm docs:dev, and then open my local vuepress site, the navbar and sidebar will lose their responsive capability.
当我用 vue 3.4.0 并且运行 pnpm docs:dev，再打开本地的 Vuepress 网页时，顶部导航和侧边栏都会失去它们的响应性。

The guide in guide of vuepress tells me to install vue normally like pnpm add -D vue
在官方文档中提到的方法，只是简单地让我直接安装 vue——pnpm add -D vue

This situation is the same in higher version (3.4.14, which is the lastest version)
同样的情况（指失去响应性）当然也发生在了更高版本。

However, if i install vue 3.3.13 like the official documents do, it will run responsively.
然而，如果我像官方文档里写的一样，为我的 vuepress 安装 vue 3.3.13，又可以成功运行了。

This problem may caused by the update of vue 3.4, which added some breaking features.
这可能是因为 vue3.4 的更新带来了一些新特性。

Reproduction

https://github.com/LdoDoeg222/vuepress-bugrepo

Used Package Manager

pnpm

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz      
    Memory: 5.79 GB / 15.80 GB
  Binaries:
    Node: 18.14.2 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.5.0 - D:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.39.0.
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Chromium (120.0.2210.133)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/core: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/markdown: Not Found
    @vuepress/plugin-active-header-links: Not Found
    @vuepress/plugin-back-to-top: Not Found
    @vuepress/plugin-container: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon: Not Found
    @vuepress/plugin-git: Not Found
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom: Not Found
    @vuepress/plugin-nprogress: Not Found
    @vuepress/plugin-palette: Not Found
    @vuepress/plugin-prismjs: Not Found
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data: Not Found
    @vuepress/plugin-toc: Not Found
    @vuepress/shared: Not Found
    @vuepress/theme-default: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/utils: Not Found
    vue: 3.4.0 => 3.4.0
    vue-loader: Not Found
    vue-router: Not Found
    vuepress: 2.0.0-rc.0 => 2.0.0-rc.0
    vuepress-vite: Not Found
    vuepress-webpack: Not Found

Clear and concise description of the problem

Shikiji is a pure esm rewrite of shiki, with some improvement.

Suggested solution

Migrate from shiki to shikiji. No need to update the plugin name, as shikiji might become shiki 1.0 in the future

Alternative

No response

Additional context

No response

Clear and concise description of the problem

Add transformers support in shiki plugin

Suggested solution

Currently our shiki plugin is pretty minimal. This FR is to support transformers option.

Also we need to update the docs to show how to make use of a transformer. For example, twoslash

Clear and concise description of the problem

create-vuepress does not support VuePress 2 yet.

Suggested solution

• Update create-vuepress

Alternative

No response

Additional context

No response

Description

When on production, plugin-baidu-analytics complains Uncaught (in promise) Error: useClientData() is called without provider. and doesn't load script.

Reproduction

https://stackblitz.com/edit/vuepress-demo-19211d7

To reproduce:

pnpm install && pnpm build && pnpm preview

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 1.16 GB / 7.23 GB
  Binaries:
    Node: 20.10.0 - C:\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 10.2.3 - C:\nodejs\npm.CMD
    pnpm: 8.15.3 - ~\AppData\Local\pnpm\pnpm.CMD
    bun: Not Found
  Utilities:
    Git: 2.37.3.
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.92), ChromiumDev (123.0.2420.10)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-rc.8 => 2.0.0-rc.8
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: Not Found
    @vuepress/core: Not Found
    @vuepress/markdown: Not Found
    @vuepress/shared: Not Found
    @vuepress/utils: Not Found
    vue: ^3.4.21 => 3.4.21
    vue-router: Not Found
    vuepress: 2.0.0-rc.8 => 2.0.0-rc.8

Description

At the top of a page, it's active:

After scrolling down to the first anchor, it's inactive:

Reproduction

https://ecosystem.vuejs.press/themes/default/locale.html

Used Package Manager

npm

System Info

N/A

Description

The blog plugin can update related temp files correctly, but the page hot reload will throw an error, users must manually click refresh to let it work.

Description

Reproduction

https://ecosystem.vuejs.press/

Used Package Manager

pnpm

System Info

N/A

Clear and concise description of the problem

See GoogleChrome/workbox#3149

We might have other alternative ones now.

Suggested solution

replace workbox

Alternative

No response

Additional context

No response

Clear and concise description of the problem

vuepress/core#1456

Suggested solution

To support data-title attr

Alternative

No response

Additional context

No response

Clear and concise description of the problem

We might need to build a separate docs for ecosystem.

Suggested solution

Maybe deployed at https://ecosystem.vuejs.press

Alternative

No response

Additional context

No response