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