chore: add release tag tip for index.md (#171)

Author: ShenQingchuan

.vitepress/theme/custom.css

@@ -16,7 +16,6 @@
   display: none;
 }
 
-
 :root {
   --c-brand: #646cff;
   --c-brand-light: #747bff;
@@ -38,3 +37,18 @@
   display: block;
   margin-bottom: 10px;
 }
+
+.release-tag {
+  font-size: 20px;
+  font-weight: bold;
+  font-family: monospace;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 6px;
+  margin-left: 6px;
+  background: var(--c-brand);
+  color: white;
+  border-radius: 10px;
+}

.vitepress/theme/fetchReleaseTag.js

@@ -0,0 +1,20 @@
+import { onMounted } from 'vue'
+
+export default function fetchReleaseTag() {
+  onMounted(() => {
+    fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
+      .then((res) => res.json())
+      .then((json) => {
+        const mainTitle = document.getElementById('main-title')
+        mainTitle.style.position = 'relative'
+
+        const docsReleaseTag = document.createElement('span')
+        docsReleaseTag.classList.add('release-tag')
+        const releaseTagName = json.tag_name
+        docsReleaseTag.innerText = releaseTagName
+
+
+        mainTitle.appendChild(docsReleaseTag)
+      })
+  })
+}

index.md

@@ -34,4 +34,7 @@ footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 
 <script setup>
 import sponsors from './.vitepress/theme/sponsors.json'
+import fetchReleaseTag from './.vitepress/theme/fetchReleaseTag.js'
+
+fetchReleaseTag()
 </script>