docs(style/plugin): add a version tag to the navbar and add the DocSearch plugin (#2233)

site/docs/.vuepress/config.js

@@ -1,8 +1,10 @@
 const { localTheme } = require("./theme/index");
+const { loadVersionPlugin } = require("./plugins/vuepress-plugin-loadVersion");
 
 const {
   activeHeaderLinksPlugin,
 } = require("@vuepress/plugin-active-header-links");
+const { docsearchPlugin } = require("@vuepress/plugin-docsearch");
 const { copyCodePlugin } = require("vuepress-plugin-copy-code2");
 const { redirectPlugin } = require("vuepress-plugin-redirect");
 const { searchPlugin } = require("@vuepress/plugin-search");
@@ -111,7 +113,57 @@ module.exports = {
     }),
     activeHeaderLinksPlugin({
       headerLinkSelector: "div.right-menu-item > a",
-      delay: 100,
+      delay: 0,
     }),
+    docsearchPlugin({
+      apiKey: "03fb4b6577b57b5dafc792d9ddf66508",
+      indexName: "arthas",
+      appId: "UX8WBNVHHR",
+      locales: {
+        "/": {
+          placeholder: "搜索文档",
+          translations: {
+            button: {
+              buttonText: "搜索文档",
+              buttonAriaLabel: "搜索文档",
+            },
+            modal: {
+              searchBox: {
+                resetButtonTitle: "清除查询条件",
+                resetButtonAriaLabel: "清除查询条件",
+                cancelButtonText: "取消",
+                cancelButtonAriaLabel: "取消",
+              },
+              startScreen: {
+                recentSearchesTitle: "搜索历史",
+                noRecentSearchesText: "没有搜索历史",
+                saveRecentSearchButtonTitle: "保存至搜索历史",
+                removeRecentSearchButtonTitle: "从搜索历史中移除",
+                favoriteSearchesTitle: "收藏",
+                removeFavoriteSearchButtonTitle: "从收藏中移除",
+              },
+              errorScreen: {
+                titleText: "无法获取结果",
+                helpText: "你可能需要检查你的网络连接",
+              },
+              footer: {
+                selectText: "选择",
+                navigateText: "切换",
+                closeText: "关闭",
+                searchByText: "搜索提供者",
+              },
+              noResultsScreen: {
+                noResultsText: "无法找到相关结果",
+                suggestedQueryText: "你可以尝试查询",
+                reportMissingResultsText: "你认为该查询应该有结果？",
+                reportMissingResultsLinkText: "点击反馈",
+              },
+            },
+          },
+        },
+      },
+    }),
+    // Local plugin
+    loadVersionPlugin(),
   ],
 };

site/docs/.vuepress/configs/head.js

@@ -10,7 +10,7 @@ module.exports = [
     {
       property: "og:image:alt",
       content:
-        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - Fatpandac/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
+        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - alibaba/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
     },
   ],
   ["meta", { property: "og:image", content: "/images/arthas_mate_image.png" }],
@@ -19,7 +19,7 @@ module.exports = [
     {
       property: "og:description",
       content:
-        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - Fatpandac/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
+        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - alibaba/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
     },
   ],
   ["meta", { property: "og:image:width", content: "1200" }],
@@ -33,7 +33,30 @@ module.exports = [
     {
       property: "twitter:image:alt",
       content:
-        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - Fatpandac/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
+        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - alibaba/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
+    },
+  ],
+  // QQ meta
+  [
+    "meta",
+    {
+      itemprop: "name",
+      content: "Arthas",
+    },
+  ],
+  [
+    "meta",
+    {
+      itemprop: "image",
+      content: "/images/arthas_mate_image.png",
+    },
+  ],
+  [
+    "meta",
+    {
+      itemprop: "description",
+      content:
+        "Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas - alibaba/arthas: Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas",
     },
   ],
   [

site/docs/.vuepress/plugins/vuepress-plugin-loadVersion/index.js

@@ -0,0 +1,33 @@
+const fs = require("fs");
+const fetch = require("node-fetch");
+const convert = require("xml-js");
+
+exports.loadVersionPlugin = () => {
+  const data = fs.readFileSync("../pom.xml");
+  const pom = convert.xml2js(data.toString(), { compact: true });
+
+  const getVersionByMaven = async () => {
+    return await fetch(
+      "https://search.maven.org/solrsearch/select?q=arthas&rows=1&wt=json"
+    )
+      .then((res) => res.json())
+      .then((res) => res.response.docs[0].latestVersion);
+  };
+
+  const version = pom.project.properties.revision._text;
+
+  return {
+    name: "vuepress-plugin-loadVersion",
+    extendsPage: async (page) => {
+      const injectVersionPagePaths = ["/", "/en/"];
+
+      if (!injectVersionPagePaths.includes(page.data.path)) return;
+
+      if (version.includes("SNAPSHOT")) {
+        page.data.version = await getVersionByMaven();
+      } else {
+        page.data.version = version;
+      }
+    },
+  };
+};

site/docs/.vuepress/theme/components/HomeBadges.vue

@@ -15,16 +15,20 @@ import { ref, onBeforeMount } from "vue";
 const star = ref(29582);
 const fork = ref(6494);
 
-const getData = async () => {
-  const { forks, stargazers_count } = await fetch(
-    "https://api.github.com/repos/alibaba/arthas"
-  ).then((res) => res.json());
+const getStarForkData = async () => {
+  const stars = await fetch("https://arthas.aliyun.com/api/starCount").then(
+    (res) => res.json()
+  );
 
-  star.value = stargazers_count;
-  fork.value = forks;
+  const forks = await fetch("https://arthas.aliyun.com/api/forkCount").then(
+    (res) => res.json()
+  );
+
+  star.value = stars || star.value;
+  fork.value = forks || fork.value;
 };
 
-onBeforeMount(getData);
+onBeforeMount(getStarForkData);
 </script>
 
 <style scoped>

site/docs/.vuepress/theme/components/HomeUserBoards.vue

@@ -12,7 +12,7 @@
 import UserBoard from "./UserBoard.vue";
 
 import { toRaw } from "vue";
-import { usePageFrontmatter, usePageLang } from "@vuepress/client";
+import { usePageFrontmatter } from "@vuepress/client";
 
 const pageData = usePageFrontmatter();
 const imgs = toRaw(pageData.value.users) || [];

site/docs/.vuepress/theme/components/NavbarBrand.vue

@@ -0,0 +1,79 @@
+<script setup>
+import {
+  ClientOnly,
+  usePageData,
+  useRouteLocale,
+  useSiteLocaleData,
+  withBase,
+} from "@vuepress/client";
+import { computed, h, ref } from "vue";
+import {
+  useDarkMode,
+  useThemeLocaleData,
+} from "@vuepress/theme-default/lib/client";
+
+const pageData = usePageData();
+const isDarkMode = useDarkMode();
+const routeLocale = useRouteLocale();
+const siteLocale = useSiteLocaleData();
+const themeLocale = useThemeLocaleData();
+
+const version = ref(pageData.value.version);
+
+const navbarBrandLink = computed(
+  () => themeLocale.value.home || routeLocale.value
+);
+const navbarBrandTitle = computed(() => siteLocale.value.title);
+const navbarBrandLogo = computed(() => {
+  if (isDarkMode.value && themeLocale.value.logoDark !== undefined) {
+    return themeLocale.value.logoDark;
+  }
+  return themeLocale.value.logo;
+});
+
+const NavbarBrandVersion = () =>
+  h(
+    "span",
+    {
+      class: "navbar-version",
+    },
+    `v${version.value}`
+  );
+
+const NavbarBrandLogo = () => {
+  if (!navbarBrandLogo.value) return null;
+  const img = h("img", {
+    class: "logo",
+    src: withBase(navbarBrandLogo.value),
+    alt: navbarBrandTitle.value,
+  });
+  if (themeLocale.value.logoDark === undefined) {
+    return img;
+  }
+  // wrap brand logo with <ClientOnly> to avoid ssr-mismatch
+  // when using a different brand logo in dark mode
+  return h(ClientOnly, () => img);
+};
+</script>
+
+<template>
+  <RouterLink :to="navbarBrandLink">
+    <NavbarBrandLogo />
+
+    <span
+      v-if="navbarBrandTitle"
+      class="site-name"
+      :class="{ 'can-hide': navbarBrandLogo }"
+    >
+      {{ navbarBrandTitle }}
+    </span>
+    <NavbarBrandVersion />
+  </RouterLink>
+</template>
+
+<style lang="scss" scoped>
+.navbar-version {
+  line-height: var(--navbar-height);
+  color: var(--c-text-lighter);
+}
+</style>

site/docs/.vuepress/theme/index.js

@@ -14,6 +14,10 @@ exports.localTheme = (options) => {
       ),
       "@theme/AutoLink.vue": path.resolve(__dirname, "components/AutoLink.vue"),
       "@theme/Page.vue": path.resolve(__dirname, "components/Page.vue"),
+      "@theme/NavbarBrand.vue": path.resolve(
+        __dirname,
+        "components/NavbarBrand.vue"
+      ),
     },
   };
 };

site/package.json

@@ -12,10 +12,15 @@
   "license": "ISC",
   "devDependencies": {
     "@vuepress/plugin-active-header-links": "^2.0.0-beta.49",
+    "@vuepress/plugin-docsearch": "^2.0.0-beta.49",
     "@vuepress/plugin-search": "^2.0.0-beta.48",
     "prettier": "2.7.1",
     "vuepress": "^2.0.0-beta.48",
     "vuepress-plugin-copy-code2": "^2.0.0-beta.84",
     "vuepress-plugin-redirect": "^2.0.0-beta.86"
+  },
+  "dependencies": {
+    "node-fetch": "^1.7.3",
+    "xml-js": "^1.6.11"
   }
 }