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