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