Feat: Card View

Initial Commit

11 files changed, 364 insertions, 76 deletions

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 href="https:\/\/preview\.redd\.it.*?">(.*?)<\/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], '<a href="' + match[1] + '"><img src="' + match[1] + '"></a>');
+    })
+
+    return result;
+  }
+-
+  function decodePostVideoUrls(p) {
+    // Video URLs have querystring separators that are HTML-encoded, so replace them.
+    const expression = /&amp;/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
             | &nbsp;&nbsp;
             | ·
             | &nbsp;&nbsp;
-          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