git ssb

9+

cel / ssb-viewer



Tree: e3788ada877c767b73918c3d4e8ca406152c492f

Files: e3788ada877c767b73918c3d4e8ca406152c492f / render.js

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

Built with git-ssb-web