git ssb - chronological posts feed, and chronological threads

Commit 0fc4aa1df3882d6f515d9326b51183e7bd3361f1

chronological posts feed, and chronological threads

Ev Bogue committed on 6/6/2018, 7:41:29 PM
Parent: 75aa0a40a0fa419a086ebf278da73cf1ddd88135

Files changed

index.js	changed
package-lock.json	changed
package.json	changed
render.js	changed
style.css.json	changed
views.js	changed

index.jsView
		@@ -29,11 +29,11 @@
29	29 …	}
30	30 …	}
31	31 …	}
32	32 …	})),
33		- h('li', h('a', {href: '#'}, 'Public')),
34		- h('li', h('a', {href: '#mentions' }, 'Mentions')),
35		- h('li', h('a', {href: '#private' }, 'Direct')),
	33 …	+ h('li', h('a', {href: '#' }, 'Queue')),
	34 …	+ h('li', h('a', {href: '#posts' }, 'Posts')),
	35 …	+ h('li', h('a', {href: '#all'}, 'All')),
36	36 …	h('li', h('a', {href: '#key' }, 'Key')),
37	37 …	h('li.right', h('a', {href: '#about'}, '?'))
38	38 …	)
39	39 …	)

package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes. Old file size: 225774 bytes New file size: 218007 bytes

package.jsonView
		@@ -45,9 +45,9 @@
45	45 …	"ssb-keys": "^7.0.16",
46	46 …	"ssb-links": "^3.0.3",
47	47 …	"ssb-markdown": "^3.6.0",
48	48 …	"ssb-ooo": "^1.0.9",
49		- "ssb-query": "^2.0.1",
	49 …	+ "ssb-query": "git+https://git@github.com/evbogue/ssb-query.git",
50	50 …	"ssb-ref": "^2.11.1",
51	51 …	"visualize-buffer": "0.0.1",
52	52 …	"yargs": "^11.0.0"
53	53 …	}

render.jsView
		@@ -18,9 +18,15 @@
18	18 …	message.appendChild(tools.mini(msg, muted))
19	19 …	return message
20	20 …	}
21	21 …
22		- if (msg.value.content.type == 'post') {
	22 …	+ if (msg.value.private == true) {
	23 …	+ var privateMsg = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'lock.png'}), ' ', h('button.btn', 'Open'))
	24 …	+ message.appendChild(tools.mini(msg, privateMsg))
	25 …	+ return message
	26 …	+ }
	27 …	+
	28 …	+ else if (msg.value.content.type == 'post') {
23	29 …	var opts = {
24	30 …	type: 'post',
25	31 …	branch: msg.key
26	32 …	}
		@@ -38,9 +44,8 @@
38	44 …	message.appendChild(h('span', 're: ', tools.messageLink(msg.value.content.root)))
39	45 …
40	46 …	message.appendChild(h('div.message__body', tools.markdown(msg.value.content.text)))
41	47 …
42		-
43	48 …	pull(
44	49 …	sbot.query({query: [{$filter: {value: {content: {type: 'edit', original: msg.key}}}}], limit: 100, live: true}),
45	50 …	pull.drain(function (update) {
46	51 …	if (update.sync) {
		@@ -92,17 +97,23 @@
92	97 …	message.replaceChild(compose, message.lastElementChild)
93	98 …	}
94	99 …	}))
95	100 …
	101 …	+
	102 …	+ var done = h('button.btn.right', '-')
	103 …	+ var add = h('button.btn.right', '+')
	104 …	+
	105 …	+ buttons.appendChild(done)
	106 …	+ buttons.appendChild(add)
96	107 …	buttons.appendChild(tools.star(msg))
97	108 …	message.appendChild(buttons)
98	109 …	return message
99	110 …
100	111 …	} else if (msg.value.content.type == 'vote') {
101	112 …	if (msg.value.content.vote.value == 1)
102		- var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'star.png'}), ' ', h('a', {href: '#' + msg.value.content.vote.link}, msg.value.content.vote.link.substring(0,16) + '...'))
	113 …	+ var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'star.png'}), ' ', h('a', {href: '#' + msg.value.content.vote.link}, tools.messageLink(msg.value.content.vote.link)))
103	114 …	else if (msg.value.content.vote.value == -1)
104		- var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'stars.png'}), ' ', h('a', {href: '#' + msg.value.content.vote.link}, msg.value.content.vote.link.substring(0,16) + '...'))
	115 …	+ var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'stars.png'}), ' ', h('a', {href: '#' + msg.value.content.vote.link}, tools.messageLink(msg.value.content.vote.link)))
105	116 …	message.appendChild(tools.mini(msg, link))
106	117 …	return message
107	118 …	} else if (typeof msg.value.content === 'string') {
108	119 …	var privateMsg = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'lock.png'}))

style.css.jsonView
		@@ -1,1 +1,1 @@
1		-"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > , .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.btn .emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"
	1 …	+"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > , .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\nimg {\n border-radius: 3px;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.btn .emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"

views.jsView
		@@ -78,8 +78,32 @@
78	78 …
79	79 …	content.appendChild(editor)
80	80 …	}
81	81 …
	82 …	+var queryStream = function () {
	83 …	+ var content = h('div.content')
	84 …	+
	85 …	+ var screen = document.getElementById('screen')
	86 …	+
	87 …	+ screen.appendChild(hyperscroll(content))
	88 …	+
	89 …	+ function createStream (opts) {
	90 …	+ return pull(
	91 …	+ //sbot.backlinks({query: [{$filter: { dest: id }}], reverse: true}),
	92 …	+ sbot.query({query: [{$filter: { value: {content: {type: 'post'}, timestamp: { $gt: 1 }}}}], reverse: true}),
	93 …	+ //sbot.query({query: [{$filter: { value: { content: {type: 'post'}, timestamp: { $gt: 0, $lt: undefined }}}}], reverse: true}),
	94 …	+ pull.map(function (msg) {
	95 …	+ return render(msg)
	96 …	+ })
	97 …	+ )
	98 …	+ }
	99 …	+
	100 …	+ pull(
	101 …	+ createStream({reverse: true, limit: 10}),
	102 …	+ stream.bottom(content)
	103 …	+ )
	104 …	+}
	105 …	+
82	106 …	var mentionsStream = function () {
83	107 …	var content = h('div.content')
84	108 …
85	109 …	var screen = document.getElementById('screen')
		@@ -89,12 +113,12 @@
89	113 …	function createStream (opts) {
90	114 …	return pull(
91	115 …	sbot.backlinks({query: [{$filter: {dest: id}}], reverse: true}),
92	116 …	pull.map(function (msg) {
93		- if (msg.value.private == true)
94		- return 'ignoring private message'
95		- else
96		- return render(msg)
	117 …	+ //if (msg.value.private == true)
	118 …	+ // return 'ignoring private message'
	119 …	+ //else
	120 …	+ return render(msg)
97	121 …	})
98	122 …	)
99	123 …	}
100	124 …
		@@ -174,32 +198,79 @@
174	198 …
175	199 …	profile.firstChild.appendChild(avatars)
176	200 …	profile.firstChild.appendChild(buttons)
177	201 …
178		- if (localStorage['mute:' + src])
	202 …	+ if (!localStorage[src])
	203 …	+ var cache = {mute: false}
	204 …	+ else
	205 …	+ var cache = JSON.parse(localStorage[src])
	206 …	+
	207 …	+ console.log(cache)
	208 …	+
	209 …	+ if (cache.mute == true)
179	210 …	var mute = h('button.btn', 'Unmute', {
180	211 …	onclick: function () {
181		- delete localStorage['mute:' + src]
	212 …	+ cache.mute = false
	213 …	+ localStorage[src] = JSON.stringify(cache)
182	214 …	location.reload()
183	215 …	}
184	216 …	})
185	217 …	else
186	218 …	var mute = h('button.btn', 'Mute', {
187	219 …	onclick: function () {
188		- localStorage['mute:' + src] = true
	220 …	+ cache.mute = true
	221 …	+ localStorage[src] = JSON.stringify(cache)
189	222 …	location.reload()
190	223 …	}
191	224 …	})
192	225 …
193	226 …	buttons.appendChild(mute)
194	227 …
195	228 …	}
196	229 …
197		-var msgThread = function(src) {
	230 …	+var msgThread = function (src) {
	231 …	+
198	232 …	var content = h('div.content')
199	233 …	var screen = document.getElementById('screen')
200	234 …	screen.appendChild(hyperscroll(content))
	235 …	+
	236 …	+ pull(
	237 …	+ sbot.query({query: [{$filter: { value: { content: {root: src}, timestamp: { $gt: 1 }}}}]}),
	238 …	+ pull.drain(function (msg) {
	239 …	+ console.log(msg)
	240 …	+ content.appendChild(render(msg))
	241 …	+ })
	242 …	+ )
	243 …	+
201	244 …	sbot.get(src, function (err, data) {
	245 …	+ if (err) {console.log('could not find message')}
	246 …	+ data.value = data
	247 …	+ data.key = src
	248 …	+ console.log(data)
	249 …	+ var rootMsg = render(data)
	250 …	+
	251 …	+ if (content.firstChild) {
	252 …	+ content.insertBefore(rootMsg, content.firstChild)
	253 …	+ } else {
	254 …	+ content.appendChild(rootMsg)
	255 …	+ }
	256 …	+ })
	257 …	+
	258 …	+ /*pull(
	259 …	+ sbot.backlinks({query: [{$filter: {dest: src}}]}),
	260 …	+ pull.drain(function (msg) {
	261 …	+ console.log(msg)
	262 …	+ content.appendChild(render(msg))
	263 …	+ })
	264 …	+ )*/
	265 …	+
	266 …	+}
	267 …	+
	268 …	+/*var msgThread = function(src) {
	269 …	+ var content = h('div.content')
	270 …	+ var screen = document.getElementById('screen')
	271 …	+ screen.appendChild(hyperscroll(content))
	272 …	+ sbot.get(src, function (err, data) {
202	273 …	if (err) {console.log('could not find message') }
203	274 …	data.value = data
204	275 …	var root = src
205	276 …	if (data.value.content.root)
		@@ -217,9 +288,9 @@
217	288 …	})
218	289 …	)
219	290 …	})
220	291 …	})
221		-}
	292 …	+}*/
222	293 …
223	294 …	var keyPage = function () {
224	295 …	var screen = document.getElementById('screen')
225	296 …
		@@ -267,16 +338,18 @@
267	338 …	if (ref.isFeed(src)) {
268	339 …	userStream(src)
WritePreview
269	340 …	} else if (ref.isMsg(src)) {
270	341 …	msgThread(src)
271		- } else if (src == 'mentions') {
272		- mentionsStream()
	342 …	+ } else if (src == 'all') {
	343 …	+ logStream()
	344 …	+ } else if (src == 'posts'){
	345 …	+ queryStream()
273	346 …	} else if (src == 'about') {
274	347 …	about()
275	348 …	} else if (src == 'edit') {
276	349 …	edit()
277	350 …	} else if (src == 'key') {
278	351 …	keyPage()
279	352 …	} else {
280		- logStream()
	353 …	+ mentionsStream()
281	354 …	}
282	355 …	}

Built with git-ssb-web

ev / mvd

Commit 0fc4aa1df3882d6f515d9326b51183e7bd3361f1

chronological posts feed, and chronological threads

Files changed