diff options
Diffstat (limited to 'desk/web/components/post.hoon')
| -rw-r--r-- | desk/web/components/post.hoon | 274 |
1 files changed, 274 insertions, 0 deletions
diff --git a/desk/web/components/post.hoon b/desk/web/components/post.hoon new file mode 100644 index 0000000..488c308 --- /dev/null +++ b/desk/web/components/post.hoon @@ -0,0 +1,274 @@ +/- tp=trill-post +/+ plib=trill-utils, sr=sortug, kaji, lib=boke +/= content /web/components/post-text +/= post-header /web/components/post-header +|_ [[=post:tp children=full-graph:tp] who=@p] +++ css ^~ %- trip +''' +#post-text{ + -webkit-locale: "en"; + text-size-adjust: 100%; + color: rgb(0, 0, 0); + line-height: 1.618; + text-align: left; + text-shadow: rgb(0, 0, 0) 0px 0px 0px; + border-bottom-color: rgb(223, 223, 223); + border-bottom-style: dotted; + border-bottom-width: 1px; + box-sizing: border-box; + display: block; + margin-bottom: 24px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + padding-bottom: 40px; + padding-left: 32px; + padding-right: 32px; + padding-top: 4px; +} +#comments{ + -webkit-locale: "en"; + text-size-adjust: 100%; + color: rgb(0, 0, 0); + line-height: 1.618; + text-align: left; + text-shadow: rgb(0, 0, 0) 0px 0px 0px; + box-sizing: border-box; + display: block; + margin-bottom: 32px; + padding-bottom: 0px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0px; +} +#comments h3{ + -webkit-locale: "en"; + text-size-adjust: 100%; + color: rgb(0, 0, 0); + text-align: left; + text-shadow: rgb(0, 0, 0) 0px 0px 0px; + font-size: 18.72px; + font-weight: 400; + box-sizing: border-box; + display: block; + line-height: 1.2; + margin-block-end: 9.36px; + margin-block-start: 9.36px; + margin-bottom: 9.36px; + margin-inline-end: 0px; + margin-inline-start: 0px; + margin-left: 0px; + margin-right: 0px; + margin-top: 9.36px; +} +#comment-list{ + -webkit-locale: "en"; + text-size-adjust: 100%; + color: rgb(0, 0, 0); + line-height: 1.618; + text-align: left; + text-shadow: rgb(0, 0, 0) 0px 0px 0px; + box-sizing: border-box; + display: block; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + margin-block-end: 24px; + margin-block-start: 0px; + margin-bottom: 24px; + margin-inline-end: 0px; + margin-inline-start: 0px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + padding-inline-start: 0px; + padding-left: 0px; +} +.comment-list li{ + -webkit-locale: "en"; + text-size-adjust: 100%; + color: rgb(0, 0, 0); + line-height: 1.618; + text-shadow: rgb(0, 0, 0) 0px 0px 0px; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + border-left-color: rgb(223, 223, 223); + border-left-style: solid; + border-left-width: 1px; + box-sizing: border-box; + display: list-item; + padding-bottom: 16px; + padding-left: 10px; + padding-right: 0px; + padding-top: 16px; + text-align: left; +} +.comment-author{ + font-weight: 700; + color: var(--text); + font-style: normal; + font-size: 1rem; + margin-right: 1rem; +} +.comment-content{ + font-size: 90%; +} +#reply-title{ + display: inline; +} +.reply-prompt{ + color: var(--hong); + font-size: 0.9rem; +} +''' +++ script %- trip +''' +document.addEventListener('alpine:init', () => { + console.log(Alpine, Date.now()) + Alpine.store("comment", { + text: "", + set(s){ + this.text = s + } + }); + Alpine.store("replying_to", { + show(s){ + return this.to === s + }, + to: "", + open(s){ + this.to = s + } + }); + Alpine.bind('bigReplyButton', () => ({ + type: 'button', + 'x-on:click'(){ + Alpine.store('replying_to').open('main'); + } + })); + Alpine.bind('ReplyButton', () => ({ + type: 'button', + 'x-on:click'() { + Alpine.store("replying_to").open(this.$el.id) + } + })); + Alpine.bind("cancelButton", () => ({ + 'x-on:click'() { + Alpine.store("replying_to").open("") + } + })) + Alpine.bind("collapseButton", () => ({ + 'x-on:click'() { + Alpine.store("replying_to").open("") + } + })) +}) +''' +++ post-content +^- manx +;div#post-text + ;style:"{css}" + ;* (content contents.post) +== +++ comments +=/ cs (tap:form:tp children) +=/ l (houyi:plib children) +=/ length ?: .=(0 l) "No" "{<l>}" +=/ js "$store.replying_to.show('main')" +^- manx +;div#comments + ;a/"/board/p/{(board-path:lib post)}":"Switch to Board View" + ;h3:"{length} comments" + ;span.fl(x-bind "bigReplyButton"):"Leave a reply" + ;div(x-show js) + ;+ (reply-box-f [author.post id.post]) + == + ;ul.comment-list + =id "children{(scow %ud id.post)}" + ;* (turn cs comment) + == +== +++ grandchildren +|= p=full-node:tp ^- manx +=/ cs (tap:form:tp children.p) +;ul.comment-list + =id "children{(scow %ud id.p.p)}" + ;* (turn cs comment) +== +++ comment +|= [=pid:tp [p=post:tp c=full-graph:tp]] +^- manx +=/ author (get-name:lib -.pid) +=/ time (datetime-to-tape:string:sr id.pid "/") +=/ id=tape "{<`@ud`id.pid>}" +=/ js=tape "$store.replying_to.show('{id}')" +:: =/ uncollapse=manx ;span.cp(x-bind "collapseButton"):"[+] ({<(houyi p)>})" +:: =/ collapse ;span.cp(x-bind "collapseButton"):"[-]" +;li + =id "comment{id}" + ;div.comment-meta + ;div.row + ;a.comment-author/"/u/{author}":"{author}" + ; | + ;a.comment-time/"{time}":"{time}" + ; | + == + == + ;div.comment-content + ;* (content contents.p) + == + ;div(x-show js) + ;+ (reply-box-f pid) + == + ;span.fl.reply-prompt(id id, x-bind "ReplyButton"):"reply" + ;+ (grandchildren [p c]) +== +++ reply-box-f +|= =pid:tp +?: .=(%pawn (clan:title who)) +;p#respond:"You must login with an Urbit ID to comment" +(reply-box pid) +++ reply-box +|= =pid:tp +^- manx +=/ post-meta (enc:kaji [[author.post id.post] pid]) +=/ parent-id=tape "{<`@ud`id.pid>}" +=/ author %- trip (scot %p who) +;div#respond + ;span + =id "cancel-reply" + =class "fl" + =x-bind "cancelButton" + ; Cancel reply + == + ;form#reply-form + =kaji "poke" + =action "add-post" + ;label(for "comment"); + ;textarea#comment + =name "comment" + =cols "45" + =rows "8" + =maxlength "6552" + =autocomplete "off" + ; + == + ;div#author-data + ;span:"Posting as " + ;span:"{author}" + == + ;input(type "hidden", name "post-meta", value post-meta); + ;input#submit-comment(type "submit", value "Poast"); + == +== +++ html ^- manx +~& post +~& >> children + ;div + ;+ (post-header post) + ;+ post-content + ;+ comments + ;script:"{script}" + == +-- |