git ssb

0+

Daan Patchwork / ssb-viewer



forked from cel / ssb-viewer

Tree: aa1697181e2065d65b336d19ad06501921b37c39

Files: aa1697181e2065d65b336d19ad06501921b37c39 / render.js

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

Built with git-ssb-web