Merge pull request 'Add a central component for links' (#198) from StevenNMeza/teddit:link_component into main

Reviewed-on: https://codeberg.org/teddit/teddit/pulls/198

inc/components/link.js

@@ -0,0 +1,82 @@
+/*
+ * Corresponds to `components/link.pug`
+ */
+
+const config = require('../../config')
+let valid_reddit_self_domains = ['reddit.com']
+
+// Parses a link from a response returned by reddit.
+async function fromJson(data, user_preferences, subreddit_front) {
+  let result = {}
+
+  // Meta
+  result.id = data.id
+  result.permalink = data.permalink
+  result.created = data.created_utc
+  result.author = data.author
+  result.title = data.title
+  result.over_18 = data.over_18
+  result.score = data.score
+  result.ups = data.ups
+  result.upvote_ratio = data.upvote_ratio
+  result.num_comments = data.num_comments
+
+  // Content
+  result.is_self_link = false
+  result.selftext_html = data.selftext_html
+  result.url = replaceDomains(data.url, user_preferences)
+  result.domain = data.domain
+  result.is_video = data.is_video
+  result.media = data.media
+  result.duration = data.is_video ? data.media.reddit_video ? data.media.reddit_video.duration : void 0 : void 0
+  result.images = null
+
+  // Moderation attributes
+  result.locked = data.locked
+  result.stickied = data.stickied
+
+  // Subreddit
+  result.subreddit_front = subreddit_front
+  result.subreddit = data.subreddit
+
+  // Flair
+  result.link_flair = (user_preferences.flairs != 'false' ? await formatLinkFlair(data) : '')
+  result.user_flair = (user_preferences.flairs != 'false' ? await formatUserFlair(data) : '')
+  result.link_flair_text = data.link_flair_text
+
+  if(data.domain) {
+    let tld = data.domain.split('self.')
+    if(tld.length > 1) {
+      if(!tld[1].includes('.')) {
+        result.is_self_link = true
+      }
+    }
+    if(config.valid_media_domains.includes(data.domain) || valid_reddit_self_domains.includes(data.domain)) {
+      result.is_self_link = true
+    }
+  }
+
+  if(data.preview && data.thumbnail !== 'self') {
+    if(!data.url.startsWith('/r/') && isGif(data.url)) {
+      result.images = {
+        thumb: await downloadAndSave(data.thumbnail, 'thumb_')
+      }
+    } else {
+      if(data.preview.images[0].resolutions[0]) {
+        let preview = null
+        if(!isGif(data.url) && !data.post_hint.includes(':video'))
+          preview = await downloadAndSave(data.preview.images[0].source.url)
+        result.images = {
+          thumb: await downloadAndSave(data.preview.images[0].resolutions[0].url, 'thumb_'),
+          preview: preview
+        }
+      }
+    }
+  }
+
+  return result
+}
+
+module.exports = {
+  fromJson,
+}

inc/processJsonSubreddit.js

@@ -1,5 +1,6 @@
 module.exports = function() {
   const config = require('../config');
+  const link = require('./components/link')
   this.processJsonSubreddit = (json, from, subreddit_front, user_preferences, saved) => {
     return new Promise(resolve => {
       (async () => {
@@ -35,43 +36,14 @@ module.exports = function() {
 
           for(var i = 0; i < children_len; i++) {
             let data = json.data.children[i].data
-            let images = null
-            let is_self_link = false
-            let valid_reddit_self_domains = ['reddit.com']
 
             if(data.over_18)
               if((config.nsfw_enabled === false && user_preferences.nsfw_enabled != 'true') || user_preferences.nsfw_enabled === 'false')
                 continue
 
-            if(data.domain) {
-              let tld = data.domain.split('self.')
-              if(tld.length > 1) {
-                if(!tld[1].includes('.')) {
-                  is_self_link = true
-                }
-              }
-              if(config.valid_media_domains.includes(data.domain) || valid_reddit_self_domains.includes(data.domain)) {
-                is_self_link = true
-              }
-            }
-
-            if(data.preview && data.thumbnail !== 'self') {
-              if(!data.url.startsWith('/r/') && isGif(data.url)) {
-                images = {
-                  thumb: await downloadAndSave(data.thumbnail, 'thumb_')
-                }
-              } else {
-                if(data.preview.images[0].resolutions[0]) {
-                  let preview = null
-                  if(!isGif(data.url) && !data.post_hint.includes(':video'))
-                    preview = await downloadAndSave(data.preview.images[0].source.url)
-                  images = {
-                    thumb: await downloadAndSave(data.preview.images[0].resolutions[0].url, 'thumb_'),
-                    preview: preview
-                  }
-                }
-              }
-            }
+            /* 
+            // Todo: Remove this once the link component is done
+            // but keep it for now in case we need it later
             let obj = {
               author: data.author,
               created: data.created_utc,
@@ -97,7 +69,10 @@ module.exports = function() {
               subreddit_front: subreddit_front,
               link_flair: (user_preferences.flairs != 'false' ? await formatLinkFlair(data) : ''),
               user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(data) : '')
-            }
+            } */
+
+            let obj = await link.fromJson(data, user_preferences, subreddit_front)
+
             ret.links.push(obj)
           }
           resolve(ret)

inc/processJsonUser.js

@@ -1,5 +1,6 @@
 module.exports = function() {
   const config = require('../config');
+  const link = require('./components/link')
   this.processJsonUser = function(json, parsed, after, before, user_preferences, kind, post_type) {
     return new Promise(resolve => {
       (async () => {
@@ -49,31 +50,8 @@ module.exports = function() {
               continue
 
           if(type === 't3') {
-            let duration = null
-            if(post.media) {
-              if(post.is_video) {
-                if(post.media.reddit_video) {
-                  duration = post.media.reddit_video.duration
-                }
-              }
-            }
-
-            obj = {
-              type: type,
-              subreddit: post.subreddit,
-              title: post.title,
-              created: post.created_utc,
-              ups: post.ups,
-              url: replaceDomains(url, user_preferences),
-              thumbnail: await downloadAndSave(post.thumbnail),
-              duration: duration,
-              edited: post.edited,
-              selftext_html: unescape(post.selftext_html),
-              num_comments: post.num_comments,
-              over_18: post.over_18,
-              permalink: post.permalink,
-              user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(post) : '')
-            }
+            obj = await link.fromJson(post, user_preferences)
+            obj.type = 't3'
           }
           if(type === 't1') {
             obj = {

inc/processSearchResults.js

@@ -1,5 +1,6 @@
 module.exports = function() {
   const config = require('../config');
+  const link = require('./components/link')
   this.processSearchResults = (json, parsed, after, before, user_preferences) => {
     return new Promise(resolve => {
       (async () => {
@@ -36,61 +37,12 @@ module.exports = function() {
           
           for(var i = 0; i < posts_limit; i++) {
             let post = json.data.children[i].data
-            let images = null
-            let is_self_link = false
-            let valid_reddit_self_domains = ['reddit.com']
             
             if(post.over_18)
               if((config.nsfw_enabled === false && user_preferences.nsfw_enabled != 'true') || user_preferences.nsfw_enabled === 'false')
                 continue
 
-            if(post.domain) {
-              let tld = post.domain.split('self.')
-              if(tld.length > 1) {
-                if(!tld[1].includes('.')) {
-                  is_self_link = true
-                }
-              }
-              if(config.valid_media_domains.includes(post.domain) || valid_reddit_self_domains.includes(post.domain)) {
-                is_self_link = true
-              }
-            }
-
-            if(post.preview && post.thumbnail !== 'self') {
-              if(!post.url.startsWith('/r/') && isGif(post.url)) {
-                images = {
-                  thumb: await downloadAndSave(post.thumbnail, 'thumb_')
-                }
-              } else {
-                if(post.preview.images[0].resolutions[0]) {
-                  images = {
-                    thumb: await downloadAndSave(post.preview.images[0].resolutions[0].url, 'thumb_')
-                  }
-                }
-              }
-            }
-            
-            let obj = {
-              subreddit: post.subreddit,
-              title: post.title,
-              created: post.created_utc,
-              domain: post.domain,
-              subreddit_name_prefixed: post.subreddit_name_prefixed,
-              link_flair_text: post.link_flair_text,
-              ups: post.ups,
-              images: images,
-              url: replaceDomains(post.url, user_preferences),
-              edited: post.edited,
-              selftext_html: unescape(post.body_html),
-              num_comments: post.num_comments,
-              over_18: post.over_18,
-              permalink: post.permalink,
-              is_self_link: is_self_link,
-              author: post.author,
-              link_title: post.link_title,
-              link_flair: (user_preferences.flairs != 'false' ? await formatLinkFlair(post) : ''),
-              user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(post) : '')
-            }
+            let obj = await link.fromJson(post, user_preferences)
             posts.push(obj)
           }
         }

static/css/styles.css

@@ -566,6 +566,9 @@ footer a {
   overflow: hidden;
   background: var(--whitebg);
 }
+.commententry .comment {
+  padding-left: 0;
+}
 .comment details summary {
   float: left;
   font-size: 0.833rem;
@@ -924,14 +927,14 @@ footer a {
   width: 80%;
   min-height: 100vh;
 }
-#user .entries .entry {
+#user .entries .commententry {
   padding-left: 5px;
   padding-top: 10px;
   padding-bottom: 15px;
   float: left;
   width: 100%;
 }
-#user .entries .entry:first-child {
+#user .entries .commententry:first-child {
   padding-top: 0;
 }
 #user .info {
@@ -947,70 +950,70 @@ footer a {
   font-size: 1.1rem;
   overflow-wrap: anywhere;
 }
-#user .entries .entry .meta {
+#user .entries .commententry .meta {
   float: left;
 }
-#user .entries .entry .meta .title,
-#user .entries .entry .meta .author,
-#user .entries .entry .meta .subreddit,
-#user .entries .entry .meta .flair {
+#user .entries .commententry .meta .title,
+#user .entries .commententry .meta .author,
+#user .entries .commententry .meta .subreddit,
+#user .entries .commententry .meta .flair {
   float: left;
 }
-#user .entries .entry .meta a {
+#user .entries .commententry .meta a {
   margin-right: 5px;
   margin-left: 5px;
 }
-#user .entries .entry .title a {
+#user .entries .commententry .title a {
   margin-left: 0;
   font-size: 0.86rem;
 }
-#user .entries .entry .meta .author,#user .entries .entry .meta .subreddit {
+#user .entries .commententry .meta .author,#user .entries .commententry .meta .subreddit {
   font-size: 11px;
   margin-top: 3px;
 }
-#user .entries .entry .meta .author a {
+#user .entries .commententry .meta .author a {
   font-weight: bold;
 }
-#user .comment details {
+#user .commententry details {
   padding-top: 2px;
 }
-#user .comment details a.context,
-#user .comment details a.comments {
+#user .commententry details a.context,
+#user .commententry details a.comments {
   float: left;
 }
-#user .comment .meta p.ups,#user .comment .meta p.created {
+#user .commententry .meta p.ups,#user .commententry .meta p.created {
   font-size: var(--sm-font);
   padding-right: 5px;
 }
-#user .entries .entry .meta .created a {
+#user .entries .commententry .meta .created a {
   color: var(--graytext);
 }
-#user .entries .entry.t3 .title .meta {
+#user .entries .commententry.t3 .title .meta {
   float: left;
   width: 100%;
 }
-#user .entries .entry.t3 .title a {
+#user .entries .commententry.t3 .title a {
   margin-bottom: 3px;
 }
-#user .entries .entry.t3 .upvotes {
+#user .entries .commententry.t3 .upvotes {
   float: left;
   width: 60px;
 }
-#user .entries .entry.t3 .image {
+#user .entries .commententry.t3 .image {
   float: left;
   width: 80px;
 }
-#user .entries .entry.t3 .title {
+#user .entries .commententry.t3 .title {
   width: calc(100% - 200px);
   float: left;
 }
-#user .entries .entry .comment .meta .author {
+#user .entries .commententry .commententry .meta .author {
   margin-top: 0;
 }
-#user .comment .meta p {
+#user .commententry .meta p {
   padding-right: 0;
 }
-#user .comment .body {
+#user .commententry .body {
   padding-top: 4px;
   padding-bottom: 0;
 }
@@ -1018,26 +1021,25 @@ footer a {
   font-weight: bold;
   font-size: 1.1rem;
 }
-#user .comment details summary {
+#user .commententry details summary {
   font-size: var(--sm-font);
 }
-#user .comment details summary p {
+#user .commententry details summary p {
   margin-right: 5px;
   margin-left: 5px;
 }
-#user .comment details summary a {
+#user .commententry details summary a {
   margin-left: 5px;
 }
-#user .entries .entry .image,#user .entries .entry .upvotes,#user .entries .entry .title,#user .entries .entry .meta {
+#user .entries .commententry .image,#user .entries .commententry .upvotes,#user .entries .commententry .title,#user .entries .commententry .meta {
   float: left;
 }
-#user .entries .entry .image {
+#user .entries .commententry .image {
   margin-left: 0;
   margin-right: 8px;
   position: relative;
 }
-#user .entries .entry .image a span {
-  position: absolute;
+#user .entries .link .image a span {
   bottom: 0;
   background: #0000005e;
   left: 0;
@@ -1047,29 +1049,29 @@ footer a {
   font-size: var(--sm-font);
   margin-bottom: 4px;
 }
-#user .entries .entry .image img {
+#user .entries .link .image img {
   max-width: 80px;
 }
-#user .entries .entry .title a {
+#user .entries .commententry .title a {
   float: left;
 }
-#user .entries .entry .title .meta {
+#user .entries .commententry .title .meta {
   width: 100%;
 }
-#user .entries .entry .title .meta a {
+#user .entries .commententry .title .meta a {
   float: initial;
   font-weight: bold;
   font-size: var(--sm-font);
   margin-left: 5px;
 }
-#user .entries .entry .title .meta a.subreddit {
+#user .entries .commententry .title .meta a.subreddit {
   font-weight: unset;
 }
-#user .entries .entry .title .meta .submitted {
+#user .entries .commententry .title .meta .submitted {
   font-size: var(--sm-font);
   color: var(--graytext);
 }
-#user .entries .entry .meta .title {
+#user .entries .commententry .meta .title {
   margin-left: 20px;
 }
 #user #links {
@@ -1085,18 +1087,18 @@ footer a {
 #user #links details ul {
   margin-left: 20px;
 }
-#user .entries .entry a.comments, #user .entries .entry a.context {
+#user .entries .commententry a.comments, #user .entries .commententry a.context {
   color: gray;
   font-size: var(--sm-font);
   font-weight: bold;
 }
-#user .entries .entry .title .meta a.comments {
+#user .entries .commententry .title .meta a.comments {
   margin-left: 0;
 }
-#user .entries .entry a.comments.t1,#user .entries .entry a.context {
+#user .entries .commententry a.comments.t1,#user .entries .commententry a.context {
   margin-top: 0;
 }
-#user .entries .entry a.context {
+#user .entries .commententry a.context {
   margin-right: 10px;
 }
 /* FLAIR */

views/components/link.pug

@@ -0,0 +1,94 @@
+.link
+  .upvotes
+    .arrow
+    span #{kFormatter(link.ups)}
+    .arrow.down
+  .image
+    if link.images
+      if link.is_self_link
+        a(href="" + link.permalink + "")
+          img(src="" + link.images.thumb + "", alt="")
+          if link.duration
+            span #{secondsToMMSS(link.duration)}
+      else
+        a(href=""+ link.url +"", rel="noopener noreferrer")
+          img(src="" + link.images.thumb + "", alt="")
+          if link.duration
+            span #{secondsToMMSS(link.duration)}
+    else
+      a(href="" + link.permalink + "")
+        .no-image no image
+  .entry
+    .title
+      if link.is_self_link
+        a(href="" + link.permalink + "")
+          h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
+        != link.link_flair
+        span (#{link.domain})
+      else
+        a(href="" + link.url + "", rel="noopener noreferrer")
+          h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
+        != link.link_flair
+        span (#{link.domain})
+    .meta
+      p.submitted submitted
+        span(title="" + toUTCString(link.created) +  "") #{timeDifference(link.created)} by
+        if link.author === '[deleted]'
+          span(class="deleted") [deleted]
+        else
+          a(href="/u/" + link.author + "")
+            | #{link.author}
+        != link.user_flair
+      p.to to
+         a(href="/r/" + link.subreddit + "")
+          | #{link.subreddit}
+      if link.stickied
+        span(class="green") stickied
+      .links
+        if link.over_18
+          span.tag.nsfw NSFW
+        if link.selftext_html
+          details
+            summary
+              .line
+              .line
+              .line
+            .selftext
+              != unescape(link.selftext_html, user_preferences)
+        if (link.images && link.images.preview)
+          style.
+            details.preview-container img {
+              width: 100% !important;
+              height: auto !important;
+              max-width: none !important;
+              max-height: none !important;
+              opacity: 0;
+            }
+            details.preview-container[open][data-url="#{link.images.preview}"] .preview {
+              width: 100%;
+              height: auto;
+              background-image: url('#{link.images.preview}');
+              background-repeat: no-repeat;
+              background-size: contain;
+            }
+          details.preview-container(data-url="" + link.images.preview + "")
+            summary
+              span ▶
+            .preview
+              img(src=""+ link.images.thumb +"", alt="")
+        a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments
+        -
+          let back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +""
+          if(before && !subreddit_front)
+            back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + ""
+          if(after)
+            back_url = "/r/" + subreddit + "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + ""
+        - let saved_post = false
+        if user_preferences.saved
+          each post_id in user_preferences.saved
+            if post_id === link.id
+              - saved_post = true
+        if saved_post
+          a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave
+        else
+          a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save

views/index.pug

@@ -68,91 +68,7 @@ html
               li(class=past === 'all' ? 'active' : '')
                 a(href="?t=all") all time
         each link in json.links
-          .link
-            .upvotes
-              .arrow
-              span #{kFormatter(link.ups)}
-              .arrow.down
-            .image
-              if(link.images)
-                if link.is_self_link
-                  a(href="" + link.permalink + "")
-                    img(src=""+ link.images.thumb +"", alt="")
-                else
-                  a(href="" + link.url + "", rel="noopener noreferrer")
-                    img(src=""+ link.images.thumb +"", alt="")
-              else
-                a(href="" + link.permalink + "")
-                  .no-image no image
-            .entry
-              .title
-                if link.is_self_link
-                  a(href="" + link.permalink + "")
-                    h2 #{cleanTitle(link.title)}
-                  span (#{link.domain})
-                else
-                  a(href="" + link.url + "", rel="noopener noreferrer")
-                    h2 #{cleanTitle(link.title)}
-                  span (#{link.domain})
-              .meta
-                p.submitted submitted
-                  span(title="" + toUTCString(link.created) + "") #{timeDifference(link.created)} by
-                  if link.author === '[deleted]'
-                    span(class="deleted") [deleted]
-                  else
-                    a(href="/u/" + link.author + "")
-                      | #{link.author}
-                  span(class="to") to
-                    a(href="/r/" + link.subreddit + "")
-                      | #{link.subreddit}
-                .links
-                  if link.over_18
-                    span.tag.nsfw NSFW
-                  if link.selftext_html
-                    details
-                      summary
-                        .line
-                        .line
-                        .line
-                      .selftext
-                        != unescape(link.selftext_html, user_preferences)
-                  if (link.images && link.images.preview)
-                    style.
-                      details.preview-container img {
-                        width: 100% !important;
-                        height: auto !important;
-                        max-width: none !important;
-                        max-height: none !important;
-                        opacity: 0;
-                      }
-                      details.preview-container[open][data-url="#{link.images.preview}"] .preview {
-                        width: 100%;
-                        height: auto;
-                        background-image: url('#{link.images.preview}');
-                        background-repeat: no-repeat;
-                        background-size: contain;
-                      }
-                    details.preview-container(data-url="" + link.images.preview + "")
-                      summary
-                        span ▶
-                      .preview
-                        img(src=""+ link.images.thumb +"", alt="")
-                  a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments
-                  -
-                    let back_url = "/" + sortby + "§2t="+ (past ? past : '') +""
-                    if(before && !subreddit_front)
-                      back_url = "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + ""
-                    if(after)
-                      back_url = "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + ""
-                  - let saved_post = false
-                  if user_preferences.saved
-                    each post_id in user_preferences.saved
-                      if post_id === link.id
-                        - saved_post = true
-                  if saved_post
-                    a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave
-                  else
-                    a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save
+          include components/link.pug
         if json.info.before || json.info.after
           .view-more-links
             - var subreddit = 'all'

views/search.pug

@@ -137,53 +137,7 @@ html
                           span.tag.nsfw NSFW
             a(href="/subreddits/search?q="+ q +"", class="btn") show more similar subreddits
         each link in json.posts
-          .link
-            .upvotes
-              .arrow
-              span #{kFormatter(link.ups)}
-              .arrow.down
-            .image
-              if link.images
-                if link.is_self_link
-                  a(href="" + link.permalink + "")
-                    img(src="" + link.images.thumb + "", alt="")
-                else
-                  a(href=""+ link.url +"", rel="noopener noreferrer")
-                    img(src="" + link.images.thumb + "", alt="")
-              else
-                a(href="" + link.permalink + "")
-                  .no-image no image
-            .entry
-              .title
-                if link.is_self_link
-                  a(href="" + link.permalink + "")
-                    h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
-                  != link.link_flair
-                  span (#{link.domain})
-                else
-                  a(href="" + link.url + "", rel="noopener noreferrer")
-                    h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
-                  != link.link_flair
-                  span (#{link.domain})
-              .meta
-                p.submitted submitted
-                  span(title="" + toUTCString(link.created) +  "") #{timeDifference(link.created)} by
-                  if link.author === '[deleted]'
-                    span(class="deleted") [deleted]
-                  else
-                    a(href="/u/" + link.author + "")
-                      | #{link.author}
-                  != link.user_flair
-                p.to to
-                   a(href="/r/" + link.subreddit + "")
-                    | #{link.subreddit}
-                if link.stickied
-                  span(class="green") stickied
-                .links
-                  if link.over_18
-                    span.tag.nsfw NSFW
-                  a(href="" + link.permalink + "", class="comments")
-                    | #{link.num_comments} comments
+          include components/link.pug
     if json.before || json.after
       .view-more-links
         if json.before && !subreddit_front

views/subreddit.pug

@@ -84,96 +84,7 @@ html
               p This subreddit either doesn't exist, or any posts weren't found.
           else
             each link in json.links
-              .link
-                .upvotes
-                  .arrow
-                  span #{kFormatter(link.ups)}
-                  .arrow.down
-                .image
-                  if link.images
-                    if link.is_self_link
-                      a(href="" + link.permalink + "")
-                        img(src="" + link.images.thumb + "", alt="")
-                    else
-                      a(href=""+ link.url +"", rel="noopener noreferrer")
-                        img(src="" + link.images.thumb + "", alt="")
-                  else
-                    a(href="" + link.permalink + "")
-                      .no-image no image
-                .entry
-                  .title
-                    if link.is_self_link
-                      a(href="" + link.permalink + "")
-                        h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
-                      != link.link_flair
-                      span (#{link.domain})
-                    else
-                      a(href="" + link.url + "", rel="noopener noreferrer")
-                        h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)}
-                      != link.link_flair
-                      span (#{link.domain})
-                  .meta
-                    p.submitted submitted
-                      span(title="" + toUTCString(link.created) +  "") #{timeDifference(link.created)} by
-                      if link.author === '[deleted]'
-                        span(class="deleted") [deleted]
-                      else
-                        a(href="/u/" + link.author + "")
-                          | #{link.author}
-                      != link.user_flair
-                    p.to to
-                       a(href="/r/" + link.subreddit + "")
-                        | #{link.subreddit}
-                    if link.stickied
-                      span(class="green") stickied
-                    .links
-                      if link.over_18
-                        span.tag.nsfw NSFW
-                      if link.selftext_html
-                        details
-                          summary
-                            .line
-                            .line
-                            .line
-                          .selftext
-                            != unescape(link.selftext_html, user_preferences)
-                      if (link.images && link.images.preview)
-                        style.
-                          details.preview-container img {
-                            width: 100% !important;
-                            height: auto !important;
-                            max-width: none !important;
-                            max-height: none !important;
-                            opacity: 0;
-                          }
-                          details.preview-container[open][data-url="#{link.images.preview}"] .preview {
-                            width: 100%;
-                            height: auto;
-                            background-image: url('#{link.images.preview}');
-                            background-repeat: no-repeat;
-                            background-size: contain;
-                          }
-                        details.preview-container(data-url="" + link.images.preview + "")
-                          summary
-                            span ▶
-                          .preview
-                            img(src=""+ link.images.thumb +"", alt="")
-                      a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments
-                      -
-                        let back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +""
-                        if(before && !subreddit_front)
-                          back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + ""
-                        if(after)
-                          back_url = "/r/" + subreddit + "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + ""
-                      - let saved_post = false
-                      if user_preferences.saved
-                        each post_id in user_preferences.saved
-                          if post_id === link.id
-                            - saved_post = true
-                      if saved_post
-                        a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave
-                      else
-                        a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save
+              include components/link.pug
           if json.info.before || json.info.after
             .view-more-links
               if json.info.before && !subreddit_front

views/user.pug

@@ -77,39 +77,16 @@ html
           br
           p(title="" + toUTCString(data.created) + "") account created: #{toDateString(data.created)}
           p verified: #{(data.verified) ? "yes" : "no" }
-        .entries
+        #links.entries
           if !data.posts || data.posts.length <= 0
             h3 no posts/comments
           each post in data.posts
             if post.type === 't3'
-              .entry.t3
-                .upvotes
-                  .arrow
-                  span #{kFormatter(post.ups)}
-                  .arrow.down
-                .image
-                  if post.thumbnail !== 'self'
-                    a(href="" + post.permalink + "", rel="noopener noreferrer")
-                      img(src="" + post.thumbnail + "", alt="")
-                      if post.duration
-                        span #{secondsToMMSS(post.duration)}
-                  else
-                    a(href="" + post.permalink + "", rel="noopener noreferrer")
-                      .no-image no image
-                .title
-                  a(href="" + post.permalink + "", rel="noopener noreferrer") #{cleanTitle(post.title)}
-                  .meta
-                    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}
-                    if post.over_18
-                      span.tag.nsfw NSFW
-                    a.comments(href="" + post.permalink + "") #{post.num_comments} comments
+              - 
+                var link = post;
+              include components/link.pug
             if post.type === 't1'
-              .entry
+              .commententry
                 .meta
                   .title
                     a(href="" + post.url + "", rel="noopener noreferrer") #{cleanTitle(post.link_title)}