mirror of https://github.com/alibaba/arthas.git
docs(style/plugin): add a version tag to the navbar and add the DocSearch plugin (#2233)
parent
7954f12bf6
commit
2f06d8bb36
@ -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;
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
@ -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>
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue