From a19896333fa459d90f07bb702765dcd5e460dc6c Mon Sep 17 00:00:00 2001
From: dakedres <ramondolive@gmail.com>
Date: Sat, 10 Feb 2024 01:52:18 -0700
Subject: [PATCH] Post details

---
 assets/style.css | 25 +++++++++++++++++++++++--
 lib.js           | 33 +++++++++++++++++++++++++++++----
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 13187d5..8f0ffe3 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -10,19 +10,39 @@ ul {
   list-style-type: none;
 }
 
-p {
+main details {
   padding: 30px;
 }
 
+main ul {
+  /* padding-top: 10px; */
+  padding-inline-start: 0;
+}
+
+main li {
+  clear: both;
+  text-align: right;
+}
+
+main li b {
+  float: left;
+  padding-right: 2ch
+}
+
 img {
   margin: 10px auto;
   max-width: 100%;
 }
 
-p a, footer a {
+summary a, footer a {
   float: right
 }
 
+mark {
+  color: #f66;
+  background: none;
+}
+
 hr {
   clear: both
 }
@@ -34,5 +54,6 @@ footer a {
 @media (prefers-color-scheme: dark) {
   body { background: #000; color: #eee }
   a { color: #ccf }
+  mark { color: #fcc }
   hr { border-color: #555 }
 }
\ No newline at end of file
diff --git a/lib.js b/lib.js
index 971fd10..948d197 100644
--- a/lib.js
+++ b/lib.js
@@ -191,6 +191,7 @@ export const processRssItem = (source, item, reducerCallback) => {
   let dateString = item.querySelector('pubDate').textContent
   let link = item.querySelector('link').textContent
   let guid = item.querySelector('guid')?.textContent
+  let title = item.querySelector('title')?.textContent
 
   let post = {
     source,
@@ -199,7 +200,8 @@ export const processRssItem = (source, item, reducerCallback) => {
     dateString,
     date: new Date(dateString).valueOf() ?? 0,
     link,
-    guid
+    guid,
+    title
   }
   
   return reducerCallback(post)
@@ -297,7 +299,11 @@ export const renderPage = (title, posts, header, footer) => `\
 <header>
 ${header}
 </header>
+<main>
+
 ${posts.map(renderPost).join('\n')}
+
+</main>
 <footer>
 ${footer}
 </footer>
@@ -308,11 +314,32 @@ ${footer}
 export const renderPost = post => {
   let date = new Date(post.date)
 
+  let details = [
+    [ 'source', `<a href="${post.source.hostname}">${post.source.hostname}</a>` ]
+  ]
+
+  if(post.title)
+    details.push([ 'title', `"${post.title}"` ])
+
+  if(post.categories && post.categories.length > 0)
+    details.push([ 'categories', post.categories.map(name => `<mark>${name}</mark>`).join(', ') ])
+
   return `\
 ${post.images.map(renderImage).join('\n')}
-<p><b>${post.source.displayName}</b> ${renderDate(date)} <a href="${post.link}">open</a></p><hr>`
+<details>
+
+<summary><b>${post.source.displayName}</b> ${renderDate(date)} <a href="${post.link}">open</a></summary>
+<ul>
+${details.map(args => renderPostDetail(...args)).join('\n')}
+<ul>
+
+</details>
+<hr>`
 }
 
+export const renderPostDetail = (name, value) =>
+  `<li><b>${name}</b> ${value}</li>`
+
 export const renderImage = href => {
   return `\
 <a href="${href}"><img src="${href}" loading="lazy"></img></a>`
@@ -526,8 +553,6 @@ export const tumblr = {
   },
 
   matchesTags(post, whitelist, blacklist) {
-    post = processCategories(post)
-
     if(whitelist && testWhitelist(post.categories, whitelist)) {
       return false
     }