Post details

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 }
 }

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
     }