From 8b5db5e1954de865933fd4de003fdd21d57add4a Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 1 Sep 2024 19:18:23 +0100 Subject: finish subscriptions --- flake.nix | 2 +- src/mixins/comment.pug | 20 +++++++++++++++ src/mixins/post.pug | 25 +++++++++++++++++++ src/mixins/sub.pug | 32 ++++++++++++++++++++++++ src/public/styles.css | 67 +++++++++++++++++++++++++++++++++++++++++++------- src/routes/index.js | 5 ++++ src/utils.pug | 3 +++ src/views/comment.pug | 19 -------------- src/views/comments.pug | 6 ++--- src/views/index.pug | 59 ++++++++++++++++++-------------------------- src/views/post.pug | 25 ------------------- src/views/subs.pug | 32 ++++++++++++++++++++++++ src/views/utils.pug | 3 --- 13 files changed, 203 insertions(+), 95 deletions(-) create mode 100644 src/mixins/comment.pug create mode 100644 src/mixins/post.pug create mode 100644 src/mixins/sub.pug create mode 100644 src/utils.pug delete mode 100644 src/views/comment.pug delete mode 100644 src/views/post.pug create mode 100644 src/views/subs.pug delete mode 100644 src/views/utils.pug 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/mixins/comment.pug b/src/mixins/comment.pug new file mode 100644 index 0000000..ec01dad --- /dev/null +++ b/src/mixins/comment.pug @@ -0,0 +1,20 @@ +include ../utils +mixin comment(com, isfirst) + - var data = com.data + - var kind = com.kind + if kind == "more" + 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.replies + if data.replies + if data.replies.data + if data.replies.data.children + each reply in data.replies.data.children + +comment(reply,false) diff --git a/src/mixins/post.pug b/src/mixins/post.pug new file mode 100644 index 0000000..f5819d4 --- /dev/null +++ b/src/mixins/post.pug @@ -0,0 +1,25 @@ +include ../utils +mixin post(p) + article.post + div.post-container + div.post-text + div.title-container + != p.title + span.domain (#{p.domain}) + div.info-container + 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 + a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')} + div.media-preview + if p.post_hint == "image" || p.post_hint == "link" + 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" + - var url = p.secure_media.reddit_video.fallback_url + a(href=url) + video(src=url height='100px') + 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/utils.pug b/src/utils.pug new file mode 100644 index 0000000..f3f61bb --- /dev/null +++ b/src/utils.pug @@ -0,0 +1,3 @@ +- var fmtnum = (n)=>n>=1000?(n/1000).toFixed(1)+'k':n; +- var fmttxt = (n,t)=>`${t}${n==1?'':'s'}` + diff --git a/src/views/comment.pug b/src/views/comment.pug deleted file mode 100644 index 8a60590..0000000 --- a/src/views/comment.pug +++ /dev/null @@ -1,19 +0,0 @@ -include utils -mixin comment(com, isfirst) - - var data = com.data - - var kind = com.kind - if kind == "more" - div.more #{data.count} more comments - else - div(class=`comment ${isfirst?'first':''}`) - 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 - if data.replies.data.children - each reply in data.replies.data.children - +comment(reply,false) 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/htmx.org@1.9.10') 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/htmx.org@1.9.10') diff --git a/src/views/post.pug b/src/views/post.pug deleted file mode 100644 index 960ad53..0000000 --- a/src/views/post.pug +++ /dev/null @@ -1,25 +0,0 @@ -include utils -mixin post(p) - article.post - div.post-container - div.post-text - div.title-container - != p.title - span.domain (#{p.domain}) - div.info-container - 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 - a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')} - div.media-preview - if p.post_hint == "image" || p.post_hint == "link" - 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" - - var url = p.secure_media.reddit_video.fallback_url - a(href=url) - video(src=url height='100px') - 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 diff --git a/src/views/utils.pug b/src/views/utils.pug deleted file mode 100644 index f3f61bb..0000000 --- a/src/views/utils.pug +++ /dev/null @@ -1,3 +0,0 @@ -- var fmtnum = (n)=>n>=1000?(n/1000).toFixed(1)+'k':n; -- var fmttxt = (n,t)=>`${t}${n==1?'':'s'}` - -- cgit v1.2.3