bsc

root / docs / tags.md

tags.md (6750B)

---

 ---
 source: 'docs/tags.md'
 title: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline; margin-bottom:-2px; margin-right:6px;"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg> Tags'
 ---
 
 <script setup>
 import { ref, computed } from 'vue'
 import { data as tagsData } from './.vitepress/tags.data.ts'
 
 const tagNames = Object.keys(tagsData).sort()
 
 // Store an array of active tags instead of a single string
 const activeFilters = ref([])
 
 // Compute pages that contain ALL selected tags (AND logic)
 const filteredPages = computed(() => {
   if (activeFilters.value.length === 0) return []
 
   // Start with the pages of the first selected tag
   let commonPages = tagsData[activeFilters.value[0]]
 
   // Intersect with pages of the other selected tags
   for (let i = 1; i < activeFilters.value.length; i++) {
     const nextTagPages = tagsData[activeFilters.value[i]]
     commonPages = commonPages.filter(page =>
       nextTagPages.some(p => p.url === page.url)
     )
   }
   
   return commonPages
 })
 
 function toggleFilter(tag) {
   const index = activeFilters.value.indexOf(tag)
   if (index > -1) {
     // Tag is currently active, remove it
     activeFilters.value.splice(index, 1)
   } else {
     // Tag is not active, add it
     activeFilters.value.push(tag)
   }
 }
 
 function humanize(tag) {
   return tag.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 }
 </script>
 
 # Tags
 
 Browse pages grouped by tag. Click tags below to filter results, or click a tag chip anywhere on the site to jump straight here.
 
 <div v-if="!tagNames.length" class="bsc-tags-empty">
   No tags found yet.
 </div>
 
 <div v-else class="bsc-filter-bar">
   <button
     v-for="tag in tagNames"
     :key="tag"
     class="bsc-filter-chip"
     :class="{ 'bsc-filter-chip-active': activeFilters.includes(tag) }"
     @click="toggleFilter(tag)"
   >{{ humanize(tag) }}</button>
 </div>
 
 <p v-if="activeFilters.length" class="bsc-filter-status">
   Showing pages with <strong>all</strong> selected tags: 
   <strong style="color: var(--vp-c-brand-1);">{{ activeFilters.map(humanize).join(' + ') }}</strong> —
   <a href="#" class="bsc-filter-clear" @click.prevent="activeFilters = []">clear filters</a>
 </p>
 
 <!-- If filters are active, show the combined intersection of pages -->
 <div v-if="activeFilters.length" class="bsc-tag-section">
   <h2 class="bsc-tag-heading">
     Filtered Results
     <span class="bsc-tag-count">{{ filteredPages.length }}</span>
   </h2>
   
   <ul v-if="filteredPages.length" class="bsc-tag-pages">
     <li v-for="page in filteredPages" :key="page.url">
       <a :href="page.url">{{ page.title }}</a>
     </li>
   </ul>
   <div v-else class="bsc-tags-empty" style="margin-top: 16px;">
     No pages match all selected tags.
   </div>
 </div>
 
 <!-- If no filters are active, show all standard tag sections -->
 <template v-else>
   <div v-for="tag in tagNames" :key="tag" :id="tag" class="bsc-tag-section">
     <h2 class="bsc-tag-heading">
       <a class="bsc-tag" :href="`#${tag}`">{{ humanize(tag) }}</a>
       <span class="bsc-tag-count">{{ tagsData[tag].length }}</span>
     </h2>
     <ul class="bsc-tag-pages">
       <li v-for="page in tagsData[tag]" :key="page.url">
         <a :href="page.url">{{ page.title }}</a>
       </li>
     </ul>
   </div>
 </template>
 
 <style scoped>
 .bsc-tags-empty {
   color: var(--vp-c-text-2);
   font-size: 14px;
 }
 
 .bsc-filter-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 16px 0 8px;
 }
 
 .bsc-filter-chip {
   font: inherit;
   font-size: 13px;
   font-weight: 500;
   padding: 5px 12px;
   color: var(--vp-c-text-2);
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 16px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
 /* Only change to blue text on hover if the chip is NOT active */
 .bsc-filter-chip:not(.bsc-filter-chip-active):hover {
   color: var(--vp-c-brand-1);
   border-color: var(--vp-c-brand-1);
 }
 
 /* Lock the active state to white text so it never disappears on hover */
 .bsc-filter-chip-active {
   color: #ffffff !important;
   background: var(--vp-c-brand-1) !important;
   border-color: var(--vp-c-brand-1) !important;
 }
 
 .bsc-filter-status {
   font-size: 13px;
   color: var(--vp-c-text-2);
   margin: 0 0 12px;
 }
 
 .bsc-filter-clear {
   color: var(--vp-c-text-3);
   text-decoration: underline;
   cursor: pointer;
   transition: color 0.2s ease;
 }
 
 .bsc-filter-clear:hover {
   color: var(--vp-c-brand-1);
 }
 
 .bsc-tag-section {
   margin: 28px 0;
   padding-top: 8px;
   border-top: 1px solid var(--vp-c-divider);
 }
 
 .bsc-tag-heading {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 16px 0 10px;
   border: none;
   padding: 0;
 }
 
 .bsc-tag-count {
   font-size: 12px;
   color: var(--vp-c-text-3);
   font-weight: 400;
 }
 
 .bsc-tag {
   position: relative;
   display: inline-flex;
   align-items: center;
   height: 28px;
   padding: 0 14px 0 10px;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   text-decoration: none;
   white-space: nowrap;
 
   color: var(--vp-c-brand-1);
   background: var(--vp-c-bg-soft);
 
   border: 1px solid var(--vp-c-divider);
   border-left: none;
   border-radius: 0 5px 5px 0;
 
   margin-left: 14px;
 }
 
 /* The Pointed Left Angle */
 .bsc-tag::after {
   content: '';
   position: absolute;
   left: -10px;
   top: 50%;
   margin-top: -10px;
   width: 20px;
   height: 20px;
 
   background: inherit;
 
   border-left: 1px solid var(--vp-c-divider);
   border-bottom: 1px solid var(--vp-c-divider);
   border-radius: 0 0 0 3px;
 
   transform: rotate(45deg);
   z-index: -1;
 }
 
 /* The Hole Punch Dot */
 .bsc-tag::before {
   content: '';
   position: absolute;
   left: -3px;
   top: 50%;
   margin-top: -2px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--vp-c-brand-1);
   z-index: 1;
 }
 
 /* Hover States */
 .bsc-tag:hover {
   color: #fff;
   background: var(--vp-c-brand-1);
   border-color: var(--vp-c-brand-1);
 }
 
 .bsc-tag:hover::after {
   border-color: var(--vp-c-brand-1);
 }
 
 .bsc-tag:hover::before {
   background: #fff;
 }
 
 .bsc-tag-pages {
   margin: 0;
   padding-left: 4px;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   row-gap: 10px;
   column-gap: 20px;
 }
 
 .bsc-tag-pages li {
   margin: 0 !important;
   padding: 0;
   line-height: 1.6;
 }
 
 .bsc-tag-pages a {
   display: inline-block;
   color: var(--vp-c-brand-1);
   text-decoration: none;
   font-size: 14px;
   line-height: 1.6;
 }
 
 .bsc-tag-pages a:hover {
   text-decoration: underline;
 }
 </style>

© notamitgamer • Site Built: 2026-09-05 01:53:16 UTC • git-mirror commit: c170d72 [view raw info]
Originally created with stagit • modified by notamitgamer
Forked from github.com/notamitgamer/git-mirror