svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: give each post type a unique domain color

Browse Source 
Articles, notes, and bookmarks were all sharing amber, which
defeats the purpose of per-type color identity.

New complete color map (7 unique colors):
- Articles: indigo (long-form writing)
- Notes: teal (short posts)
- Bookmarks: amber (saved links)
- Likes: red (heart)
- Replies: sky (conversation)
- Reposts: green (sharing)
- Photos: purple (visual)

Updated across collection pages, blog.njk mixed view,
recent-posts widget (now shows type-specific icons and colors
for all 7 types), and design system documentation.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 18:03:06 +01:00
parent 7d8b039ba7
commit db75bd05ea
5 changed files with 67 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
_includes/components/widgets/recent-posts.njk
View File

@@ -19,7 +19,7 @@
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-red-600 dark:text-red-400 hover:underline break-all line-clamp-1">
Liked {{ likedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -34,7 +34,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline line-clamp-1">
{{ post.data.title or ("Bookmarked " + (bookmarkedUrl | replace("https://", "") | truncate(35))) }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -49,7 +49,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-green-600 dark:text-green-400 hover:underline break-all line-clamp-1">
Reposted {{ repostedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -73,14 +73,37 @@
</div>
</div>
{% elif post.data.title %}
{# Article #}
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-indigo-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline line-clamp-1">
{{ post.data.title }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
{{ (post.data.published or post.date) | dateDisplay }}
</time>
</div>
</div>
{% else %}
{# Article / Note / other #}
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
{{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
{{ (post.data.published or post.date) | dateDisplay }}
</time>
{# Note #}
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline line-clamp-1">
{{ post.templateContent | striptags | truncate(50) or "Note" }}
</a>
<time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
{{ (post.data.published or post.date) | dateDisplay }}
</time>
</div>
</div>
{% endif %}
</li>
{% endfor %}