oppi.li
+465
y
+465
y
···
1
+
From 6df2fc36269c7114fb845fa0ac667e08f6e7d09b 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
+
229
+
From ccd3269be5d287b627c8badc96bd0ce5f0d3a0bf Mon Sep 17 00:00:00 2001
230
+
From: Akshay <nerdy@peppe.rs>
231
+
Date: Thu, 26 Dec 2024 21:12:07 +0000
232
+
Subject: [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
+
241
+
diff --git a/src/views/index.pug b/src/views/index.pug
242
+
index 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()
251
+
diff --git a/src/views/login.pug b/src/views/login.pug
252
+
index 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()
266
+
diff --git a/src/views/paste.pug b/src/views/paste.pug
267
+
index 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()
297
+
diff --git a/src/views/user.pug b/src/views/user.pug
298
+
index 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
+
--
316
+
2.47.0
317
+
318
+
319
+
From 0d1ee81ee0630ca852f51a9a49293fb7d0fc7a67 Mon Sep 17 00:00:00 2001
320
+
From: Akshay <nerdy@peppe.rs>
321
+
Date: Thu, 26 Dec 2024 23:14:37 +0000
322
+
Subject: [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
+
330
+
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
331
+
index 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
343
+
diff --git a/src/public/styles.css b/src/public/styles.css
344
+
index 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
+
+}
427
+
diff --git a/src/views/paste.pug b/src/views/paste.pug
428
+
index 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
+
--
464
+
2.47.0
465
+