feat(theme): add icon to doc footer prev-next (#726)

theme/src/client/components/VPContent.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
+const { frontmatter, collection } = useData()
 const { isPostsLayout } = usePostsPageData()
 const route = useRoute()
 
@@ -27,6 +27,13 @@ watch(
       if (layout)
         document.documentElement.classList.remove(layout)
       document.documentElement.classList.add(`layout-${isPostsLayout.value ? 'posts' : frontmatter.value.pageLayout || 'doc'}`)
+
+      if (collection.value) {
+        const collectionCls = document.documentElement.className.match(/(?:^|\s)(collection-\S+)(?:$|\s)/)?.[1]
+        if (collectionCls)
+          document.documentElement.classList.remove(collectionCls)
+        document.documentElement.classList.add(`collection-${collection.value.type}-${collection.value.linkPrefix?.replace(/^\/|\/$/g, '').replace(/\//g, '_') || 'default'}`)
+      }
     }
   }),
   { immediate: true },

theme/src/client/components/VPDocBreadcrumbs.vue

@@ -61,7 +61,13 @@ const breadcrumbList = computed<Breadcrumb[]>(() => {
     }
   }
   list.push({ text: page.value.title, link: page.value.path, current: true })
-  return list
+
+  return list.reduce<Breadcrumb[]>((acc, item, index) => {
+    const prev = acc[index - 1]
+    if (prev && (prev.link === item.link || prev.text === item.text))
+      return acc
+    return [...acc, item]
+  }, [])
 })
 
 function resolveSidebar(

theme/src/client/components/VPDocFooter.vue

@@ -82,13 +82,19 @@ const showFooter = computed(() => {
       <div class="pager">
         <VPLink v-if="prev?.link" class="pager-link prev" :href="prev.link">
           <span class="desc" v-html="theme.prevPageLabel || 'Previous page'" />
-          <span class="title" v-html="prev.text" />
+          <span class="title">
+            <VPIcon v-if="prev.icon" :name="prev.icon" />
+            <span v-html="prev.text" />
+          </span>
         </VPLink>
       </div>
       <div class="pager">
         <VPLink v-if="next?.link" class="pager-link next" :href="next.link">
           <span class="desc" v-html="theme.nextPageLabel || 'Next page'" />
-          <span class="title" v-html="next.text" />
+          <span class="title">
+            <VPIcon v-if="next.icon" :name="next.icon" />
+            <span v-html="next.text" />
+          </span>
         </VPLink>
       </div>
     </nav>
@@ -245,4 +251,9 @@ const showFooter = computed(() => {
   color: var(--vp-c-brand-1);
   transition: color var(--vp-t-color);
 }
+
+.title .vp-icon {
+  margin-left: 0;
+  transform: translateY(-1px);
+}
 </style>

theme/src/client/composables/prev-next.ts

@@ -22,7 +22,7 @@ export function usePrevNext(): UsePrevNextResult {
   const locale = usePageLang()
   const { isPosts } = usePostsPageData()
 
-  const prevNavList = computed(() => {
+  const prevNavLink = computed(() => {
     if (theme.value.prevPage === false)
       return null
 
@@ -42,7 +42,7 @@ export function usePrevNext(): UsePrevNextResult {
     }
   })
 
-  const nextNavList = computed(() => {
+  const nextNavLink = computed(() => {
     if (theme.value.nextPage === false)
       return null
 
@@ -63,8 +63,8 @@ export function usePrevNext(): UsePrevNextResult {
   })
 
   return {
-    prev: prevNavList,
-    next: nextNavList,
+    prev: prevNavLink,
+    next: nextNavLink,
   }
 }
 
@@ -87,7 +87,7 @@ function resolveFromFrontmatterConfig(conf: unknown): null | false | NavItemWith
 function flatSidebar(sidebar: ThemeSidebarItem[], res: NavItemWithLink[] = []): NavItemWithLink[] {
   for (const item of sidebar) {
     if (item.link)
-      res.push({ link: item.link, text: item.text || item.dir || '' })
+      res.push({ link: item.link, text: item.text || '', icon: item.icon })
 
     if (Array.isArray(item.items) && item.items.length)
       flatSidebar(item.items as ThemeSidebarItem[], res)
@@ -104,10 +104,7 @@ function resolveFromSidebarItems(sidebarItems: NavItemWithLink[], currentPath: s
   if (index !== -1) {
     const targetItem = sidebarItems[index + offset]
     if (targetItem?.link) {
-      return {
-        link: targetItem.link,
-        text: targetItem.text,
-      }
+      return targetItem
     }
   }
 
@@ -121,10 +118,7 @@ function resolveFromPostsData(postList: ThemePostsItem[], currentPath: string, o
     if (!targetItem?.path)
       return null
 
-    return {
-      link: targetItem.path,
-      text: targetItem.title,
-    }
+    return { link: targetItem.path, text: targetItem.title }
   }
   return null
 }