From eae5094ea241cc69b38cce328b73e858e6ff63de Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Mon, 30 Dec 2024 21:17:57 +0000 Subject: Feat: Card View Initial Commit --- src/mixins/header.pug | 12 ++-- src/mixins/post.pug | 105 ++++++++++++++++----------- src/mixins/postUtils.pug | 42 +++++++++-- src/public/styles.css | 179 ++++++++++++++++++++++++++++++++++++++++++++++ src/routes/index.js | 43 ++++++++--- src/views/comments.pug | 6 +- src/views/index.pug | 33 +++++---- src/views/post-search.pug | 4 ++ src/views/search.pug | 6 ++ src/views/sub-search.pug | 6 +- src/views/subs.pug | 4 +- 11 files changed, 364 insertions(+), 76 deletions(-) (limited to 'src') diff --git a/src/mixins/header.pug b/src/mixins/header.pug index 9cf1e1a..7d56ff5 100644 --- a/src/mixins/header.pug +++ b/src/mixins/header.pug @@ -1,16 +1,18 @@ mixin header(user) + - var viewQuery = 'view=' + (query && query.view ? query.view : 'compact') + - var sortQuery = 'sort=' + (query ? (query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot') : 'hot') div.header div.header-item - a(href=`/`) home + a(href=`/?${sortQuery}&${viewQuery}`) home div.header-item - a(href=`/r/all`) all + a(href=`/r/all?${sortQuery}&${viewQuery}`) all div.header-item - a(href=`/search`) search + a(href=`/search?${sortQuery}&${viewQuery}`) search div.header-item - a(href=`/subs`) subs + a(href=`/subs?${sortQuery}&${viewQuery}`) subs if user div.header-item - a(href='/dashboard') #{user.username} + a(href=`/dashboard?${sortQuery}&${viewQuery}`) #{user.username} |  a(href='/logout') (logout) else diff --git a/src/mixins/post.pug b/src/mixins/post.pug index 74a2b78..4022424 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug @@ -2,11 +2,13 @@ include ../utils include postUtils mixin post(p, currentUrl) - var from = encodeURIComponent(currentUrl) + - var viewQuery = query && query.view ? query.view : 'compact' + - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' article.post - div.post-container - div.post-text - div.title-container - a(href=`/comments/${p.id}?from=${from}`) + div.post-container(class=`${query.view}`) + div.post-text(class=`${query.view}`) + div.title-container(class=`${query.view}`) + a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) != p.title span.domain (#{p.domain}) div.info-container @@ -18,50 +20,73 @@ mixin post(p, currentUrl) |  ·  | #{timeDifference(Date.now(), p.created * 1000)} |  ·  - a(href=`/r/${p.subreddit}`) r/#{p.subreddit} + a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit} |  ·  - a(href=`/comments/${p.id}?from=${from}`) #{fmtnum (p.num_comments)} ↩ - div.media-preview + a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩ + if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html) + div.self-text-overflow(class='card') + if query.view == "card" && (p.spoiler || p.over_18) + div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) + h2 + != p.over_18 ? 'nsfw' : 'spoiler' + div.self-text(class='card') + != convertInlineImageLinks(p.selftext_html) + div.media-preview(class=`${query.view}`) + if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p)) + div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) + h2 + != p.over_18 ? 'nsfw' : 'spoiler' if isPostGallery(p) - var item = postGalleryItems(p)[0] img(src=item.url onclick=`toggleDetails('${p.id}')`) else if isPostImage(p) - - var url = postThumbnail(p) + - var url = query.view == "card" ? p.url : postThumbnail(p) img(src=url onclick=`toggleDetails('${p.id}')`) else if isPostVideo(p) - - var url = p.secure_media.reddit_video.scrubber_media_url - video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) + - var decodedVideos = decodePostVideoUrls(p) + if query.view == "card" + video(controls="" muted="" data-dashjs-player="" preload="metadata" poster=decodedVideos[4]) + // HLS + source(src=decodedVideos[0]) + // Dash + source(src=decodedVideos[1]) + // Fallback + source(src=decodedVideos[2]) + else + video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` width="100px" height="100px") + // Scrubber + source(src=decodedVideos[3]) else if isPostLink(p) a(href=p.url) + if (query.view == 'card') + | #{p.domain} | ↗ - if isPostGallery(p) - details(id=`${p.id}`) - summary.expand-post expand gallery - div.gallery - each item in postGalleryItems(p) - div.gallery-item - div.gallery-item-idx - | #{`${item.idx}/${item.total}`} - a(href=`/media/${item.url}`) - img(src=item.url loading="lazy") - button(onclick=`toggleDetails('${p.id}')`) close - else if isPostImage(p) - details(id=`${p.id}`) - summary.expand-post expand image - a(href=`/media/${p.url}`) - img(src=p.url loading="lazy").post-media - button(onclick=`toggleDetails('${p.id}')`) close - else if isPostVideo(p) - details(id=`${p.id}`) - summary.expand-post expand video - - var url = p.secure_media.reddit_video.dash_url - video(src=url controls data-dashjs-player loading="lazy").post-media - button(onclick=`toggleDetails('${p.id}')`) close - else if isPostLink(p) - details(id=`${p.id}`) - summary.expand-post expand link - a(href=`${p.url}`) - | #{p.url} - br - button(onclick=`toggleDetails('${p.id}')`) close + if (isPostGallery(p) || isPostImage(p) || isPostVideo(p)) + details(id=`${p.id}`,class=`${query.view}`) + summary.expand-post expand media + div.image-viewer(class=`${query.view}`) + if isPostGallery(p) + div.gallery(class=`${query.view}`) + each item in postGalleryItems(p) + div.gallery-item(class=`${query.view}`) + div.gallery-item-idx(class=`${query.view}`) + | #{`${item.idx}/${item.total}`} + a(href=`/media/${item.url}`) + img(src=item.url loading="lazy") + else if isPostImage(p) + a(href=`/media/${p.url}`) + img(src=p.url loading="lazy").post-media + else if isPostVideo(p) + video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media + //HLS + source(src=decodedVideos[0]) + // Dash + source(src=decodedVideos[1]) + // Fallback + source(src=decodedVideos[2]) + button(onclick=`toggleDetails('${p.id}')`,class=`${query.view}`) + if (query.view == 'card') + | ╳ + else + | close diff --git a/src/mixins/postUtils.pug b/src/mixins/postUtils.pug index 816adf7..84add09 100644 --- a/src/mixins/postUtils.pug +++ b/src/mixins/postUtils.pug @@ -10,14 +10,14 @@ } - function postThumbnail(p) { - if (p.thumbnail == "image" || p.thumbnail == "") { - return p.url; - } else if (p.over_18) { - return "/nsfw.svg"; + if (p.over_18) { + return "/nsfw.svg"; } else if (p.thumbnail == "spoiler") { - return "/spoiler.svg"; + return "/spoiler.svg"; + } else if (p.thumbnail == "image" || p.thumbnail == "") { + return p.url; } else { - return p.thumbnail; + return p.thumbnail; } } - @@ -51,3 +51,33 @@ return null; } } +- + function convertInlineImageLinks(html) { + // Find all anchors that href to https://preview.redd.it + const expression = /(.*?)<\/a>/g; + const matches = html.matchAll(expression); + var result = html; + matches.forEach((match) => { + // Replace each occurrence with an actual img tag + result = result.replace(match[0], ''); + }) + + return result; + } +- + function decodePostVideoUrls(p) { + // Video URLs have querystring separators that are HTML-encoded, so replace them. + const expression = /&/g; + + var hls_url = p.secure_media && p.secure_media.reddit_video && p.secure_media.reddit_video.hls_url ? p.secure_media.reddit_video.hls_url.replace(expression, '&') : ''; + + var dash_url = p.secure_media && p.secure_media.reddit_video && p.secure_media.reddit_video.dash_url ? p.secure_media.reddit_video.dash_url.replace(expression, '&') : ''; + + var fallback_url = p.secure_media && p.secure_media.reddit_video && p.secure_media.reddit_video.fallback_url ? p.secure_media.reddit_video.fallback_url.replace(expression, '&') : ''; + + var scrubber_url = p.secure_media && p.secure_media.reddit_video && p.secure_media.reddit_video.scrubber_media_url ? p.secure_media.reddit_video.scrubber_media_url.replace(expression, '&') : ''; + + var poster_url = p.preview && p.preview.images ? p.preview.images[0].source.url.replace(expression, '&') : ''; + + return [hls_url, dash_url, fallback_url, scrubber_url, poster_url]; + } \ No newline at end of file diff --git a/src/public/styles.css b/src/public/styles.css index 3db6790..edf0042 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -43,6 +43,10 @@ body { color: var(--text-color); } +body:has(details.card[open]) { + overflow: hidden; +} + main { display: flex; flex-direction: column; @@ -127,6 +131,120 @@ nav { font-size: 0.9rem; } +.post-container.card { + border: 1px solid var(--bg-color-muted); + border-radius: 16px; + display: block; +} + +.post-text.card { + padding: 0.9rem; + padding-top: 0.3rem; +} + +.self-text-overflow.card { + /* For spoiler positioning */ + position: relative; + padding-top: 0.3rem; + max-height: 10vh; + overflow: hidden; + overflow-wrap: break-word; + display: block; +} + +.self-text.card { + overflow: hidden; + display: -webkit-box; + /* Safari on iOS <= 17 */ + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; + text-overflow: ellipsis; +} + +.media-preview.card { + position: relative; + padding: 0.3rem; + padding-bottom: 0.3rem; +} + +.media-preview.card > img { + cursor: pointer; +} + +.image-viewer.card { + /* Safari on iOS <= 17 */ + -webkit-backdrop-filter: blur(2rem); + backdrop-filter: blur(2rem); + position: fixed; + inset: 0; + box-sizing: border-box; + display: flex; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; + z-index: 100; +} + +.image-viewer.card > button { + position: absolute; + top: 0; + right: 0; + margin: 1rem; + padding: initial; + height: 3rem; + width: 3rem; + font-size: 2rem; + border-radius: 100%; + cursor: pointer; +} + +.image-viewer.card > a > img { + max-width: 100vw; + max-height: 100vh; + width: auto; + height: auto; +} + +.gallery.card { + align-items: center; +} + +.gallery-item.card > a > img { + max-width: 95vw; + max-height: 95vh; + width: auto; + height: auto; +} + +.spoiler { + background-color: rbga(var(--bg-color-muted), 0.2); + /* Safari on iOS <= 17 */ + -webkit-backdrop-filter: blur(3rem); + backdrop-filter: blur(3rem); + border-radius: 4px; + + position: absolute; + top: 0; + left: 0; + + box-sizing: border-box; + display: flex; + height: 100%; + width: 100%; + + justify-content: center; + align-items: center; + + cursor: pointer; +} + +.gallery-item-idx.card, +.spoiler > h2 { + text-shadow: 0.1rem 0.1rem 1rem var(--bg-color-muted); +} + .comments-container { font-size: 0.9rem; } @@ -171,6 +289,29 @@ summary::before { height: 4rem; } +.media-preview.card img, +.media-preview.card video { + border-radius: 16px; + + max-height: 40vh; + max-width: 100%; + + display: block; + width: initial; + height: initial; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + + object-fit: fill; +} + +.media-preview.card a { + font-size: 1.5rem; + margin: 1rem; + padding: initial; +} + .media-preview a { font-size: 2rem; text-decoration: none; @@ -225,6 +366,20 @@ form { width: 5rem; height: 5rem; } + .media-preview.card img, + .media-preview.card video + { + max-height: 50vh; + } + .media-preview.card a { + font-size: 1rem; + margin: 0.7rem; + padding: initial; + } + .self-text.card { + -webkit-line-clamp: 4; + line-clamp: 4; + } .post-author { display: inline } @@ -252,10 +407,24 @@ form { width: 5rem; height: 5rem; } + .media-preview.card img, + .media-preview.card video + { + max-height: 30vh; + } .media-preview a { font-size: 2rem; padding: 2rem; } + .media-preview.card a { + font-size: 1rem; + margin: 0.5rem; + padding: initial; + } + .self-text.card { + -webkit-line-clamp: 6; + line-clamp: 6; + } .post-author { display: inline } @@ -277,6 +446,11 @@ form { flex: 1 1 40%; width: 40%; } + .media-preview.card img, + .media-preview.card video + { + max-height: 20vh; + } .sort-opts { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(1, 1fr); @@ -345,6 +519,11 @@ form { text-decoration: none; } +.title-container.card > a { + font-size: 1.125rem; + font-weight: bold; +} + .title-container > a:hover { text-decoration: underline; } diff --git a/src/routes/index.js b/src/routes/index.js index 117b728..9415607 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -16,11 +16,14 @@ router.get("/", authenticateToken, async (req, res) => { const subs = db .query("SELECT * FROM subscriptions WHERE user_id = $id") .all({ id: req.user.id }); + + const qs = req.query ? ('?' + new URLSearchParams(req.query).toString()) : ''; + if (subs.length === 0) { - res.redirect("/r/all"); + res.redirect(`/r/all${qs}`); } else { const p = subs.map((s) => s.subreddit).join("+"); - res.redirect(`/r/${p}`); + res.redirect(`/r/${p}${qs}`); } }); @@ -32,6 +35,9 @@ router.get("/r/:subreddit", authenticateToken, async (req, res) => { if (!query.sort) { query.sort = "hot"; } + if (!query.view) { + query.view = "compact"; + } let isSubbed = false; if (!isMulti) { @@ -47,6 +53,10 @@ router.get("/r/:subreddit", authenticateToken, async (req, res) => { const [posts, about] = await Promise.all([postsReq, aboutReq]); + if (query.view == 'card' && posts && posts.posts) { + posts.posts.forEach(unescape_selftext); + } + res.render("index", { subreddit, posts, @@ -71,6 +81,7 @@ router.get("/comments/:id", authenticateToken, async (req, res) => { data: unescape_submission(response), user: req.user, from: req.query.from, + query: req.query, }); }); @@ -104,12 +115,12 @@ router.get("/subs", authenticateToken, async (req, res) => { ) .all({ id: req.user.id }); - res.render("subs", { subs, user: req.user }); + res.render("subs", { subs, user: req.user, query: req.query }); }); // GET /search router.get("/search", authenticateToken, async (req, res) => { - res.render("search", { user: req.user }); + res.render("search", { user: req.user, query: req.query }); }); // GET /sub-search @@ -133,6 +144,7 @@ router.get("/sub-search", authenticateToken, async (req, res) => { message, user: req.user, original_query: req.query.q, + query: req.query, }); } }); @@ -147,6 +159,11 @@ router.get("/post-search", authenticateToken, async (req, res) => { items.length === 0 ? "no results found" : `showing ${items.length} results`; + + if (req.query.view == 'card' && items) { + items.forEach(unescape_selftext); + } + res.render("post-search", { items, after, @@ -154,6 +171,7 @@ router.get("/post-search", authenticateToken, async (req, res) => { user: req.user, original_query: req.query.q, currentUrl: req.url, + query: req.query, }); } }); @@ -176,7 +194,7 @@ router.get("/dashboard", authenticateToken, async (req, res) => { usedAt: Date.parse(inv.usedAt), })); } - res.render("dashboard", { invites, isAdmin, user: req.user }); + res.render("dashboard", { invites, isAdmin, user: req.user, query: req.query }); }); router.get("/create-invite", authenticateAdmin, async (req, res) => { @@ -359,14 +377,23 @@ function unescape_submission(response) { const post = response.submission.data; const comments = response.comments; - if (post.selftext_html) { - post.selftext_html = he.decode(post.selftext_html); - } + unescape_selftext(post); comments.forEach(unescape_comment); return { post, comments }; } +function unescape_selftext(post) { + // If called after getSubmissions + if (post.data && post.data.selftext_html) { + post.data.selftext_html = he.decode(post.data.selftext_html); + } + // If called after getSubmissionComments + if (post.selftext_html) { + post.selftext_html = he.decode(post.selftext_html); + } +} + function unescape_comment(comment) { if (comment.data.body_html) { comment.data.body_html = he.decode(comment.data.body_html); diff --git a/src/views/comments.pug b/src/views/comments.pug index 17af45a..1caf65a 100644 --- a/src/views/comments.pug +++ b/src/views/comments.pug @@ -6,6 +6,8 @@ include ../utils - var post = data.post - var comments = data.comments +- var viewQuery = 'view=' + (query && query.view ? query.view : 'compact') +- var sortQuery = 'sort=' + (query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot') doctype html html +head(post.title) @@ -27,7 +29,7 @@ html |    | · |    - a(href=`/r/${post.subreddit}`) r/#{post.subreddit} + a(href=`/r/${post.subreddit}?${sortQuery}&${viewQuery}`) r/#{post.subreddit} div.info-container - var domain = (new URL(post.url)).hostname @@ -65,7 +67,7 @@ html if post.selftext_html div.self-text - != post.selftext_html + != convertInlineImageLinks(post.selftext_html) hr diff --git a/src/views/index.pug b/src/views/index.pug index 0f00efe..5c7d550 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -2,6 +2,8 @@ include ../mixins/post include ../mixins/header include ../mixins/head include ../utils + - var viewQuery = query && query.view ? query.view : 'compact' + - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("home") @@ -14,9 +16,9 @@ html div.sub-title h1 if isMulti - a(href=`/`) lurker + a(href=`/?${sortQuery}&${viewQuery}`) lurker else - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?${sortQuery}&${viewQuery}`) | r/#{subreddit} if !isMulti div#button-container @@ -32,27 +34,32 @@ html a(href="https://donate.stripe.com/dR62bTaZH1295Da4gg") oppiliappan |, author of lurker hr - details - summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')} + details.sort-details + summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}, #{viewQuery} view div.sort-opts div - a(href=`/r/${subreddit}?sort=hot`) hot + a(href=`/r/${subreddit}?sort=hot&view=${viewQuery}`) hot div - a(href=`/r/${subreddit}?sort=new`) new + a(href=`/r/${subreddit}?sort=new&view=${viewQuery}`) new div - a(href=`/r/${subreddit}?sort=rising`) rising + a(href=`/r/${subreddit}?sort=rising&view=${viewQuery}`) rising div - a(href=`/r/${subreddit}?sort=top`) top + a(href=`/r/${subreddit}?sort=top&view=${viewQuery}`) top div - a(href=`/r/${subreddit}?sort=top&t=day`) top day + a(href=`/r/${subreddit}?sort=top&t=day&view=${viewQuery}`) top day div - a(href=`/r/${subreddit}?sort=top&t=week`) top week + a(href=`/r/${subreddit}?sort=top&t=week&view=${viewQuery}`) top week div - a(href=`/r/${subreddit}?sort=top&t=month`) top month + a(href=`/r/${subreddit}?sort=top&t=month&view=${viewQuery}`) top month div - a(href=`/r/${subreddit}?sort=top&t=year`) top year + a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year div - a(href=`/r/${subreddit}?sort=top&t=all`) top all + a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all + div.sort-opts + div + a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact + div + a(href=`/r/${subreddit}?sort=${sortQuery}&view=card`) card if posts each child in posts.posts diff --git a/src/views/post-search.pug b/src/views/post-search.pug index b80f9f6..8f93798 100644 --- a/src/views/post-search.pug +++ b/src/views/post-search.pug @@ -2,6 +2,8 @@ include ../mixins/post include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search posts") @@ -14,6 +16,8 @@ html form(action="/post-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go if message div.search-message diff --git a/src/views/search.pug b/src/views/search.pug index ef9b53e..4dc5c0c 100644 --- a/src/views/search.pug +++ b/src/views/search.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search subreddits") @@ -14,6 +16,8 @@ html form(action="/sub-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go hr @@ -23,6 +27,8 @@ html form(action="/post-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go p | you can narrow search results using filters: diff --git a/src/views/sub-search.pug b/src/views/sub-search.pug index f2402f7..cb8eeef 100644 --- a/src/views/sub-search.pug +++ b/src/views/sub-search.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = (query && query.view) ? query.view : 'compact' +- var sortQuery = (query && query.sort) ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search subreddits") @@ -13,6 +15,8 @@ html form(action="/sub-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go if message div.search-message @@ -25,7 +29,7 @@ html - var isSubbed = subs.includes(subreddit) div.sub-title h3 - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?sort=${sortQuery}&view=${viewQuery}`) | r/#{subreddit} div#button-container if isSubbed diff --git a/src/views/subs.pug b/src/views/subs.pug index 8fca12d..aff8258 100644 --- a/src/views/subs.pug +++ b/src/views/subs.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("subscriptions") @@ -16,7 +18,7 @@ html - var isSubbed = true div.sub-title h4 - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?sort=${sortQuery}&view=${viewQuery}`) | r/#{subreddit} div#button-container if isSubbed -- cgit v1.2.3