oppi.li
1From 489bb110616aa4da596aed7ae0a048c919ed333e 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
228From 436f4d5e8912c50068d8c70e623a23ce2ca9e6e7 Mon Sep 17 00:00:00 2001
229From: Akshay <nerdy@peppe.rs>
230Date: Thu, 26 Dec 2024 21:12:07 +0000
231Subject: [PATCH 2/3] footer everywhere
232
233---
234 src/views/index.pug | 1 +
235 src/views/login.pug | 2 ++
236 src/views/paste.pug | 6 ++++--
237 src/views/user.pug | 3 +++
238 4 files changed, 10 insertions(+), 2 deletions(-)
239
240diff --git a/src/views/index.pug b/src/views/index.pug
241index e04403d..bc9085a 100644
242--- a/src/views/index.pug
243+++ b/src/views/index.pug
244@@ -36,4 +36,5 @@ html
245 each paste in pastes
246 - var handle = didHandleMap[paste.authorDid]
247 +post(paste, handle, paste.authorDid)
248+
249 +footer()
250diff --git a/src/views/login.pug b/src/views/login.pug
251index 55aa048..b5a35e0 100644
252--- a/src/views/login.pug
253+++ b/src/views/login.pug
254@@ -1,4 +1,5 @@
255 include ../mixins/head
256+include ../mixins/footer
257
258 doctype html
259 html
260@@ -10,3 +11,4 @@ html
261 div.login-row
262 input(type="text" name="handle" placeholder="enter handle" required).login-input-title
263 button(type="submit").login-submit-button login
264+ +footer()
265diff --git a/src/views/paste.pug b/src/views/paste.pug
266index f8a0906..653c02e 100644
267--- a/src/views/paste.pug
268+++ b/src/views/paste.pug
269@@ -1,6 +1,7 @@
270 - var now = new Date()
271 include ../mixins/head
272 include ../mixins/header
273+include ../mixins/footer
274 include ../mixins/utils
275 doctype html
276 html
277@@ -40,7 +41,6 @@ html
278 | #{timeDifference(now, Date.parse(paste.createdAt))} ago
279 p
280 pre.comment-body #{comment.body}
281- hr
282
283 if ownDid
284 form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
285@@ -49,7 +49,9 @@ html
286
287 div.post-submit-row
288 button(type="submit").post-input-submit zonk!
289- else
290+ else
291 p
292 a(href="/login") login
293 | to post a comment
294+
295+ +footer()
296diff --git a/src/views/user.pug b/src/views/user.pug
297index 3523e16..b2b2743 100644
298--- a/src/views/user.pug
299+++ b/src/views/user.pug
300@@ -2,6 +2,7 @@
301 - var handle = didHandleMap[authorDid]
302 include ../mixins/head
303 include ../mixins/header
304+include ../mixins/footer
305 include ../mixins/utils
306 include ../mixins/post
307 doctype html
308@@ -14,3 +15,5 @@ html
309 div.timeline
310 each paste in pastes
311 +post(paste, handle, authorDid)
312+
313+ +footer()
314--
3152.47.0
316
317From a717f0702e818515e34187cde86c15c00d2e66ba Mon Sep 17 00:00:00 2001
318From: Akshay <nerdy@peppe.rs>
319Date: Thu, 26 Dec 2024 23:14:37 +0000
320Subject: [PATCH 3/3] stylin for links
321
322---
323 src/mixins/post.pug | 2 +-
324 src/public/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++-
325 src/views/paste.pug | 9 ++++----
326 3 files changed, 55 insertions(+), 7 deletions(-)
327
328diff --git a/src/mixins/post.pug b/src/mixins/post.pug
329index e98bcf8..51af1ff 100644
330--- a/src/mixins/post.pug
331+++ b/src/mixins/post.pug
332@@ -1,7 +1,7 @@
333 mixin post(paste, handle, did)
334 div.post
335 p
336- a(href=`/p/${paste.shortUrl}`)
337+ a(href=`/p/${paste.shortUrl}`).post-link
338 | #{paste.title}
339 p.post-info
340 | by
341diff --git a/src/public/styles.css b/src/public/styles.css
342index 6f80f5f..b153f92 100644
343--- a/src/public/styles.css
344+++ b/src/public/styles.css
345@@ -58,7 +58,6 @@ a:visited {
346 }
347
348 pre {
349- background-color: var(--bg-color-muted);
350 padding: 1rem;
351 overflow-x: auto;
352 }
353@@ -66,6 +65,11 @@ pre {
354 .comment-body {
355 background-color: var(--bg-color);
356 padding: 0;
357+ margin-top: 0.1rem;
358+}
359+
360+.comment-info {
361+ margin-bottom: 0;
362 }
363
364 input, textarea, select, button {
365@@ -137,10 +141,40 @@ hr {
366 align-self: flex-end;
367 }
368
369+.post-link {
370+ color: var(--text-color);
371+ text-decoration: none;
372+}
373+.post-link:hover {
374+ text-decoration: underline;
375+}
376+.post-link:visited {
377+ color: var(--text-color-muted);
378+}
379+
380+.post-info {
381+ margin-top: 0;
382+}
383+
384+.post-info, .comment-info {
385+ color: var(--text-color-muted);
386+}
387+.post-info a, .comment-info a {
388+ color: var(--text-color-muted);
389+ text-decoration: none;
390+}
391+.post-info a:visited, .comment-info a:visited {
392+ color: var(--text-color-muted);
393+}
394+.post-info a:hover, .comment-info a:hover {
395+ text-decoration: underline;
396+}
397+
398 .timeline, .comments {
399 display: flex;
400 flex-direction: column;
401 gap: 1rem;
402+ padding-bottom: 1rem;
403 }
404
405 .login-input-title {
406@@ -182,3 +216,18 @@ select {
407 .code-line-content {
408 color: var(--text-color);
409 }
410+
411+.header, .footer {
412+ color: var(--text-color);
413+}
414+
415+.header a, .header a:visited,
416+.footer a, .footer a:visited {
417+ color: var(--link-color);
418+ text-decoration: none;
419+}
420+
421+.header a:hover,
422+.footer a:hover {
423+ text-decoration: underline;
424+}
425diff --git a/src/views/paste.pug b/src/views/paste.pug
426index 653c02e..3014107 100644
427--- a/src/views/paste.pug
428+++ b/src/views/paste.pug
429@@ -10,13 +10,13 @@ html
430 main#content
431 +header(ownDid, didHandleMap)
432 h1 #{paste.title}
433- p
434+ p.post-info
435 | @#{didHandleMap[paste.authorDid]} ·
436 | #{timeDifference(now, Date.parse(paste.createdAt))} ago ·
437 | #{paste.lang} ·
438 | #{paste.code.split('\n').length} loc ·
439 a(href=`/r/${paste.shortUrl}`) raw
440- | ·
441+ | ·
442 | #{comments.length} #{pluralize(comments.length, 'comment')}
443 pre
444 code
445@@ -34,13 +34,12 @@ html
446 div.comments
447 each comment in comments
448 div.comment(id=`${encodeURIComponent(comment.uri)}`)
449- p
450+ p.comment-info
451 a(href=`/u/${comment.authorDid}`)
452 | @#{didHandleMap[comment.authorDid]}
453 | ·
454 | #{timeDifference(now, Date.parse(paste.createdAt))} ago
455- p
456- pre.comment-body #{comment.body}
457+ pre.comment-body #{comment.body}
458
459 if ownDid
460 form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
461--
4622.47.0
463