From 06e62b6bc5e54176e3b01daf2b90e5d8fc6be917 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Mon, 3 Feb 2025 00:54:49 -0800
Subject: [PATCH] Add code to render feed items to the main div

---
 static/css/style.css | 39 ++++++++++++++++++++++++++++++++++++
 static/js/app.js     | 47 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index a6ac755..71b0791 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -495,4 +495,43 @@ button:disabled {
 .setup-form button:disabled {
     background-color: #666;
     cursor: not-allowed;
+}
+
+/* Feed entry styles */
+.feed-entry {
+    background-color: var(--sidebar-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.feed-entry-title {
+    margin: 0 0 1rem 0;
+}
+
+.feed-entry-title a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 1.25rem;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.feed-entry-title a:hover {
+    color: var(--primary-red);
+}
+
+.feed-entry-meta {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+}
+
+.feed-entry-meta span {
+    margin-right: 1rem;
+}
+
+.feed-entry-summary {
+    color: var(--text-color);
+    line-height: 1.5;
 } 
diff --git a/static/js/app.js b/static/js/app.js
index 630a506..e51fdc6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -29,6 +29,52 @@ document.addEventListener('click', (e) => {
     }
 });
 
+function formatDate(dateStr) {
+    if (!dateStr) return 'Not available';
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+}
+
+function renderFeedEntries(entries) {
+    const mainContent = document.querySelector('.main-content');
+    mainContent.innerHTML = '';
+
+    entries.forEach(entry => {
+        const entryDiv = document.createElement('div');
+        entryDiv.className = 'feed-entry';
+
+        const title = document.createElement('h2');
+        title.className = 'feed-entry-title';
+        const titleLink = document.createElement('a');
+        titleLink.href = entry.link || '#';
+        titleLink.target = '_blank';
+        titleLink.textContent = entry.title;
+        title.appendChild(titleLink);
+
+        const meta = document.createElement('div');
+        meta.className = 'feed-entry-meta';
+        if (entry.published) {
+            const published = document.createElement('span');
+            published.textContent = `Published: ${formatDate(entry.published)}`;
+            meta.appendChild(published);
+        }
+        if (entry.updated) {
+            const updated = document.createElement('span');
+            updated.textContent = `Updated: ${formatDate(entry.updated)}`;
+            meta.appendChild(updated);
+        }
+
+        const summary = document.createElement('div');
+        summary.className = 'feed-entry-summary';
+        summary.textContent = entry.summary;
+
+        entryDiv.appendChild(title);
+        entryDiv.appendChild(meta);
+        entryDiv.appendChild(summary);
+        mainContent.appendChild(entryDiv);
+    });
+}
+
 function openFeed(feed) {
     const name = document.createElement('span');
     name.className = 'feed-name';
@@ -47,6 +93,7 @@ function openFeed(feed) {
             if (response.ok) {
                 const data = await response.json();
                 console.log('Feed poll response:', data);
+                renderFeedEntries(data.entries);
             } else {
                 console.error('Failed to poll feed:', response.status);
             }