Files: acdcd1d6473b22d756d92b98bf5e359c4fd6e4eb / plugs / message / html / render / blog.js
2405 bytesRaw
1 | const nest = require('depnest') |
2 | const isBlog = require('scuttle-blog/isBlog') |
3 | const { h, when, resolve } = require('mutant') |
4 | |
5 | exports.gives = nest('message.html', { |
6 | canRender: true, |
7 | render: true |
8 | }) |
9 | |
10 | exports.needs = nest({ |
11 | 'about.obs.color': 'first', |
12 | 'app.navigate': 'first', |
13 | 'blob.sync.url': 'first', |
14 | 'message.html.decorate': 'reduce', |
15 | 'message.html.layout': 'first', |
16 | 'message.html.markdown': 'first', |
17 | 'sbot.obs.connection': 'first' |
18 | }) |
19 | |
20 | exports.create = function (api) { |
21 | return nest('message.html', { |
22 | render: blogRenderer, |
23 | canRender |
24 | }) |
25 | |
26 | function blogRenderer (msg, opts) { |
27 | if (!canRender(msg)) return |
28 | |
29 | var content = null |
30 | // show a card (if there's no body loaded) or the full blog (if the blog body is loaded) |
31 | // msg is decorated with a `body` attribute when loaded using feed.obs.thread from patchcore |
32 | if (msg.body) { |
33 | content = h('BlogFull.Markdown', [ |
34 | h('h1', msg.value.content.title), |
35 | api.message.html.markdown(msg.body) |
36 | ]) |
37 | } else { |
38 | content = BlogCard({ |
39 | blog: msg.value.content, |
40 | onClick: () => api.app.navigate(msg.key), |
41 | color: api.about.obs.color, |
42 | blobUrl: api.blob.sync.url |
43 | }) |
44 | } |
45 | |
46 | const element = api.message.html.layout(msg, Object.assign({}, { |
47 | content, |
48 | layout: 'default' |
49 | }, opts)) |
50 | |
51 | return api.message.html.decorate(element, { msg }) |
52 | } |
53 | } |
54 | |
55 | function BlogCard ({ blog, blobUrl, onClick, color }) { |
56 | const thumbnail = when(blog.thumbnail, |
57 | h('Thumbnail', { |
58 | style: { |
59 | 'background-image': `url("${blobUrl(resolve(blog.thumbnail))}")`, |
60 | 'background-position': 'center', |
61 | 'background-size': 'cover' |
62 | } |
63 | }), |
64 | h('Thumbnail -empty', { |
65 | style: { 'background-color': color(blog.title) } |
66 | }, [ |
67 | h('i.fa.fa-file-text-o') |
68 | ]) |
69 | ) |
70 | |
71 | var b = h('BlogCard', { 'ev-click': onClick }, [ |
72 | // h('div.context', [ |
73 | // api.about.html.avatar(author, 'tiny'), |
74 | // h('div.name', api.about.obs.name(author)), |
75 | // api.message.html.timeago(blog) |
76 | // ]), |
77 | h('div.content', [ |
78 | thumbnail, |
79 | h('div.text.Markdown', [ |
80 | h('h1', blog.title), |
81 | // when(blog.channel, api.message.html.channel(blog.channel)) |
82 | h('div.summary', blog.summary), |
83 | h('div.read', 'Read blog') |
84 | ]) |
85 | ]) |
86 | ]) |
87 | |
88 | return b |
89 | } |
90 | |
91 | function canRender (msg) { |
92 | if (isBlog(msg)) return true |
93 | } |
94 |
Built with git-ssb-web