Add link component

This commit is contained in:
StevenNMeza 2021-05-24 20:39:28 +02:00
parent ca6d213bdc
commit ac14a7b094
6 changed files with 169 additions and 244 deletions

View File

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

View File

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

90
views/components/link.pug Normal file
View File

@ -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

View File

@ -68,91 +68,7 @@ html
li(class=past === 'all' ? 'active' : '') li(class=past === 'all' ? 'active' : '')
a(href="?t=all") all time a(href="?t=all") all time
each link in json.links 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 if json.info.before || json.info.after
.view-more-links .view-more-links
- var subreddit = 'all' - var subreddit = 'all'

View File

@ -84,96 +84,7 @@ html
p This subreddit either doesn't exist, or any posts weren't found. p This subreddit either doesn't exist, or any posts weren't found.
else else
each link in json.links 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 if json.info.before || json.info.after
.view-more-links .view-more-links
if json.info.before && !subreddit_front if json.info.before && !subreddit_front

View File

@ -77,39 +77,43 @@ 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" }
.entries #links.entries
if !data.posts || data.posts.length <= 0 if !data.posts || data.posts.length <= 0
h3 no posts/comments h3 no posts/comments
each post in data.posts each post in data.posts
if post.type === 't3' 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' if post.type === 't1'
.entry .commententry
.meta .meta
.title .title
a(href="" + post.url + "", rel="noopener noreferrer") #{cleanTitle(post.link_title)} a(href="" + post.url + "", rel="noopener noreferrer") #{cleanTitle(post.link_title)}