Render user flairs

dist/css/styles.css

@@ -994,6 +994,35 @@ input[type="submit"]:hover,
 #user .entries .entry a.context {
 	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 {
 	float: left;

inc/commons.js

@@ -197,4 +197,30 @@ module.exports = function(request, fs) {
       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 ''
+  }
+
 }

inc/compilePostComments.js

@@ -48,6 +48,7 @@ module.exports = function() {
                 </summary>
               <div class="meta">
                 <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="created" title="${toUTCString(comments.created)}">
                    <a href="${comments.permalink}">${timeDifference(comments.created)}${edited_span}</a>
@@ -134,6 +135,7 @@ module.exports = function() {
                   </summary>
                   <div class="meta">
                     <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="created" title="${toUTCString(comment.created)}">
                       <a href="${comment.permalink}">${timeDifference(comment.created)}${edited_span}</a>

inc/processJsonPost.js

@@ -32,7 +32,8 @@ module.exports = function(fetch) {
           media: null,
           images: null,
           crosspost: false,
-          selftext: unescape(post.selftext_html)
+          selftext: unescape(post.selftext_html),
+          user_flair: formatUserFlair(post)
         }
 
         let validEmbedDomains = ['gfycat.com', 'youtube.com']
@@ -84,7 +85,8 @@ module.exports = function(fetch) {
             ups: post.crosspost.ups,
             selftext: unescape(post.selftext_html),
             selftext_crosspost: unescape(post.crosspost.selftext_html),
-            is_crosspost: true
+            is_crosspost: true,
+            user_flair: formatUserFlair(post)
           }
         }
 
@@ -143,7 +145,8 @@ module.exports = function(fetch) {
               score_hidden: comment.score_hidden,
               edited: comment.edited,
               replies: [],
-              depth: 0
+              depth: 0,
+              user_flair: formatUserFlair(comment)
             }
           } else {
             obj = {
@@ -220,7 +223,8 @@ module.exports = function(fetch) {
           score_hidden: reply.score_hidden,
           edited: reply.edited,
           replies: [],
-          depth: depth
+          depth: depth,
+          user_flair: formatUserFlair(reply)
         }
       } else {
         obj = {
@@ -255,7 +259,8 @@ module.exports = function(fetch) {
                 distinguished: comment.distinguished,
                 distinguished: comment.edited,
                 replies: [],
-                depth: depth + 1
+                depth: depth + 1,
+                user_flair: formatUserFlair(comment)
               }
             } else {
               objct = {

inc/processJsonSubreddit.js

@@ -73,7 +73,8 @@ module.exports = function() {
               url: data.url,
               stickied: data.stickied,
               is_self_link: is_self_link,
-              subreddit_front: subreddit_front
+              subreddit_front: subreddit_front,
+              user_flair: formatUserFlair(data)
             }
             ret.links.push(obj)
           }

inc/processJsonUser.js

@@ -62,7 +62,8 @@ module.exports = function() {
               edited: post.edited,
               selftext_html: unescape(post.selftext_html),
               num_comments: post.num_comments,
-              permalink: post.permalink
+              permalink: post.permalink,
+              user_flair: formatUserFlair(post)
             }
           }
           if(type === 't1') {
@@ -79,7 +80,8 @@ module.exports = function() {
               num_comments: post.num_comments,
               permalink: post.permalink,
               link_author: post.link_author,
-              link_title: post.link_title
+              link_title: post.link_title,
+              user_flair: formatUserFlair(post)
             }
           }
           posts.push(obj)

views/post.pug

@@ -33,6 +33,7 @@ html
             else
               a(href="/u/" + post.author + "")
                 | #{post.author}
+            != post.user_flair
         if post.crosspost.is_crosspost === true
           .crosspost
             .title
@@ -52,6 +53,7 @@ html
               else
                 a(href="/u/" + post.crosspost.author + "")
                   | #{post.crosspost.author}
+              != post.user_flair
             p.to to
               a(href="/r/" + post.crosspost.subreddit + "")
                 | #{post.crosspost.subreddit}

views/subreddit.pug

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

views/user.pug

@@ -80,9 +80,11 @@ html
                 .title
                   a(href="" + post.permalink + "") #{cleanTitle(post.title)}
                   .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}
                       | to
+                      != post.user_flair
                       a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit}
                     a.comments(href="" + post.permalink + "") #{post.num_comments} comments
             if post.type === 't1'
@@ -108,6 +110,8 @@ html
                     .meta
                       p.author
                         a(href="/u/" + data.username + "") #{data.username}
+                      p
+                        != post.user_flair
                       p.ups #{post.ups} points
                       p.created(title="" + toUTCString(post.created) + "") #{timeDifference(post.created)}
                     .body
@@ -127,28 +131,3 @@ html
           br
           p(title="" + toUTCString(data.created) + "") account created: #{toDateString(data.created)}
           p verified: #{(data.verified) ? "yes" : "no" }
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            
-