selfhostable, read-only reddit client
even better galleries, fix font sizes everywhere
+104
-49
+1
-1
src/geddit.js
+1
-1
src/geddit.js
+2
-2
src/mixins/comment.pug
+2
-2
src/mixins/comment.pug
···
8
8
else
9
9
div(class=`comment ${isfirst?'first':''}`)
10
10
div.comment-info-container
11
-
div.info-item u/#{data.author}
12
-
div.info-item ↑ #{fmtnum(data.ups)}
11
+
div.info-item #{fmtnum(data.ups)} ↑
12
+
div.info-item u/#{data.author} #{data.is_submitter?'(OP)':''}
13
13
if data.collapsed_reason_code == "DELETED"
14
14
div.info-item
15
15
a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
+9
src/mixins/header.pug
+9
src/mixins/header.pug
+16
-8
src/mixins/post.pug
+16
-8
src/mixins/post.pug
···
9
9
span.domain (#{p.domain})
10
10
div.info-container
11
11
p
12
-
| ↑ #{fmtnum(p.ups)}
12
+
| #{fmtnum(p.ups)} ↑
13
13
| ·
14
-
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} replies
14
+
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩
15
15
| ·
16
16
a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
17
17
span.post-author
···
36
36
if p.gallery_data.items
37
37
details(id=`${p.id}`)
38
38
summary expand gallery
39
-
each item in p.gallery_data.items
40
-
- var url = `https://i.redd.it/${item.media_id}.jpg`
41
-
a(href=`/media/${url}`)
42
-
img(src=url).post-media
39
+
div.gallery
40
+
each item in p.gallery_data.items
41
+
- var url = `https://i.redd.it/${item.media_id}.jpg`
42
+
div.gallery-item
43
+
a(href=`/media/${url}`)
44
+
img(src=url)
43
45
button(onclick=`toggleDetails('${p.id}')`) close
44
-
if (p.post_hint == "image" || p.post_hint == "link") && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
46
+
if p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
45
47
details(id=`${p.id}`)
46
48
summary expand image
47
49
a(href=`/media/${p.url}`)
···
53
55
- var url = p.secure_media.reddit_video.dash_url
54
56
video(src=url controls data-dashjs-player).post-media
55
57
button(onclick=`toggleDetails('${p.id}')`) close
56
-
58
+
else if p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
59
+
details(id=`${p.id}`)
60
+
summary expand link
61
+
a(href=`${p.url}`)
62
+
| #{p.url}
63
+
br
64
+
button(onclick=`toggleDetails('${p.id}')`) close
+50
-24
src/public/styles.css
+50
-24
src/public/styles.css
···
2
2
3
3
body {
4
4
font-family: 'Inter', sans-serif;
5
+
overflow-x: hidden;
5
6
}
6
7
7
8
main {
···
14
15
.header {
15
16
display: flex;
16
17
flex-direction: row;
18
+
justify-content: center;
17
19
}
18
20
19
21
.footer {
···
33
35
.post, .comments-container, .hero, .header, .footer {
34
36
padding: 0.3rem;
35
37
flex: 1 1 95%;
38
+
width: 100%;
39
+
}
40
+
41
+
.post {
36
42
font-size: 1rem;
37
-
width: 100%;
43
+
}
44
+
45
+
.comments-container {
46
+
font-size: 0.8rem;
38
47
}
39
48
40
49
.info-container, .comment-info-container, .more {
···
45
54
46
55
.domain {
47
56
color: #777;
48
-
font-size: 0.6rem;
57
+
font-size: 0.8rem;
49
58
}
50
59
51
60
.info-item, .header-item, .footer-item {
52
61
margin-right: 14px;
53
62
}
54
63
55
-
.header-item, .footer-item {
56
-
position: relative; /* Needed for positioning the pseudo-element */
57
-
}
58
-
59
-
.header-item:not(:last-child)::after {
60
-
content: "·"; /* Middle dot as the separator */
61
-
position: absolute;
62
-
right: -10px; /* Adjust position as needed */
63
-
top: 50%;
64
-
transform: translateY(-50%); /* Center vertically */
65
-
color: #888; /* Separator color */
66
-
font-size: 20px; /* Adjust size of the separator */
67
-
}
68
64
69
65
.media-preview img {
70
66
object-fit: cover;
···
84
80
.post, .comments-container, .hero, .header, .footer {
85
81
flex: 1 1 90%;
86
82
width: 90%;
87
-
font-size: 1rem;
83
+
}
84
+
.post {
85
+
font-size: 1.3rem;
86
+
}
87
+
.comments-container {
88
+
font-size: 1.1rem;
88
89
}
89
90
.info-container, .comment-info-container, .more {
90
-
font-size: 0.9rem;
91
+
font-size: 1rem;
91
92
}
92
93
.domain {
93
-
font-size: 0.9rem;
94
+
font-size: 1rem;
94
95
}
95
96
.media-preview img,
96
97
.media-preview video
···
107
108
.post, .comments-container, .hero, .header, .footer {
108
109
flex: 1 1 50%;
109
110
width: 50%;
110
-
font-size: 1rem;
111
+
}
112
+
.post {
113
+
font-size: 1.3rem;
114
+
}
115
+
.comments-container {
116
+
font-size: 1.1rem;
111
117
}
112
118
.info-container, .comment-info-container, .more {
113
-
font-size: 0.9rem;
119
+
font-size: 1rem;
114
120
}
115
121
.domain {
116
-
font-size: 0.9rem;
122
+
font-size: 1rem;
117
123
}
118
124
.media-preview img,
119
125
.media-preview video
···
154
160
}
155
161
156
162
.post-container {
157
-
align-self: stretch;
158
163
display: flex;
164
+
flex-direction: row;
165
+
align-items: center;
159
166
}
160
167
161
168
.post-text {
169
+
display: flex;
162
170
flex-direction: column;
163
171
align-items: stretch;
164
-
justify-content: space-between;
172
+
justify-content: space-evenly;
165
173
}
166
174
167
175
.media-preview {
···
178
186
display: block;
179
187
margin: 0 auto;
180
188
max-width: 85%;
189
+
padding: 5px;
181
190
}
182
191
183
192
.title-container,.info-container, .comment-info-container {
···
211
220
}
212
221
213
222
pre {
214
-
padding: 10px;
223
+
padding: 10px 0px 10px 10px;
215
224
width: 100%;
216
225
overflow: auto;
217
226
}
···
242
251
overflow-wrap: break-word;
243
252
}
244
253
254
+
.gallery {
255
+
display: flex;
256
+
overflow-x: auto;
257
+
scroll-snap-type: x mandatory;
258
+
padding: 5px;
259
+
}
260
+
261
+
.gallery-item {
262
+
flex: 0 0 auto;
263
+
scroll-snap-align: start;
264
+
margin-right: 10px;
265
+
}
266
+
267
+
.gallery img {
268
+
width: auto;
269
+
height: 300px;
270
+
}
-2
src/routes/index.js
-2
src/routes/index.js
+11
-1
src/views/comments.pug
+11
-1
src/views/comments.pug
···
1
1
include ../mixins/comment
2
+
include ../mixins/header
2
3
3
4
doctype html
4
5
html
···
10
11
script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
11
12
body
12
13
main#content
14
+
+header()
13
15
div.hero
14
-
h4 r/#{post.subreddit}
16
+
h3
17
+
a(href=`/r/${post.subreddit}`) r/#{post.subreddit}
18
+
15
19
h2 #{post.title}
16
20
17
21
if post.is_gallery && post.is_gallery == true
···
28
32
29
33
if post.selftext_html
30
34
p.self-text !{post.selftext_html}
35
+
div.info-container
36
+
p
37
+
| #{fmtnum(post.ups)} ↑
38
+
| · by u/#{post.author}
39
+
40
+
hr
31
41
32
42
div.comments-container
33
43
each child in comments
+10
-9
src/views/index.pug
+10
-9
src/views/index.pug
···
1
1
include ../mixins/post
2
2
include ../mixins/sub
3
+
include ../mixins/header
3
4
- var subs = []
4
5
doctype html
5
6
html
···
38
39
document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
39
40
body
40
41
main#content
41
-
div.header
42
-
div.header-item
43
-
a(href=`/`) home
44
-
div.header-item
45
-
a(href=`/subs`) subscriptions
46
-
div.header-item
47
-
a(href=`/r/popular`) popular
42
+
+header()
48
43
49
44
div.hero
50
45
a(href=`/r/${subreddit}`)
···
52
47
if about
53
48
p #{about.public_description}
54
49
div#button-container
55
-
a(href=`/r/${subreddit}`)
50
+
ul
51
+
li
52
+
a(href=`/r/${subreddit}/hot`) hot
53
+
li
54
+
a(href=`/r/${subreddit}/top`) top
55
+
li
56
+
a(href=`/r/${subreddit}/top?t=all`) top all
56
57
57
58
if posts
58
59
each child in posts.posts
59
60
+post(child.data)
60
61
div.footer
61
62
div.footer-item
62
-
a(href=`/r/${subreddit}?after=${posts.after}`) next
63
+
a(href=`/r/${subreddit}?after=${posts.after}`) next →
+5
-2
src/views/subs.pug
+5
-2
src/views/subs.pug