git ssb

10+

Matt McKegg / patchwork



Commit 59a186b48e46c8378f67af13b60fcc8acc3607a9

Browse Files

Merge pull request #763 from ssbc/blogs

add rendering for blog messages
Matt McKegg authored on 4/11/2018, 3:49:30 AM
GitHub committed on 4/11/2018, 3:49:30 AM
Parent: cffe78daa7a8aafcf50b75ac5781ebb40c10cc0e
Parent: 100dd561a4f0904611f178ea030022058e906aee

Files changed

package-lock.jsonchanged
package.jsonchanged
plugs/message/html/render/blog.jsadded
styles/dark/blog-card.mcssadded
styles/light/blog-card.mcssadded
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 291054 bytes
New file size: 293146 bytes
package.jsonView
@@ -42,9 +42,9 @@
4242 "mutant": "^3.21.2",
4343 "mutant-pull-reduce": "^1.1.0",
4444 "obv": "0.0.1",
4545 "patch-settings": "~1.1.0",
46- "patchcore": "^1.23.6",
46+ "patchcore": "~1.24.0",
4747 "pull-abortable": "^4.1.0",
4848 "pull-cat": "^1.1.11",
4949 "pull-defer": "^0.2.2",
5050 "pull-file": "~1.0.0",
@@ -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,97 @@
1+const nest = require('depnest')
2+const isBlog = require('scuttle-blog/isBlog')
3+const { h, Value, computed, when, resolve } = require('mutant')
4+
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.decorate': 'reduce',
16+ 'message.html.layout': 'first',
17+ 'message.html.markdown': 'first',
18+ 'sbot.obs.connection': 'first'
19+})
20+
21+exports.create = function (api) {
22+
23+ return nest('message.html', {
24+ render: blogRenderer,
25+ canRender
26+ })
27+
28+ return nest('message.html.render', blogRenderer)
29+
30+ function blogRenderer (msg, opts) {
31+ if (!canRender(msg)) return
32+
33+ var content = null
34+ // show a card (if there's no body loaded) or the full blog (if the blog body is loaded)
35+ // msg is decorated with a `body` attribute when loaded using feed.obs.thread from patchcore
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,
44+ onClick: () => api.app.navigate(msg.key),
45+ color: api.about.obs.color,
46+ blobUrl: api.blob.sync.url
47+ })
48+ }
49+
50+ const element = api.message.html.layout(msg, Object.assign({}, {
51+ content,
52+ layout: 'default'
53+ }, opts))
54+
55+ return api.message.html.decorate(element, { msg })
56+ }
57+}
58+
59+function BlogCard ({ blog, blobUrl, onClick, color }) {
60+ const thumbnail = when(blog.thumbnail,
61+ h('Thumbnail', {
62+ style: {
63+ 'background-image': `url("${blobUrl(resolve(blog.thumbnail))}")`,
64+ 'background-position': 'center',
65+ 'background-size': 'cover'
66+ }
67+ }),
68+ h('Thumbnail -empty', {
69+ style: { 'background-color': color(blog.title) }
70+ }, [
71+ h('i.fa.fa-file-text-o')
72+ ])
73+ )
74+
75+ var b = h('BlogCard', { 'ev-click': onClick }, [
76+ // h('div.context', [
77+ // api.about.html.avatar(author, 'tiny'),
78+ // h('div.name', api.about.obs.name(author)),
79+ // api.message.html.timeago(blog)
80+ // ]),
81+ h('div.content', [
82+ thumbnail,
83+ h('div.text.Markdown', [
84+ h('h1', blog.title),
85+ // when(blog.channel, api.message.html.channel(blog.channel))
86+ h('div.summary', blog.summary),
87+ h('div.read', 'Read blog')
88+ ])
89+ ])
90+ ])
91+
92+ return b
93+}
94+
95+function canRender (msg) {
96+ if (isBlog(msg)) return true
97+}
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