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

Labels.vue (2041B)
      1 <script setup>
      2 import { computed } from 'vue'
      3 import { useData } from 'vitepress'
      4 
      5 const { frontmatter } = useData()
      6 
      7 const tags = computed(() => {
      8   const raw = frontmatter.value.tags
      9   if (!raw) return []
     10   return Array.isArray(raw) ? raw.filter(Boolean) : [raw]
     11 })
     12 
     13 function humanize(tag) {
     14   return tag.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
     15 }
     16 </script>
     17 
     18 <template>
     19   <div v-if="tags.length" class="bsc-labels" aria-label="Page tags">
     20     <a
     21       v-for="tag in tags"
     22       :key="tag"
     23       class="bsc-tag"
     24       :href="`/tags#${tag}`"
     25       :title="`Browse pages tagged ${humanize(tag)}`"
     26     >{{ humanize(tag) }}</a>
     27   </div>
     28 </template>
     29 
     30 <style scoped>
     31 .bsc-labels {
     32   display: flex;
     33   flex-wrap: wrap;
     34   gap: 10px;
     35   margin: 20px 0 24px;
     36 }
     37 
     38 .bsc-tag {
     39   position: relative;
     40   display: inline-flex;
     41   align-items: center;
     42   height: 28px;
     43   padding: 0 12px 0 10px;
     44   font-size: 12.5px;
     45   font-weight: 500;
     46   text-decoration: none;
     47   white-space: nowrap;
     48 
     49   color: var(--vp-c-brand-1);
     50   background: var(--vp-c-bg-soft);
     51 
     52   border: 1px solid var(--vp-c-divider);
     53   border-left: none;
     54   border-radius: 0 5px 5px 0;
     55 
     56   margin-left: 14px;
     57 }
     58 
     59 /* 1. The Pointed Left Angle */
     60 .bsc-tag::after {
     61   content: '';
     62   position: absolute;
     63   left: -10px;
     64   top: 50%;
     65   margin-top: -10px;
     66   width: 20px;
     67   height: 20px;
     68 
     69   background: inherit;
     70 
     71   border-left: 1px solid var(--vp-c-divider);
     72   border-bottom: 1px solid var(--vp-c-divider);
     73   border-radius: 0 0 0 3px;
     74 
     75   transform: rotate(45deg);
     76   z-index: -1;
     77 }
     78 
     79 /* 2. The Hole Punch Dot */
     80 .bsc-tag::before {
     81   content: '';
     82   position: absolute;
     83   left: -3px;
     84   top: 50%;
     85   margin-top: -2px;
     86   width: 4px;
     87   height: 4px;
     88   border-radius: 50%;
     89   background: var(--vp-c-brand-1);
     90   z-index: 1;
     91 }
     92 
     93 /* Hover States (Instant color snap, no movement) */
     94 .bsc-tag:hover {
     95   color: #fff;
     96   background: var(--vp-c-brand-1);
     97   border-color: var(--vp-c-brand-1);
     98 }
     99 
    100 .bsc-tag:hover::after {
    101   border-color: var(--vp-c-brand-1);
    102 }
    103 
    104 .bsc-tag:hover::before {
    105   background: #fff;
    106 }
    107 </style>
	bsc Comprehensive codebase and cou...
	Log \| Files \| Refs \| Activity \| README \| LICENSE