Feat: Card View Initial Commit

src/mixins/header.pug

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

src/mixins/post.pug

···
 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 
···
             |  · 
             | #{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

src/mixins/postUtils.pug

···
   }
 -
   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;
     }
   }
 -
···
       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];
+  }

src/public/styles.css

···
   color: var(--text-color);
 }
 
+body:has(details.card[open]) {
+  overflow: hidden;
+}
+
 main {
   display: flex;
   flex-direction: column;
···
   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;
 }
···
   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;
···
     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
   }
···
     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
···
   .post, .comments-container, .hero, .header, .footer {
     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);
···
 .title-container > a {
   color: var(--text-color);
   text-decoration: none;
+}
+
+.title-container.card > a {
+  font-size: 1.125rem;
+  font-weight: bold;
 }
 
 .title-container > a:hover {

src/routes/index.js

···
 	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}`);
 	}
 });
 
···
 	const query = req.query ? req.query : {};
 	if (!query.sort) {
 		query.sort = "hot";
+	}
+	if (!query.view) {
+		query.view = "compact";
 	}
 
 	let isSubbed = false;
···
 
 	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,
···
 		data: unescape_submission(response),
 		user: req.user,
 		from: req.query.from,
+		query: req.query,
 	});
 });
 
···
 		)
 		.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
···
 			message,
 			user: req.user,
 			original_query: req.query.q,
+			query: req.query,
 		});
 	}
 });
···
 			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,
···
 			user: req.user,
 			original_query: req.query.q,
 			currentUrl: req.url,
+			query: req.query,
 		});
 	}
 });
···
 				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) => {
···
 	const post = response.submission.data;
 	const comments = response.comments;
 
+	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);
 	}
-	comments.forEach(unescape_comment);
-
-	return { post, comments };
 }
 
 function unescape_comment(comment) {

src/views/comments.pug

···
 
 - 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)
···
             |   
             | ·
             |   
-          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
···
 
         if post.selftext_html
           div.self-text
-            != post.selftext_html
+            != convertInlineImageLinks(post.selftext_html)
 
         hr
 

src/views/index.pug

···
 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")
···
         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
···
             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&view=${viewQuery}`) rising
+            div
+              a(href=`/r/${subreddit}?sort=top&view=${viewQuery}`) top
             div
-              a(href=`/r/${subreddit}?sort=rising`) rising
+              a(href=`/r/${subreddit}?sort=top&t=day&view=${viewQuery}`) top day
             div
-              a(href=`/r/${subreddit}?sort=top`) top
+              a(href=`/r/${subreddit}?sort=top&t=week&view=${viewQuery}`) top week
             div
-              a(href=`/r/${subreddit}?sort=top&t=day`) top day
+              a(href=`/r/${subreddit}?sort=top&t=month&view=${viewQuery}`) top month
             div
-              a(href=`/r/${subreddit}?sort=top&t=week`) top week
+              a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year
             div
-              a(href=`/r/${subreddit}?sort=top&t=month`) top month
+              a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all
+          div.sort-opts
             div
-              a(href=`/r/${subreddit}?sort=top&t=year`) top year
+              a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact
             div
-              a(href=`/r/${subreddit}?sort=top&t=all`) top all
+              a(href=`/r/${subreddit}?sort=${sortQuery}&view=card`) card
 
       if posts
         each child in posts.posts

src/views/post-search.pug

···
 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")
···
         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

src/views/search.pug

···
 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")
···
         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
···
         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:

src/views/sub-search.pug

···
 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")
···
         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
···
                 - 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

src/views/subs.pug

···
 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")
···
             - 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