Add link component

inc/processJsonUser.js

@@ -65,6 +65,7 @@ module.exports = function() {
               created: post.created_utc,
               ups: post.ups,
               url: replaceDomains(url, user_preferences),
+              domain: post.domain,
               thumbnail: await downloadAndSave(post.thumbnail),
               duration: duration,
               edited: post.edited,

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 .commententry .meta .title,
-#user .entries .entry .meta .author,
+#user .entries .commententry .meta .author,
-#user .entries .entry .meta .subreddit,
+#user .entries .commententry .meta .subreddit,
-#user .entries .entry .meta .flair {
+#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 .commententry details a.context,
-#user .comment details a.comments {
+#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,25 +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 {
+#user .entries .commententry .image a span {
   position: absolute;
   bottom: 0;
   background: #0000005e;
@@ -1047,29 +1050,29 @@ footer a {
   font-size: var(--sm-font);
   margin-bottom: 4px;
 }
-#user .entries .entry .image img {
+#user .entries .commententry .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 +1088,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,90 @@
+.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

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
+          include components/link.pug
-            .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
         if json.info.before || json.info.after
           .view-more-links
             - var subreddit = 'all'

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
+              include components/link.pug
-                .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
           if json.info.before || json.info.after
             .view-more-links
               if json.info.before && !subreddit_front

views/user.pug

@@ -77,39 +77,43 @@ 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
+                var link = post;
-                  .arrow
+                link.author = data.username;
-                  span #{kFormatter(post.ups)}
+              include components/link.pug
-                  .arrow.down
+              //-.entry.t3
-                .image
+              //-  .upvotes
-                  if post.thumbnail !== 'self'
+              //-    .arrow
-                    a(href="" + post.permalink + "", rel="noopener noreferrer")
+              //-    span #{kFormatter(post.ups)}
-                      img(src="" + post.thumbnail + "", alt="")
+              //-    .arrow.down
-                      if post.duration
+              //-  .image
-                        span #{secondsToMMSS(post.duration)}
+              //-    if post.thumbnail !== 'self'
-                  else
+              //-      a(href="" + post.permalink + "", rel="noopener noreferrer")
-                    a(href="" + post.permalink + "", rel="noopener noreferrer")
+              //-        img(src="" + post.thumbnail + "", alt="")
-                      .no-image no image
+              //-        if post.duration
-                .title
+              //-          span #{secondsToMMSS(post.duration)}
-                  a(href="" + post.permalink + "", rel="noopener noreferrer") #{cleanTitle(post.title)}
+              //-    else
-                  .meta
+              //-      a(href="" + post.permalink + "", rel="noopener noreferrer")
-                    p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)}
+              //-        .no-image no image
-                      | by
+              //-  .title
-                      a(href="/u/" + data.username + "") #{data.username}
+              //-    a(href="" + post.permalink + "", rel="noopener noreferrer") #{cleanTitle(post.title)}
-                      | to
+              //-    .meta
-                      != post.user_flair
+              //-      p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)}
-                      a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit}
+              //-        | by
-                    if post.over_18
+              //-        a(href="/u/" + data.username + "") #{data.username}
-                      span.tag.nsfw NSFW
+              //-        | to
-                    a.comments(href="" + post.permalink + "") #{post.num_comments} comments
+              //-        != 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
             if post.type === 't1'
-              .entry
+              .commententry
                 .meta
                   .title
                     a(href="" + post.url + "", rel="noopener noreferrer") #{cleanTitle(post.link_title)}