From 489bb110616aa4da596aed7ae0a048c919ed333e Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 26 Dec 2024 19:19:37 +0000 Subject: [PATCH 1/3] add footer, comments, linenrs etc --- src/mixins/footer.pug | 9 +++++++++ src/mixins/post.pug | 3 ++- src/mixins/utils.pug | 4 ++++ src/public/styles.css | 21 +++++++++++++++++++-- src/routes.ts | 33 +++++++++++++++++++++++++++++---- src/views/index.pug | 3 +++ src/views/paste.pug | 28 +++++++++++++++++++++------- 7 files changed, 87 insertions(+), 14 deletions(-) create mode 100644 src/mixins/footer.pug diff --git a/src/mixins/footer.pug b/src/mixins/footer.pug new file mode 100644 index 0000000..be71086 --- /dev/null +++ b/src/mixins/footer.pug @@ -0,0 +1,9 @@ +mixin footer() + hr + div.footer + div.left-side + div.right-side + p + | made by + a(href="https://bsky.app/profile/oppi.li") @oppi.li + diff --git a/src/mixins/post.pug b/src/mixins/post.pug index 77d78aa..e98bcf8 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug @@ -13,4 +13,5 @@ mixin post(paste, handle, did) | #{paste.lang} | · | #{paste.code.split('\n').length} loc - + | ·  + a(href=`/p/${paste.shortUrl}/#comments`) #{paste.commentCount} #{pluralize(paste.commentCount, 'comment')} diff --git a/src/mixins/utils.pug b/src/mixins/utils.pug index 857bddd..08507d3 100644 --- a/src/mixins/utils.pug +++ b/src/mixins/utils.pug @@ -2,6 +2,10 @@ function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } +- + function pluralize(count, noun) { + return count==1?noun:`${noun}s`; + } - function timeDifference(current, previous) { if (!current || !previous) { diff --git a/src/public/styles.css b/src/public/styles.css index f88b533..6f80f5f 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -104,7 +104,6 @@ textarea { hr { border: none; border-top: 1px solid var(--bg-color-muted); - padding: 1rem; } .post-form { @@ -152,7 +151,7 @@ hr { flex: 1 } -.header { +.header, .footer { display: flex; flex-direction: row; justify-content: space-between; @@ -165,3 +164,21 @@ select { text-indent: 1px; text-overflow: ''; } + +.code-line { + display: flex; +} + +.code-line-num { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--text-color-muted); + text-align: right; +} + +.code-line-content { + color: var(--text-color); +} diff --git a/src/routes.ts b/src/routes.ts index 70f931d..17fa00e 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -105,8 +105,20 @@ export const createRouter = (ctx: Ctx) => { const agent = await getSessionAgent(req, res, ctx); const pastes = await ctx.db .selectFrom("paste") - .selectAll() - .orderBy("indexedAt", "desc") + .leftJoin("comment", "comment.pasteUri", "paste.uri") + .select([ + "paste.uri", + "paste.shortUrl", + "paste.authorDid", + "paste.code", + "paste.lang", + "paste.title", + "paste.createdAt", + "paste.indexedAt as pasteIndexedAt", + ctx.db.fn.count("comment.uri").as("commentCount") + ]) + .groupBy("paste.uri") + .orderBy("pasteIndexedAt", "desc") .limit(25) .execute(); @@ -130,8 +142,21 @@ export const createRouter = (ctx: Ctx) => { const { authorDid } = req.params; const pastes = await ctx.db .selectFrom("paste") - .selectAll() - .where("authorDid", "=", authorDid) + .leftJoin("comment", "comment.pasteUri", "paste.uri") + .select([ + "paste.uri", + "paste.shortUrl", + "paste.authorDid as pasteAuthorDid", + "paste.code", + "paste.lang", + "paste.title", + "paste.createdAt as pasteCreatedAt", + "paste.indexedAt as pasteIndexedAt", + ctx.db.fn.count("comment.uri").as("commentCount") + ]) + .groupBy("paste.uri") + .where("pasteAuthorDid", "=", authorDid) + .orderBy("pasteCreatedAt", "desc") .execute(); let didHandleMap: Record = {}; didHandleMap[authorDid] = await ctx.resolver.resolveDidToHandle(authorDid); diff --git a/src/views/index.pug b/src/views/index.pug index 3443deb..e04403d 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -1,6 +1,7 @@ include ../mixins/mkPost include ../mixins/head include ../mixins/header +include ../mixins/footer include ../mixins/utils include ../mixins/post @@ -19,6 +20,7 @@ include ../mixins/post "c", "c#", "c++", + "cobol", ].toSorted()) doctype html html @@ -34,3 +36,4 @@ html each paste in pastes - var handle = didHandleMap[paste.authorDid] +post(paste, handle, paste.authorDid) + +footer() diff --git a/src/views/paste.pug b/src/views/paste.pug index 29516d3..f8a0906 100644 --- a/src/views/paste.pug +++ b/src/views/paste.pug @@ -15,12 +15,21 @@ html | #{paste.lang} · | #{paste.code.split('\n').length} loc · a(href=`/r/${paste.shortUrl}`) raw + |  ·  + | #{comments.length} #{pluralize(comments.length, 'comment')} pre - | #{paste.code} + code + - var lines = paste.code.split(/\r?\n|\r|\n/g) + - var tot_chars = lines.length.toString().length + each line, idx in lines + span.code-line + span.code-line-num(id=`L${idx + 1}` style=`min-width: ${tot_chars}ch;`) + | #{idx + 1} + span.code-line-content #{line} hr if comments.length != 0 - h1 comments + h1(id="comments") comments div.comments each comment in comments div.comment(id=`${encodeURIComponent(comment.uri)}`) @@ -33,9 +42,14 @@ html pre.comment-body #{comment.body} hr - form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form - div.post-row - textarea#code(name="comment" rows="5" placeholder="add a comment" required).post-input-code + if ownDid + form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form + div.post-row + textarea#code(name="comment" rows="5" placeholder="add a comment" required).post-input-code - div.post-submit-row - button(type="submit").post-input-submit zonk! + div.post-submit-row + button(type="submit").post-input-submit zonk! + else + p + a(href="/login") login + | to post a comment -- 2.47.0 From 436f4d5e8912c50068d8c70e623a23ce2ca9e6e7 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 26 Dec 2024 21:12:07 +0000 Subject: [PATCH 2/3] footer everywhere --- src/views/index.pug | 1 + src/views/login.pug | 2 ++ src/views/paste.pug | 6 ++++-- src/views/user.pug | 3 +++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/views/index.pug b/src/views/index.pug index e04403d..bc9085a 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -36,4 +36,5 @@ html each paste in pastes - var handle = didHandleMap[paste.authorDid] +post(paste, handle, paste.authorDid) + +footer() diff --git a/src/views/login.pug b/src/views/login.pug index 55aa048..b5a35e0 100644 --- a/src/views/login.pug +++ b/src/views/login.pug @@ -1,4 +1,5 @@ include ../mixins/head +include ../mixins/footer doctype html html @@ -10,3 +11,4 @@ html div.login-row input(type="text" name="handle" placeholder="enter handle" required).login-input-title button(type="submit").login-submit-button login + +footer() diff --git a/src/views/paste.pug b/src/views/paste.pug index f8a0906..653c02e 100644 --- a/src/views/paste.pug +++ b/src/views/paste.pug @@ -1,6 +1,7 @@ - var now = new Date() include ../mixins/head include ../mixins/header +include ../mixins/footer include ../mixins/utils doctype html html @@ -40,7 +41,6 @@ html | #{timeDifference(now, Date.parse(paste.createdAt))} ago p pre.comment-body #{comment.body} - hr if ownDid form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form @@ -49,7 +49,9 @@ html div.post-submit-row button(type="submit").post-input-submit zonk! - else + else p a(href="/login") login | to post a comment + + +footer() diff --git a/src/views/user.pug b/src/views/user.pug index 3523e16..b2b2743 100644 --- a/src/views/user.pug +++ b/src/views/user.pug @@ -2,6 +2,7 @@ - var handle = didHandleMap[authorDid] include ../mixins/head include ../mixins/header +include ../mixins/footer include ../mixins/utils include ../mixins/post doctype html @@ -14,3 +15,5 @@ html div.timeline each paste in pastes +post(paste, handle, authorDid) + + +footer() -- 2.47.0 From a717f0702e818515e34187cde86c15c00d2e66ba Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 26 Dec 2024 23:14:37 +0000 Subject: [PATCH 3/3] stylin for links --- src/mixins/post.pug | 2 +- src/public/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++- src/views/paste.pug | 9 ++++---- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/src/mixins/post.pug b/src/mixins/post.pug index e98bcf8..51af1ff 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug @@ -1,7 +1,7 @@ mixin post(paste, handle, did) div.post p - a(href=`/p/${paste.shortUrl}`) + a(href=`/p/${paste.shortUrl}`).post-link | #{paste.title} p.post-info | by diff --git a/src/public/styles.css b/src/public/styles.css index 6f80f5f..b153f92 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -58,7 +58,6 @@ a:visited { } pre { - background-color: var(--bg-color-muted); padding: 1rem; overflow-x: auto; } @@ -66,6 +65,11 @@ pre { .comment-body { background-color: var(--bg-color); padding: 0; + margin-top: 0.1rem; +} + +.comment-info { + margin-bottom: 0; } input, textarea, select, button { @@ -137,10 +141,40 @@ hr { align-self: flex-end; } +.post-link { + color: var(--text-color); + text-decoration: none; +} +.post-link:hover { + text-decoration: underline; +} +.post-link:visited { + color: var(--text-color-muted); +} + +.post-info { + margin-top: 0; +} + +.post-info, .comment-info { + color: var(--text-color-muted); +} +.post-info a, .comment-info a { + color: var(--text-color-muted); + text-decoration: none; +} +.post-info a:visited, .comment-info a:visited { + color: var(--text-color-muted); +} +.post-info a:hover, .comment-info a:hover { + text-decoration: underline; +} + .timeline, .comments { display: flex; flex-direction: column; gap: 1rem; + padding-bottom: 1rem; } .login-input-title { @@ -182,3 +216,18 @@ select { .code-line-content { color: var(--text-color); } + +.header, .footer { + color: var(--text-color); +} + +.header a, .header a:visited, +.footer a, .footer a:visited { + color: var(--link-color); + text-decoration: none; +} + +.header a:hover, +.footer a:hover { + text-decoration: underline; +} diff --git a/src/views/paste.pug b/src/views/paste.pug index 653c02e..3014107 100644 --- a/src/views/paste.pug +++ b/src/views/paste.pug @@ -10,13 +10,13 @@ html main#content +header(ownDid, didHandleMap) h1 #{paste.title} - p + p.post-info | @#{didHandleMap[paste.authorDid]} · | #{timeDifference(now, Date.parse(paste.createdAt))} ago · | #{paste.lang} · | #{paste.code.split('\n').length} loc · a(href=`/r/${paste.shortUrl}`) raw - |  ·  + |  · | #{comments.length} #{pluralize(comments.length, 'comment')} pre code @@ -34,13 +34,12 @@ html div.comments each comment in comments div.comment(id=`${encodeURIComponent(comment.uri)}`) - p + p.comment-info a(href=`/u/${comment.authorDid}`) | @#{didHandleMap[comment.authorDid]} |  · | #{timeDifference(now, Date.parse(paste.createdAt))} ago - p - pre.comment-body #{comment.body} + pre.comment-body #{comment.body} if ownDid form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form -- 2.47.0