git ssb

10+

Matt McKegg / patchwork



Commit 8c0ec0ef2379cec8464e0a4637c321576ef87cf5

Browse Files

add rendering for blog messages

mix irving committed on 4/6/2018, 7:08:23 AM
Parent: 3e3b75a1c3f76fe6cb7dc5136996b8d33c65b6dd

Files changed

package.jsonchanged
plugs/message/html/render/blog.jsadded
styles/dark/blog-card.mcssadded
styles/light/blog-card.mcssadded
package.jsonView
@@ -55,8 +55,9 @@
5555 "pull-pause": "~0.0.1",
5656 "pull-ping": "^2.0.2",
5757 "pull-pushable": "^2.0.1",
5858 "pull-stream": "~3.6.0",
59+ "scuttle-blog": "^1.0.0",
5960 "scuttlebot": "github:ssbc/scuttlebot#22d894d03235a96f1cad8e836b55ca57eb25d17f",
6061 "secret-stack": "4.0.1",
6162 "sorted-array-functions": "~1.0.0",
6263 "spacetime": "^1.0.7",
plugs/message/html/render/blog.jsView
@@ -1,0 +1,96 @@
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 } = require('mutant')
5+
6+exports.gives = nest('message.html.render')
7+
8+exports.needs = nest({
9+ 'about.obs.color': 'first',
10+ 'blob.sync.url': 'first',
11+ 'message.html.decorate': 'reduce',
12+ 'message.html.layout': 'first',
13+ 'message.html.markdown': 'first',
14+ 'sbot.obs.connection': 'first'
15+})
16+
17+exports.create = function (api) {
18+ return nest('message.html.render', blogRenderer)
19+
20+ function blogRenderer (msg, opts) {
21+ if (!isBlog(msg)) return
22+
23+ var blog = Blog(api.sbot.obs.connection).obs.get(msg)
24+ var showBlog = Value(false)
25+ // var showBlog = Value(true)
26+
27+ const element = api.message.html.layout(msg, Object.assign({}, {
28+ content: when(showBlog,
29+ BlogFull(blog, api.message.html.markdown),
30+ BlogCard({
31+ blog,
32+ onClick: () => showBlog.set(true),
33+ color: api.about.obs.color,
34+ blobUrl: api.blob.sync.url
35+ })
36+ // Sample(blog, api.blob.sync.url, showBlog)
37+ ),
38+ layout: 'default'
39+ }, opts))
40+
41+ return api.message.html.decorate(element, { msg })
42+ }
43+}
44+
45+function BlogFull (blog, renderMd) {
46+ return computed(blog.body, body => {
47+ if (body && body.length) {
48+ return h('BlogFull.Markdown', [
49+ h('h1', blog.title),
50+ renderMd(body)
51+ ])
52+ }
53+
54+ return h('BlogFull.Markdown', [
55+ h('h1', blog.title),
56+ blog.summary,
57+ h('p', 'loading...')
58+ ])
59+ })
60+}
61+
62+function BlogCard ({ blog, blobUrl, onClick, color }) {
63+ const thumbnail = when(blog.thumbnail,
64+ h('Thumbnail', {
65+ style: {
66+ 'background-image': `url("${blobUrl(resolve(blog.thumbnail))}")`,
67+ 'background-position': 'center',
68+ 'background-size': 'cover'
69+ }
70+ }),
71+ h('Thumbnail -empty', {
72+ style: { 'background-color': color(blog.title) }
73+ }, [
74+ h('i.fa.fa-file-text-o')
75+ ])
76+ )
77+
78+ var b = h('BlogCard', { 'ev-click': onClick }, [
79+ // h('div.context', [
80+ // api.about.html.avatar(author, 'tiny'),
81+ // h('div.name', api.about.obs.name(author)),
82+ // api.message.html.timeago(blog)
83+ // ]),
84+ h('div.content', [
85+ thumbnail,
86+ h('div.text.Markdown', [
87+ h('h1', blog.title),
88+ // when(blog.channel, api.message.html.channel(blog.channel))
89+ h('div.summary', blog.summary),
90+ h('div.read', 'Read blog')
91+ ])
92+ ])
93+ ])
94+
95+ return b
96+}
styles/dark/blog-card.mcssView
@@ -1,0 +1,51 @@
1+BlogCard {
2+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px
3+ margin: 2rem 0
4+
5+ display: flex
6+ flex-direction: column
7+
8+ div.content {
9+ display: flex
10+ flex-direction: row
11+ flex-grow: 1
12+
13+ cursor: pointer
14+
15+
16+ div.Thumbnail {
17+ margin-right: 1rem
18+ }
19+
20+ div.text {
21+ padding: .5rem
22+ div.summary {
23+ }
24+ div.read {
25+ margin-top: 1rem
26+ text-decoration: underline
27+ }
28+ }
29+
30+ }
31+ background-color: rgba(255, 255, 255, 0.08)
32+}
33+
34+Thumbnail {
35+ min-width: 20rem
36+ width: 20rem
37+ min-height: 10rem
38+ /* height: 10rem */
39+
40+ -empty {
41+ color: #fff
42+ font-size: 1.8rem
43+ opacity: .8
44+
45+ display: flex
46+ justify-content: center
47+ align-items: center
48+ }
49+}
50+
51+
styles/light/blog-card.mcssView
@@ -1,0 +1,51 @@
1+BlogCard {
2+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px
3+ margin: 2rem 0
4+
5+ display: flex
6+ flex-direction: column
7+
8+ div.content {
9+ display: flex
10+ flex-direction: row
11+ flex-grow: 1
12+
13+ cursor: pointer
14+
15+
16+ div.Thumbnail {
17+ margin-right: 1rem
18+ }
19+
20+ div.text {
21+ padding: .5rem
22+ div.summary {
23+ }
24+ div.read {
25+ margin-top: 1rem
26+ text-decoration: underline
27+ }
28+ }
29+
30+ }
31+ background-color: #fff
32+}
33+
34+Thumbnail {
35+ min-width: 20rem
36+ width: 20rem
37+ min-height: 10rem
38+ /* height: 10rem */
39+
40+ -empty {
41+ color: #fff
42+ font-size: 1.8rem
43+ opacity: .8
44+
45+ display: flex
46+ justify-content: center
47+ align-items: center
48+ }
49+}
50+
51+

Built with git-ssb-web