docs: create preview service

Author: hywax

docs/.vitepress/components/preview-service.vue

@@ -0,0 +1,21 @@
+<template>
+  <img :src="image" alt="" class="preview">
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+
+const props = defineProps<{ name: string }>()
+
+const { isDark } = useData()
+const image = computed(() => withBase(`/services/${props.name}${isDark.value ? '-dark' : ''}.png`))
+</script>
+
+<style scoped>
+.preview {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  margin: 16px 0;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,4 +1,11 @@
+import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './custom.css'
+import PreviewService from '../components/preview-service.vue'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('PreviewService', PreviewService)
+  },
+} satisfies Theme