git ssb

1
var path = require('path');
2
var pull = require("pull-stream");
3
var marked = require("ssb-marked");
4
var htime = require("human-time");
5
var emojis = require("emoji-named-characters");
6
var cat = require("pull-cat");
7
var h = require('hyperscript');
8
9
var emojiDir = path.join(require.resolve("emoji-named-characters"), "../pngs");
10
11
exports.wrapPage = wrapPage;
12
exports.MdRenderer = MdRenderer;
13
exports.renderEmoji = renderEmoji;
14
exports.formatMsgs = formatMsgs;
15
exports.renderThread = renderThread;
16
exports.renderAbout = renderAbout;
17
exports.renderShowAll = renderShowAll;
18
exports.renderRssItem = renderRssItem;
19
exports.wrapRss = wrapRss;
20
21
function MdRenderer(opts) {
22
  marked.Renderer.call(this, {});
23
  this.opts = opts;
24
}
25
26
MdRenderer.prototype = new marked.Renderer();
27
28
MdRenderer.prototype.urltransform = function(href) {
29
  if (!href) return false;
30
  switch (href[0]) {
31
    case "#":
32
      return this.opts.base + "channel/" + href.slice(1);
33
    case "%":
34
      return this.opts.msg_base + encodeURIComponent(href);
35
    case "@":
36
      href = this.opts.mentions[href.substr(1)] || href;
37
      return this.opts.feed_base + encodeURIComponent(href);
38
    case "&":
39
      return this.opts.blob_base + encodeURIComponent(href);
40
  }
41
  if (href.indexOf("javascript:") === 0) return false;
42
  return href;
43
};
44
45
MdRenderer.prototype.image = function(href, title, text) {
46
  return h('img',
47
	   { src: this.opts.img_base + href,
48
	     alt: text,
49
	     title: title
50
	   }).outerHTML;
51
};
52
53
function renderEmoji(emoji) {
54
  var opts = this.renderer.opts;
55
  var mentions = opts.mentions;
56
  var url = mentions[emoji]
57
    ? opts.blob_base + encodeURIComponent(mentions[emoji])
58
    : emoji in emojis && opts.emoji_base + escape(emoji) + '.png';
59
  return url
60
	? h('img.ssb-emoji',
61
	    { src: url,
62
	      alt: ':' + escape(emoji) + ':',
63
	      title: ':' + escape(emoji) + ':',
64
	      height: 16, width: 16
65
	    }).outerHTML
66
    : ":" + emoji + ":";
67
}
68
69
function escape(str) {
70
  return String(str)
71
    .replace(/&/g, "&")
72
    .replace(/</g, "&lt;")
73
    .replace(/>/g, "&gt;")
74
    .replace(/"/g, "&quot;");
75
}
76
77
function formatMsgs(id, ext, opts) {
78
  switch (ext || "html") {
79
    case "html":
80
      return pull(renderThread(opts), wrapPage(id));
81
    case "js":
82
      return pull(renderThread(opts), wrapJSEmbed(opts));
83
    case "json":
84
      return wrapJSON();
85
    case "rss":
86
      return pull(renderRssItem(opts), wrapRss(id, opts));
87
    default:
88
      return null;
89
  }
90
}
91
92
function wrap(before, after) {
93
  return function(read) {
94
    return cat([pull.once(before), read, pull.once(after)]);
95
  };
96
}
97
98
function callToAction() {
99
  return h('a.call-to-action',
100
	   { href: 'https://www.scuttlebutt.nz' },
101
	   'Join Scuttlebutt now').outerHTML;
102
}
103
104
function toolTipTop() {
105
  return h('span.top-tip',
106
	   'You are reading content from ',
107
	   h('a', { href: 'https://www.scuttlebutt.nz' },
108
	     'Scuttlebutt')).outerHTML;
109
}
110
111
function renderAbout(opts, about, showAllHTML = "") {
112
  var figCaption = h('figcaption');
113
  figCaption.innerHTML = 'Feed of ' + about.name + '<br>' +
114
	(about.description != undefined ? 
115
	 marked(about.description, opts.marked) : '');
116
  return pull(
117
    pull.map(renderMsg.bind(this, opts)),
118
    wrap(toolTipTop() + '<main>' +
119
	 h('article',
120
	   h('header',
121
	     h('figure',
122
	       h('img',
123
		 { src: opts.img_base + about.image,
124
		   height: 200,
125
		   width: 200
126
		 }),
127
	       figCaption)
128
	    )).outerHTML,
129
	 showAllHTML + '</main>' + callToAction())
130
  );
131
}
132
133
function renderThread(opts, showAllHTML = "") {
134
  return pull(
135
    pull.map(renderMsg.bind(this, opts)),
136
    wrap(toolTipTop() + '<main>', 
137
	 showAllHTML + '</main>' + callToAction())
138
  );
139
}
140
141
function renderRssItem(opts) {
142
  return pull(
143
    pull.map(renderRss.bind(this, opts))
144
  );
145
}
146
147
function wrapPage(id) {
148
  return wrap(
149
    "<!doctype html><html><head>" +
150
      "<meta charset=utf-8>" +
151
      "<title>" +
152
      id + " | ssb-viewer" +
153
      "</title>" +
154
      '<meta name=viewport content="width=device-width,initial-scale=1">' +
155
      styles +
156
      "</head><body>",
157
    "</body></html>"
158
  );
159
}
160
161
function wrapRss(id, opts) {
162
  return wrap(
163
    '<?xml version="1.0" encoding="UTF-8" ?>' +
164
    '<rss version="2.0">' +
165
      '<channel>' +
166
        '<title>' + id + ' | ssb-viewer</title>',
167
168
      '</channel>'+
169
    '</rss>'
170
  );
171
}
172
173
var styles = `
174
  <style>
175
    html { background-color: #f1f3f5; }
176
    body {
177
      color: #212529;
178
      font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
179
      -webkit-font-smoothing: antialiased;
180
      -moz-osx-font-smoothing: grayscale;
181
      letter-spacing: 0.02em;
182
      padding-top: 30px;
183
      padding-bottom: 50px;
184
    }
185
    a { color: #364fc7; }
186
187
    .top-tip, .top-tip a {
188
      color: #868e96;
189
    }
190
    .top-tip {
191
      text-align: center;
192
      display: block;
193
      margin-bottom: 10px;
194
      font-size: 14px;
195
    }
196
    main { margin: 0 auto; max-width: 40rem; }
197
    main article:first-child { border-radius: 3px 3px 0 0; }
198
    main article:last-child { border-radius: 0 0 3px 3px; }
199
    article {
200
      background-color: white;
201
      padding: 20px;
202
      box-shadow: 0 1px 3px #949494;
203
      position: relative;
204
    }
205
    .top-right { position: absolute; top: 20px; right: 20px; }
206
    article > header { margin-bottom: 20px; }
207
    article > header > figure {
208
      margin: 0; display: flex;
209
    }
210
    article > header > figure > img {
211
      border-radius: 2px; margin-right: 10px;
212
    }
213
    article > header > figure > figcaption {
214
      display: flex; flex-direction: column; justify-content: space-around;
215
    }
216
    .ssb-avatar-name { font-size: 1.2em; font-weight: bold; }
217
    time a { color: #868e96; }
218
    .ssb-avatar-name, time a {
219
      text-decoration: none;
220
    }
221
    .ssb-avatar-name:hover, time:hover a {
222
      text-decoration: underline;
223
    }
224
    section p { line-height: 1.45em; }
225
    section p img {
226
      max-width: 100%;
227
      max-height: 50vh;
228
      margin: 0 auto;
229
    }
230
    .status {
231
      font-style: italic;
232
    }
233
234
    code {
235
      display: inline;
236
      padding: 2px 5px;
237
      font-weight: 600;
238
      background-color: #e9ecef;
239
      border-radius: 3px;
240
      color: #495057;
241
    }
242
    blockquote {
243
      padding-left: 1.2em;
244
      margin: 0;
245
      color: #868e96;
246
      border-left: 5px solid #ced4da;
247
    }
248
    pre {
249
      background-color: #212529;
250
      color: #ced4da;
251
      font-weight: bold;
252
      padding: 5px;
253
      border-radius: 3px;
254
      position: relative;
255
    }
256
    pre::before {
257
      content: "METADATA";
258
      position: absolute;
259
      top: -7px;
260
      left: 0px;
261
      background-color: #212529;
262
      padding: 2px 4px 0;
263
      border-radius: 2px;
264
      font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
265
      font-size: 9px;
266
    }
267
    .call-to-action {
268
      display: block;
269
      margin: 0 auto;
270
      width: 13em;
271
      text-align: center;
272
      text-decoration: none;
273
      margin-top: 20px;
274
      margin-bottom: 60px;
275
      background-color: #5c7cfa;
276
      padding: 15px 0;
277
      color: #edf2ff;
278
      border-radius: 3px;
279
      border-bottom: 3px solid #3b5bdb;
280
    }
281
    .call-to-action:hover {
282
      background-color: #748ffc;
283
      border-bottom: 3px solid #4c6ef5;
284
    }
285
  </style>
286
`;
287
288
function wrapJSON() {
289
  var first = true;
290
  return pull(pull.map(JSON.stringify), join(","), wrap("[", "]"));
291
}
292
293
function wrapJSEmbed(opts) {
294
  return pull(
295
    wrap('<link rel=stylesheet href="' + opts.base + 'static/base.css">', ""),
296
    pull.map(docWrite),
297
    opts.base_token && rewriteBase(new RegExp(opts.base_token, "g"))
298
  );
299
}
300
301
function rewriteBase(token) {
302
  // detect the origin of the script and rewrite the js/html to use it
303
  return pull(
304
    replace(token, '" + SSB_VIEWER_ORIGIN + "/'),
305
    wrap(
306
      "var SSB_VIEWER_ORIGIN = (function () {" +
307
        'var scripts = document.getElementsByTagName("script")\n' +
308
        "var script = scripts[scripts.length-1]\n" +
309
        "if (!script) return location.origin\n" +
310
        'return script.src.replace(/\\/%.*$/, "")\n' +
311
        "}())\n",
312
      ""
313
    )
314
  );
315
}
316
317
function join(delim) {
318
  var first = true;
319
  return pull.map(function(val) {
320
    if (!first) return delim + String(val);
321
    first = false;
322
    return val;
323
  });
324
}
325
326
function replace(re, rep) {
327
  return pull.map(function(val) {
328
    return String(val).replace(re, rep);
329
  });
330
}
331
332
function docWrite(str) {
333
  return "document.write(" + JSON.stringify(str) + ")\n";
334
}
335
336
function renderMsg(opts, msg) {
337
  var c = msg.value.content || {};
338
  var name = encodeURIComponent(msg.key);
339
  return h('article#' + name,
340
	   h('header',
341
	     h('figure',
342
	       h('img', { alt: '',
343
			  src: opts.img_base + msg.author.image,
344
			  height: 50, width: 50 }),
345
	       h('figcaption',
346
		 h('a.ssb-avatar-name',
347
		   { href: opts.base + escape(msg.value.author) },
348
		   msg.author.name),
349
		 msgTimestamp(msg, opts.base + name)))),
350
	   render(opts, c)).outerHTML;
351
}
352
353
function renderRss(opts, msg) {
354
  var c = msg.value.content || {};
355
  var name = encodeURIComponent(msg.key);
356
357
  let content = h('div', render(opts, c)).innerHTML;
358
359
  if (!content) {
360
    return null;
361
  }
362
363
  return (
364
    '<item>' +
365
      '<title>' + escape(msg.author.name + ' | ' + (c.type || 'private')) + '</title>' +
366
      '<description><![CDATA[' + content + ']]></description>' +
367
      '<link>' + opts.base + escape(name) + '</link>' +
368
      '<pubDate>' + new Date(msg.value.timestamp).toUTCString() + '</pubDate>' +
369
      '<guid>' + msg.key + '</guid>' +
370
    '</item>'
371
  );
372
}
373
374
function msgTimestamp(msg, link) {
375
  var date = new Date(msg.value.timestamp);
376
  var isoStr = date.toISOString();
377
  return h('time.ssb-timestamp',
378
	   { datetime: isoStr },
379
	   h('a',
380
	     { href: link,
381
	       title: isoStr },
382
	     formatDate(date)));
383
}
384
385
function formatDate(date) {
386
  return htime(date);
387
}
388
389
function render(opts, c) {
390
  var base = opts.base;
391
  if (c.type === "post") {
392
    var channel = c.channel
393
	? h('div.top-right',
394
	    h('a',
395
	      { href: base + 'channel/' + c.channel },
396
	      '#' + c.channel))
397
	: "";
398
    return [channel, renderPost(opts, c)];
399
  } else if (c.type == "vote" && c.vote.expression == "Dig") {
400
    var channel = c.channel
401
	? [' in ',
402
	   h('a',
403
	     { href: base + 'channel/' + c.channel },
404
	     '#' + c.channel)]
405
	: "";
406
    var linkedText = "this";
407
    if (typeof c.vote.linkedText != "undefined")
408
	linkedText = c.vote.linkedText.substring(0, 75);
409
    return h('span.status',
410
	     ['Liked ',
411
	      h('a', { href: base + c.vote.link }, linkedText),
412
	      channel]);
413
  } else if (c.type == "vote") {
414
    var linkedText = "this";
415
    if (typeof c.vote.linkedText != "undefined")
416
      linkedText = c.vote.linkedText.substring(0, 75);
417
      return h('span.status',
418
	       ['Voted ',
419
		h('a', { href: base + c.vote.link }, linkedText)]);
420
  } else if (c.type == "contact" && c.following) {
421
    var name = c.contact;
422
    if (typeof c.contactAbout != "undefined")
423
	name = c.contactAbout.name;
424
    return h('span.status',
425
	     ['Followed ',
426
	      h('a', { href: base + c.contact }, name)]);
427
  } else if (c.type == "contact" && !c.following) {
428
    var name = c.contact;
429
    if (typeof c.contactAbout != "undefined")
430
	name = c.contactAbout.name;
431
    return h('span.status',
432
	     ['Unfollowed ',
433
	      h('a', { href: base + c.contact }, name)]);
434
  } else if (typeof c == "string") {
435
    return h('span.status', 'Wrote something private')
436
  }
437
  else if (c.type == "about") {
438
    return [h('span.status', 'Changed something in about'),
439
 	    renderDefault(c)];
440
  }
441
  else if (c.type == "issue") {
442
    return [h('span.status',
443
	     "Created a git issue" +
444
	      (c.repoName != undefined ? " in repo " + c.repoName : ""),
445
	      renderPost(opts, c))];
446
  }
447
  else if (c.type == "git-update") {
448
    return h('span.status',
449
	     "Did a git update " +
450
	     (c.repoName != undefined ? " in repo " + c.repoName : "") +
451
	     '<br>' +
452
	     (c.commits != undefined ?
453
	      c.commits.map(com => { return "-" +com.title; }).join('<br>') : ""));
454
  }
455
  else if (c.type == "ssb-dns") {
456
    return [h('span.status', 'Updated DNS'), renderDefault(c)];
457
  }
458
  else if (c.type == "pub") {
459
    return h('span.status', 'Connected to the pub ' + c.address.host);
460
  }
461
  else if (c.type == "channel" && c.subscribed)
462
    return h('span.status',
463
	     'Subscribed to channel ',
464
	     h('a',
465
	       { href: base + 'channel/' + c.channel },
466
	       '#' + c.channel));
467
  else if (c.type == "channel" && !c.subscribed)
468
    return h('span.status',
469
	     'Unsubscribed from channel ',
470
	     h('a',
471
	       { href: base + 'channel/' + c.channel },
472
	       '#' + c.channel))
473
  else return renderDefault(c);
474
}
475
476
function renderPost(opts, c) {
477
  opts.mentions = {};
478
  if (Array.isArray(c.mentions)) {
479
      c.mentions.forEach(function (link) {
480
	  if (link && link.name && link.link)
481
	      opts.mentions[link.name] = link.link;
482
      });
483
  }
484
  var s = h('section');
485
  s.innerHTML = marked(String(c.text), opts.marked);
486
  return s;
487
}
488
489
function renderDefault(c) {
490
  return h('pre', JSON.stringify(c, 0, 2));
491
}
492
493
function renderShowAll(showAll, url) {
494
    if (showAll)
495
	return '';
496
    else
497
	return '<br>' + h('a', { href : url + '?showAll' }, 'Show whole feed').outerHTML;
498
}
499