add dark mode, add time for comments and posts

5 files changed, 128 insertions, 27 deletions

diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index 8d341c9..2ec076f 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -13,6 +13,7 @@ mixin comment(com, isfirst)
         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
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 3e7e51a..9dd0748 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -14,6 +14,8 @@ mixin post(p)
               |  · 
               by u/#{p.author} 
             |  · 
+            | #{timeDifference(Date.now(), p.created * 1000)}
+            |  · 
             a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
             |  · 
             a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩
@@ -28,7 +30,7 @@ mixin post(p)
           if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
             img(src=p.thumbnail onclick=`toggleDetails('${p.id}')`) 
         else if p.post_hint == "hosted:video"
-          - var url = p.secure_media.reddit_video.dash_url
+          - var url = p.secure_media.reddit_video.scrubber_media_url
           video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
 
     if p.is_gallery && p.is_gallery == true
@@ -37,23 +39,31 @@ mixin post(p)
           details(id=`${p.id}`)
             summary expand gallery
             div.gallery
+              - var total = p.gallery_data.items.length
+              - var idx = 0
+              - var metadata = p.media_metadata
+              - var img_ext = (id) => stripPrefix(metadata[id].m, "image/")
               each item in p.gallery_data.items
-                - var url = `https://i.redd.it/${item.media_id}.jpg`
+                - var id = item.media_id
+                - var ext = img_ext(item.media_id)
+                - var url = `https://i.redd.it/${id}.${ext}`
                 div.gallery-item
                   a(href=`/media/${url}`)
-                      img(src=url)
+                    img(src=url loading="lazy")
+                  div.gallery-item-idx
+                    | #{`${++idx}/${total}`}
             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
         a(href=`/media/${p.url}`)
-          img(src=p.url).post-media
+          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
         - var url = p.secure_media.reddit_video.dash_url
-        video(src=url controls data-dashjs-player).post-media
+        video(src=url controls data-dashjs-player loading="lazy").post-media
         button(onclick=`toggleDetails('${p.id}')`) close
     else if p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
       details(id=`${p.id}`)
diff --git a/src/public/styles.css b/src/public/styles.css
index 3a0cb8b..b9da7a1 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -1,8 +1,32 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
+:root {
+  /* Light mode colors */
+  --bg-color: white;
+  --text-color: black;
+  --text-color-muted: #999;
+  --blockquote-color: green;
+  --link-color: blue;
+  --link-visited-color: purple;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: black;
+    --text-color: white;
+    --text-color-muted: #999;
+    --blockquote-color: green;
+    --link-color: lightblue;
+    --link-visited-color: violet;
+  }
+}
+
+
 body {
   font-family: 'Inter', sans-serif;
   overflow-x: hidden;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 main {
@@ -12,6 +36,20 @@ main {
   align-items: center;
 }
 
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--link-color);
+  text-decoration: underline;
+}
+
+a:visited {
+  color: var(--link-visited-color);
+}
+
 .header {
   display: flex;
   flex-direction: row;
@@ -38,7 +76,7 @@ nav {
   width: 100%;
 }
 
-.post {
+.post, .hero {
   font-size: 1rem;
 }
 
@@ -46,14 +84,21 @@ nav {
   font-size: 1rem;
 }
 
+.info-container a,
+.info-container,
+.comment-info-container,
+.more,
+hr {
+  color: var(--text-color-muted)
+}
+
 .info-container, .comment-info-container, .more {
-  color: #777;
   font-size: 0.8rem;
   display: flex;
 }
 
 .domain {
-  color: #777;
+  color: var(--text-color-muted);
   font-size: 0.8rem;
 }
 
@@ -62,7 +107,8 @@ nav {
 }
 
 
-.media-preview img {
+.media-preview img,
+.media-preview video {
   object-fit: cover;
 }
 
@@ -81,11 +127,11 @@ nav {
     flex: 1 1 90%;
     width: 90%;
   }
-  .post {
+  .post, .hero {
     font-size: 1.3rem;
   }
   .comments-container {
-    font-size: 1.1rem;
+    font-size: 1.3rem;
   }
   .info-container, .comment-info-container, .more {
     font-size: 1rem;
@@ -106,14 +152,14 @@ nav {
 
 @media (min-width: 1080px) {
   .post, .comments-container, .hero, .header, .footer {
-    flex: 1 1 50%;
-    width: 50%;
+    flex: 1 1 60%;
+    width: 60%;
   }
-  .post {
+  .post, .hero {
     font-size: 1.3rem;
   }
   .comments-container {
-    font-size: 1.1rem;
+    font-size: 1.3rem;
   }
   .info-container, .comment-info-container, .more {
     font-size: 1rem;
@@ -138,7 +184,7 @@ nav {
 
 .comment, .more {
   width: 100%;
-  border-left: 1px dashed;
+  border-left: 1px dashed var(--text-color-muted);
   padding: 10px 0px 0px 24px;
   box-sizing: border-box;
 }
@@ -149,7 +195,6 @@ nav {
 
 .more {
   margin-bottom: 0px;
-  color: #777;
 }
 
 .first {
@@ -189,19 +234,27 @@ nav {
   padding: 5px;
 }
 
-.title-container,.info-container, .comment-info-container {
+.title-container, .comment-info-container {
   flex: 1;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.info-container {
+  flex: 1;
+}
+
 .title-container > a {
-  color: black;
+  color: var(--text-color);
   text-decoration: none;
 }
 
 .title-container > a:visited {
-  color: #999;
+  color: var(--text-color-muted)
+}
+
+.header a {
+  color: var(--text-color);
 }
 
 hr {
@@ -211,8 +264,8 @@ hr {
 blockquote {
   margin: 0px;
   padding-left: 10px;
-  border-left: 4px solid green;
-  color: green;
+  border-left: 4px solid var(--blockquote-color);
+  color: var(--blockquote-color);
 }
 
 pre, code {
@@ -254,6 +307,7 @@ a {
 .gallery {
   display: flex;
   overflow-x: auto;
+  position: relative;
   scroll-snap-type: x mandatory;
   padding: 5px;
 }
diff --git a/src/utils.pug b/src/utils.pug
index f3f61bb..81cf3f7 100644
--- a/src/utils.pug
+++ b/src/utils.pug
@@ -1,3 +1,28 @@
 - var fmtnum = (n)=>n>=1000?(n/1000).toFixed(1)+'k':n;
 - var fmttxt = (n,t)=>`${t}${n==1?'':'s'}`
-
+- var stripPrefix = (s, p) => s.startsWith(p) ? s.slice(p.length) : s;
+-
+  function timeDifference(current, previous) {
+    if (!current || !previous) {
+        return '';
+    }
+    var msPerMinute = 60 * 1000;
+    var msPerHour = msPerMinute * 60;
+    var msPerDay = msPerHour * 24;
+    var msPerMonth = msPerDay * 30;
+    var msPerYear = msPerDay * 365;
+    var elapsed = current - previous;
+    if (elapsed < msPerMinute) {
+         return Math.round(elapsed/1000) + 's';
+    } else if (elapsed < msPerHour) {
+         return Math.round(elapsed/msPerMinute) + 'min';
+    } else if (elapsed < msPerDay ) {
+         return Math.round(elapsed/msPerHour ) + 'h';
+    } else if (elapsed < msPerMonth) {
+        return Math.round(elapsed/msPerDay) + 'd';
+    } else if (elapsed < msPerYear) {
+        return Math.round(elapsed/msPerMonth) + 'mo';
+    } else {
+        return Math.round(elapsed/msPerYear ) + 'y';
+    }
+  }
diff --git a/src/views/comments.pug b/src/views/comments.pug
index d7a8ab4..9d02a01 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -21,17 +21,28 @@ html
         if post.is_gallery && post.is_gallery == true
           if post.gallery_data
             if post.gallery_data.items
-              each item in post.gallery_data.items
-                - var url = `https://i.redd.it/${item.media_id}.jpg`
-                img(src=url).post-media
-        if (post.post_hint == "image" || post.post_hint == "link") && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
+              div.gallery
+                - var total = post.gallery_data.items.length
+                - var idx = 0
+                each item in post.gallery_data.items
+                  - var url = `https://i.redd.it/${item.media_id}.jpg`
+                  div.gallery-item
+                    a(href=`/media/${url}`)
+                      img(src=url loading="lazy")
+                    div.gallery-item-idx
+                      | #{`${++idx}/${total}`}
+        else if post.post_hint == "image" && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
           img(src=post.url).post-media
         else if post.post_hint == 'hosted:video'
           - var url = post.secure_media.reddit_video.dash_url
           video(controls data-dashjs-player src=`${url}`).post-media
+        else if post.post_hint == "link" && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
+          a(href=`${post.url}`)
+            | #{post.url}
 
         if post.selftext_html
           p.self-text !{post.selftext_html}
+
         div.info-container 
           p
             | #{fmtnum(post.ups)} ↑