Breadcrumbs.vue - bsc - Comprehensive codebase and cou...

Breadcrumbs.vue (2168B)
      1 <script setup>
      2 import { computed } from 'vue'
      3 import { useRoute, useData } from 'vitepress'
      4 
      5 const route = useRoute()
      6 const { page, theme } = useData()
      7 
      8 // Turn "semester_2/tuition/file-name" into readable, linkable crumbs
      9 const crumbs = computed(() => {
     10   const path = route.path
     11     .replace(/\.html$/, '')
     12     .replace(/^\/|\/$/g, '')
     13 
     14   if (!path || path === 'index') return []
     15 
     16   const segments = path.split('/').filter(Boolean)
     17   const result = []
     18   let accPath = ''
     19 
     20   segments.forEach((seg, i) => {
     21     accPath += '/' + seg
     22     const isLast = i === segments.length - 1
     23 
     24     // Last segment: use the real page title if available
     25     let label = isLast && page.value.title
     26       ? page.value.title
     27       : humanize(seg)
     28 
     29     result.push({
     30       label,
     31       link: isLast ? null : accPath + '/',
     32     })
     33   })
     34 
     35   return result
     36 })
     37 
     38 function humanize(slug) {
     39   return slug
     40     .replace(/[-_]/g, ' ')
     41     .replace(/\b\w/g, (c) => c.toUpperCase())
     42 }
     43 </script>
     44 
     45 <template>
     46   <nav v-if="crumbs.length" class="bsc-breadcrumbs" aria-label="Breadcrumb">
     47     <ol>
     48       <li>
     49         <a href="/" class="crumb-link">Home</a>
     50         <span class="crumb-sep">/</span>
     51       </li>
     52       <li v-for="(crumb, i) in crumbs" :key="i">
     53         <a v-if="crumb.link" :href="crumb.link" class="crumb-link">{{ crumb.label }}</a>
     54         <span v-else class="crumb-current">{{ crumb.label }}</span>
     55         <span v-if="i < crumbs.length - 1" class="crumb-sep">/</span>
     56       </li>
     57     </ol>
     58   </nav>
     59 </template>
     60 
     61 <style scoped>
     62 .bsc-breadcrumbs {
     63   margin-bottom: 16px;
     64   font-size: 13px;
     65   overflow-x: auto;
     66   white-space: nowrap;
     67   scrollbar-width: none;
     68 }
     69 
     70 .bsc-breadcrumbs::-webkit-scrollbar {
     71   display: none;
     72 }
     73 
     74 .bsc-breadcrumbs ol {
     75   display: flex;
     76   align-items: center;
     77   list-style: none;
     78   margin: 0;
     79   padding: 0;
     80 }
     81 
     82 .bsc-breadcrumbs li {
     83   display: flex;
     84   align-items: center;
     85 }
     86 
     87 .crumb-link {
     88   color: var(--vp-c-text-2);
     89   text-decoration: none;
     90   transition: color 0.15s ease;
     91 }
     92 
     93 .crumb-link:hover {
     94   color: var(--vp-c-brand-1);
     95 }
     96 
     97 .crumb-current {
     98   color: var(--vp-c-text-1);
     99   font-weight: 500;
    100 }
    101 
    102 .crumb-sep {
    103   margin: 0 8px;
    104   color: var(--vp-c-b-divider);
    105 }
    106 </style>
	bsc Comprehensive codebase and cou...
	Log \| Files \| Refs \| README \| LICENSE