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

pull/2236/head
Fatpandac 3 years ago committed by GitHub
parent 7954f12bf6
commit 2f06d8bb36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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(),
],
};

@ -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",
},
],
[

@ -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;
}
},
};
};

@ -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>

@ -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) || [];

@ -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>

@ -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"
),
},
};
};

3943
site/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -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"
}
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save