Add color to labels

Author: spoorcc

dfetch_hub/site/index.html

@@ -730,6 +730,7 @@ <h2 class="aside-t">Found in</h2>
     <div class="toast" id="toast" role="status" aria-live="polite"></div>
     <script>
 'use strict';
+{{ /* djlint:off */ }}
 let RAW = {};       // catalog data
 let ALL = [];       // this fixes the ReferenceError
 let curQ = '';
@@ -883,7 +884,7 @@ <h2 class="aside-t">Found in</h2>
   if(!hits.length){closeHAC();return}
   dd.innerHTML=hits.map(({c})=>{
     const ini=(c.name||'?').slice(0,2).toUpperCase();
-    const lbls=(c.source_labels||[]).slice(0,2).map(l=>`<span class="lbl lbl-${slug(l)}">${esc(l)}</span>`).join('');
+    const lbls=(c.source_labels||[]).slice(0,2).map(makeLbl).join('');
     const st=c.stars!=null?`<span style="font-size:.74rem;color:var(--subtle);flex-shrink:0">⭐ ${fmt(c.stars)}</span>`:'';
     return `<div class="acitem" data-id="${esc(c.id)}">
       <div class="acico">${ini}</div>
@@ -915,7 +916,7 @@ <h2 class="aside-t">Found in</h2>
   if(!hits.length){closeAC();return}
   dd.innerHTML=hits.map(({c})=>{
     const ini=(c.name||'?').slice(0,2).toUpperCase();
-    const lbls=(c.source_labels||[]).slice(0,2).map(l=>`<span class="lbl lbl-${slug(l)}">${esc(l)}</span>`).join('');
+    const lbls=(c.source_labels||[]).slice(0,2).map(makeLbl).join('');
     const st=c.stars!=null?`<span style="font-size:.74rem;color:var(--subtle);flex-shrink:0">⭐ ${fmt(c.stars)}</span>`:'';
     return `<div class="acitem" data-id="${esc(c.id)}">
       <div class="acico">${ini}</div>
@@ -968,7 +969,7 @@ <h2 class="aside-t">Found in</h2>
   document.getElementById('rcount').innerHTML=`Showing <strong>${start+1}–${end}</strong> of <strong>${curRes.length}</strong> package${curRes.length!==1?'s':''}`;
   list.innerHTML=curRes.slice(start,end).map(c=>{
     const ver=ltag(c);
-    const lbls=(c.source_labels||[]).map(l=>`<span class="lbl lbl-${slug(l)}">${esc(l)}</span>`).join('');
+    const lbls=(c.source_labels||[]).map(makeLbl).join('');
     const added=MFS.has(c.id)?`<span class="added-ind">✓ In manifest</span>`:'';
     const stars=c.stars!=null?`<span class="pstat">⭐ ${fmt(c.stars)}</span>`:'';
     const upd=c.last_updated?`<span class="padded">${relt(c.last_updated)}</span>`:'';
@@ -1020,8 +1021,8 @@ <h2 class="aside-t">Found in</h2>
   document.getElementById('dName').textContent=c.name;
   document.getElementById('dVer').textContent=ver?ver:'';
   document.getElementById('dDesc').textContent=c.description||'';
-  const lbls=(c.source_labels||[]).map(l=>`<span class="lbl lbl-${slug(l)}">${esc(l)}</span>`).join('');
-  document.getElementById('dBadges').innerHTML=lbls+`<span class="lbl lbl-${slug(c.source_type)}">${esc(c.source_type)}</span>`;
+  const lbls=(c.source_labels||[]).map(makeLbl).join('');
+  document.getElementById('dBadges').innerHTML=lbls+makeLbl(c.source_type);
   const parts=[];
   if(c.license&&c.license!=='UNKNOWN')parts.push(`<span class="pmi">⚖ ${esc(c.license)}</span>`);
   if(c.stars!=null)parts.push(`<span class="pmi">⭐ ${fmt(c.stars)}</span>`);
@@ -1053,7 +1054,7 @@ <h2 class="aside-t">Found in</h2>
   });
   const aSrcs=document.getElementById('aSrcs');
   aSrcs.innerHTML=(c.catalog_sources||[]).length?(c.catalog_sources||[]).map(cs=>{
-    const lbl=cs.label?`<span class="lbl lbl-${slug(cs.label)}">${esc(cs.label)}</span>`:'';
+    const lbl=cs.label?makeLbl(cs.label):'';
     const p=cs.index_path?`<span style="font-size:.76rem;color:var(--subtle)"> ${esc(cs.index_path)}</span>`:'';
     return `<div class="aside-src-row">${lbl}<span>${esc(cs.source_name)}${p}</span></div>`;
   }).join(''):'<span style="font-size:.82rem;color:var(--subtle)">No registry info</span>';
@@ -1229,18 +1230,21 @@ <h2 class="aside-t">Found in</h2>
   setTimeout(()=>URL.revokeObjectURL(url),10000);
 }
 
-{{ /* djlint:off */ }}
 const _ESC={'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'};
-{{ /* djlint:on */ }}
 function esc(s){return String(s||'').replace(/[&<>"']/g,c=>_ESC[c]||c)}
 function yamlQ(s){return"'"+String(s||'').replace(/'/g,"''")+"'"}
 function slug(s){return String(s||'').toLowerCase().replace(/[^a-z0-9]/g,'-').replace(/-+/g,'-').replace(/^-|-$/g,'')}
+const _LBL_KNOWN={'vcpkg':['#d6eaf8','#1a5276'],'conan':['#fef9e7','#7d6608'],'npm':['#fde8e4','#922b21'],'clib':['#e8d8f0','#4a235a'],'esp':['#d5f5e3','#1e8449'],'esp-idf':['#d5f5e3','#1e8449'],'github':['#eaecee','#2c3e50'],'gitlab':['#fde8f0','#7b241c'],'svn':['#fef5e7','#784212']};
+const _LBL_PAL=[['#d6eaf8','#1a5276'],['#fde8e4','#922b21'],['#d5f5e3','#1e8449'],['#fef9e7','#7d6608'],['#e8d8f0','#4a235a'],['#fde8f0','#7b241c'],['#fef5e7','#784212'],['#d5eaff','#1a4080'],['#e4f4e8','#1b5e33'],['#ffe4f0','#7b0040'],['#fff0d5','#7a4000'],['#e8e4ff','#2c007a']];
+function _lblColor(l){const k=slug(l);if(_LBL_KNOWN[k])return _LBL_KNOWN[k];let h=0;for(let i=0;i<k.length;i++)h=(h*31+k.charCodeAt(i))>>>0;return _LBL_PAL[h%_LBL_PAL.length]}
+function makeLbl(l){const[bg,fg]=_lblColor(l);return`<span class="lbl" style="background:${bg};color:${fg}">${esc(l)}</span>`}
 function fmt(n){if(n>=1000)return(n/1000).toFixed(1)+'k';return String(n)}
 function isSafeHttpUrl(url){try{const u=new URL(String(url||''));return u.protocol==='http:'||u.protocol==='https:';}catch(e){return false;}}
 function ltag(c){const tags=(c.tags||[]).filter(t=>t.name);if(!tags.length)return'';const vp=s=>String(s).replace(/^v/i,'').split('.').map(p=>{const n=parseInt(p,10);return isNaN(n)?p:n});return tags.reduce((b,t)=>{const bv=vp(b.name),tv=vp(t.name);for(let i=0;i<Math.max(bv.length,tv.length);i++){const bi=bv[i]??0,ti=tv[i]??0;if(typeof bi==='number'&&typeof ti==='number'){if(bi!==ti)return bi<ti?t:b}else{const sc=String(bi).localeCompare(String(ti));if(sc)return sc<0?t:b}}return b}).name}
 function relt(iso){if(!iso)return'';const d=new Date(iso);const diff=Date.now()-d.getTime();const days=Math.floor(diff/86400000);if(days<1)return'today';if(days<7)return`${days}d ago`;if(days<30)return`${Math.floor(days/7)}w ago`;if(days<365)return`${Math.floor(days/30)}mo ago`;return`${Math.floor(days/365)}y ago`}
 function cpTxt(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);return new Promise((res,rej)=>{const ta=document.createElement('textarea');ta.value=t;document.body.appendChild(ta);ta.select();try{const ok=document.execCommand('copy');ok?res():rej(new Error('execCommand copy returned false'))}catch(e){rej(e)}finally{ta.remove()}})}
 function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(t._t);t._t=setTimeout(()=>t.classList.remove('show'),2200)}
+{{ /* djlint:on */ }}
     </script>
   </body>
 </html>