finish subscriptions

10 files changed, 162 insertions, 54 deletions

diff --git a/flake.nix b/flake.nix
index d35173d..0f3be4f 100644
--- a/flake.nix
+++ b/flake.nix
@@ -36,7 +36,7 @@
             cp -R ./node_modules/* $out/node_modules
             ls -la $out/node_modules
           '';
-          outputHash = "sha256-rDMFY/D7rRWj6PDhZu2vRST12fyNpYUMl1a1LBB6/Jw=";
+          outputHash = "sha256-k77Ht47QBQUmoGp2zxBwVIjQ9fwnIGCqcqBLK6/d6jM=";
           outputHashAlgo = "sha256";
           outputHashMode = "recursive";
         };
diff --git a/src/views/comment.pug b/src/mixins/comment.pug
index 8a60590..ec01dad 100644
--- a/src/views/comment.pug
+++ b/src/mixins/comment.pug
@@ -1,16 +1,17 @@
-include utils
+include ../utils
 mixin comment(com, isfirst)
   - var data = com.data
   - var kind = com.kind
   if kind == "more"
-    div.more #{data.count} more comments
+    div(class=`${isfirst?'first':''}`)
+      div.more #{data.count} more comments
   else
     div(class=`comment ${isfirst?'first':''}`)
+      div.comment-info-container
+        div.info-item u/#{data.author}
+        div.info-item ↑ #{fmtnum(data.ups)}
       div.comment-body 
         != data.body_html
-      div.info-container
-        div.info-item by u/#{data.author}
-        div.info-item ↑ #{fmtnum(data.ups)}
       div.replies
       if data.replies
         if data.replies.data
diff --git a/src/views/post.pug b/src/mixins/post.pug
index 960ad53..f5819d4 100644
--- a/src/views/post.pug
+++ b/src/mixins/post.pug
@@ -1,4 +1,4 @@
-include utils
+include ../utils
 mixin post(p)
   article.post
     div.post-container
diff --git a/src/mixins/sub.pug b/src/mixins/sub.pug
new file mode 100644
index 0000000..a40aa68
--- /dev/null
+++ b/src/mixins/sub.pug
@@ -0,0 +1,32 @@
+mixin subMgmt()
+  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]);
+        updateButton(newsub);
+      }
+    }
+
+    function unsubscribe(sub) {
+      var subs = getSubs();
+      if (subs.includes(sub)) {
+        localStorage.setItem('subs',subs.filter((s)=>s!=sub));
+        updateButton(sub);
+      }
+    }
+
+    function issub(sub) {
+      return getSubs().includes(sub);
+    }
+
+
diff --git a/src/public/styles.css b/src/public/styles.css
index 8add1a5..60cd2c3 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -5,14 +11,24 @@ main {
   align-items: center;
 }
 
-.post, .comments-container, .header {
+.header {
+  display: flex;
+  flex-direction: row;
+}
+
+nav {
+  display: flex;
+  align-items: stretch;
+}
+
+.post, .comments-container, .hero, .header {
   padding: 0.3rem;
   flex: 1 1 100%;
   font-size: 1rem;
   width: 100%;
 }
 
-.info-container {
+.info-container, .comment-info-container {
   color: #777;
   font-size: 0.7rem;
   display: flex;
@@ -23,26 +39,40 @@ main {
   font-size: 0.7rem;
 }
 
-.info-item {
+.info-item, .header-item {
   margin-right: 14px;
 }
 
+.header-item {
+  position: relative; /* Needed for positioning the pseudo-element */
+}
+
+.header-item:not(:last-child)::after {
+  content: "·"; /* Middle dot as the separator */
+  position: absolute;
+  right: -10px; /* Adjust position as needed */
+  top: 50%;
+  transform: translateY(-50%); /* Center vertically */
+  color: #888; /* Separator color */
+  font-size: 20px; /* Adjust size of the separator */
+}
+
 @media (min-width: 768px) {
-  .post, .comments-container, .header {
+  .post, .comments-container, .hero, .header {
     flex: 1 1 65%;
     width: 65%;
   }
-  .info-container {
+  .info-container, .comment-info-container {
     font-size: 0.8rem;
   }
 }
 
 @media (min-width: 1080px) {
-  .post, .comments-container, .header {
+  .post, .comments-container, .hero, .header {
     flex: 1 1 50%;
     width: 50%;
   }
-  .info-container {
+  .info-container, .comment-info-container {
     font-size: 0.8rem;
   }
 }
@@ -95,14 +125,19 @@ main {
   display: block;
   margin: 0 auto;
   max-width: 100%;
+  max-height: 400px;
 }
 
-.title-container,.info-container {
-  flex: 1;                     
+.title-container,.info-container, .comment-info-container {
+  flex: 1;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.comment-info-container {
+  margin-bottom: -12px;
+}
+
 hr {
   border 1px solid #000;
 }
@@ -113,3 +148,17 @@ blockquote {
   border-left: 4px solid green;
   color: green;
 }
+
+pre, code {
+  background: #eee;
+}
+
+pre {
+  padding: 10px;
+  width: 100%;
+  overflow: auto;
+}
+
+code {
+  overflow-x: auto;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 77ff118..f43ee6f 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -31,6 +31,11 @@ router.get('/comments/:id', async (req, res) => {
   res.render('comments', unescape_submission(response));
 });
 
+// GET /subs
+router.get('/subs', async (req, res) => {
+  res.render('subs');
+});
+
 module.exports = router;
 
 function unescape_submission(response) {
diff --git a/src/views/utils.pug b/src/utils.pug
index f3f61bb..f3f61bb 100644
--- a/src/views/utils.pug
+++ b/src/utils.pug
diff --git a/src/views/comments.pug b/src/views/comments.pug
index ff90554..0539b27 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -1,3 +1,5 @@
+include ../mixins/comment
+
 doctype html
 html
   head
@@ -6,7 +8,7 @@ html
     link(rel='stylesheet', href='/styles.css')
   body
     main#content
-      div.header
+      div.hero
         a(href=`/r/${post.subreddit}`)
           h4 ← r/#{post.subreddit}
         h2 #{post.title}
@@ -15,11 +17,9 @@ html
         else if post.post_hint == 'hosted:video'
           video(src=post.url).post-media
         p.self-text !{post.selftext_html}
-        hr
 
       div.comments-container
         each child in comments
-          include comment
           +comment(child, true)
 
     script(src='https://unpkg.com/[email protected]')
diff --git a/src/views/index.pug b/src/views/index.pug
index f23405f..526d800 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -1,3 +1,5 @@
+include ../mixins/post
+include ../mixins/sub
 - var subs = []
 doctype html
 html
@@ -5,55 +7,42 @@ html
     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]);
-      }
-    }
+  +subMgmt()
+  script.
+    function updateButton(sub) {
+      var b = document.getElementById("button-container");
+      b.innerHTML = '';
 
-    function newSubItem(newsub) {
-      var p = document.createElement("p");
-      var text = document.createTextNode(newsub);
-      p.appendChild(text);
-      return p;
-    }
+      const button = document.createElement("button");
 
-    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));
-      });
+      if (issub(sub)) {
+         button.innerText = "unsubscribe";
+         button.onclick = ()=>unsubscribe(sub);
+      } else {
+         button.innerText = "subscribe";
+         button.onclick = ()=>subscribe(sub);
+      }
+      b.appendChild(button);
     }
 
-    document.addEventListener('DOMContentLoaded', function() {
-      genSubListing();
-    });
+    document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
   body
-
     main#content
       div.header
+        div.header-item
+          a(href=`/`) home
+        div.header-item
+          a(href=`/subs`) subscriptions
+
+      div.hero
         a(href=`/r/${subreddit}`)
           h1 r/#{subreddit}
         if about
           p #{about.public_description}
-        button(onclick=`subscribe("${subreddit}")`) subscribe
+        div#button-container
 
       each child in posts.posts
-        include post
         +post(child.data)
 
     script(src='https://unpkg.com/[email protected]')
diff --git a/src/views/subs.pug b/src/views/subs.pug
new file mode 100644
index 0000000..038cd15
--- /dev/null
+++ b/src/views/subs.pug
@@ -0,0 +1,32 @@
+include ../mixins/sub
+
+doctype html
+html
+  head
+    meta(charset='UTF-8')
+    title reddit
+    link(rel='stylesheet', href='/styles.css')
+
+  +subMgmt()
+  script.
+    function newSubItem(sub) {
+      const p = document.createElement("p");
+      const a = document.createElement("a");
+      a.href = `/r/${sub}`;
+      a.innerText = `r/${sub}`;
+      p.appendChild(a);
+      return p;
+    }
+
+    function buildSubList() {
+      var subList = document.getElementById('subList');
+      getSubs().forEach((sub)=>{
+        subList.appendChild(newSubItem(sub));
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', buildSubList);
+  body
+    main#content
+      h1 subscriptions
+      div#subList