render feed with about description and larger image on top

index.js

@@ -15,7 +15,8 @@ var {
     renderEmoji,
     formatMsgs,
     wrapPage,
-    renderThread
+    renderThread,
+    renderAbout
 } = require('./render');
 
 var appHash = hash([fs.readFileSync(__filename)])
@@ -108,7 +109,7 @@ exports.init = function (sbot, config) {
 		      paramap(addFollowAbout, 8),
 		      paramap(addVoteMessage, 8),
 		      paramap(addGitLinks, 8),
-		      pull(renderThread(defaultOpts), wrapPage(about.name)),
+		      pull(renderAbout(defaultOpts, about), wrapPage(about.name)),
 		      toPull(res, function (err) {
 			  if (err) console.error('[viewer]', err)
 		      })

render.js

@@ -12,6 +12,7 @@ exports.MdRenderer = MdRenderer;
 exports.renderEmoji = renderEmoji;
 exports.formatMsgs = formatMsgs;
 exports.renderThread = renderThread;
+exports.renderAbout = renderAbout;
 
 function MdRenderer(opts) {
   marked.Renderer.call(this, {});
@@ -94,6 +95,30 @@ function wrap(before, after) {
   };
 }
 
+function renderAbout(opts, about) {
+  return pull(
+    pull.map(renderMsg.bind(this, opts)),
+    wrap(
+      '<span class="top-tip">You are reading content from ' +
+        '<a href="https://www.scuttlebutt.nz">Scuttlebutt</a>' +
+      '</span>' +
+      '<main>' +
+      '<article><header><figure>' +
+      '<img src="' + opts.img_base + escape(about.image) + '" ' +
+            'height="200" width="200"><figcaption>' +
+	    'Feed of ' + about.name + '<br/>' +
+	    (about.description != undefined ? 
+	     marked(about.description, opts.marked) : '') +
+	    '</figcaption></figure></header></article>', 
+
+      '</main>' +
+      '<a class="call-to-action" href="https://www.scuttlebutt.nz">' +
+        'Join Scuttlebutt now' +
+      '</a>'
+    )
+  );
+}
+
 function renderThread(opts) {
   return pull(
     pull.map(renderMsg.bind(this, opts)),