chore(styles): add release tag for docs-cn

Author: tangmengyu.amber

.vitepress/theme/custom.css

@@ -49,14 +49,10 @@
   margin-bottom: 10px;
 }
 
-.release-tag {
-  font-size: 20px;
+.docs-cn-github-release-tag {
+  font-size: 14px;
   font-weight: bold;
-  display: inline-block;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 6px;
+  padding: 4px 6px;
   margin-left: 6px;
   background: var(--c-brand);
   color: white;

.vitepress/theme/index.ts

@@ -1,9 +1,10 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
+import './styles/vars.css'
+import './custom.css'
 
 export default {
   ...Theme,

.vitepress/utils/fetchReleaseTag.js

@@ -0,0 +1,12 @@
+export function fetchReleaseTag() {
+  return fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
+    .then((res) => res.json())
+    .then((json) => json.tag_name ?? '')
+    .then(releaseTag => {
+      const tagLineParagragh = document.querySelector('div.VPHero.has-image.VPHomeHero > div > div.main > p.tagline')
+      const docsReleaseTagSpan = document.createElement('samp')
+      docsReleaseTagSpan.classList.add('docs-cn-github-release-tag')
+      docsReleaseTagSpan.innerText = releaseTag
+      tagLineParagragh?.appendChild(docsReleaseTagSpan)
+    })
+}

index.md

@@ -42,3 +42,12 @@ features:
     title: 完全类型化的API
     details: 灵活的 API 和完整的 TypeScript 类型。
 ---
+
+<script setup>
+import { onMounted } from 'vue'
+import { fetchReleaseTag } from './.vitepress/utils/fetchReleaseTag.js'
+
+onMounted(() => {
+  fetchReleaseTag()
+})
+</script>