2019-07-28 20:49:01 +00:00
|
|
|
'use strict'
|
2019-08-15 01:10:22 +00:00
|
|
|
|
2019-06-27 20:36:43 +00:00
|
|
|
const {
|
|
|
|
a,
|
2019-08-13 20:53:11 +00:00
|
|
|
article,
|
|
|
|
button,
|
|
|
|
details,
|
2019-06-29 17:55:43 +00:00
|
|
|
div,
|
2019-08-13 20:53:11 +00:00
|
|
|
footer,
|
|
|
|
form,
|
2019-06-27 20:36:43 +00:00
|
|
|
header,
|
|
|
|
img,
|
|
|
|
section,
|
|
|
|
span,
|
2019-08-14 02:20:10 +00:00
|
|
|
summary,
|
|
|
|
pre
|
2019-06-27 20:36:43 +00:00
|
|
|
} = require('hyperaxe')
|
|
|
|
|
2019-08-14 02:20:10 +00:00
|
|
|
const highlightJs = require('highlight.js')
|
2019-06-28 20:55:05 +00:00
|
|
|
const lodash = require('lodash')
|
|
|
|
|
2019-06-27 20:36:43 +00:00
|
|
|
module.exports = ({ msg }) => {
|
2019-06-28 20:55:05 +00:00
|
|
|
const encoded = {
|
|
|
|
key: encodeURIComponent(msg.key),
|
|
|
|
author: encodeURIComponent(msg.value.author),
|
|
|
|
parent: encodeURIComponent(msg.value.content.root)
|
|
|
|
}
|
|
|
|
|
2019-06-27 20:36:43 +00:00
|
|
|
const url = {
|
2019-06-28 20:55:05 +00:00
|
|
|
author: `/author/${encoded.author}`,
|
|
|
|
likeForm: `/like/${encoded.key}`,
|
2019-09-30 19:34:59 +00:00
|
|
|
link: `/thread/${encoded.key}#${encoded.key}`,
|
2019-06-28 20:55:05 +00:00
|
|
|
parent: `/thread/${encoded.parent}#${encoded.parent}`,
|
2019-06-27 20:36:43 +00:00
|
|
|
avatar: msg.value.meta.author.avatar.url,
|
2019-09-30 19:34:59 +00:00
|
|
|
json: `/json/${encoded.key}`,
|
2019-09-27 00:19:18 +00:00
|
|
|
reply: `/reply/${encoded.key}`,
|
2019-12-29 00:30:49 +00:00
|
|
|
comment: `/comment/${encoded.key}`
|
2019-06-27 20:36:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const isPrivate = Boolean(msg.value.meta.private)
|
2019-12-16 17:15:34 +00:00
|
|
|
const isRoot = msg.value.content.root == null
|
2019-09-26 00:19:55 +00:00
|
|
|
const isThreadTarget = Boolean(lodash.get(
|
|
|
|
msg,
|
|
|
|
'value.meta.thread.target',
|
|
|
|
false
|
|
|
|
))
|
2019-09-27 18:40:00 +00:00
|
|
|
const isReply = Boolean(lodash.get(
|
|
|
|
msg,
|
|
|
|
'value.meta.thread.reply',
|
|
|
|
false
|
|
|
|
))
|
2019-06-27 20:36:43 +00:00
|
|
|
|
2019-08-15 01:10:22 +00:00
|
|
|
const { name } = msg.value.meta.author
|
2019-12-16 02:22:51 +00:00
|
|
|
const timeAgo = msg.value.meta.timestamp.received.since.replace('~', '')
|
2019-06-28 20:55:05 +00:00
|
|
|
|
2019-06-29 19:06:45 +00:00
|
|
|
const depth = lodash.get(msg, 'value.meta.thread.depth', 0)
|
2019-06-27 20:36:43 +00:00
|
|
|
|
|
|
|
const markdownContent = msg.value.meta.md.block()
|
|
|
|
|
2019-08-13 20:53:11 +00:00
|
|
|
const hasContentWarning = typeof msg.value.content.contentWarning === 'string'
|
|
|
|
|
2019-06-28 20:55:05 +00:00
|
|
|
const likeButton = msg.value.meta.voted
|
|
|
|
? { value: 0, class: 'liked' }
|
|
|
|
: { value: 1, class: null }
|
2019-06-27 20:36:43 +00:00
|
|
|
|
|
|
|
const likeCount = msg.value.meta.votes.length
|
|
|
|
|
2019-12-15 19:01:02 +00:00
|
|
|
const messageClasses = []
|
2019-06-29 19:06:45 +00:00
|
|
|
|
|
|
|
if (isPrivate) {
|
|
|
|
messageClasses.push('private')
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isThreadTarget) {
|
|
|
|
messageClasses.push('thread-target')
|
|
|
|
}
|
|
|
|
|
2019-09-27 18:40:00 +00:00
|
|
|
if (isReply) {
|
2019-08-07 14:47:21 +00:00
|
|
|
messageClasses.push('reply')
|
|
|
|
}
|
|
|
|
|
2019-12-16 02:22:51 +00:00
|
|
|
const postOptions = {
|
|
|
|
post: null,
|
2019-12-29 00:30:49 +00:00
|
|
|
comment: [
|
|
|
|
'commented on ',
|
2019-12-16 02:22:51 +00:00
|
|
|
a({ href: url.parent }, ' thread')
|
|
|
|
],
|
|
|
|
reply: [
|
|
|
|
'replied to ',
|
|
|
|
a({ href: url.parent }, ' message')
|
|
|
|
],
|
|
|
|
mystery: 'posted a mysterious message'
|
|
|
|
}
|
|
|
|
|
2019-08-14 02:20:10 +00:00
|
|
|
const emptyContent = '<p>undefined</p>\n'
|
|
|
|
const articleElement = markdownContent === emptyContent
|
|
|
|
? article({ class: 'content' }, pre({
|
2019-09-26 00:19:55 +00:00
|
|
|
innerHTML: highlightJs.highlight(
|
|
|
|
'json',
|
|
|
|
JSON.stringify(msg, null, 2)
|
|
|
|
).value
|
2019-08-14 02:20:10 +00:00
|
|
|
}))
|
|
|
|
: article({ class: 'content', innerHTML: markdownContent })
|
2019-08-13 20:53:11 +00:00
|
|
|
|
|
|
|
const articleContent = hasContentWarning
|
|
|
|
? details(
|
|
|
|
summary(msg.value.content.contentWarning),
|
|
|
|
articleElement
|
|
|
|
)
|
|
|
|
: articleElement
|
|
|
|
|
2019-06-27 20:36:43 +00:00
|
|
|
const fragment =
|
2019-06-28 20:55:05 +00:00
|
|
|
section({
|
|
|
|
id: msg.key,
|
2019-06-29 19:06:45 +00:00
|
|
|
class: messageClasses.join(' '),
|
2019-12-11 23:38:13 +00:00
|
|
|
style: `margin-left: ${depth}rem;`
|
2019-06-28 20:55:05 +00:00
|
|
|
},
|
2019-12-16 02:22:51 +00:00
|
|
|
header(
|
|
|
|
span({ class: 'author' },
|
|
|
|
a({ href: url.author },
|
|
|
|
img({ class: 'avatar', src: url.avatar, alt: '' }),
|
|
|
|
name
|
|
|
|
),
|
|
|
|
postOptions[msg.value.meta.postType]
|
|
|
|
),
|
|
|
|
span({ class: 'time' },
|
|
|
|
isPrivate ? '🔒' : null,
|
|
|
|
a({ href: url.link }, timeAgo)
|
|
|
|
)
|
|
|
|
),
|
2019-08-13 20:53:11 +00:00
|
|
|
articleContent,
|
2019-06-29 17:55:43 +00:00
|
|
|
|
|
|
|
// HACK: centered-footer
|
|
|
|
//
|
|
|
|
// Here we create an empty div with an anchor tag that can be linked to.
|
|
|
|
// In our CSS we ensure that this gets centered on the screen when we
|
|
|
|
// link to this anchor tag.
|
|
|
|
//
|
|
|
|
// This is used for redirecting users after they like a post, when we
|
|
|
|
// want the like button that they just clicked to remain close-ish to
|
|
|
|
// where it was before they clicked the button.
|
|
|
|
div({ id: `centered-footer-${encoded.key}`, class: 'centered-footer' }),
|
|
|
|
|
2019-08-07 14:47:21 +00:00
|
|
|
footer(
|
|
|
|
form({ action: url.likeForm, method: 'post' },
|
|
|
|
button({
|
|
|
|
name: 'voteValue',
|
|
|
|
type: 'submit',
|
|
|
|
value: likeButton.value,
|
|
|
|
class: likeButton.class
|
|
|
|
},
|
2019-08-15 01:10:22 +00:00
|
|
|
`❤ ${likeCount}`)),
|
2019-12-16 17:15:34 +00:00
|
|
|
(isPrivate || isRoot) ? null : a({ href: url.reply }, 'reply'),
|
2019-12-29 00:30:49 +00:00
|
|
|
isPrivate ? null : a({ href: url.comment }, 'comment'),
|
2019-09-30 19:34:59 +00:00
|
|
|
a({ href: url.json }, 'json')
|
2019-08-15 01:10:22 +00:00
|
|
|
))
|
2019-06-27 20:36:43 +00:00
|
|
|
|
|
|
|
return fragment
|
|
|
|
}
|