add markdown rendering, lay out localStorage subscriptions

7 files changed, 94 insertions, 12 deletions

diff --git a/package.json b/package.json
index 3e68c4c..6c94715 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "express": "^4.19.2",
+    "he": "^1.2.0",
     "pug": "^3.0.3",
     "timeago.js": "^4.0.2"
   }
diff --git a/src/public/styles.css b/src/public/styles.css
index c366e46..8add1a5 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -24,7 +24,7 @@ main {
 }
 
 .info-item {
-  margin-right: 10px;
+  margin-right: 14px;
 }
 
 @media (min-width: 768px) {
@@ -58,6 +58,10 @@ main {
   box-sizing: border-box;
 }
 
+.comment {
+  padding: 0px 0px 0px 24px;
+}
+
 .more {
   margin-bottom: 0px;
   font-size: 0.7rem;
@@ -68,7 +72,7 @@ main {
   border-left: none;
   padding-left: 0;
   margin: 0;
-  margin-top: 12px;
+  margin-top: 40px;
 }
 
 .post-container {
@@ -88,6 +92,8 @@ main {
 }
 
 .post-media {
+  display: block;
+  margin: 0 auto;
   max-width: 100%;
 }
 
@@ -100,3 +106,10 @@ main {
 hr {
   border 1px solid #000;
 }
+
+blockquote {
+  margin: 0px;
+  padding-left: 10px;
+  border-left: 4px solid green;
+  color: green;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 6cf5403..77ff118 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,8 +1,8 @@
 const express = require('express');
+const he = require('he');
 const router = express.Router();
 const geddit = require('../geddit.js');
 const G = new geddit.Geddit();
-const fs = require('fs/promises');
 
 
 // GET /
@@ -18,6 +18,7 @@ router.get('/r/:subreddit', async (req, res) => {
   var aboutReq = G.getSubreddit(`${subreddit}`);
 
   var [posts, about] = await Promise.all([postsReq, aboutReq]);
+
   res.render('index', { subreddit, posts, about });
 });
 
@@ -26,10 +27,33 @@ router.get('/comments/:id', async (req, res) => {
   var id = req.params.id;
 
   response = await G.getSubmissionComments(id);
-  var post = response.submission.data;
-  var comments = response.comments;
 
-  res.render('comments', { post, comments });
+  res.render('comments', unescape_submission(response));
 });
 
 module.exports = router;
+
+function unescape_submission(response) {
+  var post = response.submission.data;
+  var comments = response.comments;
+
+  if (post.selftext_html) {
+    post.selftext_html = he.decode(post.selftext_html);
+  }
+  comments.forEach(unescape_comment);
+
+  return { post, comments };
+}
+
+function unescape_comment(comment) {
+  if (comment.data.body_html) {
+    comment.data.body_html = he.decode(comment.data.body_html);
+  }
+  if (comment.data.replies) {
+    if(comment.data.replies.data) {
+      if(comment.data.replies.data.children) {
+        comment.data.replies.data.children.forEach(unescape_comment);
+      }
+    }
+  }
+}
diff --git a/src/views/comment.pug b/src/views/comment.pug
index 24e1a9b..8a60590 100644
--- a/src/views/comment.pug
+++ b/src/views/comment.pug
@@ -6,7 +6,8 @@ mixin comment(com, isfirst)
     div.more #{data.count} more comments
   else
     div(class=`comment ${isfirst?'first':''}`)
-      div.comment-body !{data.body}
+      div.comment-body 
+        != data.body_html
       div.info-container
         div.info-item by u/#{data.author}
         div.info-item ↑ #{fmtnum(data.ups)}
diff --git a/src/views/comments.pug b/src/views/comments.pug
index f7964a3..ff90554 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -14,7 +14,7 @@ html
           img(src=post.url).post-media
         else if post.post_hint == 'hosted:video'
           video(src=post.url).post-media
-        p.self-text !{post.selftext}
+        p.self-text !{post.selftext_html}
         hr
 
       div.comments-container
diff --git a/src/views/index.pug b/src/views/index.pug
index d017570..f23405f 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -1,16 +1,56 @@
+- var subs = []
 doctype html
 html
   head
     meta(charset='UTF-8')
     title reddit
     link(rel='stylesheet', href='/styles.css')
+  script.
+    function getSubs() {
+      var store = localStorage.getItem('subs');
+      if (store) {
+        return store.split(',').map((n)=>n.replace(/\/?r\//,''));
+      } else {
+        return [];
+      }
+    }
+
+    function subscribe(newsub) {
+      var subs = getSubs();
+      if (!subs.includes(newsub)) {
+        localStorage.setItem('subs',[...subs,newsub]);
+      }
+    }
+
+    function newSubItem(newsub) {
+      var p = document.createElement("p");
+      var text = document.createTextNode(newsub);
+      p.appendChild(text);
+      return p;
+    }
+
+    function genSubListing() {
+      const body = document.body;
+      const subbar = document.createElement('div');
+      subbar.id = 'subscriptions';
+      body.insertBefore(subbar, body.firstChild);
+      getSubs().forEach((item) => {
+        subbar.appendChild(newSubItem(item));
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      genSubListing();
+    });
   body
+
     main#content
       div.header
-        a(href=`/r/#{subreddit}`)
+        a(href=`/r/${subreddit}`)
           h1 r/#{subreddit}
         if about
           p #{about.public_description}
+        button(onclick=`subscribe("${subreddit}")`) subscribe
 
       each child in posts.posts
         include post
diff --git a/src/views/post.pug b/src/views/post.pug
index 183f33f..960ad53 100644
--- a/src/views/post.pug
+++ b/src/views/post.pug
@@ -7,8 +7,8 @@ mixin post(p)
           != p.title
           span.domain   (#{p.domain})
         div.info-container 
-          div.info-item by u/#{p.author}
           div.info-item ↑ #{fmtnum(p.ups)}
+          div.info-item by u/#{p.author}
           div.info-item 
             a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
           div.info-item 
@@ -18,5 +18,8 @@ mixin post(p)
           if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
             a(href=p.url)
               img(src=p.thumbnail width='100px') 
-        else if p.post_hint == "hosted:video"
-          video(src=p.secure_media.reddit_video.scrubber_media_url width='100px') 
+          else if p.post_hint == "hosted:video"
+            - var url = p.secure_media.reddit_video.fallback_url
+            a(href=url)
+              video(src=url height='100px')
+