git ssb

0+

Daan Patchwork / ssb-viewer



forked from cel / ssb-viewer

Tree: 336a39d74fbef28c1b1f707863fb872bcc447a6c

Files: 336a39d74fbef28c1b1f707863fb872bcc447a6c / render.js

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

Built with git-ssb-web