nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

chore(docs): better color for doc footer nav, tighter room for sidebar links

Browse Source
This commit is contained in:
Neko Ayaka
2026-05-01 20:14:15 +08:00
parent 5478cea6e4
commit 1ae345d076
4 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/components/DocFooter.vue
+8 -6
View File
@@ -85,15 +85,16 @@ const showFooter = computed(
class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
:class="[
'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
'active:scale-98',
'transition-all duration-200 ease-in-out',
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
]"
:href="control.prev.link"
>
<span
class="text-xs text-muted-foreground transition-all duration-200 ease-in-out group-hover:text-foreground"
class="text-xs"
v-html="theme.docFooter?.prev || t('docs.theme.doc.previous-page.title')"
/>
<p class="mt-2 inline-flex items-center gap-1">
@@ -111,15 +112,16 @@ const showFooter = computed(
class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
:class="[
'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
'active:scale-98',
'transition-all duration-200 ease-in-out',
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
]"
:href="control.next.link"
>
<span
class="text-xs text-muted-foreground transition-all duration-200 ease-in-out group-hover:text-foreground"
class="text-xs"
v-html="theme.docFooter?.next || t('docs.theme.doc.next-page.title')"
/>
docs/.vitepress/components/DocSidebar.vue
+2 -2
View File
@@ -24,7 +24,7 @@ defineProps<{
>
<CollapsibleTrigger
:class="[
'group w-full inline-flex items-center justify-between py-1 pl-4 pr-4 text-sm font-bold',
'group w-full inline-flex items-center justify-between py-1 pl-3 pr-3 text-sm font-bold',
'hover:bg-neutral/15 rounded-lg',
]"
>
@@ -37,7 +37,7 @@ defineProps<{
</CollapsibleTrigger>
<CollapsibleContent
:class="[
'overflow-hidden mt-1 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
'overflow-hidden mt-0.5 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
]"
>
<DocSidebarItem
docs/.vitepress/components/DocSidebarItem.vue
+1 -1
View File
@@ -32,7 +32,7 @@ watch(isActiveLink, () => {
>
<a
:href="item.link"
class="h-[2.15rem] w-full inline-flex items-center px-4"
class="min-h-[2.15rem] w-full inline-flex items-center px-3 py-0.5"
v-html="item.text"
/>
</div>
docs/.vitepress/components/DocTopbar.vue
+10 -5
View File
@@ -20,17 +20,20 @@ const isSidebarOpen = ref(false)
const sidebar = computed(() => (theme.value.sidebar as (DefaultTheme.SidebarItem & { icon?: string })[]))
const sectionTabs = computed(() => sidebar.value
.map(val => ({
label: val.text,
link: flatten(val.items ?? [], 'items').filter(i => !!i?.link)?.[0]?.link,
icon: val.icon,
}))
.map((val) => {
return {
label: val.text,
link: flatten(val.items ?? [], 'items').filter(i => !!i?.link)?.[0]?.link ?? val.link,
icon: val.icon,
}
})
.filter(i => !!i?.link),
)
function isCharacterPage(link?: string) {
if (!link)
return false
return link.includes('/characters') || link.includes('/characters/')
}
@@ -49,6 +52,8 @@ watch(path, () => {
>
<div class="hidden h-full items-center justify-between md:flex">
<div class="h-full flex items-center">
<div />
<a
v-for="tab in sectionTabs.filter(i => !isCharacterPage(i.link))"
:key="tab.label"