✨ Add color code to the repositories

Cussa · Cussa · commit 3dc4cdc5b275 · 2025-12-29T20:24:16.000-03:00
diff --git a/by-type.mjs b/by-type.mjs
@@ -5,6 +5,7 @@ import {
     escapeHtml,
     formatReactions,
     getTotalReactions,
+    getRepoColor,
     setupCommonUI,
     setupLoadButton,
     setupAutoLoad,
@@ -207,7 +208,7 @@ function renderItems(items) {
                     <a href="${item.html_url}" class="item-title-link" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();">↗️</a>
                 </div>
                 <div class="item-meta">
-                    <span class="label repo-badge">${escapeHtml(item.repoName)}</span>
+                    <span class="label repo-badge" style="--repo-bg: ${getRepoColor(item.repoName)}">${escapeHtml(item.repoName)}</span>
                     <span class="item-state">${stateIcon} ${item.state}</span>
                     <span class="item-dates">📅 ${createdDate} • 🔄 ${updatedDate}</span>
                     ${milestone}
diff --git a/main.mjs b/main.mjs
@@ -6,6 +6,7 @@ import {
     classifyItem,
     fetchRepositoryData,
     getContrastColor,
+    getRepoColor,
     showError,
     escapeHtml,
     formatReactions,
@@ -171,7 +172,7 @@ function renderSwimlane(repoData) {
     const [owner, repoName] = repo.split('/');
 
     swimlane.innerHTML = `
-        <div class="swimlane-header">
+        <div class="swimlane-header" style="--repo-bg: ${getRepoColor(repo)}; background: var(--repo-bg, transparent); border-radius: 6px; padding: 15px;">
             <div class="swimlane-title">
                 <div class="swimlane-title-main">
                     <span class="collapse-icon">▼</span>
diff --git a/shared.mjs b/shared.mjs
@@ -29,6 +29,28 @@ export function setGitHubToken(token) {
     githubToken = token;
 }
 
+/**
+ * Generate a consistent color for a repository name
+ */
+export function getRepoColor(repoName) {
+    // Better hash function with more distribution
+    // Use golden ratio to spread values across the spectrum
+    let hash = 0;
+    for (let i = 0; i < repoName.length; i++) {
+        const char = repoName.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    
+    // Use golden ratio (0.618033988749895) for better distribution
+    const goldenRatio = 0.618033988749895;
+    const hue = (Math.abs(hash) * goldenRatio * 360) % 360;
+    
+    // Use high saturation and moderate lightness for vibrant colors
+    // Return as HSL with moderate opacity for background
+    return `hsla(${Math.round(hue)}, 80%, 60%, 0.25)`;
+}
+
 /**
  * Get the GitHub token
  */
diff --git a/styles.css b/styles.css
@@ -1045,8 +1045,8 @@ button:disabled {
 }
 
 .repo-badge {
-    background: #0d1117;
-    color: #8b949e;
+    background: var(--repo-bg, #161b22);
+    color: #c9d1d9;
     border: 1px solid #30363d;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1045,8 +1045,8 @@ button:disabled {`
`1045`	`1045`	`}`
`1046`	`1046`
`1047`	`1047`	`.repo-badge {`
`1048`		`- background: #0d1117;`
`1049`		`- color: #8b949e;`
	`1048`	`+ background: var(--repo-bg, #161b22);`
	`1049`	`+ color: #c9d1d9;`
`1050`	`1050`	`border: 1px solid #30363d;`
`1051`	`1051`	`}`
`1052`	`1052`