git ssb - blogSearch minimal + openExternal

Commit 9de2656efd585098ef7eb72d618684bd03e34c37

blogSearch minimal + openExternal

mix irving committed on 12/1/2017, 5:21:20 AM
Parent: d01f8cc07bc8311ed0717219f766c6a4dd7cec7a

Files changed

app/async/catch-link-click.js	changed
app/html/blogCard.js	changed
app/html/blogCard.mcss	changed
app/html/context.mcss	changed
app/html/thread.mcss	changed
app/html/blogHeader.js	deleted
app/html/blogNav.js	added
app/html/blogHeader.mcss	deleted
app/html/blogNav.mcss	added
app/index.js	changed
app/page/blogIndex.js	changed
app/page/blogIndex.mcss	changed
app/page/blogSearch.js	changed
app/page/blogSearch.mcss	changed
app/page/blogShow.js	changed
app/page/blogShow.mcss	changed
app/page/settings.js	changed
app/sync/initialize/clickHandler.js	changed
message/html/channel.js	changed
styles/button.mcss	changed
translations/en.js	changed

app/async/catch-link-click.jsView
		@@ -37,9 +37,9 @@
37	37
38	38	if (isMsg(href)) {
39	39	api.sbot.async.get(href, (err, data) => {
40	40	// NOTE the catchLinkClick cb has signature (link, opts)
41		- cb(err \|\| data, opts)
	41	+ cb(err \|\| {key:href, value: data}, opts)
42	42	})
43	43	return
44	44	}
45	45

app/html/blogCard.jsView
		@@ -23,13 +23,15 @@
23	23
24	24	exports.needs = nest({
25	25	'keys.sync.id': 'first',
26	26	'history.sync.push': 'first',
	27	+ 'about.obs.color': 'first',
27	28	'about.obs.name': 'first',
28	29	'about.html.avatar': 'first',
29	30	'translations.sync.strings': 'first',
30	31	'unread.sync.isUnread': 'first',
31	32	// 'message.html.markdown': 'first',
	33	+ 'message.html.channel': 'first',
32	34	'message.html.timeago': 'first',
33	35	'blob.sync.url': 'first',
34	36	'emoji.sync.url': 'first'
35	37	})
		@@ -100,8 +102,13 @@
100	102	//Hey this works! fit an image into a specific size (see blog-card.mcss)
101	103	//centered, and scaled to fit the square (works with both landscape and portrait!)
102	104	//This is functional css not opinionated css, so all embedded.
103	105	img.style = 'background-image: url("'+api.blob.sync.url(m[1])+'"); background-position:center; background-size: cover;'
	106	+ } else {
	107	+ var style = { 'background-color': api.about.obs.color(blog.key) }
	108	+ img = h('Thumbnail -empty', { style }, [
	109	+ h('i.fa.fa-file-text-o')
	110	+ ])
104	111	}
105	112
106	113	const title = render(marksum.title(content.text))
107	114	const summary = render(marksum.summary(content.text))
		@@ -118,9 +125,9 @@
118	125	img,
119	126	h('div.text', [
120	127	h('h2', {innerHTML: title}),
121	128	content.channel
122		- ? h('Button -channel', '#'+content.channel)
	129	+ ? api.message.html.channel(blog)
123	130	: '',
124	131	h('div.summary', {innerHTML: summary})
125	132	])
126	133	])

app/html/blogCard.mcssView
		@@ -9,9 +9,9 @@
9	9	flex-direction: column
10	10
11	11	div.context {
12	12	font-size: .8rem
13		- margin-bottom: 1rem
	13	+ margin-bottom: 1.5rem
14	14
15	15	display: flex
16	16	align-items: center
17	17
		@@ -63,10 +63,20 @@
63	63	}
64	64
65	65	Thumbnail {
66	66	border-radius: .5rem
67		- min-width: 8rem
68		- min-height: 6rem
69		- width: 8rem
70		- height: 6rem
	67	+ min-width: 9rem
	68	+ width: 9rem
	69	+ min-height: 7rem
	70	+ height: 7rem
	71	+
	72	+ -empty {
	73	+ color: #fff
	74	+ font-size: 1.8rem
	75	+ opacity: .8
	76	+
	77	+ display: flex
	78	+ justify-content: center
	79	+ align-items: center
	80	+ }
71	81	}
72	82

app/html/context.mcssView
		@@ -12,32 +12,28 @@
12	12	overflow-x: hidden
13	13
14	14	border-right: 1px gainsboro solid
15	15
16		- div.wrapper {
17		- section {
18		- header {
19		- $colorFontSubtle
20		- padding: .5rem 1rem
21		- }
	16	+ section {
	17	+ header {
	18	+ $colorFontSubtle
	19	+ padding: .5rem 1rem
	20	+ }
22	21
23		- div.Option {}
	22	+ div.Option {}
24	23
25		- hr {
26		- border: 1px solid gainsboro
27		- border-bottom: none
28		- margin: 0
29		- }
	24	+ hr {
	25	+ border: 1px solid gainsboro
	26	+ border-bottom: none
	27	+ margin: 0
30	28	}
31	29	}
32	30
33	31	-one {}
34	32	-two {
35		- div.wrapper {
36		- section {
37		- div.Option {
38		- padding: 0 1rem
39		- }
	33	+ section {
	34	+ div.Option {
	35	+ padding: 0 1rem
40	36	}
41	37	}
42	38	}
43	39	}

app/html/thread.mcssView
		@@ -32,8 +32,9 @@
32	32	div.msg-row {
33	33	div.msg {
34	34	border: 1px #fff solid
35	35	$roundRight
	36	+
36	37	-unread {
37	38	font-weight: bold
38	39	}
39	40

app/html/blogHeader.jsView
		@@ -1,47 +1,0 @@
1		-const nest = require('depnest')
2		-const { h, computed, when } = require('mutant')
3		-const get = require('lodash/get')
4		-
5		-exports.gives = nest('app.html.blogHeader')
6		-
7		-exports.needs = nest({
8		- 'history.sync.push': 'first',
9		- 'translations.sync.strings': 'first',
10		-})
11		-
12		-exports.create = (api) => {
13		- return nest('app.html.blogHeader', (location) => {
14		- const strings = api.translations.sync.strings()
15		- const goTo = (loc) => () => api.history.sync.push(loc)
16		-
17		- if (location.page === 'blogIndex' \|\| location.page === 'blogSearch') {
18		- return h('BlogHeader', [
19		- h('div.left', [
20		- h('div', {
21		- className: location.page === 'blogIndex' ? '-active' : '',
22		- 'ev-click': goTo({ page: 'blogIndex' })
23		- }, strings.blogHeader.blogsAll),
24		- h('div', {
25		- className: location.page === 'blogSearch' ? '-active' : '',
26		- 'ev-click': goTo({ page: 'blogSearch' })
27		- }, strings.blogHeader.blogSearch),
28		- ]),
29		- h('div.right', [
30		- h('Button -primary', { 'ev-click': () => api.history.sync.push({ page: 'blogNew' }) }, strings.blogNew.actions.writeBlog),
31		- ])
32		- ])
33		- }
34		-
35		- return h('BlogHeader', [
36		- h('div.left', [
37		- h('div.-discovery', { 'ev-click': goTo({ page: 'blogIndex' }) }, [
38		- h('i.fa.fa-chevron-left'),
39		- strings.blogIndex.title
40		- ]),
41		- ]),
42		- h('div.right', [
43		- ])
44		- ])
45		- })
46		-}
47		-

app/html/blogNav.jsView
		@@ -1,0 +1,47 @@
	1	+const nest = require('depnest')
	2	+const { h, computed, when } = require('mutant')
	3	+const get = require('lodash/get')
	4	+
	5	+exports.gives = nest('app.html.blogNav')
	6	+
	7	+exports.needs = nest({
	8	+ 'history.sync.push': 'first',
	9	+ 'translations.sync.strings': 'first',
	10	+})
	11	+
	12	+exports.create = (api) => {
	13	+ return nest('app.html.blogNav', (location) => {
	14	+ const strings = api.translations.sync.strings()
	15	+ const goTo = (loc) => () => api.history.sync.push(loc)
	16	+
	17	+ if (location.page === 'blogIndex' \|\| location.page === 'blogSearch') {
	18	+ return h('BlogNav', [
	19	+ h('div.left', [
	20	+ h('div', {
	21	+ className: location.page === 'blogIndex' ? '-active' : '',
	22	+ 'ev-click': goTo({ page: 'blogIndex' })
	23	+ }, strings.blogNav.blogsAll),
	24	+ h('div', {
	25	+ className: location.page === 'blogSearch' ? '-active' : '',
	26	+ 'ev-click': goTo({ page: 'blogSearch' })
	27	+ }, strings.blogNav.blogSearch),
	28	+ ]),
	29	+ h('div.right', [
	30	+ h('Button -primary', { 'ev-click': () => api.history.sync.push({ page: 'blogNew' }) }, strings.blogNew.actions.writeBlog),
	31	+ ])
	32	+ ])
	33	+ }
	34	+
	35	+ return h('BlogNav', [
	36	+ h('div.left', [
	37	+ h('div.-discovery', { 'ev-click': goTo({ page: 'blogIndex' }) }, [
	38	+ h('i.fa.fa-chevron-left'),
	39	+ strings.blogIndex.title
	40	+ ]),
	41	+ ]),
	42	+ h('div.right', [
	43	+ ])
	44	+ ])
	45	+ })
	46	+}
	47	+

app/html/blogHeader.mcssView
		@@ -1,36 +1,0 @@
1		-BlogHeader {
2		- background-color: #fff
3		- height: 2.5rem
4		- padding: 1rem
5		- padding-bottom: .5rem
6		-
7		- display: flex
8		- justify-content: space-between
9		-
10		- div.left {
11		- display: flex
12		-
13		- div {
14		- font-size: 1rem
15		- $colorFontSubtle
16		- cursor: pointer
17		-
18		- padding-bottom: .6rem
19		- margin: .5rem 1rem .5rem .5rem
20		-
21		- -active {
22		- $colorFontBasic
23		- border-bottom: 2px solid #222
24		- }
25		-
26		- -discovery {
27		- $colorFontBasic
28		- i { margin-right: .5rem }
29		- }
30		- }
31		- }
32		-
33		- div.right {
34		- }
35		-}
36		-

app/html/blogNav.mcssView
		@@ -1,0 +1,36 @@
	1	+BlogNav {
	2	+ background-color: #fff
	3	+ height: 2.5rem
	4	+ padding: 1rem
	5	+ padding-bottom: .5rem
	6	+
	7	+ display: flex
	8	+ justify-content: space-between
	9	+
	10	+ div.left {
	11	+ display: flex
	12	+
	13	+ div {
	14	+ font-size: 1rem
	15	+ $colorFontSubtle
	16	+ cursor: pointer
	17	+
	18	+ padding-bottom: .6rem
	19	+ margin: .5rem 1rem .5rem .5rem
	20	+
	21	+ -active {
	22	+ $colorFontBasic
	23	+ border-bottom: 2px solid #222
	24	+ }
	25	+
	26	+ -discovery {
	27	+ $colorFontBasic
	28	+ i { margin-right: .5rem }
	29	+ }
	30	+ }
	31	+ }
	32	+
	33	+ div.right {
	34	+ }
	35	+}
	36	+

app/index.jsView
		@@ -9,9 +9,9 @@
9	9	header: require('./html/header'),
10	10	thread: require('./html/thread'),
11	11	link: require('./html/link'),
12	12	blogCard: require('./html/blogCard'),
13		- blogHeader: require('./html/blogHeader'),
	13	+ blogNav: require('./html/blogNav'),
14	14	scroller: require('./html/scroller'),
15	15	},
16	16	page: {
17	17	blogIndex: require('./page/blogIndex'),

app/page/blogIndex.jsView
		@@ -6,9 +6,9 @@
6	6
7	7	exports.needs = nest({
8	8	'app.html.context': 'first',
9	9	'app.html.blogCard': 'first',
10		- 'app.html.blogHeader': 'first',
	10	+ 'app.html.blogNav': 'first',
11	11	'app.html.scroller': 'first',
12	12	'feed.pull.public': 'first',
13	13	'history.sync.push': 'first',
14	14	'keys.sync.id': 'first',
		@@ -23,9 +23,9 @@
23	23	var strings = api.translations.sync.strings()
24	24
25	25	var blogs = api.app.html.scroller({
26	26	classList: ['content'],
27		- prepend: api.app.html.blogHeader(location),
	27	+ prepend: api.app.html.blogNav(location),
28	28	stream: api.feed.pull.public,
29	29	filter: () => pull(
30	30	pull.filter(msg => {
31	31	const type = msg.value.content.type

app/page/blogIndex.mcssView
		@@ -6,18 +6,21 @@
6	6	position: sticky
7	7	left: 0
8	8	right: 0
9	9	top: 0
	10	+ z-index: 99
	11	+
	12	+ background-color: #fff
10	13	}
11	14
12	15	section.content {
13	16	background-color: #fff
14	17	$maxWidth
15		- margin: .8rem
16		- padding: 0 2rem
	18	+ margin: .8rem auto
	19	+ padding: .5rem 2rem
17	20
18	21	div.BlogCard {
19		- border-bottom: 1px solid gainsboro
	22	+ border-bottom: 1px solid rgba(0,0,0, .1)
20	23	}
21	24	}
22	25
23	26	section.bottom {

app/page/blogSearch.jsView
		@@ -1,18 +1,20 @@
1	1	const nest = require('depnest')
2		-const { h } = require('mutant')
	2	+const { h, Value, computed, map, when, resolve } = require('mutant')
3	3	const pull = require('pull-stream')
4	4
5	5	exports.gives = nest('app.page.blogSearch')
6	6
7	7	exports.needs = nest({
8	8	'app.html.context': 'first',
9	9	'app.html.blogCard': 'first',
10		- 'app.html.blogHeader': 'first',
	10	+ 'app.html.blogNav': 'first',
11	11	'app.html.scroller': 'first',
	12	+ 'channel.obs.recent': 'first',
12	13	'feed.pull.public': 'first',
13	14	'history.sync.push': 'first',
14	15	'keys.sync.id': 'first',
	16	+ 'message.html.channel': 'first',
15	17	'translations.sync.strings': 'first',
16	18	'unread.sync.isUnread': 'first'
17	19	})
18	20
		@@ -20,21 +22,58 @@
20	22	return nest('app.page.blogSearch', blogSearch)
21	23
22	24	function blogSearch (location) {
23	25	// location here can expected to be: { page: 'blogSearch'}
	26	+ // OR { page: 'blogSearch', channel: 'scuttlebutt', searchVal: 'scutt'}
24	27
25	28	var strings = api.translations.sync.strings()
26	29
	30	+ var searchVal = Value(resolve(location.searchVal) \|\| '')
	31	+ var searchResults = computed([api.channel.obs.recent(), searchVal], (channels, val) => {
	32	+ if (val.length < 2) return []
	33	+
	34	+ return channels.filter(c => c.toLowerCase().indexOf(val.toLowerCase()) > -1)
	35	+ })
	36	+ var searchField = h('div.search', [
	37	+ h('div.input', [
	38	+ h('i.fa.fa-search'),
	39	+ h('input', {
	40	+ 'ev-input': e => searchVal.set(e.target.value),
	41	+ value: searchVal
	42	+ })
	43	+ ]),
	44	+ when(searchResults,
	45	+ h('div.results', map(searchResults, channel => {
	46	+ const classList = channel === location.channel
	47	+ ? ['-channelActive']
	48	+ : ''
	49	+ const newLocation = {
	50	+ page: 'blogSearch',
	51	+ channel,
	52	+ searchVal
	53	+ }
	54	+ return api.message.html.channel(channel, { classList, location: newLocation })
	55	+ }))
	56	+ )
	57	+ ])
	58	+
27	59	var blogs = api.app.html.scroller({
28	60	classList: ['content'],
29		- prepend: api.app.html.blogHeader(location),
	61	+ prepend: [
	62	+ api.app.html.blogNav(location),
	63	+ searchField
	64	+ ],
30	65	stream: api.feed.pull.public,
31	66	filter: () => pull(
32	67	pull.filter(msg => {
33	68	const type = msg.value.content.type
34	69	return type === 'post' \|\| type === 'blog'
35	70	}),
36		- pull.filter(msg => !msg.value.content.root) // show only root messages
	71	+ pull.filter(msg => !msg.value.content.root), // show only root messages
	72	+ pull.filter(msg => {
	73	+ if (!location.channel) return true
	74	+ return msg.value.content.channel === location.channel
	75	+ })
37	76	),
38	77	// FUTURE : if we need better perf, we can add a persistent cache. At the moment this page is fast enough though.
39	78	// See implementation of app.html.context for example
40	79	// store: recentMsgCache,

app/page/blogSearch.mcssView
		@@ -6,16 +6,54 @@
6	6	position: sticky
7	7	left: 0
8	8	right: 0
9	9	top: 0
10		- flex-basis: 100%
	10	+ z-index: 99
	11	+
	12	+ background-color: #fff
	13	+
	14	+ div.search {
	15	+ border-top: 1px solid gainsboro
	16	+ padding: 1rem
	17	+
	18	+ div.input {
	19	+ max-width: 16rem
	20	+ border: 1px solid gainsboro
	21	+ margin-left: .5rem
	22	+
	23	+ display: flex
	24	+ align-items: center
	25	+
	26	+ i.fa {
	27	+ margin-left: .5rem
	28	+ }
	29	+
	30	+ input {
	31	+ padding: .5rem
	32	+ border: none
	33	+ outline: none
	34	+ }
	35	+ }
	36	+
	37	+ div.results {
	38	+ margin-top: 1rem
	39	+ margin-left: .5rem
	40	+
	41	+ display: flex
	42	+ flex-wrap: wrap
	43	+
	44	+ div.Button {
	45	+ margin: .2rem .1rem
	46	+ }
	47	+ }
	48	+ }
11	49	}
12	50
13	51	section.content {
14	52	background-color: #fff
15	53	$maxWidth
16		- margin: .8rem
17		- padding: 0 2rem
	54	+ margin: .8rem auto
	55	+ padding: .5rem 2rem
18	56
19	57	div.BlogCard {
20	58	border-bottom: 1px solid gainsboro
21	59	}

app/page/blogShow.jsView
		@@ -8,9 +8,9 @@
8	8
9	9	exports.needs = nest({
10	10	'about.html.avatar': 'first',
11	11	'about.obs.name': 'first',
12		- 'app.html.blogHeader': 'first',
	12	+ 'app.html.blogNav': 'first',
13	13	'app.html.comments': 'first',
14	14	'app.html.context': 'first',
15	15	'contact.html.follow': 'first',
16	16	'message.html.channel': 'first',
		@@ -39,9 +39,9 @@
39	39	return h('Page -blogShow', [
40	40	api.app.html.context({ page: 'discover' }), // HACK to highlight discover
41	41	h('div.content', [
42	42	h('section.top', [
43		- api.app.html.blogHeader(location)
	43	+ api.app.html.blogNav(location)
44	44	]),
45	45	h('section.content', [
46	46	h('header', [
47	47	h('div.blog', [

app/page/blogShow.mcssView
		@@ -7,9 +7,9 @@
7	7	position: sticky
8	8	left: 0
9	9	right: 0
10	10	top: 0
11		- flex-basis: 100%
	11	+ background-color: #fff
12	12
13	13	div.blogHeader {
14	14	}
15	15	}

app/page/settings.jsView
		@@ -31,10 +31,12 @@
31	31	// RESET the app when the settings are changed
32	32	api.settings.obs.get('language')(() => {
33	33	console.log('language changed, resetting view')
34	34
35		- api.history.obs.store().set([]) // wipe nav cache
36		- api.history.sync.push({page: 'blogIndex'}) // queue up basic pages
	35	+ // clear history back to start page
	36	+ api.history.obs.store().set([
	37	+ { page: 'blogIndex' }
	38	+ ])
37	39	api.history.sync.push({page: 'settings'})
38	40	})
39	41
40	42	const feed = api.keys.sync.id()

app/sync/initialize/clickHandler.jsView
		@@ -1,5 +1,6 @@
1	1	const nest = require('depnest')
	2	+const openExternal = require('open-external')
2	3
3	4	exports.gives = nest('app.sync.initialize')
4	5
5	6	exports.needs = nest({

message/html/channel.jsView
		@@ -1,6 +1,6 @@
1	1	const nest = require('depnest')
2		-const { h } = require('mutant')
	2	+const { h, resolve } = require('mutant')
3	3
4	4	exports.gives = nest('message.html.channel')
5	5
6	6	exports.needs = nest({
		@@ -9,16 +9,30 @@
9	9
10	10	exports.create = function (api) {
11	11	return nest('message.html.channel', channel)
12	12
13		- function channel (msg) {
14		- const { channel } = msg.value.content
	13	+ function channel (msgOrChannel, opts = {} ) {
	14	+ const channel = typeof msgOrChannel === 'string'
	15	+ ? msgOrChannel
	16	+ : msgOrChannel.value.content.channel
15	17
16	18	if (!channel) return
17	19
	20	+ const {
	21	+ classList = [],
	22	+ location = { page: 'blogSearch', channel }
	23	+ } = opts
	24	+
	25	+ const goToChannel = (e) => {
	26	+ e.stopPropagation()
	27	+
	28	+ api.history.sync.push(location)
	29	+ }
	30	+
18	31	return h('Button -channel', {
19		- // 'ev-click': () => history.sync.push({ page: 'channelIndex', channel }) // TODO
20		- }, channel)
	32	+ 'ev-click': goToChannel,
	33	+ classList
	34	+ }, '#' + channel)
21	35	}
22	36	}
23	37
24	38

styles/button.mcssView
		@@ -38,8 +38,15 @@
38	38	font-size: .9rem
39	39	min-width: initial
40	40	}
41	41
	42	+ -channelActive {
	43	+ $colorPrimary
	44	+ $borderPrimary
	45	+ font-size: .9rem
	46	+ min-width: initial
	47	+ }
	48	+
42	49	-showMore {
43	50	width: 100%
44	51
45	52	padding: .2rem 0

translations/en.jsView
		@@ -1,9 +1,9 @@
1	1	module.exports = {
2	2	blogIndex: {
3	3	title: 'Discover',
4	4	},
5		- blogHeader: {
	5	+ blogNav: {
6	6	blogsAll: 'Dynamics',
7	7	blogSearch: 'Search'
8	8	},
9	9	blogNew: {

Built with git-ssb-web

mixmix / ticktack

Commit 9de2656efd585098ef7eb72d618684bd03e34c37

blogSearch minimal + openExternal

Files changed