Render user flairs

This commit is contained in:
StevenNMeza 2020-12-21 12:27:31 +01:00
parent d7436f10be
commit 5057018fb6
9 changed files with 120 additions and 73 deletions

29
dist/css/styles.css vendored
View File

@ -994,6 +994,35 @@ input[type="submit"]:hover,
#user .entries .entry a.context { #user .entries .entry a.context {
margin-right: 10px; margin-right: 10px;
} }
/* FLAIR */
.flair {
/* Todo: Merge this with post flairs (.postflair) */
display: inline-block;
border-radius: 4px;
color: #404040;
background-color: #e8e8e8;
font-size: x-small;
margin-left: 10px;
padding: 0 2px;
}
#post .comments .flair,
#user .comment .meta .flair {
margin-left: 0 !important;
}
#links .link .entry .meta p.submitted .flair,
#user .comment .meta .flair,
#user .entries p.submitted .flair {
margin-right: 4px;
}
.flair .emoji {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
}
/* SIDEBAR */ /* SIDEBAR */
#sidebar { #sidebar {
float: left; float: left;

View File

@ -1,4 +1,4 @@
module.exports = function(request, fs) { module.exports = function(request, fs) {
const config = require('../config') const config = require('../config')
this.downloadFile = (url) => { this.downloadFile = (url) => {
return new Promise(resolve => { return new Promise(resolve => {
@ -51,7 +51,7 @@ module.exports = function(request, fs) {
if(video_exts.includes(file_ext) || !image_exts.includes(file_ext)) if(video_exts.includes(file_ext) || !image_exts.includes(file_ext))
url = url.replace(u.host, `${config.domain}/vids`) + '.mp4' url = url.replace(u.host, `${config.domain}/vids`) + '.mp4'
} }
} catch(e) { } } catch(e) { }
return url return url
} }
@ -59,7 +59,7 @@ module.exports = function(request, fs) {
this.kFormatter = (num) => { this.kFormatter = (num) => {
return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num) return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
} }
this.timeDifference = (time) => { this.timeDifference = (time) => {
time = parseInt(time) * 1000 time = parseInt(time) * 1000
let ms_per_minute = 60 * 1000 let ms_per_minute = 60 * 1000
@ -121,7 +121,7 @@ module.exports = function(request, fs) {
return r return r
} }
} }
this.toUTCString = (time) => { this.toUTCString = (time) => {
let d = new Date(); let d = new Date();
d.setTime(time*1000); d.setTime(time*1000);
@ -165,7 +165,7 @@ module.exports = function(request, fs) {
}) })
}) })
} }
this.isGif = (url) => { this.isGif = (url) => {
try { try {
url = new URL(url) url = new URL(url)
@ -197,4 +197,30 @@ module.exports = function(request, fs) {
return '' return ''
} }
} }
this.formatUserFlair = (post) => {
// Generate the entire HTML here for consistency in both pug and HTML
const wrap = (inner) => `<span class="flair">${inner}</span>`
if (post.author_flair_text === null)
return ''
if (post.author_flair_type === 'text')
return wrap(post.author_flair_text)
if (post.author_flair_type === 'richtext') {
let flair = ''
for (let fragment of post.author_flair_richtext) {
// `e` seems to mean `type`
if (fragment.e === 'text')
flair += fragment.t // `t` is the text
else if (fragment.e === 'emoji')
flair += `<span class="emoji" style="background-image: url(${fragment.u})"></span>` // `u` is the emoji URL
}
return wrap(flair)
}
return ''
}
} }

View File

@ -18,7 +18,7 @@ module.exports = function() {
let moderator = false let moderator = false
let submitter = false let submitter = false
let edited_span = '' let edited_span = ''
if(post_author === comments.author) { if(post_author === comments.author) {
classlist.push('submitter') classlist.push('submitter')
submitter_link = `<a href="${post_url}" title="submitter">[S]</a>` submitter_link = `<a href="${post_url}" title="submitter">[S]</a>`
@ -48,6 +48,7 @@ module.exports = function() {
</summary> </summary>
<div class="meta"> <div class="meta">
<p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p> <p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
<p>${comments.user_flair}</p>
<p class="ups">${ups}</p> <p class="ups">${ups}</p>
<p class="created" title="${toUTCString(comments.created)}"> <p class="created" title="${toUTCString(comments.created)}">
<a href="${comments.permalink}">${timeDifference(comments.created)}${edited_span}</a> <a href="${comments.permalink}">${timeDifference(comments.created)}${edited_span}</a>
@ -104,7 +105,7 @@ module.exports = function() {
let submitter = false let submitter = false
let ups = '' let ups = ''
let edited_span = '' let edited_span = ''
if(post_author === comment.author) { if(post_author === comment.author) {
classlist.push('submitter') classlist.push('submitter')
submitter_link = `<a href="${post_url}" title="submitter">[S]</a>` submitter_link = `<a href="${post_url}" title="submitter">[S]</a>`
@ -134,6 +135,7 @@ module.exports = function() {
</summary> </summary>
<div class="meta"> <div class="meta">
<p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p> <p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
<p>${comment.user_flair}</p>
<p class="ups">${ups}</p> <p class="ups">${ups}</p>
<p class="created" title="${toUTCString(comment.created)}"> <p class="created" title="${toUTCString(comment.created)}">
<a href="${comment.permalink}">${timeDifference(comment.created)}${edited_span}</a> <a href="${comment.permalink}">${timeDifference(comment.created)}${edited_span}</a>
@ -185,7 +187,7 @@ module.exports = function() {
comments_html += `</details></div>` comments_html += `</details></div>`
} }
next_comment_parent_id = null next_comment_parent_id = null
resolve(comments_html) resolve(comments_html)
})() })()
}) })

View File

@ -7,7 +7,7 @@ module.exports = function(fetch) {
if(!parsed) { if(!parsed) {
json = JSON.parse(json) json = JSON.parse(json)
} }
let post = json[0].data.children[0].data let post = json[0].data.children[0].data
let post_id = post.name let post_id = post.name
let comments = json[1].data.children let comments = json[1].data.children
@ -32,14 +32,15 @@ module.exports = function(fetch) {
media: null, media: null,
images: null, images: null,
crosspost: false, crosspost: false,
selftext: unescape(post.selftext_html) selftext: unescape(post.selftext_html),
user_flair: formatUserFlair(post)
} }
let validEmbedDomains = ['gfycat.com', 'youtube.com'] let validEmbedDomains = ['gfycat.com', 'youtube.com']
let has_gif = false let has_gif = false
let gif_to_mp4 = null let gif_to_mp4 = null
let reddit_video = null let reddit_video = null
if(post.preview) { if(post.preview) {
if(post.preview.reddit_video_preview) { if(post.preview.reddit_video_preview) {
if(post.preview.reddit_video_preview.is_gif) { if(post.preview.reddit_video_preview.is_gif) {
@ -66,7 +67,7 @@ module.exports = function(fetch) {
} }
obj = await processPostMedia(obj, post, post.media, has_gif, reddit_video, gif_to_mp4) obj = await processPostMedia(obj, post, post.media, has_gif, reddit_video, gif_to_mp4)
if(post.crosspost_parent_list) { if(post.crosspost_parent_list) {
post.crosspost = post.crosspost_parent_list[0] post.crosspost = post.crosspost_parent_list[0]
} }
@ -84,7 +85,8 @@ module.exports = function(fetch) {
ups: post.crosspost.ups, ups: post.crosspost.ups,
selftext: unescape(post.selftext_html), selftext: unescape(post.selftext_html),
selftext_crosspost: unescape(post.crosspost.selftext_html), selftext_crosspost: unescape(post.crosspost.selftext_html),
is_crosspost: true is_crosspost: true,
user_flair: formatUserFlair(post)
} }
} }
@ -93,7 +95,7 @@ module.exports = function(fetch) {
source: await downloadAndSave(post.preview.images[0].source.url) source: await downloadAndSave(post.preview.images[0].source.url)
} }
} }
if(obj.media) { if(obj.media) {
if(obj.media.source === 'external') { if(obj.media.source === 'external') {
if(post.preview) { if(post.preview) {
@ -103,7 +105,7 @@ module.exports = function(fetch) {
} }
} }
} }
if(post.gallery_data) { if(post.gallery_data) {
obj.gallery = true obj.gallery = true
obj.gallery_items = [] obj.gallery_items = []
@ -120,13 +122,13 @@ module.exports = function(fetch) {
} }
} }
} }
let comms = [] let comms = []
for(var i = 0; i < comments.length; i++) { for(var i = 0; i < comments.length; i++) {
let comment = comments[i].data let comment = comments[i].data
let kind = comments[i].kind let kind = comments[i].kind
let obj = {} let obj = {}
if(kind !== 'more') { if(kind !== 'more') {
obj = { obj = {
author: comment.author, author: comment.author,
@ -143,7 +145,8 @@ module.exports = function(fetch) {
score_hidden: comment.score_hidden, score_hidden: comment.score_hidden,
edited: comment.edited, edited: comment.edited,
replies: [], replies: [],
depth: 0 depth: 0,
user_flair: formatUserFlair(comment)
} }
} else { } else {
obj = { obj = {
@ -155,7 +158,7 @@ module.exports = function(fetch) {
children: [] children: []
} }
} }
if(comment.replies && kind !== 'more') { if(comment.replies && kind !== 'more') {
if(comment.replies.data) { if(comment.replies.data) {
if(comment.replies.data.children.length > 0) { if(comment.replies.data.children.length > 0) {
@ -163,18 +166,18 @@ module.exports = function(fetch) {
} }
} }
} }
if(comment.children) { if(comment.children) {
for(var j = 0; j < comment.children.length; j++) { for(var j = 0; j < comment.children.length; j++) {
obj.children.push(comment.children[j]) obj.children.push(comment.children[j])
} }
} }
comms.push(obj) comms.push(obj)
} }
obj.comments = comms obj.comments = comms
resolve(obj) resolve(obj)
})() })()
}) })
@ -220,7 +223,8 @@ module.exports = function(fetch) {
score_hidden: reply.score_hidden, score_hidden: reply.score_hidden,
edited: reply.edited, edited: reply.edited,
replies: [], replies: [],
depth: depth depth: depth,
user_flair: formatUserFlair(reply)
} }
} else { } else {
obj = { obj = {
@ -233,13 +237,13 @@ module.exports = function(fetch) {
depth: depth depth: depth
} }
} }
if(reply.replies && kind !== 'more') { if(reply.replies && kind !== 'more') {
if(reply.replies.data.children.length) { if(reply.replies.data.children.length) {
for(var j = 0; j < reply.replies.data.children.length; j++) { for(var j = 0; j < reply.replies.data.children.length; j++) {
let comment = reply.replies.data.children[j].data let comment = reply.replies.data.children[j].data
let objct = {} let objct = {}
if(comment.author && comment.body_html) { if(comment.author && comment.body_html) {
objct = { objct = {
author: comment.author, author: comment.author,
@ -255,7 +259,8 @@ module.exports = function(fetch) {
distinguished: comment.distinguished, distinguished: comment.distinguished,
distinguished: comment.edited, distinguished: comment.edited,
replies: [], replies: [],
depth: depth + 1 depth: depth + 1,
user_flair: formatUserFlair(comment)
} }
} else { } else {
objct = { objct = {
@ -273,7 +278,7 @@ module.exports = function(fetch) {
} }
} }
} }
if(comment.replies) { if(comment.replies) {
if(comment.replies.data) { if(comment.replies.data) {
if(comment.replies.data.children.length > 0) { if(comment.replies.data.children.length > 0) {
@ -286,13 +291,13 @@ module.exports = function(fetch) {
} }
} }
} }
if(reply.children) { if(reply.children) {
for(var j = 0; j < reply.children.length; j++) { for(var j = 0; j < reply.children.length; j++) {
obj.children.push(reply.children[j]) obj.children.push(reply.children[j])
} }
} }
return_replies.push(obj) return_replies.push(obj)
} }
return return_replies return return_replies

View File

@ -11,7 +11,7 @@ module.exports = function() {
} else { } else {
let before = json.data.before let before = json.data.before
let after = json.data.after let after = json.data.after
let ret = { let ret = {
info: { info: {
before: before, before: before,
@ -19,9 +19,9 @@ module.exports = function() {
}, },
links: [] links: []
} }
let children_len = json.data.children.length let children_len = json.data.children.length
for(var i = 0; i < children_len; i++) { for(var i = 0; i < children_len; i++) {
let data = json.data.children[i].data let data = json.data.children[i].data
let images = null let images = null
@ -39,7 +39,7 @@ module.exports = function() {
is_self_link = true is_self_link = true
} }
} }
if(data.preview && data.thumbnail !== 'self') { if(data.preview && data.thumbnail !== 'self') {
if(!data.url.startsWith('/r/') && isGif(data.url)) { if(!data.url.startsWith('/r/') && isGif(data.url)) {
images = { images = {
@ -73,7 +73,8 @@ module.exports = function() {
url: data.url, url: data.url,
stickied: data.stickied, stickied: data.stickied,
is_self_link: is_self_link, is_self_link: is_self_link,
subreddit_front: subreddit_front subreddit_front: subreddit_front,
user_flair: formatUserFlair(data)
} }
ret.links.push(obj) ret.links.push(obj)
} }

View File

@ -21,7 +21,7 @@ module.exports = function() {
if(!after && !before) { if(!after && !before) {
user_front = true user_front = true
} }
if(json.overview.data.children) { if(json.overview.data.children) {
if(json.overview.data.children[posts_limit - 1]) { if(json.overview.data.children[posts_limit - 1]) {
after = json.overview.data.children[posts_limit - 1].data.name after = json.overview.data.children[posts_limit - 1].data.name
@ -30,16 +30,16 @@ module.exports = function() {
before = json.overview.data.children[0].data.name before = json.overview.data.children[0].data.name
} }
} }
for(var i = 0; i < posts_limit; i++) { for(var i = 0; i < posts_limit; i++) {
let post = json.overview.data.children[i].data let post = json.overview.data.children[i].data
let thumbnail = 'self' let thumbnail = 'self'
let type = json.overview.data.children[i].kind let type = json.overview.data.children[i].kind
let obj let obj
let post_id = post.permalink.split('/').slice(-2)[0] + '/' let post_id = post.permalink.split('/').slice(-2)[0] + '/'
let url = post.permalink.replace(post_id, '') let url = post.permalink.replace(post_id, '')
if(type === 't3') { if(type === 't3') {
let duration = null let duration = null
if(post.media) { if(post.media) {
@ -62,7 +62,8 @@ module.exports = function() {
edited: post.edited, edited: post.edited,
selftext_html: unescape(post.selftext_html), selftext_html: unescape(post.selftext_html),
num_comments: post.num_comments, num_comments: post.num_comments,
permalink: post.permalink permalink: post.permalink,
user_flair: formatUserFlair(post)
} }
} }
if(type === 't1') { if(type === 't1') {
@ -79,7 +80,8 @@ module.exports = function() {
num_comments: post.num_comments, num_comments: post.num_comments,
permalink: post.permalink, permalink: post.permalink,
link_author: post.link_author, link_author: post.link_author,
link_title: post.link_title link_title: post.link_title,
user_flair: formatUserFlair(post)
} }
} }
posts.push(obj) posts.push(obj)
@ -98,7 +100,7 @@ module.exports = function() {
after: after, after: after,
posts: posts posts: posts
} }
resolve(obj) resolve(obj)
})() })()
}) })

View File

@ -12,7 +12,7 @@ html
#post #post
header header
div div
p subreddit: p subreddit:
a(href="/r/" + subreddit + "") a(href="/r/" + subreddit + "")
p /r/#{subreddit} p /r/#{subreddit}
.info .info
@ -33,6 +33,7 @@ html
else else
a(href="/u/" + post.author + "") a(href="/u/" + post.author + "")
| #{post.author} | #{post.author}
!= post.user_flair
if post.crosspost.is_crosspost === true if post.crosspost.is_crosspost === true
.crosspost .crosspost
.title .title
@ -52,6 +53,7 @@ html
else else
a(href="/u/" + post.crosspost.author + "") a(href="/u/" + post.crosspost.author + "")
| #{post.crosspost.author} | #{post.crosspost.author}
!= post.user_flair
p.to to p.to to
a(href="/r/" + post.crosspost.subreddit + "") a(href="/r/" + post.crosspost.subreddit + "")
| #{post.crosspost.subreddit} | #{post.crosspost.subreddit}
@ -128,8 +130,8 @@ html
source(src="" + post.media.source + "", type="video/mp4") source(src="" + post.media.source + "", type="video/mp4")
| Your browser does not support the video element. | Your browser does not support the video element.
a(href="" + post.media.source + "") [media] a(href="" + post.media.source + "") [media]
if post.selftext if post.selftext
div.usertext-body !{post.selftext} div.usertext-body !{post.selftext}
if viewing_comment if viewing_comment
.infobar .infobar
p you are viewing a single comment's thread. p you are viewing a single comment's thread.

View File

@ -101,6 +101,7 @@ html
else else
a(href="/u/" + link.author + "") a(href="/u/" + link.author + "")
| #{link.author} | #{link.author}
!= link.user_flair
p.to to p.to to
a(href="/r/" + link.subreddit + "") a(href="/r/" + link.subreddit + "")
| #{link.subreddit} | #{link.subreddit}

View File

@ -80,9 +80,11 @@ html
.title .title
a(href="" + post.permalink + "") #{cleanTitle(post.title)} a(href="" + post.permalink + "") #{cleanTitle(post.title)}
.meta .meta
p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)} by p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)}
| by
a(href="/u/" + data.username + "") #{data.username} a(href="/u/" + data.username + "") #{data.username}
| to | to
!= post.user_flair
a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit} a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit}
a.comments(href="" + post.permalink + "") #{post.num_comments} comments a.comments(href="" + post.permalink + "") #{post.num_comments} comments
if post.type === 't1' if post.type === 't1'
@ -98,7 +100,7 @@ html
a(href="/u/" + post.link_author + "") #{post.link_author} a(href="/u/" + post.link_author + "") #{post.link_author}
.subreddit .subreddit
p in p in
a(href="/r/" + post.subreddit + "") #{post.subreddit} a(href="/r/" + post.subreddit + "") #{post.subreddit}
.comment .comment
details(open="") details(open="")
summary summary
@ -108,10 +110,12 @@ html
.meta .meta
p.author p.author
a(href="/u/" + data.username + "") #{data.username} a(href="/u/" + data.username + "") #{data.username}
p
!= post.user_flair
p.ups #{post.ups} points p.ups #{post.ups} points
p.created(title="" + toUTCString(post.created) + "") #{timeDifference(post.created)} p.created(title="" + toUTCString(post.created) + "") #{timeDifference(post.created)}
.body .body
div !{post.body_html} div !{post.body_html}
a.context(href="" + post.permalink + "?context=10") context a.context(href="" + post.permalink + "?context=10") context
a.comments.t1(href="" + post.url + "") full comments (#{post.num_comments}) a.comments.t1(href="" + post.url + "") full comments (#{post.num_comments})
if data.before || data.after if data.before || data.after
@ -127,28 +131,3 @@ html
br br
p(title="" + toUTCString(data.created) + "") account created: #{toDateString(data.created)} p(title="" + toUTCString(data.created) + "") account created: #{toDateString(data.created)}
p verified: #{(data.verified) ? "yes" : "no" } p verified: #{(data.verified) ? "yes" : "no" }