svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 06:58:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: audit /news/ page for design system compliance

Browse Source 
- Add font-mono text-sm to all <time> elements (4 dates across 3 views)
- Add font-mono to stat numbers (feeds count, items count, pagination)
- Add shadow-sm to list view and expanded view article cards
- Add border + shadow-sm to stats bar (card depth pattern)
- Add focus:outline-none focus:ring-2 focus:ring-accent-500 to all buttons
  (view mode toggles, pagination prev/next, refresh)
- Fix card view hover to use domain color (accent-400) instead of surface-400
- Fix pagination bug: loadPage() now passes feedId when filter is active,
  preventing feed filter from resetting on page change

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-06 19:41:32 +01:00
parent ee7fa5de7f
commit 12710820f9
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
news.njk
+21 -19
View File
@@ -11,8 +11,8 @@ withSidebar: true
Aggregated content from my favorite feeds Aggregated content from my favorite feeds
</p> </p>
<p class="text-xs text-surface-500 mt-2" x-show="lastUpdated"> <p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span> Last updated: <span class="font-mono" x-text="formatDate(lastUpdated, 'full')"></span>
<button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading"> <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-500 rounded" :disabled="loading">
<svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/> <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> </svg>
@@ -45,7 +45,7 @@ withSidebar: true
<button <button
@click="viewMode = 'list'" @click="viewMode = 'list'"
:class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'" :class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
title="List view" title="List view"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -56,7 +56,7 @@ withSidebar: true
<button <button
@click="viewMode = 'card'" @click="viewMode = 'card'"
:class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'" :class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
title="Card view" title="Card view"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -67,7 +67,7 @@ withSidebar: true
<button <button
@click="viewMode = 'full'" @click="viewMode = 'full'"
:class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'" :class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
title="Expanded view" title="Expanded view"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -81,7 +81,7 @@ withSidebar: true
<div class="relative" x-show="feeds.length > 1"> <div class="relative" x-show="feeds.length > 1">
<select <select
x-model="filterFeed" x-model="filterFeed"
class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500" class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors"
> >
<option value="all">All Sources (<span x-text="feeds.length"></span>)</option> <option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
<template x-for="feed in feeds" :key="feed.id"> <template x-for="feed in feeds" :key="feed.id">
@@ -95,14 +95,14 @@ withSidebar: true
</div> </div>
{# Stats Bar #} {# Stats Bar #}
<div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg text-sm"> <div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-sm">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-surface-500">Feeds:</span> <span class="text-surface-500">Feeds:</span>
<span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span> <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-surface-500">Items:</span> <span class="text-surface-500">Items:</span>
<span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span> <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span>
</div> </div>
<div x-show="status?.status === 'syncing'" class="flex items-center gap-2 text-orange-600 dark:text-orange-400"> <div x-show="status?.status === 'syncing'" class="flex items-center gap-2 text-orange-600 dark:text-orange-400">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"> <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -125,7 +125,7 @@ withSidebar: true
{# List View #} {# List View #}
<div x-show="viewMode === 'list'" class="space-y-3"> <div x-show="viewMode === 'list'" class="space-y-3">
<template x-for="item in filteredItems" :key="item.id"> <template x-for="item in filteredItems" :key="item.id">
<article class="flex items-start gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors"> <article class="flex items-start gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<img <img
x-show="item.imageUrl" x-show="item.imageUrl"
:src="item.imageUrl" :src="item.imageUrl"
@@ -154,7 +154,7 @@ withSidebar: true
x-text="truncate(item.sourceTitle || item.feedTitle, 25)" x-text="truncate(item.sourceTitle || item.feedTitle, 25)"
></a> ></a>
<span x-show="item.author" x-text="'by ' + item.author"></span> <span x-show="item.author" x-text="'by ' + item.author"></span>
<time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time> <time class="font-mono text-sm" :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
<span class="hidden sm:inline" x-show="item.categories?.length"> <span class="hidden sm:inline" x-show="item.categories?.length">
<template x-for="cat in item.categories.slice(0, 3)" :key="cat"> <template x-for="cat in item.categories.slice(0, 3)" :key="cat">
<span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span> <span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span>
@@ -190,7 +190,7 @@ withSidebar: true
{# Card View #} {# Card View #}
<div x-show="viewMode === 'card'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> <div x-show="viewMode === 'card'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<template x-for="item in filteredItems" :key="item.id"> <template x-for="item in filteredItems" :key="item.id">
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden hover:border-surface-400 dark:hover:border-surface-500 transition-colors"> <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<div x-show="item.imageUrl" class="aspect-video bg-surface-100 dark:bg-surface-700"> <div x-show="item.imageUrl" class="aspect-video bg-surface-100 dark:bg-surface-700">
<img <img
:src="item.imageUrl" :src="item.imageUrl"
@@ -212,7 +212,7 @@ withSidebar: true
<p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3 mb-3" x-text="item.description"></p> <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3 mb-3" x-text="item.description"></p>
<div class="flex items-center justify-between text-xs text-surface-500"> <div class="flex items-center justify-between text-xs text-surface-500">
<span class="truncate max-w-[60%]" x-text="truncate(item.sourceTitle || item.feedTitle, 20)"></span> <span class="truncate max-w-[60%]" x-text="truncate(item.sourceTitle || item.feedTitle, 20)"></span>
<time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time> <time class="font-mono text-sm" :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
</div> </div>
<button <button
class="share-post-btn mt-2" class="share-post-btn mt-2"
@@ -243,7 +243,7 @@ withSidebar: true
{# Full/Expanded View #} {# Full/Expanded View #}
<div x-show="viewMode === 'full'" class="space-y-6"> <div x-show="viewMode === 'full'" class="space-y-6">
<template x-for="item in filteredItems" :key="item.id"> <template x-for="item in filteredItems" :key="item.id">
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden"> <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
<div x-show="item.imageUrl" class="aspect-[3/1] bg-surface-100 dark:bg-surface-700"> <div x-show="item.imageUrl" class="aspect-[3/1] bg-surface-100 dark:bg-surface-700">
<img <img
:src="item.imageUrl" :src="item.imageUrl"
@@ -264,7 +264,7 @@ withSidebar: true
<span class="font-medium text-surface-700 dark:text-surface-300" x-text="item.sourceTitle || item.feedTitle"></span> <span class="font-medium text-surface-700 dark:text-surface-300" x-text="item.sourceTitle || item.feedTitle"></span>
</a> </a>
<span x-show="item.author" class="text-surface-600 dark:text-surface-400" x-text="'by ' + item.author"></span> <span x-show="item.author" class="text-surface-600 dark:text-surface-400" x-text="'by ' + item.author"></span>
<time :datetime="item.pubDate" class="text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time> <time :datetime="item.pubDate" class="font-mono text-sm text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time>
</div> </div>
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4"> <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
@@ -329,17 +329,17 @@ withSidebar: true
<button <button
@click="loadPage(pagination.page - 1)" @click="loadPage(pagination.page - 1)"
:disabled="!pagination.hasPrev || loading" :disabled="!pagination.hasPrev || loading"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 focus:outline-none focus:ring-2 focus:ring-accent-500"
> >
Previous Previous
</button> </button>
<span class="px-4 py-2 text-sm text-surface-600 dark:text-surface-400"> <span class="px-4 py-2 text-sm text-surface-600 dark:text-surface-400">
Page <span x-text="pagination.page"></span> of <span x-text="pagination.totalPages"></span> Page <span class="font-mono" x-text="pagination.page"></span> of <span class="font-mono" x-text="pagination.totalPages"></span>
</span> </span>
<button <button
@click="loadPage(pagination.page + 1)" @click="loadPage(pagination.page + 1)"
:disabled="!pagination.hasNext || loading" :disabled="!pagination.hasNext || loading"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 focus:outline-none focus:ring-2 focus:ring-accent-500"
> >
Next Next
</button> </button>
@@ -406,7 +406,9 @@ function newsApp() {
this.loading = true; this.loading = true;
try { try {
const res = await fetch(`/rssapi/api/items?limit=50&page=${page}`).then(r => r.json()); let url = `/rssapi/api/items?limit=50&page=${page}`;
if (this.filterFeed !== 'all') url += `&feedId=${this.filterFeed}`;
const res = await fetch(url).then(r => r.json());
this.items = res.items || []; this.items = res.items || [];
this.pagination = res.pagination || null; this.pagination = res.pagination || null;
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });