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