oppi.li
+463
x
+463
x
···
1
+
From 489bb110616aa4da596aed7ae0a048c919ed333e Mon Sep 17 00:00:00 2001
2
+
From: Akshay <nerdy@peppe.rs>
3
+
Date: Thu, 26 Dec 2024 19:19:37 +0000
4
+
Subject: [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
+
17
+
diff --git a/src/mixins/footer.pug b/src/mixins/footer.pug
18
+
new file mode 100644
19
+
index 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
+
+
32
+
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
33
+
index 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')}
43
+
diff --git a/src/mixins/utils.pug b/src/mixins/utils.pug
44
+
index 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) {
58
+
diff --git a/src/public/styles.css b/src/public/styles.css
59
+
index 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
+
+}
101
+
diff --git a/src/routes.ts b/src/routes.ts
102
+
index 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);
152
+
diff --git a/src/views/index.pug b/src/views/index.pug
153
+
index 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()
177
+
diff --git a/src/views/paste.pug b/src/views/paste.pug
178
+
index 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
+
--
226
+
2.47.0
227
+
228
+
From 436f4d5e8912c50068d8c70e623a23ce2ca9e6e7 Mon Sep 17 00:00:00 2001
229
+
From: Akshay <nerdy@peppe.rs>
230
+
Date: Thu, 26 Dec 2024 21:12:07 +0000
231
+
Subject: [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
+
240
+
diff --git a/src/views/index.pug b/src/views/index.pug
241
+
index 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()
250
+
diff --git a/src/views/login.pug b/src/views/login.pug
251
+
index 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()
265
+
diff --git a/src/views/paste.pug b/src/views/paste.pug
266
+
index 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()
296
+
diff --git a/src/views/user.pug b/src/views/user.pug
297
+
index 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
+
--
315
+
2.47.0
316
+
317
+
From a717f0702e818515e34187cde86c15c00d2e66ba Mon Sep 17 00:00:00 2001
318
+
From: Akshay <nerdy@peppe.rs>
319
+
Date: Thu, 26 Dec 2024 23:14:37 +0000
320
+
Subject: [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
+
328
+
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
329
+
index 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
341
+
diff --git a/src/public/styles.css b/src/public/styles.css
342
+
index 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
+
+}
425
+
diff --git a/src/views/paste.pug b/src/views/paste.pug
426
+
index 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
+
--
462
+
2.47.0
463
+