| plugs/message/html/render/blog.jsView |
|---|
| 1 | 1 | const nest = require('depnest') |
| 2 | | -const Blog = require('scuttle-blog') |
| 3 | 2 | const isBlog = require('scuttle-blog/isBlog') |
| 4 | 3 | const { h, Value, computed, when, resolve } = require('mutant') |
| 5 | 4 | |
| 6 | | -exports.gives = nest('message.html.render') |
| 7 | 5 | |
| 6 | +exports.gives = nest('message.html', { |
| 7 | + canRender: true, |
| 8 | + render: true |
| 9 | +}) |
| 10 | + |
| 8 | 11 | exports.needs = nest({ |
| 9 | 12 | 'about.obs.color': 'first', |
| 10 | 13 | 'app.navigate': 'first', |
| 11 | 14 | 'blob.sync.url': 'first', |
| 15 | 18 | 'sbot.obs.connection': 'first' |
| 16 | 19 | }) |
| 17 | 20 | |
| 18 | 21 | exports.create = function (api) { |
| 22 | + |
| 23 | + return nest('message.html', { |
| 24 | + render: blogRenderer, |
| 25 | + canRender |
| 26 | + }) |
| 27 | + |
| 19 | 28 | return nest('message.html.render', blogRenderer) |
| 20 | 29 | |
| 21 | 30 | function blogRenderer (msg, opts) { |
| 22 | | - if (!isBlog(msg)) return |
| 31 | + if (!canRender(msg)) return |
| 23 | 32 | |
| 24 | | - var blog = Blog(api.sbot.obs.connection).obs.get(msg) |
| 25 | | - var content = opts.renderAsCard |
| 26 | | - ? BlogCard({ |
| 27 | | - blog, |
| 33 | + var content = null |
| 34 | + |
| 35 | + |
| 36 | + if (msg.body) { |
| 37 | + content = h('BlogFull.Markdown', [ |
| 38 | + h('h1', msg.value.content.title), |
| 39 | + api.message.html.markdown(msg.body) |
| 40 | + ]) |
| 41 | + } else { |
| 42 | + content = BlogCard({ |
| 43 | + blog: msg.value.content, |
| 28 | 44 | onClick: () => api.app.navigate(msg.key), |
| 29 | 45 | color: api.about.obs.color, |
| 30 | 46 | blobUrl: api.blob.sync.url |
| 31 | 47 | }) |
| 32 | | - : BlogFull(blog, api.message.html.markdown) |
| 33 | | - |
| 48 | + } |
| 49 | + |
| 34 | 50 | const element = api.message.html.layout(msg, Object.assign({}, { |
| 35 | 51 | content, |
| 36 | 52 | layout: 'default' |
| 37 | 53 | }, opts)) |
| 39 | 55 | return api.message.html.decorate(element, { msg }) |
| 40 | 56 | } |
| 41 | 57 | } |
| 42 | 58 | |
| 43 | | -function BlogFull (blog, renderMd) { |
| 44 | | - return computed(blog.body, body => { |
| 45 | | - if (body && body.length) { |
| 46 | | - return h('BlogFull.Markdown', [ |
| 47 | | - h('h1', blog.title), |
| 48 | | - renderMd(body) |
| 49 | | - ]) |
| 50 | | - } |
| 51 | | - |
| 52 | | - return h('BlogFull.Markdown', [ |
| 53 | | - h('h1', blog.title), |
| 54 | | - blog.summary, |
| 55 | | - h('p', 'loading...') |
| 56 | | - ]) |
| 57 | | - }) |
| 58 | | -} |
| 59 | | - |
| 60 | 59 | function BlogCard ({ blog, blobUrl, onClick, color }) { |
| 61 | 60 | const thumbnail = when(blog.thumbnail, |
| 62 | 61 | h('Thumbnail', { |
| 63 | 62 | style: { |
| 91 | 90 | ]) |
| 92 | 91 | |
| 93 | 92 | return b |
| 94 | 93 | } |
| 94 | + |
| 95 | +function canRender (msg) { |
| 96 | + return msg.value && msg.value.content && msg.value.content.type === 'blog' && isBlog(msg) |
| 97 | +} |