add search page, support spoiler/nsfw imgs

12 files changed, 57 insertions, 15 deletions

diff --git a/src/assets/missing.svg b/src/assets/missing.svg
new file mode 100644
index 0000000..2438603
--- /dev/null
+++ b/src/assets/missing.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <rect x="2" y="2" width="196" height="196" style="fill:#999;stroke:#000000"/>
+    <text x="50%" y="50%" font-size="36" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#000000">
+        missing
+    </text>
+    <style/>
+</svg>
+
+
diff --git a/src/assets/nsfw.svg b/src/assets/nsfw.svg
new file mode 100644
index 0000000..5adaa9c
--- /dev/null
+++ b/src/assets/nsfw.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <rect x="2" y="2" width="196" height="196" style="fill:#ff123a;stroke:#000000"/>
+    <text x="50%" y="50%" font-size="36" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#000000">
+        nsfw
+    </text>
+    <style/>
+</svg>
diff --git a/src/assets/spoiler.svg b/src/assets/spoiler.svg
new file mode 100644
index 0000000..aed3392
--- /dev/null
+++ b/src/assets/spoiler.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <rect x="2" y="2" width="196" height="196" style="fill:#999;stroke:#000000"/>
+    <text x="50%" y="50%" font-size="36" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#000000">
+        spoiler
+    </text>
+    <style/>
+</svg>
+
diff --git a/src/auth.js b/src/auth.js
index 78e3dea..f040a08 100644
--- a/src/auth.js
+++ b/src/auth.js
@@ -27,7 +27,9 @@ function authenticateToken(req, res, next) {
 
 function authenticateAdmin(req, res, next) {
         if (!req.cookies || !req.cookies.auth_token) {
-                return res.redirect("/login");
+                return res.redirect(
+                        `/login?redirect=${encodeURIComponent(req.originalUrl)}`,
+                );
         }
 
         const token = req.cookies.auth_token;
diff --git a/src/index.js b/src/index.js
index 6296534..f6680c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,7 @@ const routes = require("./routes/index");
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(express.static(path.join(__dirname, "public")));
+app.use(express.static(path.join(__dirname, "assets")));
 app.use(cookieParser());
 app.use(
         rateLimit({
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 76fa1b8..4287801 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -26,7 +26,7 @@ mixin post(p)
           img(src=item.url onclick=`toggleDetails('${p.id}')`) 
         else if isPostImage(p)
           - var url = postThumbnail(p)
-          img(src=url onclick=`toggleDetails('${p.id}')`) 
+          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}')`)
diff --git a/src/mixins/postUtils.pug b/src/mixins/postUtils.pug
index 555e388..816adf7 100644
--- a/src/mixins/postUtils.pug
+++ b/src/mixins/postUtils.pug
@@ -4,12 +4,18 @@
   }
 -
   function isPostImage(p) {
-    return (p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default");
+    const imgRe = /\.(png|jpg|jpeg|gif|webp|bmp|tiff|svg)$/i;
+    return (p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default")
+      || imgRe.test(p.url);
   }
 -
   function postThumbnail(p) {
-    if (p.thumbnail == "image") {
-        return p.url
+    if (p.thumbnail == "image" || p.thumbnail == "") {
+        return p.url;
+    } else if (p.over_18) {
+        return "/nsfw.svg";
+    } else if (p.thumbnail == "spoiler") {
+        return "/spoiler.svg";
     } else {
         return p.thumbnail;
     }
diff --git a/src/public/styles.css b/src/public/styles.css
index 3b3e80d..090205e 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -158,14 +158,10 @@ summary::before {
 .info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
- 
-.media-preview img,
-.media-preview video {
-  object-fit: cover;
-}
 
 .media-preview img,
 .media-preview video {
+  object-fit: cover;
   width: 4rem;
   height: 4rem;
 }
@@ -565,3 +561,7 @@ form input[type="submit"]:hover {
   flex-direction: column;
   gap: 20px;
 }
+
+.about {
+  padding-bottom: 20px;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 6e54ef3..d4cfd35 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -131,7 +131,14 @@ router.get("/search", authenticateToken, async (req, res) => {
                         items.length === 0
                                 ? "no results found"
                                 : `showing ${items.length} results`;
-                res.render("sub-search", { items, subs, after, message, user: req.user });
+                res.render("sub-search", {
+                        items,
+                        subs,
+                        after,
+                        message,
+                        user: req.user,
+                        original_query: req.query.q,
+                });
         }
 });
 
diff --git a/src/views/comments.pug b/src/views/comments.pug
index e9bd332..844dfcc 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -43,7 +43,8 @@ html
                 a(href=`/media/${item.url}`)
                   img(src=item.url loading="lazy")
         else if isPostImage(post)
-          img(src=post.url).post-media
+          a(href=`/media/${post.url}`)
+            img(src=post.url).post-media
         else if isPostVideo(post)
           - var url = post.secure_media.reddit_video.dash_url
           video(controls data-dashjs-player src=`${url}`).post-media
diff --git a/src/views/index.pug b/src/views/index.pug
index a3bcd84..ea730fb 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -25,9 +25,9 @@ html
               else
                 button(onclick=`toggleSub('${subreddit}')` id=`thinger_${subreddit}`) subscribe
         if about && !isMulti
-          p #{about.public_description}
+          div.about #{about.public_description}
         else 
-          p 
+          div.about 
             | consider donating to&nbsp;
             a(href="https://donate.stripe.com/dR62bTaZH1295Da4gg") oppiliappan
             |, author of readit
diff --git a/src/views/sub-search.pug b/src/views/sub-search.pug
index da33214..bf0d402 100644
--- a/src/views/sub-search.pug
+++ b/src/views/sub-search.pug
@@ -11,7 +11,8 @@ html
       div.hero
         h1 search subreddits
         form(action="/search" method="get").search-bar
-          input(type="text" name="q" placeholder="search subreddits (add +nsfw to include over-18 results)" required).search-input
+          - var prefill = original_query ?? "";
+          input(type="text" name="q" placeholder="search subreddits (add +nsfw to include over-18 results)" value=prefill required).search-input
           button(type="submit").search-button go
         if message
           div.search-message