feat: timeline layout with dates on left grouped by day

static/style.css

@@ -140,7 +140,7 @@ main {
 .article-list {
     list-style: none;
     padding: 0;
-    margin: 1rem 0;
+    margin: 0 0 2rem 0;
 }
 
 .article-item {
@@ -189,6 +189,60 @@ main {
     transition: color 0.3s ease;
 }
 
+/* Timeline layout */
+.timeline {
+    position: relative;
+    padding-left: 2rem;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--border-color);
+}
+
+.timeline-date {
+    position: relative;
+    margin: 2rem 0 1rem;
+    padding-left: 1.5rem;
+}
+
+.timeline-date::before {
+    content: '';
+    position: absolute;
+    left: -2.35rem;
+    top: 0.35rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    background: var(--accent-color);
+    border: 2px solid var(--background-color);
+}
+
+.date-label {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--primary-color);
+}
+
+.date-count {
+    margin-left: 0.75rem;
+    font-size: 0.85rem;
+    color: var(--secondary-color);
+}
+
+.article-item {
+    padding-left: 1rem;
+}
+
+.article-main {
+    flex: 1;
+}
+
 /* Pagination */
 .pagination {
     display: flex;

templates/articles.html

@@ -13,15 +13,24 @@
     {% endif %}
 </div>
 
-<ul class="article-list">
-{% for article in articles %}
-    <li class="article-item">
-        <h3><a href="/source/{{ source_slug }}/article/{{ article.id }}">{{ article.title }}</a></h3>
-        <p class="article-date">{{ article.date }}</p>
-        <p class="article-summary">{{ article.summary }}</p>
-    </li>
+<div class="timeline">
+{% for date, articles in articles_by_date %}
+    <div class="timeline-date">
+        <span class="date-label">{{ date }}</span>
+        <span class="date-count">{{ articles|length }} article{% if articles|length != 1 %}s{% endif %}</span>
+    </div>
+    <ul class="article-list">
+    {% for article in articles %}
+        <li class="article-item">
+            <div class="article-main">
+                <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+                <p class="article-summary">{{ article.summary }}</p>
+            </div>
+        </li>
+    {% endfor %}
+    </ul>
 {% endfor %}
-</ul>
+</div>
 
 <div class="pagination">
     {% if pagination.has_prev %}
@@ -32,4 +41,4 @@
         <a href="/source/{{ source_slug }}?page={{ pagination.next_num }}">Next &raquo;</a>
     {% endif %}
 </div>
-{% endblock %}
+{% endblock %}

web_interface.py

@@ -283,11 +283,24 @@ def articles(slug: str):
             }
         )
 
+    from collections import OrderedDict
+    grouped = OrderedDict()
+    for a in articles_data:
+        if a["date"]:
+            try:
+                day = a["date"][:10]
+            except Exception:
+                day = "Unknown"
+        else:
+            day = "Unknown"
+        grouped.setdefault(day, []).append(a)
+
     return render_template(
         "articles.html",
         source_name=source_name.title(),
         source_slug=source_name.lower(),
         articles=articles_data,
+        articles_by_date=grouped.items(),
         pagination=pagination,
     )