feat(theme-default): add built-in global component Badge.

docs/.vitepress/config.ts

@@ -100,6 +100,7 @@ function sidebarGuide() {
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Home Page', link: '/guide/theme-home-page' },
         { text: 'Team Page', link: '/guide/theme-team-page' },
+        { text: 'Badge', link: '/guide/theme-badge' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Search', link: '/guide/theme-search' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }

docs/guide/theme-badge.md

@@ -0,0 +1,75 @@
+# Badge
+
+The badge is like the one with same name in [vuepress](https://vuepress.vuejs.org/guide/using-vue.html#built-in-components), but for vitepress.
+
+## Usage
+
+You can use this component in a header to add some status for an API
+
+```js
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+```
+
+Code above renders like:
+
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+
+## Custom Children
+
+`<Badge>` accept `children`, which will be displayed in the badge.
+
+Give Code like this:
+
+```js
+<script setup>
+import { Badge } from 'vitepress/theme'
+</script>
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+```
+
+You will see
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+
+## `<Badge>`
+
+`<Badge />` accept props:
+
+- `text`: string
+- `type`: string, optional value: `"tip" | "info" | "warning"| "error"`, defaults to `"tip"`.
+- `vertical`: string, optional value: `"top"| "middle"`, defaults to `"top"`.
+
+**P.S** `props.text` would not be used if children given,  Actually, the `props.text` is passed as default slot children.
+
+## Customize Type Color
+
+The background color of `<Badge />` is determined by css vars.
+
+```jsx
+/* background-color by var(--vp-c-badge-type-warning); */
+<Badge type="warning" />
+
+/* background-color by var(--vp-c-badge-type-tip); */
+<Badge type="tip" />
+
+/* background-color by var(--vp-c-badge-type-error); */
+<Badge type="error" />
+
+/* background-color by var(--vp-c-badge-type-info); */
+<Badge type="info" />
+```
+
+you can customize `background-color` of typed `<Badge />` by override css vars.
+
+```css
+:root {
+    --vp-c-badge-type-error: red;
+}
+```

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    text?: string,
+    type?: 'warning' | 'tip' | 'error' | 'info'
+    vertical?: 'top' | 'middle'
+  }>(), {
+    text: '',
+    type: 'tip',
+    vertical: 'top',
+  }
+);
+</script>
+
+<template>
+  <span
+    class='VPBadge'
+    :class="[ `VPBadge-type-${props.type}` ]"
+    :style="{ 'vertical-align': props.vertical }"
+  >
+    <slot>{{ props.text }}</slot>
+  </span>
+</template>
+
+<style scoped>
+.VPBadge {
+  display: inline-block;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 6px;
+  color: #fff;
+}
+
+.VPBadge.VPBadge-type-warning {
+  background-color: var(--vp-c-badge-type-warning);
+}
+
+.VPBadge.VPBadge-type-tip {
+  background-color: var(--vp-c-badge-type-tip);
+}
+
+.VPBadge.VPBadge-type-error {
+  background-color: var(--vp-c-badge-type-error);
+}
+
+.VPBadge.VPBadge-type-info {
+  background-color: var(--vp-c-badge-type-info);
+}
+</style>

src/client/theme-default/index.ts

@@ -10,6 +10,7 @@ import './styles/components/vp-sponsor.css'
 import { Theme } from 'vitepress'
 import Layout from './Layout.vue'
 import NotFound from './NotFound.vue'
+import VPBadge from './components/VPBadge.vue'
 
 export { default as VPHomeHero } from './components/VPHomeHero.vue'
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
@@ -22,7 +23,10 @@ export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
 
 const theme: Theme = {
   Layout,
-  NotFound
+  NotFound,
+  enhanceApp(ctx) {
+    ctx.app.component('Badge', VPBadge)
+  }
 }
 
 export default theme

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

@@ -358,3 +358,14 @@
   --vp-home-hero-image-background-image: none;
   --vp-home-hero-image-filter: none;
 }
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-badge-type-warning: #e7c000;
+  --vp-c-badge-type-tip: #42b983;
+  --vp-c-badge-type-error: #da5961;
+  --vp-c-badge-type-info: #0170fe;
+}