Add tag badge and assign color #3
Conversation
| @@ -135,4 +137,4 @@ | |||
| </div> | |||
| </body> | |||
|
|
|||
| </html> | |||
| </html> | |||
There was a problem hiding this comment.
I recommend setting your editor to automatically insert a newline at the end of files. One benefit to having a trailing \n is that if more lines are added at the end, the former last line remains unchanged, keeping the diff slightly less noisy :)
| if (entry.tags) { | ||
| tags = entry.tags.map(tag => { | ||
| const color = tagColors.get(tag.toLowerCase()) | ||
| return `<span class="inline-flex items-center justify-center px-2 py-1 ml-2 text-xs font-bold leading-none text-${color}-100 bg-${color}-400 rounded-full">${tag}</span>` |
There was a problem hiding this comment.
Instead of using text-${color}-100 and bg-${color}-400, I wonder if we should simply use inline CSS instead. This would save you the trouble of needing to modify the tailwind.config.js file.
| @@ -97,12 +100,27 @@ window.onload = async () => { | |||
| window.results = document.getElementById('results'); | |||
| const template = document.getElementById('entry-template'); | |||
|
|
|||
| let tagsArr = [] | |||
| window.index.forEach(entry => { | |||
There was a problem hiding this comment.
Instead of computing the colors every page load, we may be better off computing the tag-to-color association offline in scripts/build.js. This will add a bit of additional data to the window.index structure loaded a few lines up.
| window.index.forEach(entry => { | ||
| entry.tags && tagsArr.push(...entry.tags) | ||
| }) | ||
| tagsArr.map((tag, i) => tagColors.get(tag.toLowerCase()) === undefined && tagColors.set(tag.toLowerCase(), colors[i % colors.length])) |
There was a problem hiding this comment.
One consequence of using the modulo operator here is that when tags are added, the assignment of color to tag will change. Similarly, if the color palette size increases, the assignment will change as well. I'll make a prototype in a jsfiddle or something to show how you can do a stable color assignment with a reasonable palette.
|
For rendering the tags, it probably makes sense to normalize the casing also (to all caps or something) |
|
Thanks, this is now merged with additions from this commit |
Added tag badges for each entry.
Assign background and text color for each tag by mapping tag and color.
Tag will be assigned same color unless the order of the entries is changed.