Commit 653e7d95783fcb22649a1ce70a47fc0deb571e3f
Switch to notes, update render to include post
Josiah Witt committed on 12/9/2017, 3:09:51 AMParent: 5088f35306e7b681fb4597330037615db8c790b0
Files changed
| bookmark/async/save.js | changed |
| bookmark/html/bookmark.mcss | changed |
| bookmark/html/render.js | changed |
| bookmark/html/save.js | changed |
| bookmark/html/save.mcss | changed |
| bookmark/html/description.js | deleted |
| bookmark/html/notes.js | added |
| bookmark/obs/bookmark.js | changed |
| bookmark/obs/struct.js | changed |
| bookmark/page/bookmarks.js | changed |
| message/html/action/bookmark.js | changed |
| bookmark/async/save.js | ||
|---|---|---|
| @@ -8,15 +8,14 @@ | ||
| 8 | 8 … | }) |
| 9 | 9 … | |
| 10 | 10 … | exports.create = function(api) { |
| 11 | 11 … | return nest('bookmark.async.save', function(data, cb) { |
| 12 | - const { messageId, recps, title, description, tags } = data | |
| 12 … | + const { messageId, recps, notes, tags } = data | |
| 13 | 13 … | api.sbot.async.publish({ |
| 14 | 14 … | type: 'about', |
| 15 | 15 … | about: messageId, |
| 16 | 16 … | recps, |
| 17 | - title, | |
| 18 | - description, | |
| 17 … | + notes, | |
| 19 | 18 … | tags |
| 20 | 19 … | }, cb) |
| 21 | 20 … | }) |
| 22 | 21 … | } |
| bookmark/html/bookmark.mcss | ||
|---|---|---|
| @@ -17,55 +17,62 @@ | ||
| 17 | 17 … | $textSubtle |
| 18 | 18 … | } |
| 19 | 19 … | } |
| 20 | 20 … | |
| 21 | - section.title { | |
| 22 | - flex-basis: 100% | |
| 21 … | + section.message { | |
| 22 … | + width: 100% | |
| 23 … | + } | |
| 24 … | + | |
| 25 … | + section.notes { | |
| 26 … | + width: 100% | |
| 27 … | + } | |
| 28 … | + | |
| 29 … | + section.tags { | |
| 30 … | + width: 100% | |
| 31 … | + } | |
| 32 … | + | |
| 33 … | + section.actions { | |
| 34 … | + position: absolute | |
| 35 … | + right: .5rem | |
| 36 … | + top: 1.5rem | |
| 23 | 37 … | font-size: .9rem |
| 38 … | + } | |
| 39 … | +} | |
| 24 | 40 … | |
| 25 | - span, span a { | |
| 26 | - $textSubtle | |
| 41 … | +Saved { | |
| 42 … | + padding: 1rem .5rem 1rem 6rem | |
| 43 … | + position: relative | |
| 44 … | + display: flex | |
| 45 … | + flex-direction: row | |
| 46 … | + flex-wrap: wrap | |
| 47 … | + justify-content: flex-end | |
| 48 … | + | |
| 49 … | + section.avatar { | |
| 50 … | + position: absolute | |
| 51 … | + left: .5rem | |
| 52 … | + | |
| 53 … | + a img { | |
| 27 | 54 … | } |
| 28 | 55 … | } |
| 29 | 56 … | |
| 30 | - section.content { | |
| 57 … | + section.author { | |
| 31 | 58 … | flex-basis: 100% |
| 32 | - margin-top: .4rem | |
| 33 | - | |
| 34 | - (img) { | |
| 35 | - max-width: 100% | |
| 36 | - } | |
| 37 | 59 … | } |
| 38 | 60 … | |
| 39 | - section.actions { | |
| 61 … | + section.title { | |
| 40 | 62 … | flex-basis: 100% |
| 41 | - display: flex | |
| 42 | - justify-content: flex-end | |
| 43 | - | |
| 44 | 63 … | font-size: .9rem |
| 45 | - a { | |
| 46 | - margin-left: .5em | |
| 47 | - } | |
| 48 | 64 … | |
| 49 | - a.unlike { | |
| 65 … | + span, span a { | |
| 50 | 66 … | $textSubtle |
| 51 | 67 … | } |
| 52 | 68 … | } |
| 53 | -} | |
| 54 | 69 … | |
| 55 | -Details { | |
| 56 | - div { | |
| 57 | - color: black | |
| 58 | - } | |
| 70 … | + section.content { | |
| 71 … | + flex-basis: 100% | |
| 72 … | + margin-top: .4rem | |
| 59 | 73 … | |
| 60 | - a { | |
| 61 | - div.title { | |
| 62 | - font-size: 1.2rem | |
| 63 | - color: black | |
| 64 | - margin-bottom: .5rem | |
| 74 … | + (img) { | |
| 75 … | + max-width: 100% | |
| 65 | 76 … | } |
| 66 | 77 … | } |
| 67 | - | |
| 68 | - div.tags { | |
| 69 | - margin: 1rem 0 .5rem 0 | |
| 70 | - } | |
| 71 | 78 … | } |
| bookmark/html/render.js | ||
|---|---|---|
| @@ -2,60 +2,69 @@ | ||
| 2 | 2 … | const nest = require('depnest') |
| 3 | 3 … | const ref = require('ssb-ref') |
| 4 | 4 … | |
| 5 | 5 … | exports.needs = nest({ |
| 6 … | + 'about.html.avatar': 'first', | |
| 6 | 7 … | 'bookmark.obs.bookmark': 'first', |
| 7 | 8 … | 'bookmark.html': { |
| 8 | - 'action': 'map', | |
| 9 | - 'tag': 'first' | |
| 9 … | + action: 'map', | |
| 10 … | + tag: 'first' | |
| 10 | 11 … | }, |
| 11 | 12 … | 'message.html': { |
| 12 | - decorate: 'reduce', | |
| 13 | - timestamp: 'first', | |
| 13 … | + author: 'first', | |
| 14 … | + link: 'first', | |
| 15 … | + markdown: 'first', | |
| 14 | 16 … | }, |
| 15 | 17 … | 'keys.sync.id': 'first' |
| 16 | 18 … | }) |
| 17 | 19 … | |
| 18 | -exports.gives = nest({ | |
| 19 | - // 'message.html': [ 'render' ], | |
| 20 | - 'bookmark.html': [ 'render' ] | |
| 21 | -}) | |
| 20 … | +exports.gives = nest('bookmark.html.render') | |
| 22 | 21 … | |
| 23 | 22 … | exports.create = function(api) { |
| 24 | 23 … | return nest({ |
| 25 | - // 'message.html.render': renderBookmark, | |
| 26 | 24 … | 'bookmark.html.render': renderBookmark |
| 27 | 25 … | }) |
| 28 | 26 … | |
| 29 | 27 … | function renderBookmark(msg, { pageId } = {}) { |
| 30 | 28 … | const id = api.keys.sync.id() |
| 31 | 29 … | const bookmark = api.bookmark.obs.bookmark(msg.key, id) |
| 32 | - console.log('BKMK', bookmark()) | |
| 33 | 30 … | |
| 34 | 31 … | const content = [ |
| 35 | - h('Details', [ | |
| 36 | - h('a', { href: bookmark.messageId }, [ | |
| 37 | - h('div.title', bookmark.title) | |
| 38 | - ]), | |
| 39 | - h('div.description', bookmark.description), | |
| 40 | - h('div.tags', map(bookmark.tags, tag => api.bookmark.html.tag(tag))) | |
| 32 … | + h('Saved', [ | |
| 33 … | + h('section.avatar', {}, api.about.html.avatar(msg.value.author)), | |
| 34 … | + h('section.author', {}, api.message.html.author(msg)), | |
| 35 … | + h('section.title', {}, messageTitle(msg)), | |
| 36 … | + h('section.content', {}, messageContent(msg)), | |
| 41 | 37 … | ]) |
| 42 | 38 … | ] |
| 43 | 39 … | |
| 44 | - const view = h( | |
| 40 … | + return h( | |
| 45 | 41 … | 'Bookmark', |
| 42 … | + { attributes: { tabindex: '0' } }, | |
| 46 | 43 … | [ |
| 47 | - h('section.timestamp', {}, api.message.html.timestamp(msg)), | |
| 48 | - h('section.content', {}, content), | |
| 44 … | + h('section.message', {}, content), | |
| 45 … | + h('section.tags', map(bookmark.tags, tag => api.bookmark.html.tag(tag))), | |
| 46 … | + h('section.notes', computed([bookmark.notes], messageNotes)), | |
| 49 | 47 … | h('section.actions', {}, api.bookmark.html.action(msg.key)) |
| 50 | 48 … | ] |
| 51 | 49 … | ) |
| 50 … | + } | |
| 52 | 51 … | |
| 53 | - const element = h( | |
| 54 | - 'div', | |
| 55 | - { attributes: { tabindex: '0' } }, | |
| 56 | - view | |
| 57 | - ) | |
| 52 … | + function messageContent (data) { | |
| 53 … | + if (!data.value.content || !data.value.content.text) return | |
| 54 … | + return h('div', {}, api.message.html.markdown(data.value.content)) | |
| 55 … | + } | |
| 58 | 56 … | |
| 59 | - return api.message.html.decorate(element, { msg }) | |
| 57 … | + function messageTitle (data) { | |
| 58 … | + var root = data.value.content && data.value.content.root | |
| 59 … | + return !root ? null : h('span', ['re: ', api.message.html.link(root)]) | |
| 60 | 60 … | } |
| 61 … | + | |
| 62 … | + function messageNotes (data) { | |
| 63 … | + console.log(data) | |
| 64 … | + if (!data) return | |
| 65 … | + return h('div', {}, [ | |
| 66 … | + h('h4', 'Notes'), | |
| 67 … | + api.message.html.markdown(data) | |
| 68 … | + ]) | |
| 69 … | + } | |
| 61 | 70 … | } |
| bookmark/html/save.js | ||
|---|---|---|
| @@ -16,10 +16,9 @@ | ||
| 16 | 16 … | function create() { |
| 17 | 17 … | var open = Value(false) |
| 18 | 18 … | var bookmark = Struct({ |
| 19 | 19 … | messageId: Value(), |
| 20 | - title: Value(), | |
| 21 | - description: Value(), | |
| 20 … | + notes: Value(), | |
| 22 | 21 … | tags: Value(), |
| 23 | 22 … | public: Value() |
| 24 | 23 … | }) |
| 25 | 24 … | |
| @@ -32,10 +31,9 @@ | ||
| 32 | 31 … | const saveButton = h('button.save', { 'ev-click': () => |
| 33 | 32 … | api.bookmark.async.save({ |
| 34 | 33 … | recps: bookmark.public() ? null : [ id ], |
| 35 | 34 … | messageId: bookmark.messageId(), |
| 36 | - title: bookmark.title(), | |
| 37 | - description: bookmark.description(), | |
| 35 … | + notes: bookmark.notes(), | |
| 38 | 36 … | tags: bookmark.tags().split(',').map(tag => tag.trim()) |
| 39 | 37 … | }, console.log) |
| 40 | 38 … | }, 'Save') |
| 41 | 39 … | |
| @@ -43,18 +41,13 @@ | ||
| 43 | 41 … | placeholder: 'id of message to save', |
| 44 | 42 … | 'ev-keyup': e => bookmark.messageId.set(e.target.value) |
| 45 | 43 … | }) |
| 46 | 44 … | |
| 47 | - const titleInput = h('input.title', { | |
| 48 | - placeholder: 'title of message', | |
| 49 | - 'ev-keyup': e => bookmark.title.set(e.target.value) | |
| 45 … | + const notesInput = h('textarea', { | |
| 46 … | + placeholder: 'notes about message', | |
| 47 … | + 'ev-keyup': e => bookmark.notes.set(e.target.value) | |
| 50 | 48 … | }) |
| 51 | 49 … | |
| 52 | - const descriptionInput = h('textarea', { | |
| 53 | - placeholder: 'description of message', | |
| 54 | - 'ev-keyup': e => bookmark.description.set(e.target.value) | |
| 55 | - }) | |
| 56 | - | |
| 57 | 50 … | const tagsInput = h('input.tags', { |
| 58 | 51 … | placeholder: 'message tags (comma separated)', |
| 59 | 52 … | 'ev-keyup': e => bookmark.tags.set(e.target.value) |
| 60 | 53 … | }) |
| @@ -73,10 +66,9 @@ | ||
| 73 | 66 … | h('h2', 'Save a Bookmark'), |
| 74 | 67 … | cancelButton, |
| 75 | 68 … | saveButton, |
| 76 | 69 … | messageInput, |
| 77 | - titleInput, | |
| 78 | - descriptionInput, | |
| 70 … | + notesInput, | |
| 79 | 71 … | tagsInput, |
| 80 | 72 … | publicInput |
| 81 | 73 … | ] |
| 82 | 74 … | ), |
| bookmark/html/save.mcss | ||
|---|---|---|
| @@ -19,16 +19,12 @@ | ||
| 19 | 19 … | box-sizing: border-box |
| 20 | 20 … | } |
| 21 | 21 … | |
| 22 | 22 … | input.message { |
| 23 | - width: 25% | |
| 23 … | + width: 100% | |
| 24 | 24 … | margin-right: .6rem |
| 25 | 25 … | } |
| 26 | 26 … | |
| 27 | - input.title { | |
| 28 | - width: calc(75% - .6rem) | |
| 29 | - } | |
| 30 | - | |
| 31 | 27 … | input.tags { |
| 32 | 28 … | position: absolute |
| 33 | 29 … | left: 0 |
| 34 | 30 … | bottom: 1.2rem |
| bookmark/html/description.js | ||
|---|---|---|
| @@ -1,30 +1,0 @@ | ||
| 1 | -const nest = require('depnest') | |
| 2 | -const { h, computed, when } = require('mutant') | |
| 3 | - | |
| 4 | -exports.needs = nest({ | |
| 5 | - 'message.html.markdown': 'first' | |
| 6 | -}) | |
| 7 | - | |
| 8 | -exports.gives = nest('bookmark.html.description') | |
| 9 | - | |
| 10 | -exports.create = (api) => { | |
| 11 | - return nest('bookmark.html.description', description) | |
| 12 | - function description ({ description, isEditing, onUpdate }) { | |
| 13 | - const markdown = api.message.html.markdown | |
| 14 | - const input = h( | |
| 15 | - 'textarea', | |
| 16 | - { | |
| 17 | - 'ev-input': e => onUpdate(e.target.value), | |
| 18 | - 'value': description | |
| 19 | - } | |
| 20 | - ) | |
| 21 | - | |
| 22 | - return h('Description', [ | |
| 23 | - when( | |
| 24 | - isEditing, | |
| 25 | - input, | |
| 26 | - computed(description, d => d ? markdown(d) : '') | |
| 27 | - ) | |
| 28 | - ]) | |
| 29 | - } | |
| 30 | -} | |
| bookmark/html/notes.js | ||
|---|---|---|
| @@ -1,0 +1,30 @@ | ||
| 1 … | +const nest = require('depnest') | |
| 2 … | +const { h, computed, when } = require('mutant') | |
| 3 … | + | |
| 4 … | +exports.needs = nest({ | |
| 5 … | + 'message.html.markdown': 'first' | |
| 6 … | +}) | |
| 7 … | + | |
| 8 … | +exports.gives = nest('bookmark.html.notes') | |
| 9 … | + | |
| 10 … | +exports.create = (api) => { | |
| 11 … | + return nest('bookmark.html.notes', notes) | |
| 12 … | + | |
| 13 … | + function notes ({ notes, isEditing, onUpdate }) { | |
| 14 … | + const markdown = api.message.html.markdown | |
| 15 … | + const input = h( | |
| 16 … | + 'textarea', | |
| 17 … | + { | |
| 18 … | + 'ev-input': e => onUpdate(e.target.value), | |
| 19 … | + 'value': notes | |
| 20 … | + } | |
| 21 … | + ) | |
| 22 … | + return h('Notes', [ | |
| 23 … | + when( | |
| 24 … | + isEditing, | |
| 25 … | + input, | |
| 26 … | + computed(notes, d => d ? markdown(d) : '') | |
| 27 … | + ) | |
| 28 … | + ]) | |
| 29 … | + } | |
| 30 … | +} | |
| bookmark/obs/bookmark.js | ||
|---|---|---|
| @@ -18,10 +18,9 @@ | ||
| 18 | 18 … | |
| 19 | 19 … | const { latestValue, valueFrom, groupedValues } = api.about.obs |
| 20 | 20 … | |
| 21 | 21 … | const bookmark = api.bookmark.obs.struct({ |
| 22 | - title: latestValue(messageId, 'title'), | |
| 23 | - description: latestValue(messageId, 'description'), | |
| 22 … | + notes: latestValue(messageId, 'notes'), | |
| 24 | 23 … | tags: valueFrom(messageId, 'tags', id), |
| 25 | 24 … | recps: latestValue(messageId, 'recps') |
| 26 | 25 … | }) |
| 27 | 26 … | |
| bookmark/obs/struct.js | |||
|---|---|---|---|
| @@ -9,10 +9,9 @@ | |||
| 9 | 9 … | ||
| 10 | 10 … | exports.create = function(api) { | |
| 11 | 11 … | return nest('bookmark.obs.struct', function(opts = {}) { | |
| 12 | 12 … | const struct = Struct({ | |
| 13 | - title: Value(''), | ||
| 14 | - description: Value(''), | ||
| 13 … | + notes: Value(''), | ||
| 15 | 14 … | tags: Set([]), | |
| 16 | 15 … | recps: Set([]) | |
| 17 | 16 … | }) | |
| 18 | 17 … | ||
| @@ -26,10 +25,9 @@ | |||
| 26 | 25 … | struct.save = id => { | |
| 27 | 26 … | api.bookmark.async.save({ | |
| 28 | 27 … | recps: struct.recps(), | |
| 29 | 28 … | messageId: id, | |
| 30 | - title: struct.title(), | ||
| 31 | - description: struct.description(), | ||
| 29 … | + notes: struct.notes(), | ||
| 32 | 30 … | tags: struct.tags() | |
| 33 | 31 … | }, console.log) | |
| 34 | 32 … | } | |
| 35 | 33 … | ||
| bookmark/page/bookmarks.js | ||
|---|---|---|
| @@ -23,9 +23,10 @@ | ||
| 23 | 23 … | save: 'first', |
| 24 | 24 … | render: 'first', |
| 25 | 25 … | tags: 'first' |
| 26 | 26 … | }, |
| 27 | - 'keys.sync.id': 'first' | |
| 27 … | + 'keys.sync.id': 'first', | |
| 28 … | + 'sbot.async.get': 'first' | |
| 28 | 29 … | }) |
| 29 | 30 … | |
| 30 | 31 … | exports.create = function(api) { |
| 31 | 32 … | return nest({ |
| @@ -44,16 +45,13 @@ | ||
| 44 | 45 … | const id = api.keys.sync.id() |
| 45 | 46 … | const tag = path['tag'] || 'Reading List' |
| 46 | 47 … | |
| 47 | 48 … | const creator = api.bookmark.html.save({}) |
| 48 | - const defaultTags = [ 'Reading List', 'Read', 'Favourite', 'Archived' ] | |
| 49 … | + const defaultTags = [ 'Reading List', 'Read', 'Favourites', 'Archived' ] | |
| 49 | 50 … | const tagSelector = api.bookmark.html.tags( |
| 50 | 51 … | computed( |
| 51 | 52 … | [api.bookmark.obs.tagsFrom(id)], |
| 52 | - tags => { | |
| 53 | - console.log('TAGS', tags) | |
| 54 | - return tags.filter(t => defaultTags.indexOf(t) < 0) | |
| 55 | - } | |
| 53 … | + tags => tags.filter(t => defaultTags.indexOf(t) < 0) | |
| 56 | 54 … | ) |
| 57 | 55 … | ) |
| 58 | 56 … | const currentTag = h('h2', tag) |
| 59 | 57 … | const { container, content } = api.app.html.scroller({ |
| @@ -87,8 +85,15 @@ | ||
| 87 | 85 … | msgs.sort((a, b) => a.value.timestamp < b.value.timestamp) |
| 88 | 86 … | return msgs |
| 89 | 87 … | }), |
| 90 | 88 … | pull.flatten(), |
| 89 … | + pull.map(msg => msg.key), | |
| 90 … | + pull.asyncMap((key, cb) => { | |
| 91 … | + api.sbot.async.get(key, (_, value) => { | |
| 92 … | + const msg = { key, value } | |
| 93 … | + cb(null, msg) | |
| 94 … | + }) | |
| 95 … | + }), | |
| 91 | 96 … | Scroller(container, content, api.bookmark.html.render, false, false) |
| 92 | 97 … | ) |
| 93 | 98 … | |
| 94 | 99 … | container.title = '/bookmarks/' + tag |
| message/html/action/bookmark.js | ||
|---|---|---|
| @@ -40,19 +40,17 @@ | ||
| 40 | 40 … | tags = currentTags |
| 41 | 41 … | tags.push('Archived') |
| 42 | 42 … | } |
| 43 | 43 … | |
| 44 | - var title | |
| 44 … | + var notes = "" | |
| 45 | 45 … | if (msg.value && msg.value.content && msg.value.content.text) { |
| 46 | - title = msg.value.content.text.substring(0, 30) + "..." | |
| 47 | - } else { | |
| 48 | - title = "Untitled" | |
| 46 … | + notes = msg.value.content.text.substring(0, 30) + "..." | |
| 49 | 47 … | } |
| 50 | 48 … | |
| 51 | 49 … | api.bookmark.async.save({ |
| 52 | 50 … | messageId: msg.key, |
| 53 | 51 … | recps, |
| 54 | - title, | |
| 52 … | + notes, | |
| 55 | 53 … | tags |
| 56 | 54 … | }, console.log) |
| 57 | 55 … | } |
| 58 | 56 … | } |
Built with git-ssb-web