oppi.li
selfhostable, read-only reddit client
implement back button, restructure sort-opts
-1
src/index.js
-1
src/index.js
···
1
const express = require("express");
2
const rateLimit = require("express-rate-limit");
3
const path = require("node:path");
4
-
const geddit = require("./geddit.js");
5
const cookieParser = require("cookie-parser");
6
const app = express();
7
const hasher = new Bun.CryptoHasher("sha256", "secret-key");
+5
-4
src/mixins/post.pug
+5
-4
src/mixins/post.pug
···
1
include ../utils
2
include postUtils
3
-
mixin post(p)
4
article.post
5
-
div.post-container
6
div.post-text
7
div.title-container
8
-
a(href=`/comments/${p.id}`)
9
!= p.title
10
span.domain (#{p.domain})
11
div.info-container
···
19
| ·
20
a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
21
| ·
22
-
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩
23
div.media-preview
24
if isPostGallery(p)
25
- var item = postGalleryItems(p)[0]
···
1
include ../utils
2
include postUtils
3
+
mixin post(p, currentUrl)
4
+
- var from = encodeURIComponent(currentUrl)
5
article.post
6
+
div(id=`${p.id}`).post-container
7
div.post-text
8
div.title-container
9
+
a(href=`/comments/${p.id}?from=${from}`)
10
!= p.title
11
span.domain (#{p.domain})
12
div.info-container
···
20
| ·
21
a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
22
| ·
23
+
a(href=`/comments/${p.id}?from=${from}`) #{fmtnum (p.num_comments)} ↩
24
div.media-preview
25
if isPostGallery(p)
26
- var item = postGalleryItems(p)[0]
+28
-6
src/public/styles.css
+28
-6
src/public/styles.css
···
93
}
94
95
.sort-opts {
96
-
display: flex;
97
-
flex-direction: row;
98
-
flex-wrap: wrap;
99
-
justify-content: space-between;
100
}
101
102
-
.sort-opts a {
103
-
margin: 10px;
104
}
105
106
.footer {
···
234
form {
235
width: 40%;
236
}
237
}
238
239
@media (min-width: 1080px) {
···
260
form {
261
width: 20%;
262
}
263
}
264
265
@media (min-width: 2560px) {
266
.post, .comments-container, .hero, .header, .footer {
267
flex: 1 1 40%;
268
width: 40%;
269
}
270
}
271
···
583
.comment-info-container > p {
584
margin-top: 0px;
585
}
···
93
}
94
95
.sort-opts {
96
+
display: grid;
97
+
margin: 10px;
98
}
99
100
+
.sort-opts {
101
+
grid-template-columns: repeat(2, 1fr);
102
+
grid-template-rows: repeat(5, 1fr);
103
+
grid-auto-flow: column;
104
}
105
106
.footer {
···
234
form {
235
width: 40%;
236
}
237
+
.sort-opts {
238
+
grid-template-columns: repeat(9, 1fr);
239
+
grid-template-rows: repeat(1, 1fr);
240
+
grid-auto-flow: row;
241
+
}
242
}
243
244
@media (min-width: 1080px) {
···
265
form {
266
width: 20%;
267
}
268
+
.sort-opts {
269
+
grid-template-columns: repeat(9, 1fr);
270
+
grid-template-rows: repeat(1, 1fr);
271
+
grid-auto-flow: row;
272
+
}
273
}
274
275
@media (min-width: 2560px) {
276
.post, .comments-container, .hero, .header, .footer {
277
flex: 1 1 40%;
278
width: 40%;
279
+
}
280
+
.sort-opts {
281
+
grid-template-columns: repeat(9, 1fr);
282
+
grid-template-rows: repeat(1, 1fr);
283
+
grid-auto-flow: row;
284
}
285
}
286
···
598
.comment-info-container > p {
599
margin-top: 0px;
600
}
601
+
602
+
select {
603
+
-webkit-appearance: none;
604
+
-moz-appearance: none;
605
+
text-indent: 1px;
606
+
text-overflow: '';
607
+
}
+3
-1
src/routes/index.js
+3
-1
src/routes/index.js
···
6
const { db } = require("../db");
7
const { authenticateToken, authenticateAdmin } = require("../auth");
8
const { validateInviteToken } = require("../invite");
9
10
const router = express.Router();
11
const G = new geddit.Geddit();
···
54
isMulti,
55
user: req.user,
56
isSubbed,
57
});
58
});
59
···
65
limit: 50,
66
};
67
response = await G.getSubmissionComments(id, params);
68
-
69
res.render("comments", {
70
data: unescape_submission(response),
71
user: req.user,
72
});
73
});
74
···
6
const { db } = require("../db");
7
const { authenticateToken, authenticateAdmin } = require("../auth");
8
const { validateInviteToken } = require("../invite");
9
+
const url = require("url");
10
11
const router = express.Router();
12
const G = new geddit.Geddit();
···
55
isMulti,
56
user: req.user,
57
isSubbed,
58
+
currentUrl: req.url,
59
});
60
});
61
···
67
limit: 50,
68
};
69
response = await G.getSubmissionComments(id, params);
70
res.render("comments", {
71
data: unescape_submission(response),
72
user: req.user,
73
+
from: req.query.from,
74
});
75
});
76
+5
src/views/comments.pug
+5
src/views/comments.pug
+20
-11
src/views/index.pug
+20
-11
src/views/index.pug
···
35
details
36
summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}
37
div.sort-opts
38
-
a(href=`/r/${subreddit}?sort=hot`) hot
39
-
a(href=`/r/${subreddit}?sort=new`) new
40
-
a(href=`/r/${subreddit}?sort=rising`) rising
41
-
a(href=`/r/${subreddit}?sort=top`) top
42
-
a(href=`/r/${subreddit}?sort=top&t=day`) top day
43
-
a(href=`/r/${subreddit}?sort=top&t=week`) top week
44
-
a(href=`/r/${subreddit}?sort=top&t=month`) top month
45
-
a(href=`/r/${subreddit}?sort=top&t=year`) top year
46
-
a(href=`/r/${subreddit}?sort=top&t=all`) top all
47
48
if posts
49
each child in posts.posts
50
-
+post(child.data)
51
-
52
if posts.after
53
div.footer
54
div.footer-item
···
35
details
36
summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}
37
div.sort-opts
38
+
div
39
+
a(href=`/r/${subreddit}?sort=hot`) hot
40
+
div
41
+
a(href=`/r/${subreddit}?sort=new`) new
42
+
div
43
+
a(href=`/r/${subreddit}?sort=rising`) rising
44
+
div
45
+
a(href=`/r/${subreddit}?sort=top`) top
46
+
div
47
+
a(href=`/r/${subreddit}?sort=top&t=day`) top day
48
+
div
49
+
a(href=`/r/${subreddit}?sort=top&t=week`) top week
50
+
div
51
+
a(href=`/r/${subreddit}?sort=top&t=month`) top month
52
+
div
53
+
a(href=`/r/${subreddit}?sort=top&t=year`) top year
54
+
div
55
+
a(href=`/r/${subreddit}?sort=top&t=all`) top all
56
57
if posts
58
each child in posts.posts
59
+
+post(child.data, currentUrl)
60
+
61
if posts.after
62
div.footer
63
div.footer-item