Sources are categorized, source types are displayed and exist

assets/style.css

@@ -6,19 +6,22 @@ body {
 }
 
 ul {
-  padding-inline-start: 30px;
   list-style-type: none;
 }
 
+header ul {
+  padding-inline-start: 50px;
+  margin-block: 30px;
+}
+
+header li {
+  margin: 20px 0;
+}
+
 main details {
   padding: 30px 10px;
 }
 
-main ul {
-  /* padding-top: 10px; */
-  padding-inline-start: 0;
-}
-
 main li {
   clear: both;
   text-align: right;

lib.js

@@ -388,7 +388,7 @@ export const renderPost = (post, index) => {
 ${post.images.map(renderImage).join('\n')}
 <details>
 
-<summary><b>${post.source.displayName}</b> ${renderDate(new Date(post.date))} <a href="${post.link}">open</a></summary>
+<summary><b>${post.source.displayName} (${post.source.type})</b> ${renderDate(new Date(post.date))} <a href="${post.link}">open</a></summary>
 <ul>
 ${details.map(args => renderPostDetail(...args)).join('\n')}
 <ul>
@@ -412,7 +412,34 @@ export const renderDate = date =>
 export const renderNextPageLink = link => `\
 <a href="${link}">next</a>`
 
-export const renderNav = (feeds, sources) => `\
+export const renderNav = (feeds, sources) => {
+  let sections = {}
+
+  for(let source of sources) {
+    let section = sections[source.type]
+
+    if(section) {
+      section.push(source)
+    } else {
+      sections[source.type] = [
+        source
+      ]
+    }
+  }
+
+  let out = ''
+
+  for(let name in sections) {
+    out += `
+<li>
+
+<b>${name}</b><br>
+${sections[name].map(renderNavEntry).join('\n')}
+
+</li>`
+  }
+
+  return `\
 <details>
 
 <summary>Feeds</summary>
@@ -425,13 +452,14 @@ ${feeds.map(renderNavEntry).join('\n')}
 <hr>
 <ul>
 
-${sources.map(renderNavEntry).join('\n')}
+${out}
 
 </ul>
 </section>
 
 </details>
 <hr>`
+}
 
 export const renderNavEntry = (list) => {
   let extra = ''
@@ -442,7 +470,7 @@ export const renderNavEntry = (list) => {
     extra += ' (empty)'
   }
 
-  return `<li><a href="${getFinalPageFilename(list)}">${list.displayName}</a>${extra}</li>`
+  return `<a href="${getFinalPageFilename(list)}">${list.displayName}</a>${extra}`
 }
 
 
@@ -453,7 +481,7 @@ export const renderNavEntry = (list) => {
 
 export const downloadImage = async (url, basename, courtesyWait, { batch, directory }) => {
   let response = await delayedFetch(url, {}, courtesyWait)
-    .catch(err => console.error(`Failed download of ${url}:`, err) )
+    .catch(err => console.error(`Failed download of ${url}:`, err, err.errors) )
 
   if(response.ok) {
     let relativePath = basename + imageExtensions[response.headers.get('Content-Type')]
@@ -605,12 +633,13 @@ export const tumblr = {
   createSource(user, courtesyWait, postReducerCallback, cache) {
     let lowercaseUser = user.toLowerCase()
     let source = {
+      type: 'tumblr',
       description: `Aggregate feed for @${lowercaseUser} on tumblr.com`,
       hostname: lowercaseUser + '.tumblr.com',
       pathname: 'rss',
       courtesyWait,
       name: `tumblr-${lowercaseUser}`,
-      displayName: user + ' (t)',
+      displayName: user,
       user: lowercaseUser,
     }
 
@@ -645,12 +674,13 @@ export const tumblr = {
 export const nitter = {
   createSource(user, instances, courtesyWait, postReducerCallback, cache) {
     let source = {
+      type: 'nitter',
       description: `Aggregate feed for @${user} on twitter.com`,
       instances,
       pathname: user + '/rss',
       courtesyWait,
       name: `nitter-${user}`,
-      displayName: user + ' (n)',
+      displayName: user,
       user
     }
 
@@ -681,12 +711,13 @@ export const mastodon = {
     let [ user, hostname ] = usertag.toLowerCase().split('@')
     
     let source = {
+      type: 'mastodon',
       description: `Aggregate feed for @${user} at ${hostname}`,
       hostname,
       pathname: '@' + user + ".rss",
       courtesyWait,
       name: `${hostname}-${user}`,
-      displayName: user + ' (m)',
+      displayName: user,
       user,
     }