`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2882],{"name":2869,"color":2870},3021,"Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.7335259,{"description":2889,"labels":2890,"number":2892,"owner":2872,"repository":2873,"state":2874,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Is your feature request related to a problem? Please describe.\r\n\r\nI want to use UnoCSS in a VitePress project, just like what [unocss.dev](https://unocss.dev) does. However, simply copying their config cannot bring UnoCSS to the whole site.\r\n\r\nIn this [minimal demo on StackBlitz](https://stackblitz.com/edit/vitepress-unocss), there are 3 UnoCSS injections:\r\n- [x] In Markdown content, any UnoCSS element keeps their format but without style\r\n- [ ] In the hero of `index.md`, the element turns into a string\r\n- [x] Only in the feature cards, element and styles exists so the icon shows\r\n- [ ] Other cases haven't been checked\r\n\r\n### Describe the solution you'd like\r\n\r\nProvide some guide to allow UnoCSS injection, it may be better if there is a plugin to do that.\r\n\r\n### Describe alternatives you've considered\r\n\r\nBoth VitePress and UnoCSS are powered by Vite, if UnoCSS can be integrated into VitePress, it may bring a more customizable style with little cost.\r\n\r\n~~I don't know if it's better to request this feature after UnoCSS reaches v1.0, or request it on UnoCSS for now.~~\r\n\r\n### Additional context\r\n\r\n- [UnoCSS docs source](https://github.com/unocss/unocss/tree/main/docs)\r\n- [Guide of integrating UnoCSS into Vite](https://unocss.dev/integrations/vite)\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2891],{"name":2869,"color":2870},2424,"Feature request: support UnoCSS generally","2023-08-03T10:15:33Z","https://github.com/vuejs/vitepress/issues/2424",0.7365819,{"description":2898,"labels":2899,"number":2904,"owner":2872,"repository":2873,"state":2874,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Is your feature request related to a problem? Please describe.\n\n例如:将图片换成类似这种脚本框\r\n\r\n\n\n### Describe the solution you'd like\n\n无\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2900,2903],{"name":2901,"color":2902},"theme","0754FB",{"name":2869,"color":2870},3759,"如何将主页Hero 中的图片替换为其他内容","2025-03-02T18:09:26Z","https://github.com/vuejs/vitepress/issues/3759",0.73991126,{"description":2910,"labels":2911,"number":2914,"owner":2872,"repository":2873,"state":2874,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Describe the bug\n\nhttps://github.com/vuejs/vitepress/pull/3359 makes it so that there are two separate headers now (`VPNav` and `VPLocalNav`), which make it impossible to apply single style for header, such as blur effect. Even if I remove the divider and border, it'll look as follow:\r\n\r\n\n\n### Reproduction\n\nAdd blur filter to `VPNav` and `VPLocalNav` and remove borders.\n\n### Expected behavior\n\nBoth headers should be wrapped under single element (eg, `\u003Cheader>`).\n\n### System Info\n\n```Text\n-\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2912,2913],{"name":2901,"color":2902},{"name":2869,"color":2870},3393,"New local navbar design breaks ubiquitous header styling","2024-03-07T11:19:13Z","https://github.com/vuejs/vitepress/issues/3393",0.7405019,{"description":2920,"labels":2921,"number":2923,"owner":2872,"repository":2873,"state":2924,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\r\n\r\nThe header anchors are not accessible to screen reader users.\r\n\r\n```html\r\n\u003Ch1 id=\"what-is-vitepress\" tabindex=\"-1\">\r\n What is VitePress?\r\n \u003Ca class=\"header-anchor\" href=\"#what-is-vitepress\" aria-hidden=\"true\">#\u003C/a>\r\n\u003C/h1>\r\n```\r\n\r\nSetting `aria-hidden` on focusable elements (that are not hidden from **all** users) fails test \"[aria-hidden elements do not contain focusable elements](https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus?utm_source=lighthouse&utm_medium=devtools)\".\r\n\r\nI'm preparing a PR to fix this issue.\r\n\r\n### Reproduction\r\n\r\nNo special configuration necessary. Header anchors are enabled by default.\r\n\r\nThis issue can be tested on the official [VitePress](https://vitepress.vuejs.org/guide/what-is-vitepress) site or any other basic vitepress deployment using the default-theme.\r\n\r\n### Expected behavior\r\n\r\nProvide an accessible default configuration for `markdown-it-anchor` and update styling of header-anchors accordingly.\r\n\r\nA possible solution could look like this:\r\n\r\n```html\r\n\u003Cdiv class=\"header-wrapper\">\r\n \u003Ch1 id=\"what-is-vitepress\" tabindex=\"-1\">What is VitePress?\u003C/h1>\r\n \u003Ca class=\"header-anchor\" href=\"#what-is-vitepress\" aria-label=\"Permalink to \"What is VitePress?\"\">#\u003C/a>\r\n\u003C/div>\r\n```\r\n\r\nA viable `markdown-it-anchor` configuration could look like this.\r\n```js\r\n{\r\n anchor: {\r\n permalink: MdItAnchor.permalink.linkAfterHeader({\r\n style: \"aria-label\",\r\n assistiveText: (title) => `Permalink to \"${title}\"`,\r\n visuallyHiddenClass: \"visually-hidden\",\r\n wrapper: ['\u003Cdiv class=\"header-wrapper\">', \"\u003C/div>\"],\r\n }),\r\n },\r\n}\r\n```\r\n\r\nAdditionally, some updates for anchor styling are necessary too.\r\n```css\r\n.vp-doc .header-wrapper {\r\n position: relative;\r\n}\r\n\r\n.vp-doc .header-wrapper .header-anchor {\r\n line-height: 32px;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.vp-doc .header-wrapper h1 + .header-anchor {\r\n line-height: 40px;\r\n font-size: 32px;\r\n}\r\n\r\n.vp-doc .header-wrapper h2 + .header-anchor {\r\n padding-top: 25px;\r\n line-height: 32px;\r\n font-size: 24px;\r\n}\r\n\r\n.vp-doc .header-wrapper h3 + .header-anchor {\r\n line-height: 28px;\r\n font-size: 20px;\r\n}\r\n\r\n.vp-doc .header-anchor:hover,\r\n.vp-doc .header-anchor:focus,\r\n.vp-doc h1:hover + .header-anchor,\r\n.vp-doc h2:hover + .header-anchor,\r\n.vp-doc h3:hover + .header-anchor,\r\n.vp-doc h4:hover + .header-anchor,\r\n.vp-doc h5:hover + .header-anchor,\r\n.vp-doc h6:hover + .header-anchor {\r\n opacity: 1;\r\n}\r\n```\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)\r\n CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz\r\n Memory: 19.26 GB / 31.13 GB\r\n Container: Yes\r\n Shell: 5.0.17 - /bin/bash\r\nBinaries:\r\n Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm\r\nBrowsers:\r\n Chrome: 110.0.5481.177\r\n Chromium: 110.0.5481.100\r\n Firefox: 110.0.1\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nMore details about test \"aria-hidden elements do not contain focusable elements\" can be found at [https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus](https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus).\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2922],{"name":2901,"color":2902},2039,"closed","Header anchors not accessible to screen reader users.","2023-03-22T00:03:24Z","https://github.com/vuejs/vitepress/issues/2039",0.72104895,{"description":2930,"labels":2931,"number":2935,"owner":2872,"repository":2873,"state":2924,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Describe the bug\n\nI added team component feedback error in index.md\r\n\r\n\n\n### Reproduction\n\n---\r\nlayout: home\r\n\r\nhero:\r\n name: VitePress\r\n text: Vite & Vue powered static site generator.\r\n tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.\r\n actions:\r\n - theme: brand\r\n text: Get Started\r\n link: /example\r\n - theme: alt\r\n text: View on GitHub\r\n link: https://github.com/vuejs/vitepress\r\n---\r\n\r\n\u003Cscript setup>\r\nimport { VPTeamMembers } from 'vitepress/theme'\r\n\r\nconst members = [\r\n {\r\n avatar: 'https://www.github.com/yyx990803.png',\r\n name: 'Evan You',\r\n title: 'Creator',\r\n links: [\r\n { icon: 'github', link: 'https://github.com/yyx990803' },\r\n { icon: 'twitter', link: 'https://twitter.com/youyuxi' }\r\n ]\r\n },\r\n ...\r\n]\r\n\u003C/script>\r\n\r\n# Our Team\r\n\r\nSay hello to our awesome team.\r\n\r\n\u003CVPTeamMembers size=\"small\" :members=\"members\" />\r\n\n\n### Expected behavior\n\nnormal\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.20.3 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n pnpm: 8.15.6 - /usr/local/bin/pnpm\r\n npmPackages:\r\n vitepress: latest => 1.3.4\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2932],{"name":2933,"color":2934},"bug: pending triage","e99695",4238,"Error occurred when using team components","2024-10-07T04:45:56Z","https://github.com/vuejs/vitepress/issues/4238",0.72221667,{"description":2941,"labels":2942,"number":2944,"owner":2872,"repository":2873,"state":2924,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Is your feature request related to a problem? Please describe.\r\n\r\nYes, when I verify my documentation site at https://agnosticui.com/ with the [IBM Equal Access Accessibility Checker](https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp?hl=en-US) it fails hard. This is unfortunate, because one of the things I'm trying to point out is that the UI component library offered is accessible. I lose credibility if the documentation site itself is not a11y compliant.\r\n\r\nI actually get even worse results when I scan the vitepress docs themselves. So while this is a feature request, I would also call it a bug. Lighthouse which I would call more permissive also shows errors in the Accessibility category (but if the IBM checker passes Lighthouse will too).\r\n\r\n### Describe the solution you'd like\r\n\r\nEnsure the code produced by Vitepress is a11y compliant.\r\n\r\nI saw violations with the following rules which can easily be cross-referenced at:\r\nhttps://www.ibm.com/able/requirements/requirements\r\n\r\n1.3.1 Info and Relationships\r\n1.4.3 Contrast (Minimum)\r\n2.4.1 Bypass Blocks\r\n2.5.3 Label in Name\r\n4.1.2 Name, Role, Value\r\n\r\n_Note: this is only from scanning the top-level page. I saw a couple of other warnings on other pages, but this is a good start._\r\n\r\n### Describe alternatives you've considered\r\n\r\nThere are no alternatives. These issues are making Vitepress generated sites less inclusive than they could be meaning certain site users are being excluded which is a real bummer since Vitepress is otherwise producing such lovely sites.\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2943],{"name":2901,"color":2902},466,"Make Vitepress Accessible","2023-02-04T00:04:08Z","https://github.com/vuejs/vitepress/issues/466",0.7264971,{"description":2950,"labels":2951,"number":2953,"owner":2872,"repository":2873,"state":2924,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Describe the bug\r\n\r\nI'm migrate vue-i18n docs site with vitepress v1 alpha.4\r\nThe config.ts for that docs consists of Mulutiple Sidbars.\r\nConfig.ts is here:\r\nhttps://github.com/intlify/vue-i18n-next/blob/docs/vitepress1/docs/.vitepress/config.ts\r\n\r\n`/guide/` sidebar has items, but it’s wried, we will access the `Message Format Syntax` and `Fallbacking` items resulting in a 404.\r\n\r\nThese settings are here.\r\n- `Message Format Syntax`: https://github.com/intlify/vue-i18n-next/blob/e59dcca32e1aa6af966651f02bb624081299c2bf/docs/.vitepress/config.ts#L114-L117\r\n- `Fallbacking`: https://github.com/intlify/vue-i18n-next/blob/e59dcca32e1aa6af966651f02bb624081299c2bf/docs/.vitepress/config.ts#L134-L137\r\n\r\nThe previous version of vitepress worked, so here is the site URL and config for your reference.\r\n\r\n- URL: https://vue-i18n.intlify.dev/\r\n- config: https://github.com/intlify/vue-i18n-next/blob/master/docs/.vitepress/config.js\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nRepository: https://github.com/intlify/vue-i18n-next\r\n\r\nReproduction step:\r\n1. `git clone git@github.com:intlify/vue-i18n-next.git`\r\n2. `git checkout docs/vitepress1`\r\n3. `pnpm install`\r\n4. `pnpm docs:setup`\r\n5. `pnpm docs:dev`\r\n6. go to http://localhost:3000/\r\n7. go to Guid via navigation `Guide` menu\r\n8. go to [Message Format Syntax](http://localhost:3000/guide/essentials/syntax.html) via sidebar\r\n9. go to [Fallbacking](http://localhost:3000/guide/essentials/fallback.html) via sidebar \r\n\r\n### Expected behavior\r\n\r\nI hope that 404 won't occur on these pages\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 10.15.7\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz\r\n Memory: 9.93 GB / 64.00 GB\r\n Shell: 5.7.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.4.0 - ~/bin/.nvm/versions/node/v18.4.0/bin/node\r\n npm: 8.12.1 - ~/bin/.nvm/versions/node/v18.4.0/bin/npm\r\n Browsers:\r\n Chrome: 103.0.5060.53\r\n Firefox: 97.0.1\r\n Safari: 15.5\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2952],{"name":2933,"color":2934},885,"Occured 404 in some pages","2023-01-21T14:32:52Z","https://github.com/vuejs/vitepress/issues/885",0.7304921,{"description":2959,"labels":2960,"number":2961,"owner":2872,"repository":2873,"state":2924,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Is your feature request related to a problem? Please describe.\n\nH2, H3 headings currently written in vue cannot be shown in outline,\n\n### Describe the solution you'd like\n\nor can we get a useData add header provided\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],3103,"Can you identify the H tag in the outline display using vue file in md?","2023-10-27T00:04:15Z","https://github.com/vuejs/vitepress/issues/3103",0.73267543,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fC67CEkXTDKTKOfPPAOH1mi0FPHM5MInVBlwUmDQVmRY":-1},"/vuejs/vitepress/4453"]