git ssb

0+

Daan Patchwork / ssb-viewer



forked from cel / ssb-viewer

Tree: ca9ab26ec6f4f060a9ef89bec77537aa46a99707

Files: ca9ab26ec6f4f060a9ef89bec77537aa46a99707 / render.js

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

Built with git-ssb-web