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