Add custom components, update vuepress version

Author: aNNiMON

docs/docs/.vuepress/components/Scope.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    class="badge scope"
+    :class="scope"
+  >
+    <slot>{{ scope }}</slot>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  scope: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.badge.scope {
+  vertical-align: middle;
+  text-transform: capitalize;
+}
+.badge.android {
+  background-color: var(--c-badge-tip);
+}
+.badge.desktop {
+  background-color: var(--usc-scope);
+}
+</style>

docs/docs/.vuepress/components/Since.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="since">{{ text }} <b>{{ version }}</b></span>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    version: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.since {
+  display: inline-block;
+  font-size: 13px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--c-bg);
+  background-color: var(--usc-since);
+}
+</style>

docs/docs/.vuepress/config.js

@@ -1,10 +1,14 @@
 import { defineUserConfig, defaultTheme } from 'vuepress'
+import { getDirname, path } from '@vuepress/utils'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { sidebarConfig } from './configs/sidebar'
 import { navbarConfig } from './configs/navbar'
 import Prism from 'prismjs';
 import definePrismOwnLang from '../../../editors/prismjs/own-language.js'
+
 definePrismOwnLang(Prism)
+const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({
   locales: {
@@ -44,5 +48,8 @@ export default defineUserConfig({
     prismjsPlugin({
       preloadLanguages: ['own', 'json']
     }),
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    })
   ],
 })

docs/docs/.vuepress/styles/palette.scss

@@ -3,6 +3,9 @@
   --c-brand-light: #ff9562;
   --c-badge-danger: #f63f3f;
   --c-badge-warning: #d0af01;
+
+  --usc-since: var(--c-badge-warning);
+  --usc-scope: var(--c-brand);
 }
 html.dark {
   --c-brand: #e1792d;

docs/package.json

@@ -11,10 +11,12 @@
   "author": "aNNiMON",
   "license": "MIT",
   "devDependencies": {
+    "@vuepress/client": "2.0.0-rc.0",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.0",
+    "@vuepress/plugin-register-components": "2.0.0-rc.0",
+    "@vuepress/utils": "2.0.0-rc.0",
     "prismjs": "^1.29.0",
-    "@vuepress/client": "2.0.0-beta.68",
-    "@vuepress/plugin-prismjs": "2.0.0-beta.68",
     "vue": "^3.3.8",
-    "vuepress": "2.0.0-beta.68"
+    "vuepress": "2.0.0-rc.0"
   }
 }