fix: avoid badge text showing up in anchor hrefs

Author: yyx990803

.vitepress/theme/styles/badges.css

@@ -1,3 +1,24 @@
+.vt-badge.wip:before {
+  content: 'WIP';
+}
+
 .vt-badge.ts {
   background-color: #3178c6;
 }
+.vt-badge.ts:before {
+  content: 'TS';
+}
+
+.vt-badge.dev-only,
+.vt-badge.experimental {
+  color: var(--vt-c-text-light-1);
+  background-color: var(--vt-c-yellow);
+}
+
+.vt-badge.dev-only:before {
+  content: 'Dev only';
+}
+
+.vt-badge.experimental:before {
+  content: 'Experimental';
+}

src/about/v2-faq.md

@@ -1 +1 @@
-# Vue 2 vs. Vue 3 FAQ <sup class="vt-badge">WIP</sup>
+# Vue 2 vs. Vue 3 FAQ <sup class="vt-badge wip" />

src/api/built-in-components.md

@@ -301,7 +301,7 @@ Renders its slot content to another part of the DOM.
 
 - **See also:** [Guide - Teleport](/guide/built-ins/teleport.html)
 
-## `<Suspense>` <sup class="vt-badge warning">experimental</sup>
+## `<Suspense>` <sup class="vt-badge experimental" />
 
 Used for orchestrating nested async dependencies in a component tree.
 

src/api/composition-api-lifecycle.md

@@ -220,7 +220,7 @@ Registers a hook to be called when an error propagating from a descendent compon
 
   - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error.
 
-## onRenderTracked() <sup class="vt-badge warning">Dev only</sup>
+## onRenderTracked() <sup class="vt-badge dev-only" />
 
 Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect.
 
@@ -243,7 +243,7 @@ Registers a debug hook to be called when a reactive dependency has been tracked
 
 - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
 
-## onRenderTriggered() <sup class="vt-badge warning">Dev only</sup>
+## onRenderTriggered() <sup class="vt-badge dev-only" />
 
 Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run.
 

src/api/options-lifecycle.md

@@ -209,7 +209,7 @@ Called when an error propagating from a descendent component has been captured.
 
   - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error.
 
-## renderTracked <sup class="vt-badge warning">Dev only</sup>
+## renderTracked <sup class="vt-badge dev-only" />
 
 Called when a reactive dependency has been tracked by the component's render effect.
 
@@ -230,7 +230,7 @@ Called when a reactive dependency has been tracked by the component's render eff
 
 - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html)
 
-## renderTriggered <sup class="vt-badge warning">Dev only</sup>
+## renderTriggered <sup class="vt-badge dev-only" />
 
 Called when a reactive dependency triggers the component's render effect to be re-run.
 

src/api/sfc-script-setup.md

@@ -230,7 +230,7 @@ In addition, the awaited expression will be automatically compiled in a format t
 `async setup()` must be used in combination with `Suspense`, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works.
 :::
 
-## TypeScript-only Features <sup class="vt-badge ts">TS</sup>
+## TypeScript-only Features <sup class="vt-badge ts" />
 
 ### Type-only props/emit declarations
 

src/guide/components/events.md

@@ -146,7 +146,7 @@ const emit = defineEmits<{
 </script>
 ```
 
-More details: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
+More details: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">
@@ -162,7 +162,7 @@ export default {
 }
 ```
 
-See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) <sup class="vt-badge ts" />
 
 </div>
 

src/guide/components/props.md

@@ -92,7 +92,7 @@ This not only documents your component, but will also warn other developers usin
 
 <div class="options-api">
 
-See also: [Typing Component Props](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Component Props](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts" />
 
 </div>
 
@@ -109,7 +109,7 @@ defineProps<{
 </script>
 ```
 
-More details: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
+More details: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts" />
 
 </div>
 

src/guide/components/provide-inject.md

@@ -350,7 +350,7 @@ import { myInjectionKey } from './keys.js'
 const injected = inject(myInjectionKey)
 ```
 
-See also: [Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) <sup class="vt-badge ts" />
 
 </div>
 

src/guide/essentials/component-basics.md

@@ -219,7 +219,7 @@ const props = defineProps(['title'])
 console.log(props.title)
 ```
 
-See also: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Component Props](/guide/typescript/composition-api.html#typing-component-props) <sup class="vt-badge ts" />
 
 If you are not using `<script setup>`, props should be declared using the `props` option, and the props object will be passed to `setup()` as the first argument:
 
@@ -430,7 +430,7 @@ const emit = defineEmits(['enlarge-text'])
 emit('enlarge-text')
 ```
 
-See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Component Emits](/guide/typescript/composition-api.html#typing-component-emits) <sup class="vt-badge ts" />
 
 If you are not using `<script setup>`, you can declare emitted events using the `emits` option. You can access the `emit` function as a property of the setup context (passed to `setup()` as the second argument):
 

src/guide/essentials/computed.md

@@ -89,7 +89,7 @@ Try to change the value of the `books` array in the application `data` and you w
 
 You can data-bind to computed properties in templates just like a normal property. Vue is aware that `this.publishedBooksMessage` depends on `this.author.books`, so it will update any bindings that depend on `this.publishedBooksMessage` when `this.author.books` changes.
 
-See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing-computed) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Computed Properties](/guide/typescript/options-api.html#typing-computed) <sup class="vt-badge ts" />
 
 </div>
 
@@ -126,7 +126,7 @@ Here we have declared a computed property `publishedBooksMessage`. The `computed
 
 A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of `publishedBooksMessage` depends on `author.books`, so it will update any bindings that depend on `publishedBooksMessage` when `author.books` changes.
 
-See also: [Typing Computed](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Computed](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts" />
 
 </div>
 

src/guide/essentials/event-handling.md

@@ -112,12 +112,12 @@ A method handler automatically receives the native DOM Event object that trigger
 
 <div class="composition-api">
 
-See also: [Typing Event Handlers](/guide/typescript/composition-api.html#typing-event-handlers) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Event Handlers](/guide/typescript/composition-api.html#typing-event-handlers) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">
 
-See also: [Typing Event Handlers](/guide/typescript/options-api.html#typing-event-handlers) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Event Handlers](/guide/typescript/options-api.html#typing-event-handlers) <sup class="vt-badge ts" />
 
 </div>
 

src/guide/essentials/reactivity-fundamentals.md

@@ -77,7 +77,7 @@ const state = reactive({ count: 0 })
 
 Reactive objects are [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object. If you are curious about the details, we explain how Vue's reactivity system works in [Reactivity in Depth](/guide/extras/reactivity-in-depth.html) - but we recommend reading it after you have finished the main guide.
 
-See also: [Typing Reactive](/guide/typescript/composition-api.html#typing-reactive) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Reactive](/guide/typescript/composition-api.html#typing-reactive) <sup class="vt-badge ts" />
 
 To use reactive state in a component's template, declare and return them from a component's `setup()` function:
 
@@ -388,7 +388,7 @@ count.value++
 console.log(count.value) // 1
 ```
 
-See also: [Typing Refs](/guide/typescript/composition-api.html#typing-ref) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Refs](/guide/typescript/composition-api.html#typing-ref) <sup class="vt-badge ts" />
 
 Similar to properties on a reactive object, the `.value` property of a ref is reactive. In addition, when holding object types, ref automatically converts its `.value` with `reactive()`.
 
@@ -555,7 +555,7 @@ export default {
 
 <div class="composition-api">
 
-## Reactivity Transform <sup class="vt-badge warning">experimental</sup> \*\*
+## Reactivity Transform <sup class="vt-badge experimental" /> \*\*
 
 Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the ealier "counter" example like this:
 

src/guide/essentials/template-refs.md

@@ -69,7 +69,7 @@ watchEffect(() => {
 })
 ```
 
-See also: [Typing Template Refs](/guide/typescript/composition-api.html#typing-template-refs) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Template Refs](/guide/typescript/composition-api.html#typing-template-refs) <sup class="vt-badge ts" />
 
 </div>
 
@@ -222,7 +222,7 @@ defineExpose({
 
 When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape `{ a: number, b: number }` (refs are automatically unwrapped just like on normal instances).
 
-See also: [Typing Component Template Refs](/guide/typescript/composition-api.html#typing-component-template-refs) <sup class="vt-badge ts">TS</sup>
+See also: [Typing Component Template Refs](/guide/typescript/composition-api.html#typing-component-template-refs) <sup class="vt-badge ts" />
 
 </div>
 <div class="options-api">

src/guide/extras/reactivity-transform.md

@@ -265,7 +265,7 @@ setup(props) {
 }
 ```
 
-## TypeScript Integration <sup class="vt-badge ts">TS</sup>
+## TypeScript Integration <sup class="vt-badge ts" />
 
 Vue provides typings for these macros (available globally) and all types will work as expected. There are no incompatibilities with standard TypeScript semantics so the syntax would work with all existing tooling.
 

src/guide/reusability/plugins.md

@@ -85,7 +85,7 @@ Our `$translate` function will take a string such as `greetings.hello`, look ins
 <h1>{{ $translate('greetings.hello') }}</h1>
 ```
 
-See also: [Augmenting Global Properties](/guide/typescript/options-api.html#augmenting-global-properties) <sup class="vt-badge ts">TS</sup>
+See also: [Augmenting Global Properties](/guide/typescript/options-api.html#augmenting-global-properties) <sup class="vt-badge ts" />
 
 :::tip
 Use global properties scarcely, since it can quickly become confusing if too many global properties injected by different plugins are used throughout an app.

src/guide/typescript/composition-api.md

@@ -57,7 +57,7 @@ In order to generate the correct runtime code, the generic argument for `defineP
 The same-file limitation could be removed in a future release.
 :::
 
-### Props Default Values <sup class="vt-badge warning">experimental</sup>
+### Props Default Values <sup class="vt-badge experimental" />
 
 When using type-based declaration, we lose the ability to declare default values for the props. This can be resolved by the currently experimental [Reactivity Transform](/guide/extras/reactivity-transform.html):
 

src/translations/index.md

@@ -2,7 +2,7 @@
 aside: false
 ---
 
-# Translations <sup class="vt-badge">WIP</sup>
+# Translations <sup class="vt-badge wip" />
 
 The Vue documentation has recently undergone a major revision, so there are no completed translations in other languages yet.