Skip to content

Commit 83fded7

Browse files
NeserCodeNeserCode
committed
fix layout and update repo card
1 parent ef27403 commit 83fded7

File tree

9 files changed

+183
-8
lines changed

9 files changed

+183
-8
lines changed

‎docs/.vuepress/config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ export default defineUserConfig({
5757
],
5858
},
5959
]),
60+
61+
github: {
62+
username: "nesercode",
63+
// it got expired
64+
accessServer: "https://github-info-server.onrender.com",
65+
accessToken: "nesercode",
66+
},
6067
}),
6168

6269
title: "NeserCode",

‎docs/.vuepress/theme/lib/client/components/GithubRepo.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<script lang="ts" setup>
2+
import { BookmarkSquareIcon } from "@heroicons/vue/24/outline"
3+
4+
import { Ref, onBeforeMount, toRefs } from "vue"
5+
import { useStorage } from "@vueuse/core"
6+
import { useThemeLocaleData } from "@vuepress/plugin-theme-data/client"
7+
8+
import { onRouteChange } from "../composables/usePageHook"
9+
10+
import type { DefaultThemeLocaleData } from "../../shared"
11+
const $props = withDefaults(
12+
defineProps<{
13+
owner?: string
14+
repo?: string
15+
}>(),
16+
{}
17+
)
18+
const { owner, repo } = toRefs($props)
19+
const themeLocale: Ref<DefaultThemeLocaleData> = useThemeLocaleData()
20+
21+
let repoInfo = useStorage<{
22+
data: any
23+
timestamp: number
24+
}>(`v-nc-github-repo[${owner?.value}/${repo?.value}]`, {
25+
data: {},
26+
timestamp: -1,
27+
})
28+
onRouteChange(() => {
29+
repoInfo = useStorage<{
30+
data: any
31+
timestamp: number
32+
}>(`v-nc-github-repo[${owner?.value}/${repo?.value}]`, {
33+
data: {},
34+
timestamp: -1,
35+
})
36+
})
37+
38+
onBeforeMount(() => {
39+
const updateRepoInfo = async () =>
40+
await fetch(`${themeLocale.value.github?.accessServer}/repo`, {
41+
method: "POST",
42+
body: JSON.stringify({ username: owner.value, repo: repo.value }),
43+
headers: {
44+
"Content-Type": "application/json",
45+
Accept: "application/json",
46+
Authorization: `Bearer ${themeLocale.value.github?.accessToken}`,
47+
},
48+
})
49+
.then((res) => res.json())
50+
.then((res) => {
51+
repoInfo.value.data = res
52+
repoInfo.value.timestamp = Date.now()
53+
})
54+
if (repoInfo.value.timestamp == -1) {
55+
if (owner && repo && themeLocale.value.github?.accessServer)
56+
updateRepoInfo()
57+
} else if (repoInfo.value.timestamp + 1000 * 60 * 60 * 24 < Date.now()) {
58+
if (owner && repo && themeLocale.value.github?.accessServer)
59+
updateRepoInfo()
60+
}
61+
})
62+
</script>
63+
64+
<template>
65+
<Transition name="fade" mode="out-in" appear>
66+
<div class="github-repo-card" v-if="owner && repo">
67+
<span class="prefix">Linked Github Repo</span>
68+
<a :href="repoInfo?.html_url" class="card-main" target="_blank">
69+
<span class="repo-title">
70+
<BookmarkSquareIcon class="icon" />
71+
<span class="repo-name">
72+
<span class="repo">{{ repo }}</span>
73+
<span class="owner">{{ owner }}</span>
74+
</span>
75+
</span>
76+
<span class="repo-description" v-if="repoInfo?.data?.description">{{
77+
repoInfo?.data?.description
78+
}}</span>
79+
</a>
80+
</div>
81+
</Transition>
82+
</template>
83+
84+
<style lang="postcss" scoped>
85+
.github-repo-card {
86+
@apply relative flex flex-col gap-y-2 px-1.5 my-2;
87+
}
88+
89+
.github-repo-card .prefix {
90+
@apply text-sm font-semibold text-green-600;
91+
}
92+
93+
.github-repo-card .card-main {
94+
@apply w-fit max-w-48 flex flex-col justify-center py-1 px-2 gap-1
95+
border-2 rounded border-sky-300 dark:border-sky-600
96+
97+
transition-all ease-in-out duration-300 cursor-pointer;
98+
}
99+
100+
.card-main .repo-title {
101+
@apply inline-flex items-center gap-x-1;
102+
}
103+
.card-main .repo-name {
104+
@apply inline-flex flex-col
105+
text-sm text-blue-500;
106+
}
107+
108+
.repo-name span {
109+
@apply inline-block max-w-36
110+
truncate;
111+
}
112+
113+
.repo-description {
114+
@apply text-sm opacity-50;
115+
}
116+
117+
.card-main .icon {
118+
@apply w-7 h-7 stroke-blue-500;
119+
}
120+
</style>

‎docs/.vuepress/theme/lib/client/components/Page.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const computedStateSource = computed(() =>
2929
? defaultConstants.notFoundPluginState
3030
: pageFrontmatter.value
3131
)
32+
3233
const isSidebarCategroyActive = computed(() =>
3334
usePluginState("sidebarCategory", computedStateSource.value)
3435
)
@@ -69,8 +70,10 @@ setupHeaders()
6970
<main class="v-nc-theme-page">
7071
<Sidebar v-if="isSidebarActive" />
7172
<div class="page-side-left">
72-
<PageNav />
73-
<slot name="page-side-left"></slot>
73+
<div class="page-side-container">
74+
<PageNav />
75+
<slot name="page-side-left"></slot>
76+
</div>
7477
</div>
7578
<div class="page-main">
7679
<div class="page-head">
@@ -99,9 +102,10 @@ setupHeaders()
99102
</div>
100103
</div>
101104
<div class="page-side-right">
102-
<slot name="page-side-right">
105+
<div class="page-side-container">
103106
<SubToc v-if="isSidebarCategroyActive" />
104-
</slot>
107+
<slot name="page-side-right"> </slot>
108+
</div>
105109
</div>
106110
</main>
107111
</template>
@@ -284,6 +288,10 @@ section.footnotes::before {
284288
md:hidden;
285289
}
286290
291+
.page-side-container {
292+
@apply sticky top-28;
293+
}
294+
287295
.page-head {
288296
@apply relative my-4;
289297
}

‎docs/.vuepress/theme/lib/client/components/PageNav.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ onMounted(() => {
6262

6363
<style lang="postcss" scoped>
6464
.v-nc-page-nav {
65-
@apply sticky top-20 w-full flex justify-end pt-4 pr-4;
65+
@apply w-full flex justify-end pt-4 pr-4;
6666
}
6767
6868
.page-nav-main {

‎docs/.vuepress/theme/lib/client/components/ReadingTime.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ const { data } = toRefs($props)
1212
<div class="page-reading-time" v-if="data">
1313
<span class="reading-time-label">📖阅读时间</span>
1414
<span class="reading-time">
15-
总字数 {{ data.words }}, 大约需要 {{ data.minutes }} 分钟阅读
15+
总字数 <span class="number">{{ data.words }}</span
16+
>, 大约需要 <span class="number">{{ data.minutes }}</span> 分钟阅读
1617
</span>
1718
</div>
1819
</template>
@@ -30,4 +31,8 @@ const { data } = toRefs($props)
3031
.reading-time {
3132
@apply text-sm;
3233
}
34+
35+
.reading-time .number {
36+
@apply font-mono font-bold;
37+
}
3338
</style>

‎docs/.vuepress/theme/lib/client/components/SubToc.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ useSubTocFly(toc, tocFly)
5858

5959
<style lang="postcss" scoped>
6060
.v-nc-theme-sub-toc {
61-
@apply sticky top-28 pl-4;
61+
@apply pl-4;
6262
}
6363
.toc-fly {
6464
@apply absolute w-1 h-[23.5px] top-1 left-[15px]

‎docs/.vuepress/theme/lib/client/composables/usePageHook.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { useRoute } from "@vuepress/client"
2+
import { watchOnce } from "@vueuse/core"
3+
import { watch } from "vue"
4+
5+
export const onRouteChangeOnce = (callback: () => void) => {
6+
const $route = useRoute()
7+
8+
watchOnce(() => $route.path, callback)
9+
}
10+
export const onRouteChange = (callback: () => void) => {
11+
const $route = useRoute()
12+
13+
watch(() => $route.path, callback)
14+
}

‎docs/.vuepress/theme/lib/client/layouts/Layout.vue‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,23 @@ import Base from "./Base.vue"
33
import Page from "../components/Page.vue"
44
import Home from "../components/Home.vue"
55
6+
import GithubRepo from "../components/GithubRepo.vue"
7+
68
import { usePageFrontmatter } from "vuepress/client"
9+
import { computed } from "vue"
10+
import { DefaultThemeNormalPageFrontmatter } from "../../shared"
11+
12+
const pageFrontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
713
8-
const pageFrontmatter = usePageFrontmatter()
14+
// repo info
15+
const githubRepoData = computed(() => {
16+
let data = pageFrontmatter.value.repo?.split("/")
17+
if (!data?.length) return false
18+
return {
19+
owner: data[0],
20+
repo: data[1],
21+
}
22+
})
923
</script>
1024

1125
<template>
@@ -17,6 +31,11 @@ const pageFrontmatter = usePageFrontmatter()
1731
<slot name="page-side-left" />
1832
</template>
1933
<template #page-side-right>
34+
<GithubRepo
35+
:owner="githubRepoData?.owner"
36+
:repo="githubRepoData?.repo"
37+
v-if="githubRepoData"
38+
/>
2039
<slot name="page-side-right" />
2140
</template>
2241
<template #before-page-head>

‎docs/.vuepress/theme/lib/shared/page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export interface DefaultThemeNormalPageFrontmatter
6767
sidebarDepth?: number
6868
prev?: string | AutoLinkConfig
6969
next?: string | AutoLinkConfig
70+
71+
repo?: `${string}/${string}`
7072
}
7173

7274
export interface PagesMapInfo {

0 commit comments

Comments
 (0)