git ssb

2+

ev / mvd



Commit 0fc4aa1df3882d6f515d9326b51183e7bd3361f1

Browse Files

chronological posts feed, and chronological threads

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

Files changed

index.jschanged
package-lock.jsonchanged
package.jsonchanged
render.jschanged
style.css.jsonchanged
views.jschanged
index.jsView
@@ -29,11 +29,11 @@
2929 … }
3030 … }
3131 … }
3232 … })),
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')),
3636 … h('li', h('a', {href: '#key' }, 'Key')),
3737 … h('li.right', h('a', {href: '#about'}, '?'))
3838 … )
3939 … )
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 @@
4545 … "ssb-keys": "^7.0.16",
4646 … "ssb-links": "^3.0.3",
4747 … "ssb-markdown": "^3.6.0",
4848 … "ssb-ooo": "^1.0.9",
49- "ssb-query": "^2.0.1",
49 …+ "ssb-query": "git+https://git@github.com/evbogue/ssb-query.git",
5050 … "ssb-ref": "^2.11.1",
5151 … "visualize-buffer": "0.0.1",
5252 … "yargs": "^11.0.0"
5353 … }
render.jsView
@@ -18,9 +18,15 @@
1818 … message.appendChild(tools.mini(msg, muted))
1919 … return message
2020 … }
2121 …
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') {
2329 … var opts = {
2430 … type: 'post',
2531 … branch: msg.key
2632 … }
@@ -38,9 +44,8 @@
3844 … message.appendChild(h('span', 're: ', tools.messageLink(msg.value.content.root)))
3945 …
4046 … message.appendChild(h('div.message__body', tools.markdown(msg.value.content.text)))
4147 …
42-
4348 … pull(
4449 … sbot.query({query: [{$filter: {value: {content: {type: 'edit', original: msg.key}}}}], limit: 100, live: true}),
4550 … pull.drain(function (update) {
4651 … if (update.sync) {
@@ -92,17 +97,23 @@
9297 … message.replaceChild(compose, message.lastElementChild)
9398 … }
9499 … }))
95100 …
101 …+
102 …+ var done = h('button.btn.right', '-')
103 …+ var add = h('button.btn.right', '+')
104 …+
105 …+ buttons.appendChild(done)
106 …+ buttons.appendChild(add)
96107 … buttons.appendChild(tools.star(msg))
97108 … message.appendChild(buttons)
98109 … return message
99110 …
100111 … } else if (msg.value.content.type == 'vote') {
101112 … 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)))
103114 … 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)))
105116 … message.appendChild(tools.mini(msg, link))
106117 … return message
107118 … } else if (typeof msg.value.content === 'string') {
108119 … 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 @@
7878 …
7979 … content.appendChild(editor)
8080 … }
8181 …
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 …+
82106 … var mentionsStream = function () {
83107 … var content = h('div.content')
84108 …
85109 … var screen = document.getElementById('screen')
@@ -89,12 +113,12 @@
89113 … function createStream (opts) {
90114 … return pull(
91115 … sbot.backlinks({query: [{$filter: {dest: id}}], reverse: true}),
92116 … 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)
97121 … })
98122 … )
99123 … }
100124 …
@@ -174,32 +198,79 @@
174198 …
175199 … profile.firstChild.appendChild(avatars)
176200 … profile.firstChild.appendChild(buttons)
177201 …
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)
179210 … var mute = h('button.btn', 'Unmute', {
180211 … onclick: function () {
181- delete localStorage['mute:' + src]
212 …+ cache.mute = false
213 …+ localStorage[src] = JSON.stringify(cache)
182214 … location.reload()
183215 … }
184216 … })
185217 … else
186218 … var mute = h('button.btn', 'Mute', {
187219 … onclick: function () {
188- localStorage['mute:' + src] = true
220 …+ cache.mute = true
221 …+ localStorage[src] = JSON.stringify(cache)
189222 … location.reload()
190223 … }
191224 … })
192225 …
193226 … buttons.appendChild(mute)
194227 …
195228 … }
196229 …
197-var msgThread = function(src) {
230 …+var msgThread = function (src) {
231 …+
198232 … var content = h('div.content')
199233 … var screen = document.getElementById('screen')
200234 … 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 …+
201244 … 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) {
202273 … if (err) {console.log('could not find message') }
203274 … data.value = data
204275 … var root = src
205276 … if (data.value.content.root)
@@ -217,9 +288,9 @@
217288 … })
218289 … )
219290 … })
220291 … })
221-}
292 …+}*/
222293 …
223294 … var keyPage = function () {
224295 … var screen = document.getElementById('screen')
225296 …
@@ -267,16 +338,18 @@
267338 … if (ref.isFeed(src)) {
268339 … userStream(src)
269340 … } else if (ref.isMsg(src)) {
270341 … msgThread(src)
271- } else if (src == 'mentions') {
272- mentionsStream()
342 …+ } else if (src == 'all') {
343 …+ logStream()
344 …+ } else if (src == 'posts'){
345 …+ queryStream()
273346 … } else if (src == 'about') {
274347 … about()
275348 … } else if (src == 'edit') {
276349 … edit()
277350 … } else if (src == 'key') {
278351 … keyPage()
279352 … } else {
280- logStream()
353 …+ mentionsStream()
281354 … }
282355 … }

Built with git-ssb-web