oppi.li
1From 6df2fc36269c7114fb845fa0ac667e08f6e7d09b Mon Sep 17 00:00:00 2001
2From: Akshay <nerdy@peppe.rs>
3Date: Thu, 26 Dec 2024 19:19:37 +0000
4Subject: [PATCH 1/3] add footer, comments, linenrs etc
5
6---
7 src/mixins/footer.pug | 9 +++++++++
8 src/mixins/post.pug | 3 ++-
9 src/mixins/utils.pug | 4 ++++
10 src/public/styles.css | 21 +++++++++++++++++++--
11 src/routes.ts | 33 +++++++++++++++++++++++++++++----
12 src/views/index.pug | 3 +++
13 src/views/paste.pug | 28 +++++++++++++++++++++-------
14 7 files changed, 87 insertions(+), 14 deletions(-)
15 create mode 100644 src/mixins/footer.pug
16
17diff --git a/src/mixins/footer.pug b/src/mixins/footer.pug
18new file mode 100644
19index 0000000..be71086
20--- /dev/null
21+++ b/src/mixins/footer.pug
22@@ -0,0 +1,9 @@
23+mixin footer()
24+ hr
25+ div.footer
26+ div.left-side
27+ div.right-side
28+ p
29+ | made by
30+ a(href="https://bsky.app/profile/oppi.li") @oppi.li
31+
32diff --git a/src/mixins/post.pug b/src/mixins/post.pug
33index 77d78aa..e98bcf8 100644
34--- a/src/mixins/post.pug
35+++ b/src/mixins/post.pug
36@@ -13,4 +13,5 @@ mixin post(paste, handle, did)
37 | #{paste.lang}
38 | ·
39 | #{paste.code.split('\n').length} loc
40-
41+ | ·
42+ a(href=`/p/${paste.shortUrl}/#comments`) #{paste.commentCount} #{pluralize(paste.commentCount, 'comment')}
43diff --git a/src/mixins/utils.pug b/src/mixins/utils.pug
44index 857bddd..08507d3 100644
45--- a/src/mixins/utils.pug
46+++ b/src/mixins/utils.pug
47@@ -2,6 +2,10 @@
48 function randInt(min, max) {
49 return Math.floor(Math.random() * (max - min + 1)) + min;
50 }
51+-
52+ function pluralize(count, noun) {
53+ return count==1?noun:`${noun}s`;
54+ }
55 -
56 function timeDifference(current, previous) {
57 if (!current || !previous) {
58diff --git a/src/public/styles.css b/src/public/styles.css
59index f88b533..6f80f5f 100644
60--- a/src/public/styles.css
61+++ b/src/public/styles.css
62@@ -104,7 +104,6 @@ textarea {
63 hr {
64 border: none;
65 border-top: 1px solid var(--bg-color-muted);
66- padding: 1rem;
67 }
68
69 .post-form {
70@@ -152,7 +151,7 @@ hr {
71 flex: 1
72 }
73
74-.header {
75+.header, .footer {
76 display: flex;
77 flex-direction: row;
78 justify-content: space-between;
79@@ -165,3 +164,21 @@ select {
80 text-indent: 1px;
81 text-overflow: '';
82 }
83+
84+.code-line {
85+ display: flex;
86+}
87+
88+.code-line-num {
89+ white-space: pre;
90+ -webkit-user-select: none;
91+ user-select: none;
92+ margin-right: 0.4em;
93+ padding: 0 0.4em 0 0.4em;
94+ color: var(--text-color-muted);
95+ text-align: right;
96+}
97+
98+.code-line-content {
99+ color: var(--text-color);
100+}
101diff --git a/src/routes.ts b/src/routes.ts
102index 70f931d..17fa00e 100644
103--- a/src/routes.ts
104+++ b/src/routes.ts
105@@ -105,8 +105,20 @@ export const createRouter = (ctx: Ctx) => {
106 const agent = await getSessionAgent(req, res, ctx);
107 const pastes = await ctx.db
108 .selectFrom("paste")
109- .selectAll()
110- .orderBy("indexedAt", "desc")
111+ .leftJoin("comment", "comment.pasteUri", "paste.uri")
112+ .select([
113+ "paste.uri",
114+ "paste.shortUrl",
115+ "paste.authorDid",
116+ "paste.code",
117+ "paste.lang",
118+ "paste.title",
119+ "paste.createdAt",
120+ "paste.indexedAt as pasteIndexedAt",
121+ ctx.db.fn.count("comment.uri").as("commentCount")
122+ ])
123+ .groupBy("paste.uri")
124+ .orderBy("pasteIndexedAt", "desc")
125 .limit(25)
126 .execute();
127
128@@ -130,8 +142,21 @@ export const createRouter = (ctx: Ctx) => {
129 const { authorDid } = req.params;
130 const pastes = await ctx.db
131 .selectFrom("paste")
132- .selectAll()
133- .where("authorDid", "=", authorDid)
134+ .leftJoin("comment", "comment.pasteUri", "paste.uri")
135+ .select([
136+ "paste.uri",
137+ "paste.shortUrl",
138+ "paste.authorDid as pasteAuthorDid",
139+ "paste.code",
140+ "paste.lang",
141+ "paste.title",
142+ "paste.createdAt as pasteCreatedAt",
143+ "paste.indexedAt as pasteIndexedAt",
144+ ctx.db.fn.count("comment.uri").as("commentCount")
145+ ])
146+ .groupBy("paste.uri")
147+ .where("pasteAuthorDid", "=", authorDid)
148+ .orderBy("pasteCreatedAt", "desc")
149 .execute();
150 let didHandleMap: Record<string, string> = {};
151 didHandleMap[authorDid] = await ctx.resolver.resolveDidToHandle(authorDid);
152diff --git a/src/views/index.pug b/src/views/index.pug
153index 3443deb..e04403d 100644
154--- a/src/views/index.pug
155+++ b/src/views/index.pug
156@@ -1,6 +1,7 @@
157 include ../mixins/mkPost
158 include ../mixins/head
159 include ../mixins/header
160+include ../mixins/footer
161 include ../mixins/utils
162 include ../mixins/post
163
164@@ -19,6 +20,7 @@ include ../mixins/post
165 "c",
166 "c#",
167 "c++",
168+ "cobol",
169 ].toSorted())
170 doctype html
171 html
172@@ -34,3 +36,4 @@ html
173 each paste in pastes
174 - var handle = didHandleMap[paste.authorDid]
175 +post(paste, handle, paste.authorDid)
176+ +footer()
177diff --git a/src/views/paste.pug b/src/views/paste.pug
178index 29516d3..f8a0906 100644
179--- a/src/views/paste.pug
180+++ b/src/views/paste.pug
181@@ -15,12 +15,21 @@ html
182 | #{paste.lang} ·
183 | #{paste.code.split('\n').length} loc ·
184 a(href=`/r/${paste.shortUrl}`) raw
185+ | ·
186+ | #{comments.length} #{pluralize(comments.length, 'comment')}
187 pre
188- | #{paste.code}
189+ code
190+ - var lines = paste.code.split(/\r?\n|\r|\n/g)
191+ - var tot_chars = lines.length.toString().length
192+ each line, idx in lines
193+ span.code-line
194+ span.code-line-num(id=`L${idx + 1}` style=`min-width: ${tot_chars}ch;`)
195+ | #{idx + 1}
196+ span.code-line-content #{line}
197 hr
198
199 if comments.length != 0
200- h1 comments
201+ h1(id="comments") comments
202 div.comments
203 each comment in comments
204 div.comment(id=`${encodeURIComponent(comment.uri)}`)
205@@ -33,9 +42,14 @@ html
206 pre.comment-body #{comment.body}
207 hr
208
209- form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
210- div.post-row
211- textarea#code(name="comment" rows="5" placeholder="add a comment" required).post-input-code
212+ if ownDid
213+ form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
214+ div.post-row
215+ textarea#code(name="comment" rows="5" placeholder="add a comment" required).post-input-code
216
217- div.post-submit-row
218- button(type="submit").post-input-submit zonk!
219+ div.post-submit-row
220+ button(type="submit").post-input-submit zonk!
221+ else
222+ p
223+ a(href="/login") login
224+ | to post a comment
225--
2262.47.0
227
228
229From ccd3269be5d287b627c8badc96bd0ce5f0d3a0bf Mon Sep 17 00:00:00 2001
230From: Akshay <nerdy@peppe.rs>
231Date: Thu, 26 Dec 2024 21:12:07 +0000
232Subject: [PATCH 2/3] footer everywhere
233
234---
235 src/views/index.pug | 1 +
236 src/views/login.pug | 2 ++
237 src/views/paste.pug | 6 ++++--
238 src/views/user.pug | 3 +++
239 4 files changed, 10 insertions(+), 2 deletions(-)
240
241diff --git a/src/views/index.pug b/src/views/index.pug
242index e04403d..bc9085a 100644
243--- a/src/views/index.pug
244+++ b/src/views/index.pug
245@@ -36,4 +36,5 @@ html
246 each paste in pastes
247 - var handle = didHandleMap[paste.authorDid]
248 +post(paste, handle, paste.authorDid)
249+
250 +footer()
251diff --git a/src/views/login.pug b/src/views/login.pug
252index 55aa048..b5a35e0 100644
253--- a/src/views/login.pug
254+++ b/src/views/login.pug
255@@ -1,4 +1,5 @@
256 include ../mixins/head
257+include ../mixins/footer
258
259 doctype html
260 html
261@@ -10,3 +11,4 @@ html
262 div.login-row
263 input(type="text" name="handle" placeholder="enter handle" required).login-input-title
264 button(type="submit").login-submit-button login
265+ +footer()
266diff --git a/src/views/paste.pug b/src/views/paste.pug
267index f8a0906..653c02e 100644
268--- a/src/views/paste.pug
269+++ b/src/views/paste.pug
270@@ -1,6 +1,7 @@
271 - var now = new Date()
272 include ../mixins/head
273 include ../mixins/header
274+include ../mixins/footer
275 include ../mixins/utils
276 doctype html
277 html
278@@ -40,7 +41,6 @@ html
279 | #{timeDifference(now, Date.parse(paste.createdAt))} ago
280 p
281 pre.comment-body #{comment.body}
282- hr
283
284 if ownDid
285 form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
286@@ -49,7 +49,9 @@ html
287
288 div.post-submit-row
289 button(type="submit").post-input-submit zonk!
290- else
291+ else
292 p
293 a(href="/login") login
294 | to post a comment
295+
296+ +footer()
297diff --git a/src/views/user.pug b/src/views/user.pug
298index 3523e16..b2b2743 100644
299--- a/src/views/user.pug
300+++ b/src/views/user.pug
301@@ -2,6 +2,7 @@
302 - var handle = didHandleMap[authorDid]
303 include ../mixins/head
304 include ../mixins/header
305+include ../mixins/footer
306 include ../mixins/utils
307 include ../mixins/post
308 doctype html
309@@ -14,3 +15,5 @@ html
310 div.timeline
311 each paste in pastes
312 +post(paste, handle, authorDid)
313+
314+ +footer()
315--
3162.47.0
317
318
319From 0d1ee81ee0630ca852f51a9a49293fb7d0fc7a67 Mon Sep 17 00:00:00 2001
320From: Akshay <nerdy@peppe.rs>
321Date: Thu, 26 Dec 2024 23:14:37 +0000
322Subject: [PATCH 3/3] stylin for links
323
324---
325 src/mixins/post.pug | 2 +-
326 src/public/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++-
327 src/views/paste.pug | 9 ++++----
328 3 files changed, 55 insertions(+), 7 deletions(-)
329
330diff --git a/src/mixins/post.pug b/src/mixins/post.pug
331index e98bcf8..51af1ff 100644
332--- a/src/mixins/post.pug
333+++ b/src/mixins/post.pug
334@@ -1,7 +1,7 @@
335 mixin post(paste, handle, did)
336 div.post
337 p
338- a(href=`/p/${paste.shortUrl}`)
339+ a(href=`/p/${paste.shortUrl}`).post-link
340 | #{paste.title}
341 p.post-info
342 | by
343diff --git a/src/public/styles.css b/src/public/styles.css
344index 6f80f5f..b153f92 100644
345--- a/src/public/styles.css
346+++ b/src/public/styles.css
347@@ -58,7 +58,6 @@ a:visited {
348 }
349
350 pre {
351- background-color: var(--bg-color-muted);
352 padding: 1rem;
353 overflow-x: auto;
354 }
355@@ -66,6 +65,11 @@ pre {
356 .comment-body {
357 background-color: var(--bg-color);
358 padding: 0;
359+ margin-top: 0.1rem;
360+}
361+
362+.comment-info {
363+ margin-bottom: 0;
364 }
365
366 input, textarea, select, button {
367@@ -137,10 +141,40 @@ hr {
368 align-self: flex-end;
369 }
370
371+.post-link {
372+ color: var(--text-color);
373+ text-decoration: none;
374+}
375+.post-link:hover {
376+ text-decoration: underline;
377+}
378+.post-link:visited {
379+ color: var(--text-color-muted);
380+}
381+
382+.post-info {
383+ margin-top: 0;
384+}
385+
386+.post-info, .comment-info {
387+ color: var(--text-color-muted);
388+}
389+.post-info a, .comment-info a {
390+ color: var(--text-color-muted);
391+ text-decoration: none;
392+}
393+.post-info a:visited, .comment-info a:visited {
394+ color: var(--text-color-muted);
395+}
396+.post-info a:hover, .comment-info a:hover {
397+ text-decoration: underline;
398+}
399+
400 .timeline, .comments {
401 display: flex;
402 flex-direction: column;
403 gap: 1rem;
404+ padding-bottom: 1rem;
405 }
406
407 .login-input-title {
408@@ -182,3 +216,18 @@ select {
409 .code-line-content {
410 color: var(--text-color);
411 }
412+
413+.header, .footer {
414+ color: var(--text-color);
415+}
416+
417+.header a, .header a:visited,
418+.footer a, .footer a:visited {
419+ color: var(--link-color);
420+ text-decoration: none;
421+}
422+
423+.header a:hover,
424+.footer a:hover {
425+ text-decoration: underline;
426+}
427diff --git a/src/views/paste.pug b/src/views/paste.pug
428index 653c02e..3014107 100644
429--- a/src/views/paste.pug
430+++ b/src/views/paste.pug
431@@ -10,13 +10,13 @@ html
432 main#content
433 +header(ownDid, didHandleMap)
434 h1 #{paste.title}
435- p
436+ p.post-info
437 | @#{didHandleMap[paste.authorDid]} ·
438 | #{timeDifference(now, Date.parse(paste.createdAt))} ago ·
439 | #{paste.lang} ·
440 | #{paste.code.split('\n').length} loc ·
441 a(href=`/r/${paste.shortUrl}`) raw
442- | ·
443+ | ·
444 | #{comments.length} #{pluralize(comments.length, 'comment')}
445 pre
446 code
447@@ -34,13 +34,12 @@ html
448 div.comments
449 each comment in comments
450 div.comment(id=`${encodeURIComponent(comment.uri)}`)
451- p
452+ p.comment-info
453 a(href=`/u/${comment.authorDid}`)
454 | @#{didHandleMap[comment.authorDid]}
455 | ·
456 | #{timeDifference(now, Date.parse(paste.createdAt))} ago
457- p
458- pre.comment-body #{comment.body}
459+ pre.comment-body #{comment.body}
460
461 if ownDid
462 form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
463--
4642.47.0
465