Commit 324fed137cb04497adc9c508cdb230546136ec9f
v05 (only semi-documented) add avatar images.js
mixmix committed on 10/17/2018, 1:19:40 PMParent: 20f85b8d98278bf1dd978dcd5e2d2ce0ceed922b
Files changed
| README.md | changed |
| async/get-avatar.js | added |
| package-lock.json | changed |
| package.json | changed |
| v04.js | changed |
| v05.js | added |
| README.md | ||
|---|---|---|
| @@ -165,4 +165,14 @@ | ||
| 165 | 165 … | |
| 166 | 166 … | We're also introducing [**yo-yo**](https://www.npmjs.com/package/yo-yo) which gives you pretty simple templating which looks a lot like html. |
| 167 | 167 … | It also doesn't do any fancy auto-updating - if you want to update something you literally call an update method and tell it what you're swapping in. |
| 168 | 168 … | |
| 169 … | + | |
| 170 … | +## `v05` - faces to names | |
| 171 … | + | |
| 172 … | +not yet documented. | |
| 173 … | +The blob serving may only work if you're using Patchbay (Patchwork might server blobs over different ports, haven't checked) | |
| 174 … | + | |
| 175 … | +- adds `async/get-avatar.js` which is similar but different to `get-name` | |
| 176 … | + - uses `pull.take(1)` instead of `limit: 1` because we need to check results coming out are valid before stopping results | |
| 177 … | + - uses `ssb-ref` to validate blob links | |
| 178 … | + | |
| async/get-avatar.js | ||
|---|---|---|
| @@ -1,0 +1,57 @@ | ||
| 1 … | +const pull = require('pull-stream') | |
| 2 … | +const { isBlob } = require('ssb-ref') | |
| 3 … | + | |
| 4 … | +module.exports = function (server) { | |
| 5 … | + if (!server) throw new Error('day-posts helper requires a server!') | |
| 6 … | + if (!server.query) throw new Error('day-posts helper requires a server with the ssb-query installed!') | |
| 7 … | + | |
| 8 … | + return function getAvatar (feedId, cb) { | |
| 9 … | + // NOTE the data is coming in from the dayPosts source and has been mapped into the form { author, timestamp, text, root } | |
| 10 … | + | |
| 11 … | + // cb is a function provided to us by pull-paramap which we use to pass results out once we're done and to pass things on to the next part of the stream (the collect here) | |
| 12 … | + | |
| 13 … | + const opts = { | |
| 14 … | + reverse: true, | |
| 15 … | + query: [ | |
| 16 … | + { | |
| 17 … | + $filter: { | |
| 18 … | + value: { | |
| 19 … | + author: feedId, | |
| 20 … | + content: { | |
| 21 … | + type: 'about', | |
| 22 … | + about: feedId, | |
| 23 … | + image: { $truthy: true } | |
| 24 … | + }, | |
| 25 … | + timestamp: { $gt: 0 } // a hack that forces ordering by timestamp | |
| 26 … | + } | |
| 27 … | + } | |
| 28 … | + }, | |
| 29 … | + { | |
| 30 … | + $map: { | |
| 31 … | + image: ['value', 'content', 'image'] | |
| 32 … | + } | |
| 33 … | + } | |
| 34 … | + ] | |
| 35 … | + } | |
| 36 … | + | |
| 37 … | + pull( | |
| 38 … | + server.query.read(opts), | |
| 39 … | + // hooray the format for image about is non-standardised... could be image.link or image that the blob link is stored under | |
| 40 … | + pull.map(data => typeof data.image === 'string' | |
| 41 … | + ? data.image | |
| 42 … | + : data.image.link | |
| 43 … | + ), | |
| 44 … | + pull.filter(link => isBlob(link)), | |
| 45 … | + pull.take(1), | |
| 46 … | + pull.collect((err, results) => { | |
| 47 … | + if (err) { | |
| 48 … | + cb(err) | |
| 49 … | + return | |
| 50 … | + } | |
| 51 … | + | |
| 52 … | + if (!results || !results.length) cb(null, null) | |
| 53 … | + else cb(null, results[0]) | |
| 54 … | + }) | |
| 55 … | + ) | |
| 56 … | + } | |
| 57 … | +} | |
| package-lock.json | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 113504 bytes New file size: 114105 bytes |
| package.json | ||
|---|---|---|
| @@ -20,8 +20,9 @@ | ||
| 20 | 20 … | "electro": "^2.1.1", |
| 21 | 21 … | "electron": "^3.0.4", |
| 22 | 22 … | "pull-paramap": "^1.2.2", |
| 23 | 23 … | "ssb-client": "^4.6.0", |
| 24 … | + "ssb-ref": "^2.12.0", | |
| 24 | 25 … | "yo-yo": "^1.4.1" |
| 25 | 26 … | }, |
| 26 | 27 … | "devDependencies": { |
| 27 | 28 … | "standard": "^12.0.1" |
| v04.js | ||
|---|---|---|
| @@ -60,18 +60,12 @@ | ||
| 60 | 60 … | function Message (msgData) { |
| 61 | 61 … | const { authorName, timestamp, text, root } = msgData |
| 62 | 62 … | // this is called 'destructuring' and is equivalent to `const authorName = msgData.authorName` etc |
| 63 | 63 … | |
| 64 | - const thread = root | |
| 65 | - ? html` | |
| 66 | - <p style="font-size: .8rem; margin: 0">thread: ${root}</p> | |
| 67 | - ` | |
| 68 | - : null | |
| 69 | - | |
| 70 | 64 … | return html` |
| 71 | 65 … | <div style="margin: 2rem;"> |
| 72 | 66 … | <strong>${authorName}</strong> - ${new Date(timestamp).toLocaleString()} |
| 73 | - ${thread} | |
| 67 … | + <p style="font-size: .8rem; margin: 0"> ${root ? 'thread:' : ''} ${root}</p> | |
| 74 | 68 … | <p>${text}</p> |
| 75 | 69 … | </div> |
| 76 | 70 … | ` |
| 77 | 71 … | } |
| v05.js | |||
|---|---|---|---|
| @@ -1,0 +1,91 @@ | |||
| 1 … | +const Connection = require('ssb-client') | ||
| 2 … | +const pull = require('pull-stream') | ||
| 3 … | +pull.paraMap = require('pull-paramap') | ||
| 4 … | +const html = require('yo-yo') | ||
| 5 … | +const daysPosts = require('./source/days-posts') | ||
| 6 … | +const getName = require('./async/get-name') | ||
| 7 … | +const getAvatar = require('./async/get-avatar') | ||
| 8 … | + | ||
| 9 … | +const App = html` | ||
| 10 … | + <div style="margin: 2rem;">Loading...</div> | ||
| 11 … | +` | ||
| 12 … | +document.body.appendChild(App) | ||
| 13 … | + | ||
| 14 … | +Connection((err, server) => { | ||
| 15 … | + if (err) throw err | ||
| 16 … | + | ||
| 17 … | + const today = new Date(2018, 9, 17) | ||
| 18 … | + | ||
| 19 … | + pull( | ||
| 20 … | + daysPosts(server)(today), | ||
| 21 … | + pull.paraMap(addName, 50), // run up to 50 asyncrhonous maps in parallel | ||
| 22 … | + pull.paraMap(addAvatar, 50), // run up to 50 asyncrhonous maps in parallel | ||
| 23 … | + pull.collect(onDone) | ||
| 24 … | + ) | ||
| 25 … | + | ||
| 26 … | + function addName (data, cb) { | ||
| 27 … | + getName(server)(data.author, (err, name) => { | ||
| 28 … | + if (err) cb(err) | ||
| 29 … | + else { | ||
| 30 … | + data.authorName = name | ||
| 31 … | + cb(null, data) | ||
| 32 … | + } | ||
| 33 … | + }) | ||
| 34 … | + } | ||
| 35 … | + function addAvatar (data, cb) { | ||
| 36 … | + getAvatar(server)(data.author, (err, avatar) => { | ||
| 37 … | + if (err) cb(err) | ||
| 38 … | + else { | ||
| 39 … | + data.avatar = avatar | ||
| 40 … | + cb(null, data) | ||
| 41 … | + } | ||
| 42 … | + }) | ||
| 43 … | + } | ||
| 44 … | + | ||
| 45 … | + function onDone (err, data) { | ||
| 46 … | + if (err) { | ||
| 47 … | + console.error('oh noes', err) | ||
| 48 … | + server.close() | ||
| 49 … | + return | ||
| 50 … | + } | ||
| 51 … | + | ||
| 52 … | + const newView = Messages(data) | ||
| 53 … | + html.update(App, newView) | ||
| 54 … | + | ||
| 55 … | + console.log(`${data.length} messages`) | ||
| 56 … | + console.timeEnd('get posts') | ||
| 57 … | + server.close() | ||
| 58 … | + } | ||
| 59 … | +}) | ||
| 60 … | + | ||
| 61 … | +function Messages (data) { | ||
| 62 … | + return html` | ||
| 63 … | + <div style="font-family: arial;"> | ||
| 64 … | + ${data.map(Message)} | ||
| 65 … | + </div> | ||
| 66 … | + ` | ||
| 67 … | +} | ||
| 68 … | + | ||
| 69 … | +function Message (msgData) { | ||
| 70 … | + const { avatar, authorName, timestamp, text, root } = msgData | ||
| 71 … | + | ||
| 72 … | + return html` | ||
| 73 … | + <div style="margin: 2rem;"> | ||
| 74 … | + ${Avatar(avatar)} | ||
| 75 … | + <strong>${authorName}</strong> - ${new Date(timestamp).toLocaleString()} | ||
| 76 … | + <p style="font-size: .8rem; margin: 0"> ${root ? 'thread:' : ''} ${root}</p> | ||
| 77 … | + <p>${text}</p> | ||
| 78 … | + </div> | ||
| 79 … | + ` | ||
| 80 … | +} | ||
| 81 … | + | ||
| 82 … | +function Avatar (blobId) { | ||
| 83 … | + if (!blobId) return | ||
| 84 … | + | ||
| 85 … | + const url = `http://localhost:8989/blobs/get/${blobId}` | ||
| 86 … | + // this may be patchbay specific | ||
| 87 … | + | ||
| 88 … | + return html` | ||
| 89 … | + <img src=${url} style="width: 2rem; height: 2rem;"/> | ||
| 90 … | + ` | ||
| 91 … | +} | ||
Built with git-ssb-web