git ssb

9+

cel / ssb-viewer



Tree: 07dd6934bb87b5461859bed91c1e7761f254db75

Files: 07dd6934bb87b5461859bed91c1e7761f254db75 / render.js

14589 bytesRaw
1var path = require('path');
2var pull = require("pull-stream");
3var marked = require("ssb-marked");
4var htime = require("human-time");
5var emojis = require("emoji-named-characters");
6var cat = require("pull-cat");
7var h = require('hyperscript');
8
9var emojiDir = path.join(require.resolve("emoji-named-characters"), "../pngs");
10
11exports.wrapPage = wrapPage;
12exports.MdRenderer = MdRenderer;
13exports.renderEmoji = renderEmoji;
14exports.formatMsgs = formatMsgs;
15exports.renderThread = renderThread;
16exports.renderAbout = renderAbout;
17exports.renderShowAll = renderShowAll;
18exports.renderRssItem = renderRssItem;
19exports.wrapRss = wrapRss;
20
21function MdRenderer(opts) {
22 marked.Renderer.call(this, {});
23 this.opts = opts;
24}
25
26MdRenderer.prototype = new marked.Renderer();
27
28MdRenderer.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
45MdRenderer.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
59function 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
74function escape(str) {
75 return String(str)
76 .replace(/&/g, "&")
77 .replace(/</g, "&lt;")
78 .replace(/>/g, "&gt;")
79 .replace(/"/g, "&quot;");
80}
81
82function 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
97function wrap(before, after) {
98 return function(read) {
99 return cat([pull.once(before), read, pull.once(after)]);
100 };
101}
102
103function callToAction() {
104 return h('a.call-to-action',
105 { href: 'https://www.scuttlebutt.nz' },
106 'Join Scuttlebutt now').outerHTML;
107}
108
109function 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
116function renderAbout(opts, about, showAllHTML = "") {
117 if (about.publicWebHosting === false) {
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
142function 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
150function renderRssItem(opts) {
151 return pull(
152 pull.map(renderRss.bind(this, opts))
153 );
154}
155
156function 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
170function 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
182var 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 </style>
300`;
301
302function wrapJSON() {
303 var first = true;
304 return pull(pull.map(JSON.stringify), join(","), wrap("[", "]"));
305}
306
307function wrapJSEmbed(opts) {
308 return pull(
309 wrap('<link rel=stylesheet href="' + opts.base + 'static/base.css">', ""),
310 pull.map(docWrite),
311 opts.base_token && rewriteBase(new RegExp(opts.base_token, "g"))
312 );
313}
314
315function rewriteBase(token) {
316 // detect the origin of the script and rewrite the js/html to use it
317 return pull(
318 replace(token, '" + SSB_VIEWER_ORIGIN + "/'),
319 wrap(
320 "var SSB_VIEWER_ORIGIN = (function () {" +
321 'var scripts = document.getElementsByTagName("script")\n' +
322 "var script = scripts[scripts.length-1]\n" +
323 "if (!script) return location.origin\n" +
324 'return script.src.replace(/\\/%.*$/, "")\n' +
325 "}())\n",
326 ""
327 )
328 );
329}
330
331function join(delim) {
332 var first = true;
333 return pull.map(function(val) {
334 if (!first) return delim + String(val);
335 first = false;
336 return val;
337 });
338}
339
340function replace(re, rep) {
341 return pull.map(function(val) {
342 return String(val).replace(re, rep);
343 });
344}
345
346function docWrite(str) {
347 return "document.write(" + JSON.stringify(str) + ")\n";
348}
349
350function renderMsg(opts, id, msg) {
351 var c = msg.value.content || {};
352
353 if (opts.renderPrivate == false && typeof(msg.value.content) == 'string') return ''
354 if (opts.renderSubscribe == false && c.type == "channel" && c.subscribed != undefined) return ''
355 if (opts.renderAbout == false && c.type == "about") return ''
356 if (msg.author.publicWebHosting === false) return h('article', 'User has chosen not to be hosted publicly').outerHTML;
357
358 var name = encodeURIComponent(msg.key);
359 return h('article#' + name,
360 h('header',
361 h('figure',
362 h('img', { alt: '',
363 src: opts.img_base + msg.author.image,
364 height: 50, width: 50 }),
365 h('figcaption',
366 h('a.ssb-avatar-name',
367 { href: opts.base + escape(msg.value.author) },
368 msg.author.name),
369 msgTimestamp(msg, opts.base + name)))),
370 render(opts, id, c)).outerHTML;
371}
372
373function renderRss(opts, msg) {
374 var c = msg.value.content || {};
375 var name = encodeURIComponent(msg.key);
376
377 let content = h('div', render(opts, c)).innerHTML;
378
379 if (!content) {
380 return null;
381 }
382
383 return (
384 '<item>' +
385 '<title>' + escape(c.type || 'private') + '</title>' +
386 '<author>' + escape(msg.author.name) + '</author>' +
387 '<description><![CDATA[' + content + ']]></description>' +
388 '<link>' + opts.base + escape(name) + '</link>' +
389 '<pubDate>' + new Date(msg.value.timestamp).toUTCString() + '</pubDate>' +
390 '<guid>' + msg.key + '</guid>' +
391 '</item>'
392 );
393}
394
395function msgTimestamp(msg, link) {
396 var date = new Date(msg.value.timestamp);
397 var isoStr = date.toISOString();
398 return h('time.ssb-timestamp',
399 { datetime: isoStr },
400 h('a',
401 { href: link,
402 title: isoStr },
403 formatDate(date)));
404}
405
406function formatDate(date) {
407 return htime(date);
408}
409
410function render(opts, id, c) {
411 var base = opts.base;
412 if (!c) return
413 if (c.type === "post") {
414 var channel = c.channel
415 ? h('div.top-right',
416 h('a',
417 { href: base + 'channel/' + c.channel },
418 '#' + c.channel))
419 : "";
420 return [channel, renderPost(opts, id, c)];
421 } else if (c.type == "vote" && c.vote.expression == "Dig") {
422 var channel = c.channel
423 ? [' in ',
424 h('a',
425 { href: base + 'channel/' + c.channel },
426 '#' + c.channel)]
427 : "";
428 var linkedText = "this";
429 if (typeof c.vote.linkedText != "undefined")
430 linkedText = c.vote.linkedText.substring(0, 75);
431 return h('span.status',
432 ['Liked ',
433 h('a', { href: base + c.vote.link }, linkedText),
434 channel]);
435 } else if (c.type == "vote") {
436 var linkedText = "this";
437 if (typeof c.vote.linkedText != "undefined")
438 linkedText = c.vote.linkedText.substring(0, 75);
439 return h('span.status',
440 ['Voted ',
441 h('a', { href: base + c.vote.link }, linkedText)]);
442 } else if (c.type == "contact" && c.following) {
443 var name = c.contact;
444 if (typeof c.contactAbout != "undefined")
445 name = c.contactAbout.name;
446 return h('span.status',
447 ['Followed ',
448 h('a', { href: base + c.contact }, name)]);
449 } else if (c.type == "contact" && !c.following) {
450 var name = c.contact;
451 if (typeof c.contactAbout != "undefined")
452 name = c.contactAbout.name;
453 return h('span.status',
454 ['Unfollowed ',
455 h('a', { href: base + c.contact }, name)]);
456 } else if (typeof c == "string") {
457 return h('span.status', 'Wrote something private')
458 } else if (c.type == "chess_move") {
459 return h('span.status', 'Moved a chess piece')
460 } else if (c.type == "chess_invite") {
461 return h('span.status', 'Started a chess game')
462 }
463 else if (c.type == "about") {
464 return [h('span.status', 'Changed something in about'),
465 renderDefault(c)];
466 }
467 else if (c.type == "issue") {
468 return [h('span.status',
469 "Created a git issue" +
470 (c.repoName != undefined ? " in repo " + c.repoName : ""),
471 renderPost(opts, id, c))];
472 }
473 else if (c.type == "git-repo") {
474 return h('span.status',
475 "Created a git repo " + c.name);
476 }
477 else if (c.type == "git-update") {
478 var s = h('span.status');
479 s.innerHTML = "Did a git update " +
480 (c.repoName != undefined ? " in repo " + c.repoName : "") +
481 '<br>' +
482 (c.commits != undefined ?
483 c.commits.map(com => { return "-" +com.title; }).join('<br>') : "");
484 return s;
485 }
486 else if (c.type == "ssb-dns") {
487 return [h('span.status', 'Updated DNS'), renderDefault(c)];
488 }
489 else if (c.type == "pub") {
490 return h('span.status', 'Connected to the pub ' + c.address.host);
491 }
492 else if (c.type == "npm-packages") {
493 return [h('span.status', 'Pushed npm packages')];
494 }
495 else if (c.type == "channel" && c.subscribed)
496 return h('span.status',
497 'Subscribed to channel ',
498 h('a',
499 { href: base + 'channel/' + c.channel },
500 '#' + c.channel));
501 else if (c.type == "channel" && !c.subscribed)
502 return h('span.status',
503 'Unsubscribed from channel ',
504 h('a',
505 { href: base + 'channel/' + c.channel },
506 '#' + c.channel))
507 else return renderDefault(c);
508}
509
510function renderPost(opts, id, c) {
511 opts.mentions = {};
512 if (Array.isArray(c.mentions)) {
513 c.mentions.forEach(function (link) {
514 if (link && link.name && link.link)
515 opts.mentions[link.name] = link.link;
516 });
517 }
518 var s = h('section');
519 var content = '';
520 if (c.root && c.root != id)
521 content += 'Re: ' + h('a',
522 { href: '/' + encodeURIComponent(c.root) },
523 c.root.substring(0, 10)).outerHTML + '<br>';
524 s.innerHTML = content + marked(String(c.text), opts.marked);
525 return s;
526}
527
528function renderDefault(c) {
529 return h('pre', JSON.stringify(c, 0, 2));
530}
531
532function renderShowAll(url) {
533 if (!url.endsWith("?showAll"))
534 return '<br>' + h('a', { href : url + '?showAll' }, 'Show whole feed').outerHTML;
535}
536

Built with git-ssb-web