Theo
@@ -94,7 +94,8 @@ export default defineConfig({
|
||||
themeConfig: {
|
||||
logo: { src: '/logo.png', width: 24, height: 24 },
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/nezhahq/nezhahq.github.io' }
|
||||
{ icon: 'github', link: 'https://github.com/nezhahq/nezhahq.github.io' },
|
||||
{ icon: {svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>'}, link: 'https://t.me/nezhanews' },
|
||||
],
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
import { useData } from 'vitepress';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BannerComponent',
|
||||
setup() {
|
||||
const { site } = useData();
|
||||
|
||||
const banner = ref({
|
||||
link: 'https://t.me/nezhanews',
|
||||
icon: 'https://nezha.wiki/logo.png',
|
||||
dashboardVersionApi: 'https://api.github.com/repos/naiba/nezha/releases/latest',
|
||||
agentVersionApi: 'https://api.github.com/repos/nezhahq/agent/releases/latest',
|
||||
dashboardVersion: '',
|
||||
agentVersion: '',
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchLatestVersions();
|
||||
});
|
||||
|
||||
const fetchLatestVersions = async () => {
|
||||
try {
|
||||
const dashboardResponse = await fetch(banner.value.dashboardVersionApi);
|
||||
const dashboardData = await dashboardResponse.json();
|
||||
banner.value.dashboardVersion = dashboardData.tag_name;
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard latest version:', error);
|
||||
banner.value.dashboardVersion = 'Error fetching';
|
||||
}
|
||||
|
||||
try {
|
||||
const agentResponse = await fetch(banner.value.agentVersionApi);
|
||||
const agentData = await agentResponse.json();
|
||||
banner.value.agentVersion = agentData.tag_name;
|
||||
} catch (error) {
|
||||
console.error('Error fetching agent latest version:', error);
|
||||
banner.value.agentVersion = 'Error fetching';
|
||||
}
|
||||
};
|
||||
|
||||
const translations = {
|
||||
name: {
|
||||
'en-US': 'Announcement',
|
||||
'zh-CN': '公告栏',
|
||||
},
|
||||
version: {
|
||||
'en-US': 'Latest Version',
|
||||
'zh-CN': '最新版本',
|
||||
},
|
||||
change: {
|
||||
'en-US': 'View changelog',
|
||||
'zh-CN': '查看变更日志',
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
banner,
|
||||
translations,
|
||||
site,
|
||||
fetchLatestVersions,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a :href="banner.link" class="banner" target="_blank">
|
||||
<img v-if="banner.icon" :src="banner.icon" width="22" height="22" />
|
||||
<!-- <span class="name">{{ translations.name[site.lang] }}</span> -->
|
||||
<div class="info">
|
||||
<p v-if="banner.dashboardVersion !== ''" class="version">Dashboard {{ banner.dashboardVersion }}</p>
|
||||
<p v-if="banner.agentVersion !== ''" class="version">Agent {{ banner.agentVersion }}</p>
|
||||
<p class="change">{{ translations.change[site.lang] }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.VPDocAsideSponsors {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0.25rem 0;
|
||||
padding: 0.4rem 0;
|
||||
border-radius: 0.8rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-bg-soft);
|
||||
transition: border-color 0.5s;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.5s;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.75);
|
||||
}
|
||||
|
||||
.name {
|
||||
background-image: linear-gradient(120deg, var(--vp-c-brand-3) 32%, var(--vp-c-brand-2), var(--vp-c-brand-1));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-left: 1rem;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 0.5;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.change {
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@ import { h } from 'vue'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import HorizontalAd from './components/HorizontalAd.vue'
|
||||
import VerticalAd from './components/VerticalAd.vue'
|
||||
import DocAsideannouncement from './components/DocAsideannouncement.vue'
|
||||
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
@@ -9,6 +10,7 @@ export default {
|
||||
return h(DefaultTheme.Layout, null, {
|
||||
'doc-top': () => h(HorizontalAd),
|
||||
'aside-top': () => h(VerticalAd),
|
||||
'aside-ads-before': () => h(DocAsideannouncement)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user