git ssb

1
const nest = require('depnest')
2
const Blog = require('scuttle-blog')
3
const isBlog = require('scuttle-blog/isBlog')
4
const { h, Value, computed, when, resolve, onceTrue } = require('mutant')
5
const isEmpty = require('lodash/isEmpty')
6
7
exports.gives = nest('message.html.render')
8
9
exports.needs = nest({
10
  'about.obs.color': 'first',
11
  'blob.sync.url': 'first',
12
  'message.html.decorate': 'reduce',
13
  'message.html.layout': 'first',
14
  'message.html.markdown': 'first',
15
  'sbot.obs.connection': 'first',
16
  // 'history.sync.push': 'first',
17
})
18
19
exports.create = function (api) {
20
  return nest('message.html.render', blogRenderer)
21
22
  function blogRenderer (msg, opts) {
23
    if (!isBlog(msg)) return
24
25
    var blog = Blog(api.sbot.obs.connection).obs.get(msg)
26
    var showBlog = Value(false)
27
28
    const element = api.message.html.layout(msg, Object.assign({}, {
29
      content: when(showBlog,
30
        BlogFull(blog, api.message.html.markdown),
31
        BlogCard({
32
          blog,
33
          onClick: () => showBlog.set(true),
34
          color: api.about.obs.color,
35
          blobUrl: api.blob.sync.url
36
        })
37
        // Sample(blog, api.blob.sync.url, showBlog)
38
      ),
39
      layout: 'default'
40
    }, opts))
41
42
    return api.message.html.decorate(element, { msg })
43
44
  }
45
}
46
47
function BlogFull (blog, renderMd) {
48
  return computed(blog.body, body => {
49
    if (!isEmpty(body)) { 
50
      return h('BlogFull.Markdown', [
51
        h('h1', blog.title),
52
        renderMd(body)
53
      ])
54
    }
55
56
    return h('BlogFull.Markdown', [
57
      h('h1', blog.title),
58
      blog.summary,
59
      h('p', 'loading...')
60
    ])
61
  })
62
}
63
64
function BlogCard ({ blog, blobUrl, onClick, color }) {
65
  const thumbnail = when(blog.thumbnail,
66
    h('Thumbnail', {
67
      style: {
68
        'background-image': `url("${blobUrl(resolve(blog.thumbnail))}")`,
69
        'background-position': 'center',
70
        'background-size': 'cover'
71
      }
72
    }),
73
    h('Thumbnail -empty', { 
74
      style: { 'background-color': color(blog.title) }
75
    }, [
76
      h('i.fa.fa-file-text-o')
77
    ])
78
  )
79
80
  var b = h('BlogCard', { 'ev-click': onClick }, [
81
    // h('div.context', [
82
    //   api.about.html.avatar(author, 'tiny'),
83
    //   h('div.name', api.about.obs.name(author)),
84
    //   api.message.html.timeago(blog)
85
    // ]),
86
    h('div.content', [
87
      thumbnail,
88
      h('div.text.Markdown', [
89
        h('h1', blog.title),
90
        // when(blog.channel, api.message.html.channel(blog.channel))
91
        h('div.summary', blog.summary),
92
        h('div.read', 'Read blog')
93
      ])
94
    ])
95
  ])
96
97
  return b
98
}
99
100