support expanding/collapsing comments

fix pagination when sorting

readme.txt

···
 nix build .#readit
+
+todo:
+- [ ] support crossposts
+- [ ] fix gallery thumbnails
+- [x] pass query params into templates, add into pagination
+- [ ] subscription manager: reorder, mass add
+- [ ] styles for info-containers
+- [ ] open in reddit/reply in reddit link
+- [ ] placeholder for unresolvable thumbnails
+- [ ] expand/collapse comments

src/mixins/comment.pug

···
 include ../utils
+
+mixin infoContainer(data)
+  div.comment-info-container
+    div.info-item #{fmtnum(data.ups)} ↑
+    div.info-item u/#{data.author} #{data.is_submitter ? '(OP)' : ''}
+    if data.collapsed_reason_code == "DELETED"
+      div.info-item
+        a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
+    div.info-item #{timeDifference(Date.now(), data.created * 1000)}
+
+-
+  function hasReplies(data) {
+    return data.replies && data.replies.data && data.replies.data.children && data.replies.data.children.length > 0;
+  }
+
 mixin comment(com, isfirst)
   - var data = com.data
   - var kind = com.kind
+  - var hasReplyData = hasReplies(data)
+  
   if kind == "more"
-    div(class=`${isfirst?'first':''}`)
+    div(class=`${isfirst ? 'first' : ''}`)
       div.more #{data.count} more comments
   else
-    div(class=`comment ${isfirst?'first':''}`)
-      div.comment-info-container
-        div.info-item #{fmtnum(data.ups)} ↑ 
-        div.info-item u/#{data.author} #{data.is_submitter?'(OP)':''}
-        if data.collapsed_reason_code == "DELETED"
-          div.info-item 
-            a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
-        div.info-item #{timeDifference(Date.now(), data.created * 1000)}
-      div.comment-body 
-        != data.body_html
-      div.replies
-      if data.replies
-        if data.replies.data
-          if data.replies.data.children
+    div(class=`comment ${isfirst ? 'first' : ''}`)
+      if hasReplyData
+        details(id=`${data.id}` open="")
+          summary.expand-comments
+            +infoContainer(data)
+          div.comment-body
+            != data.body_html
+    
+          div.replies
             each reply in data.replies.data.children
-              +comment(reply,false)
+              +comment(reply, false)
+    
+      else
+        +infoContainer(data)
+        div.comment-body
+          != data.body_html

src/mixins/post.pug

···
       if p.gallery_data
         if p.gallery_data.items
           details(id=`${p.id}`)
-            summary expand gallery
+            summary.expand-post expand gallery
             div.gallery
               - var total = p.gallery_data.items.length
               - var idx = 0
···
             button(onclick=`toggleDetails('${p.id}')`) close
     if p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
       details(id=`${p.id}`)
-        summary expand image
+        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 p.post_hint == "hosted:video"
       details(id=`${p.id}`)
-        summary expand video
+        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 !p.post_hint || (p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default")
       details(id=`${p.id}`)
-        summary expand link
+        summary.expand-post expand link
         a(href=`${p.url}`)
           | #{p.url}
         br

src/public/styles.css

···
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
   /* Light mode colors */
···
     --bg-color-muted: #333;
     --text-color: white;
     --text-color-muted: #999;
-    --blockquote-color: green;
+    --blockquote-color: lightgreen;
     --link-color: lightblue;
     --link-visited-color: violet;
   }
···
   justify-content: center;
 }
 
+.sub-title {
+  display: flex;
+}
+
+#button-container {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.sort-opts {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.sort-opts a {
+  margin: 10px;
+}
+
 .footer {
   display: flex;
   flex-direction: row;
···
 .info-container,
 .comment-info-container,
 .more,
+summary.expand-comments::before,
 hr {
   color: var(--text-color-muted)
 }
 
-.info-container, .comment-info-container, .more {
+.info-container, .more {
   font-size: 0.8rem;
   display: flex;
 }
 
+.comment-info-container {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8rem;
+}
+
 .domain {
   color: var(--text-color-muted);
   font-size: 0.8rem;
···
   display: none
 }
 
+.post-media {
+  display: block;
+  margin: 0 auto;
+  max-width: 95%;
+  padding: 5px;
+}
+
 @media (min-width: 768px) {
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 90%;
···
   .comments-container {
     font-size: 1.3rem;
   }
-  .info-container, .comment-info-container, .more {
+  .info-container, .comment-info-container, .more, summary.expand-comments::before
+  {
     font-size: 1rem;
   }
   .domain {
···
   .post-author {
     display: inline
   }
+  .post-media {
+    max-width: 50%;
+  }
 }
 
 @media (min-width: 1080px) {
···
   .comments-container {
     font-size: 1.3rem;
   }
-  .info-container, .comment-info-container, .more {
+  .info-container, .comment-info-container, .more, summary.expand-comments::before {
     font-size: 1rem;
   }
   .domain {
···
   }
   .post-author {
     display: inline
+  }
+  .post-media {
+    max-width: 50%;
   }
 }
 
···
   flex-direction: row;
 }
 
-.post-media {
-  display: block;
-  margin: 0 auto;
-  max-width: 95%;
-  padding: 5px;
-}
-
-.title-container, .comment-info-container {
-  flex: 1;
+.title-container, .comment-info-container, summary.expand-comments::before {
   margin-top: 10px;
   margin-bottom: 10px;
 }
···
   text-align: left;
 }
 
-summary {
+summary.expand-post {
   display: none;
+}
+
+summary.expand-comments {
+  list-style: none;
+  cursor: pointer;
+}
+
+summary.expand-comments::before {
+  content: "[+] ";
+}
+
+details[open] summary.expand-comments::before {
+  content: "[-] ";
+}
+
+details:not([open]) summary.expand-comments::before {
+  content: "[+] ";
+}
+
+.comment-body {
+  display: block;
 }
 
 .footer {

src/routes/index.js

···
 });
 
 // GET /r/:id
-router.get('/r/:subreddit/:sort?', async (req, res) => {
+router.get('/r/:subreddit', async (req, res) => {
   var subreddit = req.params.subreddit;
-  var query = req.query;
-  var sort = req.params.sort ? req.params.sort : 'hot';
-  var options = req.query;
+  var query = req.query? req.query : {};
+  var sort = query.sort? query.sort : 'hot';
 
-  var postsReq = G.getSubmissions(sort, `${subreddit}`, options);
+  var postsReq = G.getSubmissions(sort, `${subreddit}`, query);
   var aboutReq = G.getSubreddit(`${subreddit}`);
 
   var [posts, about] = await Promise.all([postsReq, aboutReq]);
 
-  res.render('index', { subreddit, posts, about });
+  res.render('index', { subreddit, posts, about, query });
 });
 
 // GET /comments/:id

src/utils.pug

···
     if (elapsed < msPerMinute) {
          return Math.round(elapsed/1000) + 's';
     } else if (elapsed < msPerHour) {
-         return Math.round(elapsed/msPerMinute) + 'min';
+         return Math.round(elapsed/msPerMinute) + 'm';
     } else if (elapsed < msPerDay ) {
          return Math.round(elapsed/msPerHour ) + 'h';
     } else if (elapsed < msPerMonth) {
···
         return Math.round(elapsed/msPerYear ) + 'y';
     }
   }
+-
+  function encodeQueryParams(obj) {
+    return Object.keys(obj)
+      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
+      .join('&');
+  }

src/views/comments.pug

···
 include ../mixins/comment
 include ../mixins/header
+include ../utils
 
 doctype html
 html
···
     title reddit
     link(rel='stylesheet', href='/styles.css')
     script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
+  script.
+    function toggleDetails(details_id) {
+      var detailsElement = document.getElementById(details_id);
+      if (detailsElement) {
+        detailsElement.open = !detailsElement.open;
+      }
+    }
+
   body
     main#content
       +header()

src/views/index.pug

···
 include ../mixins/post
 include ../mixins/sub
 include ../mixins/header
+include ../utils
 - var subs = []
 doctype html
 html
···
       +header()
 
       div.hero
-        a(href=`/r/${subreddit}`)
-          h1 r/#{subreddit}
+        div.sub-title
+          a(href=`/r/${subreddit}`)
+            h1 r/#{subreddit}
+          div#button-container
         if about
           p #{about.public_description}
-        div#button-container
-        ul
-          li
-            a(href=`/r/${subreddit}/hot`) hot
-          li
-            a(href=`/r/${subreddit}/top`) top
-          li
-            a(href=`/r/${subreddit}/top?t=all`) top all
+        details
+          summary sort by
+          div.sort-opts
+            a(href=`/r/${subreddit}?sort=hot`) hot
+            a(href=`/r/${subreddit}?sort=new`) new
+            a(href=`/r/${subreddit}?sort=rising`) rising
+            a(href=`/r/${subreddit}?sort=top`) top
+            a(href=`/r/${subreddit}?sort=top&t=day`) top day
+            a(href=`/r/${subreddit}?sort=top&t=week`) top week
+            a(href=`/r/${subreddit}?sort=top&t=month`) top month
+            a(href=`/r/${subreddit}?sort=top&t=year`) top year
+            a(href=`/r/${subreddit}?sort=top&t=all`) top all
 
       if posts
         each child in posts.posts
           +post(child.data)
-        div.footer
-          div.footer-item
-            a(href=`/r/${subreddit}?after=${posts.after}`) next →
+        
+        if posts.after
+          div.footer
+            div.footer-item
+              - var newQuery = {...query, after: posts.after}
+              a(href=`/r/${subreddit}?${encodeQueryParams(newQuery)}`) next →