witchcraft.systems
+12
-1
.forgejo/workflows/deploy.yaml
+12
-1
.forgejo/workflows/deploy.yaml
···
6
6
- main
7
7
- astra/ci
8
8
9
+
9
10
jobs:
10
11
deploy:
11
12
name: Deploy
12
13
runs-on: ubuntu-latest
13
14
14
15
steps:
15
-
- name: Checkout repo
16
+
- name: Checkout main repo
16
17
uses: actions/checkout@v4
17
18
19
+
- name: Checkout overrides repo
20
+
uses: actions/checkout@v4
21
+
with:
22
+
repository: scientific-witchery/pds-dash-overrides
23
+
token: ${{ secrets.OVERRIDES_TOKEN}}
24
+
path: overrides
25
+
26
+
- name: Copy config file to root
27
+
run: cp overrides/config.ts ./config.ts
28
+
18
29
- name: Setup Node.js
19
30
uses: actions/setup-node@v3
20
31
with:
+4
-1
.gitignore
+4
-1
.gitignore
+6
-7
README.md
+6
-7
README.md
···
10
10
11
11
### installing
12
12
13
-
clone the repo, install dependencies using deno:
13
+
clone the repo, copy `config.ts.example` to `config.ts` and edit it to your liking.
14
+
15
+
then, install dependencies using deno:
14
16
15
17
```sh
16
18
deno install
···
44
46
45
47
## theming
46
48
47
-
currently the only way to theme the app is to edit css in the components directly, glhf
49
+
themes are located in the `themes/` directory, you can create your own theme by copying one of the existing themes and modifying it to your liking.
48
50
49
-
relevant files:
51
+
currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
50
52
51
-
- [`src/App.svelte`](src/App.svelte)
52
-
- [`src/app.css`](src/app.css)
53
-
- [`src/lib/AccountComponent.svelte`](src/lib/AccountComponent.svelte)
54
-
- [`src/lib/PostComponent.svelte`](src/lib/PostComponent.svelte)
53
+
you can switch themes by changing the `theme` property in `config.ts`.
55
54
56
55
the favicon is located at [`public/favicon.ico`](public/favicon.ico)
57
56
-35
config.ts
-35
config.ts
···
1
-
/**
2
-
* Configuration module for the PDS Dashboard
3
-
*/
4
-
export class Config {
5
-
/**
6
-
* The base URL of the PDS (Personal Data Server)
7
-
* @default "https://pds.witchcraft.systems"
8
-
*/
9
-
static readonly PDS_URL: string = "https://pds.witchcraft.systems";
10
-
11
-
/**
12
-
* The base URL of the frontend service for linking to replies
13
-
* @default "https://deer.social"
14
-
*/
15
-
static readonly FRONTEND_URL: string = "https://deer.social";
16
-
17
-
/**
18
-
* Maximum number of posts to show in the feed (across all users)
19
-
* @default 100
20
-
*/
21
-
static readonly MAX_POSTS: number = 20;
22
-
23
-
/**
24
-
* Footer text for the dashboard
25
-
* @default "Astrally projected from witchcraft.systems"
26
-
*/
27
-
static readonly FOOTER_TEXT: string =
28
-
"Astrally projected from <a href='https://witchcraft.systems' target='_blank'>witchcraft.systems</a>";
29
-
30
-
/**
31
-
* Whether to show the posts that are in the future
32
-
* @default false
33
-
*/
34
-
static readonly SHOW_FUTURE_POSTS: boolean = false;
35
-
}
+44
config.ts.example
+44
config.ts.example
···
1
+
/**
2
+
* Configuration module for the PDS Dashboard
3
+
*/
4
+
export class Config {
5
+
/**
6
+
* The base URL of the PDS (Personal Data Server).
7
+
* @default none
8
+
*/
9
+
static readonly PDS_URL: string = "";
10
+
11
+
/**
12
+
* Theme to be used
13
+
* @default "default"
14
+
*/
15
+
static readonly THEME: string = "default";
16
+
17
+
/**
18
+
* The base URL of the frontend service for linking to replies/quotes/accounts etc.
19
+
* @default "https://deer.social" // or https://bsky.app if you're boring
20
+
*/
21
+
static readonly FRONTEND_URL: string = "https://deer.social";
22
+
23
+
/**
24
+
* Maximum number of posts to fetch from the PDS per request
25
+
* Should be around 20 for about 10 users on the pds
26
+
* The more users you have, the lower the number should be
27
+
* since sorting is slow and is done on the frontend
28
+
* @default 20
29
+
*/
30
+
static readonly MAX_POSTS: number = 20;
31
+
32
+
/**
33
+
* Footer text for the dashboard, you probably want to change this. Supports HTML.
34
+
* @default "<a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)"
35
+
*/
36
+
static readonly FOOTER_TEXT: string =
37
+
"<a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)";
38
+
39
+
/**
40
+
* Whether to show the posts with timestamps that are in the future.
41
+
* @default false
42
+
*/
43
+
static readonly SHOW_FUTURE_POSTS: boolean = false;
44
+
}
+172
-57
deno.lock
+172
-57
deno.lock
···
1
1
{
2
-
"version": "4",
2
+
"version": "5",
3
3
"specifiers": {
4
4
"npm:@atcute/bluesky@^2.0.2": "2.0.2_@atcute+client@3.0.1",
5
5
"npm:@atcute/client@^3.0.1": "3.0.1",
···
7
7
"npm:@sveltejs/vite-plugin-svelte@^5.0.3": "5.0.3_svelte@5.28.1__acorn@8.14.1_vite@6.3.2__picomatch@4.0.2",
8
8
"npm:@tsconfig/svelte@^5.0.4": "5.0.4",
9
9
"npm:moment@^2.30.1": "2.30.1",
10
+
"npm:mutex-ts@^1.2.1": "1.2.1",
10
11
"npm:svelte-check@^4.1.5": "4.1.6_svelte@5.28.1__acorn@8.14.1_typescript@5.7.3",
11
12
"npm:svelte-infinite-loading@^1.4.0": "1.4.0",
12
13
"npm:svelte@^5.23.1": "5.28.1_acorn@8.14.1",
···
54
55
"integrity": "sha512-GEhUCk9c4XbNxi+0YZHZsV4fYNd6HejfWuN4Ti4c02DauX+LyX5WY1Y3WfyZ8Pxxl0zqhs+MLtW98cMh86vv6g=="
55
56
},
56
57
"@esbuild/aix-ppc64@0.25.2": {
57
-
"integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag=="
58
+
"integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==",
59
+
"os": ["aix"],
60
+
"cpu": ["ppc64"]
58
61
},
59
62
"@esbuild/android-arm64@0.25.2": {
60
-
"integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w=="
63
+
"integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==",
64
+
"os": ["android"],
65
+
"cpu": ["arm64"]
61
66
},
62
67
"@esbuild/android-arm@0.25.2": {
63
-
"integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA=="
68
+
"integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==",
69
+
"os": ["android"],
70
+
"cpu": ["arm"]
64
71
},
65
72
"@esbuild/android-x64@0.25.2": {
66
-
"integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg=="
73
+
"integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==",
74
+
"os": ["android"],
75
+
"cpu": ["x64"]
67
76
},
68
77
"@esbuild/darwin-arm64@0.25.2": {
69
-
"integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA=="
78
+
"integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==",
79
+
"os": ["darwin"],
80
+
"cpu": ["arm64"]
70
81
},
71
82
"@esbuild/darwin-x64@0.25.2": {
72
-
"integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA=="
83
+
"integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==",
84
+
"os": ["darwin"],
85
+
"cpu": ["x64"]
73
86
},
74
87
"@esbuild/freebsd-arm64@0.25.2": {
75
-
"integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w=="
88
+
"integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==",
89
+
"os": ["freebsd"],
90
+
"cpu": ["arm64"]
76
91
},
77
92
"@esbuild/freebsd-x64@0.25.2": {
78
-
"integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ=="
93
+
"integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==",
94
+
"os": ["freebsd"],
95
+
"cpu": ["x64"]
79
96
},
80
97
"@esbuild/linux-arm64@0.25.2": {
81
-
"integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g=="
98
+
"integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==",
99
+
"os": ["linux"],
100
+
"cpu": ["arm64"]
82
101
},
83
102
"@esbuild/linux-arm@0.25.2": {
84
-
"integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g=="
103
+
"integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==",
104
+
"os": ["linux"],
105
+
"cpu": ["arm"]
85
106
},
86
107
"@esbuild/linux-ia32@0.25.2": {
87
-
"integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ=="
108
+
"integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==",
109
+
"os": ["linux"],
110
+
"cpu": ["ia32"]
88
111
},
89
112
"@esbuild/linux-loong64@0.25.2": {
90
-
"integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w=="
113
+
"integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==",
114
+
"os": ["linux"],
115
+
"cpu": ["loong64"]
91
116
},
92
117
"@esbuild/linux-mips64el@0.25.2": {
93
-
"integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q=="
118
+
"integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==",
119
+
"os": ["linux"],
120
+
"cpu": ["mips64el"]
94
121
},
95
122
"@esbuild/linux-ppc64@0.25.2": {
96
-
"integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g=="
123
+
"integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==",
124
+
"os": ["linux"],
125
+
"cpu": ["ppc64"]
97
126
},
98
127
"@esbuild/linux-riscv64@0.25.2": {
99
-
"integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw=="
128
+
"integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==",
129
+
"os": ["linux"],
130
+
"cpu": ["riscv64"]
100
131
},
101
132
"@esbuild/linux-s390x@0.25.2": {
102
-
"integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q=="
133
+
"integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==",
134
+
"os": ["linux"],
135
+
"cpu": ["s390x"]
103
136
},
104
137
"@esbuild/linux-x64@0.25.2": {
105
-
"integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg=="
138
+
"integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==",
139
+
"os": ["linux"],
140
+
"cpu": ["x64"]
106
141
},
107
142
"@esbuild/netbsd-arm64@0.25.2": {
108
-
"integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw=="
143
+
"integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==",
144
+
"os": ["netbsd"],
145
+
"cpu": ["arm64"]
109
146
},
110
147
"@esbuild/netbsd-x64@0.25.2": {
111
-
"integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg=="
148
+
"integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==",
149
+
"os": ["netbsd"],
150
+
"cpu": ["x64"]
112
151
},
113
152
"@esbuild/openbsd-arm64@0.25.2": {
114
-
"integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg=="
153
+
"integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==",
154
+
"os": ["openbsd"],
155
+
"cpu": ["arm64"]
115
156
},
116
157
"@esbuild/openbsd-x64@0.25.2": {
117
-
"integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw=="
158
+
"integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==",
159
+
"os": ["openbsd"],
160
+
"cpu": ["x64"]
118
161
},
119
162
"@esbuild/sunos-x64@0.25.2": {
120
-
"integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA=="
163
+
"integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==",
164
+
"os": ["sunos"],
165
+
"cpu": ["x64"]
121
166
},
122
167
"@esbuild/win32-arm64@0.25.2": {
123
-
"integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q=="
168
+
"integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==",
169
+
"os": ["win32"],
170
+
"cpu": ["arm64"]
124
171
},
125
172
"@esbuild/win32-ia32@0.25.2": {
126
-
"integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg=="
173
+
"integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==",
174
+
"os": ["win32"],
175
+
"cpu": ["ia32"]
127
176
},
128
177
"@esbuild/win32-x64@0.25.2": {
129
-
"integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA=="
178
+
"integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==",
179
+
"os": ["win32"],
180
+
"cpu": ["x64"]
130
181
},
131
182
"@jridgewell/gen-mapping@0.3.8": {
132
183
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
···
153
204
]
154
205
},
155
206
"@rollup/rollup-android-arm-eabi@4.40.0": {
156
-
"integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg=="
207
+
"integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
208
+
"os": ["android"],
209
+
"cpu": ["arm"]
157
210
},
158
211
"@rollup/rollup-android-arm64@4.40.0": {
159
-
"integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w=="
212
+
"integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
213
+
"os": ["android"],
214
+
"cpu": ["arm64"]
160
215
},
161
216
"@rollup/rollup-darwin-arm64@4.40.0": {
162
-
"integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ=="
217
+
"integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
218
+
"os": ["darwin"],
219
+
"cpu": ["arm64"]
163
220
},
164
221
"@rollup/rollup-darwin-x64@4.40.0": {
165
-
"integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA=="
222
+
"integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
223
+
"os": ["darwin"],
224
+
"cpu": ["x64"]
166
225
},
167
226
"@rollup/rollup-freebsd-arm64@4.40.0": {
168
-
"integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg=="
227
+
"integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
228
+
"os": ["freebsd"],
229
+
"cpu": ["arm64"]
169
230
},
170
231
"@rollup/rollup-freebsd-x64@4.40.0": {
171
-
"integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw=="
232
+
"integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
233
+
"os": ["freebsd"],
234
+
"cpu": ["x64"]
172
235
},
173
236
"@rollup/rollup-linux-arm-gnueabihf@4.40.0": {
174
-
"integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA=="
237
+
"integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
238
+
"os": ["linux"],
239
+
"cpu": ["arm"]
175
240
},
176
241
"@rollup/rollup-linux-arm-musleabihf@4.40.0": {
177
-
"integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg=="
242
+
"integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
243
+
"os": ["linux"],
244
+
"cpu": ["arm"]
178
245
},
179
246
"@rollup/rollup-linux-arm64-gnu@4.40.0": {
180
-
"integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg=="
247
+
"integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
248
+
"os": ["linux"],
249
+
"cpu": ["arm64"]
181
250
},
182
251
"@rollup/rollup-linux-arm64-musl@4.40.0": {
183
-
"integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ=="
252
+
"integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
253
+
"os": ["linux"],
254
+
"cpu": ["arm64"]
184
255
},
185
256
"@rollup/rollup-linux-loongarch64-gnu@4.40.0": {
186
-
"integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg=="
257
+
"integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
258
+
"os": ["linux"],
259
+
"cpu": ["loong64"]
187
260
},
188
261
"@rollup/rollup-linux-powerpc64le-gnu@4.40.0": {
189
-
"integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw=="
262
+
"integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
263
+
"os": ["linux"],
264
+
"cpu": ["ppc64"]
190
265
},
191
266
"@rollup/rollup-linux-riscv64-gnu@4.40.0": {
192
-
"integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA=="
267
+
"integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
268
+
"os": ["linux"],
269
+
"cpu": ["riscv64"]
193
270
},
194
271
"@rollup/rollup-linux-riscv64-musl@4.40.0": {
195
-
"integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ=="
272
+
"integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
273
+
"os": ["linux"],
274
+
"cpu": ["riscv64"]
196
275
},
197
276
"@rollup/rollup-linux-s390x-gnu@4.40.0": {
198
-
"integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw=="
277
+
"integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
278
+
"os": ["linux"],
279
+
"cpu": ["s390x"]
199
280
},
200
281
"@rollup/rollup-linux-x64-gnu@4.40.0": {
201
-
"integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ=="
282
+
"integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
283
+
"os": ["linux"],
284
+
"cpu": ["x64"]
202
285
},
203
286
"@rollup/rollup-linux-x64-musl@4.40.0": {
204
-
"integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw=="
287
+
"integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
288
+
"os": ["linux"],
289
+
"cpu": ["x64"]
205
290
},
206
291
"@rollup/rollup-win32-arm64-msvc@4.40.0": {
207
-
"integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ=="
292
+
"integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
293
+
"os": ["win32"],
294
+
"cpu": ["arm64"]
208
295
},
209
296
"@rollup/rollup-win32-ia32-msvc@4.40.0": {
210
-
"integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA=="
297
+
"integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
298
+
"os": ["win32"],
299
+
"cpu": ["ia32"]
211
300
},
212
301
"@rollup/rollup-win32-x64-msvc@4.40.0": {
213
-
"integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ=="
302
+
"integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
303
+
"os": ["win32"],
304
+
"cpu": ["x64"]
214
305
},
215
306
"@sveltejs/acorn-typescript@1.0.5_acorn@8.14.1": {
216
307
"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
···
247
338
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
248
339
},
249
340
"acorn@8.14.1": {
250
-
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="
341
+
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
342
+
"bin": true
251
343
},
252
344
"aria-query@5.3.2": {
253
345
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
···
275
367
},
276
368
"esbuild@0.25.2": {
277
369
"integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
278
-
"dependencies": [
370
+
"optionalDependencies": [
279
371
"@esbuild/aix-ppc64",
280
372
"@esbuild/android-arm",
281
373
"@esbuild/android-arm64",
···
301
393
"@esbuild/win32-arm64",
302
394
"@esbuild/win32-ia32",
303
395
"@esbuild/win32-x64"
304
-
]
396
+
],
397
+
"scripts": true,
398
+
"bin": true
305
399
},
306
400
"esm-env@1.2.2": {
307
401
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
···
316
410
"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
317
411
"dependencies": [
318
412
"picomatch"
413
+
],
414
+
"optionalPeers": [
415
+
"picomatch"
319
416
]
320
417
},
321
418
"fsevents@2.3.3": {
322
-
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="
419
+
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
420
+
"os": ["darwin"],
421
+
"scripts": true
323
422
},
324
423
"is-reference@3.0.3": {
325
424
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
···
348
447
"ms@2.1.3": {
349
448
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
350
449
},
450
+
"mutex-ts@1.2.1": {
451
+
"integrity": "sha512-OkcXgf0viuCgYdnm48kiNQ9PzC5OzISQ261svHr/Ybc2vBYC/5xfLXn44hQ+dYRX74v7MCSqV/LKPEbpYdDybw=="
452
+
},
351
453
"nanoid@3.3.11": {
352
-
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
454
+
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
455
+
"bin": true
353
456
},
354
457
"picocolors@1.1.1": {
355
458
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
···
371
474
"rollup@4.40.0": {
372
475
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
373
476
"dependencies": [
477
+
"@types/estree"
478
+
],
479
+
"optionalDependencies": [
374
480
"@rollup/rollup-android-arm-eabi",
375
481
"@rollup/rollup-android-arm64",
376
482
"@rollup/rollup-darwin-arm64",
···
391
497
"@rollup/rollup-win32-arm64-msvc",
392
498
"@rollup/rollup-win32-ia32-msvc",
393
499
"@rollup/rollup-win32-x64-msvc",
394
-
"@types/estree",
395
500
"fsevents"
396
-
]
501
+
],
502
+
"bin": true
397
503
},
398
504
"sade@1.8.1": {
399
505
"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
···
414
520
"sade",
415
521
"svelte",
416
522
"typescript"
417
-
]
523
+
],
524
+
"bin": true
418
525
},
419
526
"svelte-infinite-loading@1.4.0": {
420
527
"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg=="
···
446
553
]
447
554
},
448
555
"typescript@5.7.3": {
449
-
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="
556
+
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
557
+
"bin": true
450
558
},
451
559
"vite@6.3.2_picomatch@4.0.2": {
452
560
"integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
453
561
"dependencies": [
454
562
"esbuild",
455
563
"fdir",
456
-
"fsevents",
457
564
"picomatch",
458
565
"postcss",
459
566
"rollup",
460
567
"tinyglobby"
461
-
]
568
+
],
569
+
"optionalDependencies": [
570
+
"fsevents"
571
+
],
572
+
"bin": true
462
573
},
463
574
"vitefu@1.0.6_vite@6.3.2__picomatch@4.0.2": {
464
575
"integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
465
576
"dependencies": [
577
+
"vite"
578
+
],
579
+
"optionalPeers": [
466
580
"vite"
467
581
]
468
582
},
···
479
593
"npm:@sveltejs/vite-plugin-svelte@^5.0.3",
480
594
"npm:@tsconfig/svelte@^5.0.4",
481
595
"npm:moment@^2.30.1",
596
+
"npm:mutex-ts@^1.2.1",
482
597
"npm:svelte-check@^4.1.5",
483
598
"npm:svelte-infinite-loading@^1.4.0",
484
599
"npm:svelte@^5.23.1",
+1
package.json
+1
package.json
+29
-91
src/App.svelte
+29
-91
src/App.svelte
···
9
9
10
10
let posts: Post[] = [];
11
11
12
+
let hue: number = 1;
13
+
const cycleColors = async () => {
14
+
while (true) {
15
+
hue += 1;
16
+
if (hue > 360) {
17
+
hue = 0;
18
+
}
19
+
document.documentElement.style.setProperty("--primary-h", hue.toString());
20
+
await new Promise((resolve) => setTimeout(resolve, 10));
21
+
}
22
+
}
23
+
let clickCounter = 0;
24
+
const carameldansenfusion = async () => {
25
+
clickCounter++;
26
+
if (clickCounter >= 10) {
27
+
clickCounter = 0;
28
+
cycleColors();
29
+
}
30
+
};
31
+
12
32
onMount(() => {
13
33
// Fetch initial posts
14
34
getNextPosts().then((initialPosts) => {
···
16
36
});
17
37
});
18
38
// Infinite loading function
19
-
const onInfinite = ({ detail: { loaded, complete } } : { detail : { loaded : () => void, complete : () => void}}) => {
39
+
const onInfinite = ({
40
+
detail: { loaded, complete },
41
+
}: {
42
+
detail: { loaded: () => void; complete: () => void };
43
+
}) => {
20
44
getNextPosts().then((newPosts) => {
45
+
console.log("Loading next posts...");
21
46
if (newPosts.length > 0) {
22
47
posts = [...posts, ...newPosts];
23
48
loaded();
···
34
59
<p>Loading...</p>
35
60
{:then accountsData}
36
61
<div id="Account">
37
-
<h1 id="Header">ATProto PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
38
63
<p>Home to {accountsData.length} accounts</p>
39
64
<div id="accountsList">
40
65
{#each accountsData as accountObject}
···
52
77
{#each posts as postObject}
53
78
<PostComponent post={postObject as Post} />
54
79
{/each}
55
-
<InfiniteLoading on:infinite={onInfinite}
56
-
distance={0}
57
-
/>
80
+
<InfiniteLoading on:infinite={onInfinite} distance={3000} />
58
81
<div id="spacer"></div>
59
82
</div>
60
83
</div>
61
84
</main>
62
85
63
86
<style>
64
-
/* desktop style */
65
-
66
-
#Content {
67
-
display: flex;
68
-
/* split the screen in half, left for accounts, right for posts */
69
-
width: 100%;
70
-
height: 100%;
71
-
flex-direction: row;
72
-
justify-content: space-between;
73
-
align-items: center;
74
-
background-color: var(--background-color);
75
-
color: var(--text-color);
76
-
}
77
-
#Feed {
78
-
width: 65%;
79
-
height: 100vh;
80
-
overflow-y: scroll;
81
-
padding: 20px;
82
-
padding-bottom: 0;
83
-
padding-top: 0;
84
-
margin-top: 0;
85
-
margin-bottom: 0;
86
-
}
87
-
#spacer {
88
-
padding: 0;
89
-
margin: 0;
90
-
height: 10vh;
91
-
width: 100%;
92
-
}
93
-
#Account {
94
-
width: 35%;
95
-
display: flex;
96
-
flex-direction: column;
97
-
border: 1px solid var(--border-color);
98
-
background-color: var(--content-background-color);
99
-
height: 80vh;
100
-
padding: 20px;
101
-
margin-left: 20px;
102
-
}
103
-
#accountsList {
104
-
display: flex;
105
-
flex-direction: column;
106
-
overflow-y: scroll;
107
-
height: 100%;
108
-
width: 100%;
109
-
padding: 0px;
110
-
margin: 0px;
111
-
}
112
-
113
-
#Header {
114
-
text-align: center;
115
-
font-size: 2em;
116
-
margin-bottom: 20px;
117
-
}
118
-
119
-
/* mobile style */
120
-
@media screen and (max-width: 600px) {
121
-
#Content {
122
-
flex-direction: column;
123
-
width: auto;
124
-
padding-left: 0px;
125
-
padding-right: 0px;
126
-
margin-top: 5%;
127
-
}
128
-
#Account {
129
-
width: auto;
130
-
padding-left: 5%;
131
-
padding-right: 5%;
132
-
margin-bottom: 20px;
133
-
margin-left: 5%;
134
-
margin-right: 5%;
135
-
height: auto;
136
-
}
137
-
#Feed {
138
-
width: 95%;
139
-
margin: 0px;
140
-
margin-left: 10%;
141
-
margin-right: 10%;
142
-
padding: 0px;
143
-
height: auto;
144
-
}
145
-
146
-
#spacer {
147
-
height: 0;
148
-
}
149
-
}
87
+
150
88
</style>
+3
-82
src/app.css
+3
-82
src/app.css
···
1
-
@font-face {
2
-
font-family: "ProggyClean";
3
-
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
-
}
5
-
6
-
:root {
7
-
--link-color: #646cff;
8
-
--link-hover-color: #535bf2;
9
-
--background-color: #12082b;
10
-
--header-background-color: #1f1145;
11
-
--content-background-color: #0d0620;
12
-
--text-color: white;
13
-
--border-color: #8054f0;
14
-
--indicator-inactive-color: #4a4a4a;
15
-
--indicator-active-color: #8054f0;
16
-
}
17
-
18
-
::-webkit-scrollbar {
19
-
width: 0px;
20
-
background: transparent;
21
-
padding: 0;
22
-
margin: 0;
23
-
}
24
-
::-webkit-scrollbar-thumb {
25
-
background: transparent;
26
-
border-radius: 0;
27
-
}
28
-
::-webkit-scrollbar-track {
29
-
background: transparent;
30
-
border-radius: 0;
31
-
}
32
-
::-webkit-scrollbar-corner {
33
-
background: transparent;
34
-
border-radius: 0;
35
-
}
36
-
::-webkit-scrollbar-button {
37
-
background: transparent;
38
-
border-radius: 0;
39
-
}
40
-
* {
41
-
scrollbar-width: none;
42
-
scrollbar-color: transparent transparent;
43
-
-ms-overflow-style: none; /* IE and Edge */
44
-
-webkit-overflow-scrolling: touch;
45
-
-webkit-scrollbar: none; /* Safari */
46
-
}
47
-
48
-
a {
49
-
font-weight: 500;
50
-
color: var(--link-color);
51
-
text-decoration: inherit;
52
-
}
53
-
a:hover {
54
-
color: var(--link-hover-color);
55
-
text-decoration: underline;
56
-
}
57
-
1
+
@import url('./themes/colors.css');
58
2
body {
59
-
margin: 0;
60
-
display: flex;
61
-
place-items: center;
62
-
min-width: 320px;
63
-
min-height: 100vh;
64
-
background-color: var(--background-color);
65
-
font-family: "ProggyClean", monospace;
66
-
font-size: 24px;
67
-
color: var(--text-color);
68
-
border-color: var(--border-color);
69
-
}
70
-
71
-
h1 {
72
-
font-size: 3.2em;
73
-
line-height: 1.1;
74
-
}
75
-
76
-
#app {
77
-
max-width: 1400px;
78
-
margin: 0;
79
-
padding: 0;
80
-
margin-left: auto;
81
-
margin-right: auto;
82
-
text-align: center;
83
-
}
3
+
background-color: red;
4
+
}
+7
-27
src/lib/AccountComponent.svelte
+7
-27
src/lib/AccountComponent.svelte
···
12
12
alt="avatar of {account.displayName}"
13
13
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14
14
/>
15
+
<div id="accountName">
16
+
{account.displayName || account.handle || account.did}
17
+
</div>
18
+
{:else}
19
+
<div id="accountName" class="no-avatar">
20
+
{account.displayName || account.handle || account.did}
21
+
</div>
15
22
{/if}
16
-
<div id="accountName">
17
-
{account.displayName || account.handle || account.did}
18
-
</div>
19
23
</div>
20
24
</a>
21
25
22
26
<style>
23
-
#accountContainer {
24
-
display: flex;
25
-
text-align: start;
26
-
align-items: center;
27
-
background-color: var(--background-color);
28
-
padding: 0px;
29
-
margin-bottom: 15px;
30
-
border: 1px solid var(--border-color);
31
-
}
32
-
#accountName {
33
-
margin-left: 10px;
34
-
font-size: 0.9em;
35
27
36
-
/* replace overflow with ellipsis */
37
-
overflow: hidden;
38
-
text-overflow: ellipsis;
39
-
white-space: nowrap;
40
-
max-width: 80%;
41
-
}
42
-
#avatar {
43
-
width: 50px;
44
-
height: 50px;
45
-
margin: 0px;
46
-
border-right: var(--border-color) 1px solid;
47
-
}
48
28
</style>
+8
-142
src/lib/PostComponent.svelte
+8
-142
src/lib/PostComponent.svelte
···
71
71
>
72
72
<p id="handle">
73
73
<a href="{Config.FRONTEND_URL}/profile/{post.authorHandle}"
74
-
>{post.authorHandle}</a
74
+
>@{post.authorHandle}</a
75
75
>
76
76
77
77
<a
···
141
141
controls
142
142
></video>
143
143
{/if}
144
+
{#if post.gifLink}
145
+
<img
146
+
id="embedVideo"
147
+
src="{post.gifLink}"
148
+
alt="Post GIF"
149
+
/>
150
+
{/if}
144
151
</div>
145
152
</div>
146
153
147
154
<style>
148
-
a:hover {
149
-
text-decoration: underline;
150
-
}
151
-
#postContainer {
152
-
display: flex;
153
-
flex-direction: column;
154
-
border: 1px solid var(--border-color);
155
-
background-color: var(--background-color);
156
-
margin-bottom: 15px;
157
-
overflow-wrap: break-word;
158
-
}
159
-
#postHeader {
160
-
display: flex;
161
-
flex-direction: row;
162
-
align-items: center;
163
-
justify-content: start;
164
-
background-color: var(--header-background-color);
165
-
padding: 0px 0px;
166
-
height: fit-content;
167
-
border-bottom: 1px solid var(--border-color);
168
-
font-weight: bold;
169
-
overflow-wrap: break-word;
170
-
height: 60px;
171
-
}
172
-
#displayName {
173
-
color: var(--text-color);
174
-
font-size: 1.2em;
175
-
padding: 0;
176
-
margin: 0;
177
-
}
178
-
#handle {
179
-
color: var(--border-color);
180
-
font-size: 0.8em;
181
-
padding: 0;
182
-
margin: 0;
183
-
}
184
155
185
-
#postLink {
186
-
color: var(--border-color);
187
-
font-size: 0.8em;
188
-
padding: 0;
189
-
margin: 0;
190
-
}
191
-
#postContent {
192
-
display: flex;
193
-
text-align: start;
194
-
flex-direction: column;
195
-
padding: 10px;
196
-
background-color: var(--content-background-color);
197
-
color: var(--text-color);
198
-
overflow-wrap: break-word;
199
-
white-space: pre-line;
200
-
}
201
-
#replyingText {
202
-
font-size: 0.7em;
203
-
margin: 0;
204
-
padding: 0;
205
-
padding-bottom: 5px;
206
-
}
207
-
#quotingText {
208
-
font-size: 0.7em;
209
-
margin: 0;
210
-
padding: 0;
211
-
padding-bottom: 5px;
212
-
}
213
-
#postText {
214
-
margin: 0;
215
-
padding: 0;
216
-
}
217
-
#headerText {
218
-
margin-left: 10px;
219
-
font-size: 0.9em;
220
-
text-align: start;
221
-
overflow-wrap: break-word;
222
-
overflow: hidden;
223
-
}
224
-
#avatar {
225
-
height: 100%;
226
-
margin: 0px;
227
-
margin-left: 0px;
228
-
border-right: var(--border-color) 1px solid;
229
-
}
230
-
#carouselContainer {
231
-
position: relative;
232
-
width: 100%;
233
-
margin-top: 10px;
234
-
display: flex;
235
-
flex-direction: column;
236
-
align-items: center;
237
-
}
238
-
#carouselControls {
239
-
display: flex;
240
-
justify-content: space-between;
241
-
align-items: center;
242
-
width: 100%;
243
-
max-width: 500px;
244
-
margin-top: 5px;
245
-
}
246
-
#carouselIndicators {
247
-
display: flex;
248
-
gap: 5px;
249
-
}
250
-
.indicator {
251
-
width: 8px;
252
-
height: 8px;
253
-
background-color: var(--indicator-inactive-color);
254
-
}
255
-
.indicator.active {
256
-
background-color: var(--indicator-active-color);
257
-
}
258
-
#prevBtn,
259
-
#nextBtn {
260
-
background-color: rgba(31, 17, 69, 0.7);
261
-
color: var(--text-color);
262
-
border: 1px solid var(--border-color);
263
-
width: 30px;
264
-
height: 30px;
265
-
cursor: pointer;
266
-
display: flex;
267
-
align-items: center;
268
-
justify-content: center;
269
-
}
270
-
#prevBtn:disabled,
271
-
#nextBtn:disabled {
272
-
opacity: 0.5;
273
-
cursor: not-allowed;
274
-
}
275
-
#embedVideo {
276
-
width: 100%;
277
-
max-width: 500px;
278
-
margin-top: 10px;
279
-
align-self: center;
280
-
}
281
-
282
-
#embedImages {
283
-
min-width: min(100%, 500px);
284
-
max-width: min(100%, 500px);
285
-
max-height: 500px;
286
-
object-fit: contain;
287
-
288
-
margin: 0;
289
-
}
290
156
</style>
+31
-10
src/lib/pdsfetch.ts
+31
-10
src/lib/pdsfetch.ts
···
13
13
WebDidDocumentResolver,
14
14
} from "@atcute/identity-resolver";
15
15
import { Config } from "../../config";
16
+
import { Mutex } from "mutex-ts"
16
17
// import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
17
18
// import { AppBskyFeedPost } from "@atcute/client/lexicons";
18
19
// import { AppBskyActorDefs } from "@atcute/client/lexicons";
···
46
47
replyingUri: atUriObject | null;
47
48
imagesCid: string[] | null;
48
49
videosLinkCid: string | null;
50
+
gifLink: string | null;
49
51
50
52
constructor(
51
53
record: ComAtprotoRepoListRecords.Record,
···
69
71
this.quotingUri = null;
70
72
this.imagesCid = null;
71
73
this.videosLinkCid = null;
74
+
this.gifLink = null;
72
75
switch (post.embed?.$type) {
73
76
case "app.bsky.embed.images":
74
77
this.imagesCid = post.embed.images.map(
···
96
99
break;
97
100
}
98
101
break;
102
+
case "app.bsky.embed.external": // assuming that external embeds are gifs for now
103
+
if (post.embed.external.uri.includes(".gif")) {
104
+
this.gifLink = post.embed.external.uri;
105
+
}
106
+
break;
99
107
}
100
108
}
101
109
}
···
124
132
const getAccountMetadata = async (
125
133
did: `did:${string}:${string}`,
126
134
) => {
127
-
// gonna assume self exists in the app.bsky.actor.profile
135
+
const account: AccountMetadata = {
136
+
did: did,
137
+
handle: "", // Guaranteed to be filled out later
138
+
displayName: "",
139
+
avatarCid: null,
140
+
};
141
+
128
142
try {
129
143
const { data } = await rpc.get("com.atproto.repo.getRecord", {
130
144
params: {
···
134
148
},
135
149
});
136
150
const value = data.value as AppBskyActorProfile.Record;
137
-
const handle = await blueskyHandleFromDid(did);
138
-
const account: AccountMetadata = {
139
-
did: did,
140
-
handle: handle,
141
-
displayName: value.displayName || "",
142
-
avatarCid: null,
143
-
};
151
+
account.displayName = value.displayName || "";
144
152
if (value.avatar) {
145
153
account.avatarCid = value.avatar.ref["$link"];
146
154
}
147
-
return account;
148
155
} catch (e) {
149
-
console.error(`Error fetching metadata for ${did}:`, e);
156
+
console.warn(`Error fetching profile for ${did}:`, e);
157
+
}
158
+
159
+
try {
160
+
account.handle = await blueskyHandleFromDid(did);
161
+
} catch (e) {
162
+
console.error(`Error fetching handle for ${did}:`, e);
150
163
return null;
151
164
}
165
+
166
+
return account;
152
167
};
153
168
154
169
const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {
···
240
255
});
241
256
return filteredPosts;
242
257
};
258
+
259
+
const postsMutex = new Mutex();
260
+
// nightmare function. However it works so I am not touching it
243
261
const getNextPosts = async () => {
262
+
const release = await postsMutex.obtain();
244
263
if (!accountsMetadata.length) {
245
264
accountsMetadata = await getAllMetadataFromPds();
246
265
}
···
314
333
}
315
334
return new Post(record, account);
316
335
});
336
+
// release the mutex
337
+
release();
317
338
return newPosts;
318
339
};
319
340
+423
themes/default/theme.css
+423
themes/default/theme.css
···
1
+
/* Modern Theme for pds-dash */
2
+
3
+
:root {
4
+
/* Modern color palette */
5
+
--primary-h: 243;
6
+
--link-color: hsl(var(--primary-h), 73%, 59%);
7
+
--link-hover-color: #4338ca;
8
+
--time-color: #8b5cf6;
9
+
--background-color: #f8fafc;
10
+
--header-background-color: #ffffff;
11
+
--content-background-color: #ffffff;
12
+
--text-color: #111827;
13
+
--text-secondary-color: #4b5563;
14
+
--border-color: #e2e8f0;
15
+
--indicator-inactive-color: #cbd5e1;
16
+
--indicator-active-color: #6366f1;
17
+
18
+
/* Modern shadows */
19
+
--button-hover: #f3f4f6;
20
+
}
21
+
22
+
23
+
body {
24
+
margin: 0;
25
+
display: flex;
26
+
place-items: center;
27
+
min-width: 320px;
28
+
min-height: 100vh;
29
+
background-color: var(--background-color);
30
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
31
+
font-size: 18px;
32
+
line-height: 1.5;
33
+
color: var(--text-color);
34
+
border-color: var(--border-color);
35
+
overflow-wrap: break-word;
36
+
word-break: break-word;
37
+
hyphens: none;
38
+
}
39
+
40
+
a {
41
+
font-weight: 500;
42
+
color: var(--link-color);
43
+
text-decoration: none;
44
+
transition: color 0.15s ease;
45
+
}
46
+
a:hover {
47
+
color: var(--link-hover-color);
48
+
}
49
+
50
+
h1 {
51
+
font-size: 2.5em;
52
+
line-height: 1.2;
53
+
font-weight: 700;
54
+
}
55
+
56
+
#app {
57
+
max-width: 1400px;
58
+
width: 100%;
59
+
margin: 0 auto;
60
+
padding: 0;
61
+
text-align: center;
62
+
}
63
+
64
+
/* Post Component */
65
+
#postContainer {
66
+
display: flex;
67
+
flex-direction: column;
68
+
border-radius: 12px;
69
+
border: 1px solid var(--border-color);
70
+
background-color: var(--content-background-color);
71
+
margin-bottom: 20px;
72
+
overflow-wrap: break-word;
73
+
overflow: hidden;
74
+
box-shadow: var(--card-shadow);
75
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
76
+
}
77
+
78
+
#postContainer:hover {
79
+
transform: translateY(-2px);
80
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
81
+
}
82
+
83
+
#postHeader {
84
+
display: flex;
85
+
flex-direction: row;
86
+
align-items: center;
87
+
justify-content: start;
88
+
background-color: var(--header-background-color);
89
+
padding: 12px 16px;
90
+
height: 60px;
91
+
border-bottom: 1px solid var(--border-color);
92
+
font-weight: 600;
93
+
overflow-wrap: break-word;
94
+
}
95
+
96
+
#displayName {
97
+
display: block;
98
+
color: var(--text-color);
99
+
font-size: 1.1em;
100
+
padding: 0;
101
+
margin: 0 0 2px 0;
102
+
text-overflow: ellipsis;
103
+
overflow: hidden;
104
+
white-space: nowrap;
105
+
width: 100%;
106
+
letter-spacing: -0.01em;
107
+
}
108
+
109
+
#handle {
110
+
display: flex;
111
+
align-items: center;
112
+
color: #6b7280;
113
+
font-size: 0.85em;
114
+
font-weight: 400;
115
+
padding: 0;
116
+
margin: 0;
117
+
gap: 8px;
118
+
}
119
+
120
+
#postLink {
121
+
color: var(--time-color);
122
+
font-size: 0.85em;
123
+
padding: 0;
124
+
margin: 0;
125
+
opacity: 0.9;
126
+
}
127
+
128
+
#postContent {
129
+
display: flex;
130
+
text-align: start;
131
+
flex-direction: column;
132
+
padding: 16px;
133
+
background-color: var(--content-background-color);
134
+
color: var(--text-color);
135
+
overflow-wrap: break-word;
136
+
white-space: pre-line;
137
+
line-height: 1.6;
138
+
}
139
+
140
+
#replyingText, #quotingText {
141
+
font-size: 0.8em;
142
+
margin: 0;
143
+
padding: 0 0 10px 0;
144
+
color: #6b7280;
145
+
}
146
+
147
+
#postText {
148
+
margin: 0 0 8px 0;
149
+
padding: 0;
150
+
overflow-wrap: break-word;
151
+
word-break: break-word;
152
+
hyphens: none;
153
+
font-size: 1.05em;
154
+
}
155
+
156
+
#headerText {
157
+
margin-left: 12px;
158
+
font-size: 0.9em;
159
+
text-align: start;
160
+
word-break: break-word;
161
+
max-width: 80%;
162
+
max-height: 95%;
163
+
overflow: hidden;
164
+
align-self: flex-start;
165
+
margin-top: auto;
166
+
margin-bottom: auto;
167
+
}
168
+
169
+
#carouselContainer {
170
+
position: relative;
171
+
width: 100%;
172
+
margin-top: 12px;
173
+
display: flex;
174
+
flex-direction: column;
175
+
align-items: center;
176
+
border-radius: 8px;
177
+
overflow: hidden;
178
+
}
179
+
180
+
#carouselControls {
181
+
display: flex;
182
+
justify-content: space-between;
183
+
align-items: center;
184
+
width: 100%;
185
+
max-width: 500px;
186
+
margin-top: 10px;
187
+
}
188
+
189
+
#carouselIndicators {
190
+
display: flex;
191
+
gap: 6px;
192
+
}
193
+
194
+
.indicator {
195
+
width: 6px;
196
+
height: 6px;
197
+
background-color: var(--indicator-inactive-color);
198
+
border-radius: 50%;
199
+
transition: background-color 0.2s ease, transform 0.2s ease;
200
+
}
201
+
202
+
.indicator.active {
203
+
background-color: var(--indicator-active-color);
204
+
transform: scale(1.3);
205
+
}
206
+
207
+
#prevBtn,
208
+
#nextBtn {
209
+
background-color: var(--button-bg);
210
+
color: var(--text-color);
211
+
border: 1px solid var(--border-color);
212
+
width: 32px;
213
+
height: 32px;
214
+
cursor: pointer;
215
+
display: flex;
216
+
align-items: center;
217
+
justify-content: center;
218
+
border-radius: 50%;
219
+
transition: background-color 0.15s ease, transform 0.15s ease;
220
+
font-size: 16px;
221
+
}
222
+
223
+
#prevBtn:hover:not(:disabled),
224
+
#nextBtn:hover:not(:disabled) {
225
+
background-color: var(--button-hover);
226
+
transform: scale(1.05);
227
+
}
228
+
229
+
#prevBtn:disabled,
230
+
#nextBtn:disabled {
231
+
opacity: 0.4;
232
+
cursor: not-allowed;
233
+
}
234
+
235
+
#embedVideo {
236
+
width: 100%;
237
+
max-width: 500px;
238
+
margin-top: 12px;
239
+
align-self: center;
240
+
border-radius: 8px;
241
+
overflow: hidden;
242
+
}
243
+
244
+
#embedImages {
245
+
min-width: min(100%, 500px);
246
+
max-width: min(100%, 500px);
247
+
max-height: 500px;
248
+
object-fit: contain;
249
+
margin: 0;
250
+
border-radius: 8px;
251
+
}
252
+
253
+
/* Account Component */
254
+
#accountContainer {
255
+
display: flex;
256
+
text-align: start;
257
+
align-items: center;
258
+
background-color: var(--content-background-color);
259
+
padding: 12px;
260
+
margin-bottom: 15px;
261
+
border: 1px solid var(--border-color);
262
+
border-radius: 12px;
263
+
transition: background-color 0.15s ease;
264
+
}
265
+
266
+
#accountContainer:hover {
267
+
background-color: var(--hover-bg);
268
+
}
269
+
270
+
#accountName {
271
+
margin-left: 12px;
272
+
font-size: 0.95em;
273
+
max-width: 80%;
274
+
overflow: hidden;
275
+
text-overflow: ellipsis;
276
+
white-space: nowrap;
277
+
font-weight: 500;
278
+
}
279
+
280
+
#avatar {
281
+
width: 48px;
282
+
height: 48px;
283
+
margin: 0;
284
+
object-fit: cover;
285
+
border-radius: 50%;
286
+
border: 2px solid white;
287
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
288
+
}
289
+
290
+
/* App.Svelte Layout */
291
+
#Content {
292
+
display: flex;
293
+
width: 100%;
294
+
height: 100%;
295
+
flex-direction: row;
296
+
justify-content: space-between;
297
+
align-items: center;
298
+
background-color: var(--background-color);
299
+
color: var(--text-color);
300
+
gap: 24px;
301
+
}
302
+
303
+
#Feed {
304
+
overflow-y: auto;
305
+
width: 65%;
306
+
height: 100vh;
307
+
padding-right: 16px;
308
+
align-self: flex-start;
309
+
}
310
+
311
+
#spacer {
312
+
padding: 0;
313
+
margin: 0;
314
+
height: 10vh;
315
+
width: 100%;
316
+
}
317
+
318
+
#Account {
319
+
width: 35%;
320
+
display: flex;
321
+
flex-direction: column;
322
+
border: 1px solid var(--border-color);
323
+
background-color: var(--content-background-color);
324
+
max-height: 80vh;
325
+
padding: 24px;
326
+
margin-left: 16px;
327
+
border-radius: 12px;
328
+
box-shadow: var(--card-shadow);
329
+
}
330
+
331
+
#accountsList {
332
+
display: flex;
333
+
flex-direction: column;
334
+
overflow-y: auto;
335
+
height: 100%;
336
+
width: 100%;
337
+
padding: 8px 0;
338
+
margin: 0;
339
+
}
340
+
341
+
#Header {
342
+
text-align: center;
343
+
font-size: 1.8em;
344
+
margin-bottom: 16px;
345
+
font-weight: 700;
346
+
background: linear-gradient(to right, var(--link-color), #8b5cf6);
347
+
-webkit-background-clip: text;
348
+
-webkit-text-fill-color: transparent;
349
+
background-clip: text;
350
+
}
351
+
352
+
/* Mobile Styles */
353
+
@media screen and (max-width: 768px) {
354
+
#Content {
355
+
flex-direction: column;
356
+
width: auto;
357
+
padding: 12px;
358
+
margin-top: 0;
359
+
}
360
+
361
+
#Account {
362
+
width: calc(100% - 32px);
363
+
padding: 16px;
364
+
margin-bottom: 20px;
365
+
margin-left: 0;
366
+
margin-right: 0;
367
+
height: auto;
368
+
order: -1;
369
+
}
370
+
371
+
#Feed {
372
+
width: 100%;
373
+
margin: 0;
374
+
padding: 0;
375
+
overflow-y: visible;
376
+
}
377
+
378
+
#spacer {
379
+
height: 5vh;
380
+
}
381
+
382
+
body {
383
+
font-size: 16px;
384
+
}
385
+
386
+
#postHeader {
387
+
padding: 10px;
388
+
height: auto;
389
+
min-height: 50px;
390
+
}
391
+
}
392
+
393
+
/* Scrollbar Styles */
394
+
::-webkit-scrollbar {
395
+
width: 0px;
396
+
background: transparent;
397
+
padding: 0;
398
+
margin: 0;
399
+
}
400
+
::-webkit-scrollbar-thumb {
401
+
background: transparent;
402
+
border-radius: 0;
403
+
}
404
+
::-webkit-scrollbar-track {
405
+
background: transparent;
406
+
border-radius: 0;
407
+
}
408
+
::-webkit-scrollbar-corner {
409
+
background: transparent;
410
+
border-radius: 0;
411
+
}
412
+
::-webkit-scrollbar-button {
413
+
background: transparent;
414
+
border-radius: 0;
415
+
}
416
+
417
+
* {
418
+
scrollbar-width: none;
419
+
scrollbar-color: transparent transparent;
420
+
-ms-overflow-style: none; /* IE and Edge */
421
+
-webkit-overflow-scrolling: touch;
422
+
-webkit-scrollbar: none; /* Safari */
423
+
}
+375
themes/express/theme.css
+375
themes/express/theme.css
···
1
+
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
2
+
3
+
:root {
4
+
/* Color overrides, edit to whatever you want */
5
+
--primary-h: 341; /* Hue */
6
+
--background-color: hsl(var(--primary-h), 62%, 30%);
7
+
--text-color: hsl(var(--primary-h), 69%, 18%);
8
+
--link-color: hsl(var(--primary-h), 100%, 20%);
9
+
--link-hover-color: hsl(var(--primary-h), 20%, 20%);
10
+
--border-color: hsl(var(--primary-h), 59%, 52%);
11
+
--content-background-color: hsl(var(--primary-h), 97%, 73%);
12
+
13
+
--header-background-color: hsl(var(--primary-h), 97%, 73%);
14
+
--indicator-inactive-color: #4a4a4a;
15
+
--indicator-active-color: var(--border-color);
16
+
}
17
+
18
+
a {
19
+
font-weight: 500;
20
+
color: var(--link-color);
21
+
text-decoration: inherit;
22
+
}
23
+
a:hover {
24
+
color: var(--link-hover-color);
25
+
text-decoration: underline;
26
+
}
27
+
28
+
body {
29
+
margin: 0;
30
+
display: flex;
31
+
place-items: center;
32
+
min-width: 320px;
33
+
min-height: 100vh;
34
+
background-color: var(--background-color);
35
+
font-family: "Share Tech Mono", monospace;
36
+
font-size: 24px;
37
+
color: var(--text-color);
38
+
border-color: var(--border-color);
39
+
overflow-wrap: break-word;
40
+
word-wrap: normal;
41
+
word-break: break-word;
42
+
hyphens: none;
43
+
}
44
+
45
+
h1 {
46
+
font-size: 3.2em;
47
+
line-height: 1.1;
48
+
}
49
+
50
+
#app {
51
+
max-width: 1400px;
52
+
width: 100%;
53
+
margin: 0;
54
+
padding: 0;
55
+
margin-left: auto;
56
+
margin-right: auto;
57
+
text-align: center;
58
+
}
59
+
60
+
/* Post Component */
61
+
a:hover {
62
+
text-decoration: underline;
63
+
}
64
+
#postContainer {
65
+
display: flex;
66
+
flex-direction: column;
67
+
border: 4px solid var(--border-color);
68
+
background-color: var(--background-color);
69
+
margin-bottom: 15px;
70
+
overflow-wrap: break-word;
71
+
box-shadow: var(--border-color) 10px 10px;
72
+
}
73
+
#postHeader {
74
+
display: flex;
75
+
flex-direction: row;
76
+
align-items: center;
77
+
justify-content: start;
78
+
background-color: var(--header-background-color);
79
+
padding: 0px 0px;
80
+
height: fit-content;
81
+
82
+
font-weight: bold;
83
+
overflow-wrap: break-word;
84
+
height: 64px;
85
+
}
86
+
#displayName {
87
+
display: block;
88
+
color: var(--text-color);
89
+
font-size: 1.2em;
90
+
padding: 0;
91
+
margin: 0;
92
+
overflow-wrap: normal;
93
+
word-wrap: break-word;
94
+
word-break: break-word;
95
+
text-overflow: ellipsis;
96
+
overflow: hidden;
97
+
white-space: nowrap;
98
+
width: 100%;
99
+
}
100
+
#handle {
101
+
display: block;
102
+
color: var(--border-color);
103
+
font-size: 0.8em;
104
+
padding: 0;
105
+
margin: 0;
106
+
}
107
+
108
+
#postLink {
109
+
color: var(--link-hover-color);
110
+
font-size: 0.8em;
111
+
padding: 0;
112
+
margin: 0;
113
+
}
114
+
#postContent {
115
+
display: flex;
116
+
text-align: start;
117
+
flex-direction: column;
118
+
padding: 10px;
119
+
background-color: var(--content-background-color);
120
+
color: var(--text-color);
121
+
overflow-wrap: break-word;
122
+
white-space: pre-line;
123
+
}
124
+
#replyingText {
125
+
font-size: 0.7em;
126
+
margin: 0;
127
+
padding: 0;
128
+
padding-bottom: 5px;
129
+
}
130
+
#quotingText {
131
+
font-size: 0.7em;
132
+
margin: 0;
133
+
padding: 0;
134
+
padding-bottom: 5px;
135
+
}
136
+
#postText {
137
+
margin: 0;
138
+
padding: 0;
139
+
overflow-wrap: break-word;
140
+
word-wrap: normal;
141
+
word-break: break-word;
142
+
hyphens: none;
143
+
}
144
+
#headerText {
145
+
margin-left: 10px;
146
+
font-size: 0.9em;
147
+
text-align: start;
148
+
word-break: break-word;
149
+
max-width: 80%;
150
+
max-height: 95%;
151
+
overflow: hidden;
152
+
align-self: flex-start;
153
+
margin-top: auto;
154
+
margin-bottom: auto;
155
+
}
156
+
#avatar {
157
+
height: 30px;
158
+
width: 30px;
159
+
overflow: hidden;
160
+
object-fit: cover;
161
+
}
162
+
#postContainer #avatar {
163
+
height: 60px;
164
+
width: 60px;
165
+
border-right: var(--border-color) 4px solid;
166
+
border-bottom: var(--border-color) 4px solid;
167
+
}
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 10px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
}
176
+
#carouselControls {
177
+
display: flex;
178
+
justify-content: space-between;
179
+
align-items: center;
180
+
width: 100%;
181
+
max-width: 500px;
182
+
margin-top: 5px;
183
+
}
184
+
#carouselIndicators {
185
+
display: flex;
186
+
gap: 5px;
187
+
}
188
+
.indicator {
189
+
width: 8px;
190
+
height: 8px;
191
+
background-color: var(--indicator-inactive-color);
192
+
}
193
+
.indicator.active {
194
+
background-color: var(--indicator-active-color);
195
+
}
196
+
#prevBtn,
197
+
#nextBtn {
198
+
background-color: rgba(31, 17, 69, 0.7);
199
+
color: var(--text-color);
200
+
border: 4px solid var(--border-color);
201
+
width: 30px;
202
+
height: 30px;
203
+
cursor: pointer;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
}
208
+
#prevBtn:disabled,
209
+
#nextBtn:disabled {
210
+
opacity: 0.5;
211
+
cursor: not-allowed;
212
+
}
213
+
#embedVideo {
214
+
width: 100%;
215
+
max-width: 500px;
216
+
margin-top: 10px;
217
+
align-self: center;
218
+
}
219
+
220
+
#embedImages {
221
+
min-width: min(100%, 500px);
222
+
max-width: min(100%, 500px);
223
+
max-height: 500px;
224
+
object-fit: contain;
225
+
226
+
margin: 0;
227
+
}
228
+
229
+
/* Account Component */
230
+
#accountContainer {
231
+
display: flex;
232
+
text-align: start;
233
+
align-items: center;
234
+
background-color: var(--header-background-color);
235
+
padding: 0px;
236
+
margin-bottom: 15px;
237
+
margin-right: 4px;
238
+
border: 4px solid var(--border-color);
239
+
box-shadow: var(--border-color) 10px 10px;
240
+
min-height: 30px;
241
+
}
242
+
#accountName {
243
+
margin-left: 10px;
244
+
font-size: 1em;
245
+
max-width: 80%;
246
+
247
+
/* replace overflow with ellipsis */
248
+
overflow: hidden;
249
+
text-overflow: ellipsis;
250
+
white-space: nowrap;
251
+
}
252
+
253
+
.no-avatar {
254
+
margin-left: 40px !important;
255
+
}
256
+
257
+
/* App.Svelte */
258
+
/* desktop style */
259
+
260
+
#Content {
261
+
display: flex;
262
+
/* split the screen in half, left for accounts, right for posts */
263
+
width: 100%;
264
+
height: 100%;
265
+
flex-direction: row;
266
+
justify-content: space-between;
267
+
align-items: center;
268
+
background-color: var(--background-color);
269
+
color: var(--text-color);
270
+
}
271
+
#Feed {
272
+
overflow-y: scroll;
273
+
width: 65%;
274
+
height: 100vh;
275
+
padding: 20px;
276
+
padding-bottom: 0;
277
+
padding-top: 0;
278
+
margin-top: 0;
279
+
margin-bottom: 0;
280
+
}
281
+
#spacer {
282
+
padding: 0;
283
+
margin: 0;
284
+
height: 10vh;
285
+
width: 100%;
286
+
}
287
+
#Account {
288
+
width: 35%;
289
+
display: flex;
290
+
flex-direction: column;
291
+
border: 4px solid var(--border-color);
292
+
background-color: var(--content-background-color);
293
+
box-shadow: var(--border-color) 10px 10px;
294
+
height: 80vh;
295
+
padding: 20px;
296
+
margin-left: 20px;
297
+
}
298
+
#accountsList {
299
+
display: flex;
300
+
flex-direction: column;
301
+
overflow-y: scroll;
302
+
height: 100%;
303
+
width: 100%;
304
+
padding: 0px;
305
+
margin: 0px;
306
+
}
307
+
308
+
#Header {
309
+
text-align: center;
310
+
font-size: 2em;
311
+
margin-bottom: 20px;
312
+
}
313
+
314
+
/* mobile style */
315
+
@media screen and (max-width: 600px) {
316
+
#Content {
317
+
flex-direction: column;
318
+
width: auto;
319
+
padding-left: 0px;
320
+
padding-right: 0px;
321
+
margin-top: 5%;
322
+
}
323
+
#Account {
324
+
width: 85%;
325
+
padding-left: 5%;
326
+
padding-right: 5%;
327
+
margin-bottom: 20px;
328
+
margin-left: 5%;
329
+
margin-right: 5%;
330
+
height: auto;
331
+
}
332
+
#Feed {
333
+
width: 95%;
334
+
margin: 0px;
335
+
margin-left: 10%;
336
+
margin-right: 10%;
337
+
padding: 0px;
338
+
overflow-y: visible;
339
+
}
340
+
341
+
#spacer {
342
+
height: 0;
343
+
}
344
+
}
345
+
346
+
::-webkit-scrollbar {
347
+
width: 0px;
348
+
background: transparent;
349
+
padding: 0;
350
+
margin: 0;
351
+
}
352
+
::-webkit-scrollbar-thumb {
353
+
background: transparent;
354
+
border-radius: 0;
355
+
}
356
+
::-webkit-scrollbar-track {
357
+
background: transparent;
358
+
border-radius: 0;
359
+
}
360
+
::-webkit-scrollbar-corner {
361
+
background: transparent;
362
+
border-radius: 0;
363
+
}
364
+
::-webkit-scrollbar-button {
365
+
background: transparent;
366
+
border-radius: 0;
367
+
}
368
+
369
+
* {
370
+
scrollbar-width: none;
371
+
scrollbar-color: transparent transparent;
372
+
-ms-overflow-style: none; /* IE and Edge */
373
+
-webkit-overflow-scrolling: touch;
374
+
-webkit-scrollbar: none; /* Safari */
375
+
}
+373
themes/witchcraft/theme.css
+373
themes/witchcraft/theme.css
···
1
+
@font-face {
2
+
font-family: "ProggyClean";
3
+
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
+
}
5
+
6
+
:root {
7
+
/* Color overrides, edit to whatever you want */
8
+
--primary-h: 260; /* Hue */
9
+
10
+
--link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
11
+
--link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
12
+
--background-color: hsl(var(--primary-h), 75%, 10%);
13
+
--header-background-color: hsl(var(--primary-h), 75%, 18%);
14
+
--content-background-color: hsl(var(--primary-h), 75%, 8%);
15
+
--text-color: #fff;
16
+
--border-color: hsl(var(--primary-h), 75%, 60%);
17
+
--indicator-inactive-color: #4a4a4a;
18
+
--indicator-active-color: var(--border-color);
19
+
}
20
+
21
+
22
+
a {
23
+
font-weight: 500;
24
+
color: var(--link-color);
25
+
text-decoration: inherit;
26
+
}
27
+
a:hover {
28
+
color: var(--link-hover-color);
29
+
text-decoration: underline;
30
+
}
31
+
32
+
body {
33
+
margin: 0;
34
+
display: flex;
35
+
place-items: center;
36
+
min-width: 320px;
37
+
min-height: 100vh;
38
+
background-color: var(--background-color);
39
+
font-family: "ProggyClean", monospace;
40
+
font-size: 24px;
41
+
color: var(--text-color);
42
+
border-color: var(--border-color);
43
+
overflow-wrap: break-word;
44
+
word-wrap: normal;
45
+
word-break: break-word;
46
+
hyphens: none;
47
+
}
48
+
49
+
h1 {
50
+
font-size: 3.2em;
51
+
line-height: 1.1;
52
+
}
53
+
54
+
#app {
55
+
max-width: 1400px;
56
+
width: 100%;
57
+
margin: 0;
58
+
padding: 0;
59
+
margin-left: auto;
60
+
margin-right: auto;
61
+
text-align: center;
62
+
}
63
+
64
+
/* Post Component */
65
+
a:hover {
66
+
text-decoration: underline;
67
+
}
68
+
#postContainer {
69
+
display: flex;
70
+
flex-direction: column;
71
+
border: 1px solid var(--border-color);
72
+
background-color: var(--background-color);
73
+
margin-bottom: 15px;
74
+
overflow-wrap: break-word;
75
+
}
76
+
#postHeader {
77
+
display: flex;
78
+
flex-direction: row;
79
+
align-items: center;
80
+
justify-content: start;
81
+
background-color: var(--header-background-color);
82
+
padding: 0px 0px;
83
+
height: fit-content;
84
+
border-bottom: 1px solid var(--border-color);
85
+
font-weight: bold;
86
+
overflow-wrap: break-word;
87
+
height: 60px;
88
+
}
89
+
#displayName {
90
+
display: block;
91
+
color: var(--text-color);
92
+
font-size: 1.2em;
93
+
padding: 0;
94
+
margin: 0;
95
+
overflow-wrap: normal;
96
+
word-wrap: break-word;
97
+
word-break: break-word;
98
+
text-overflow: ellipsis;
99
+
overflow: hidden;
100
+
white-space: nowrap;
101
+
width: 100%;
102
+
}
103
+
#handle {
104
+
display: block;
105
+
color: var(--border-color);
106
+
font-size: 0.8em;
107
+
padding: 0;
108
+
margin: 0;
109
+
}
110
+
111
+
#postLink {
112
+
color: var(--border-color);
113
+
font-size: 0.8em;
114
+
padding: 0;
115
+
margin: 0;
116
+
}
117
+
#postContent {
118
+
display: flex;
119
+
text-align: start;
120
+
flex-direction: column;
121
+
padding: 10px;
122
+
background-color: var(--content-background-color);
123
+
color: var(--text-color);
124
+
overflow-wrap: break-word;
125
+
white-space: pre-line;
126
+
}
127
+
#replyingText {
128
+
font-size: 0.7em;
129
+
margin: 0;
130
+
padding: 0;
131
+
padding-bottom: 5px;
132
+
}
133
+
#quotingText {
134
+
font-size: 0.7em;
135
+
margin: 0;
136
+
padding: 0;
137
+
padding-bottom: 5px;
138
+
}
139
+
#postText {
140
+
margin: 0;
141
+
padding: 0;
142
+
overflow-wrap: break-word;
143
+
word-wrap: normal;
144
+
word-break: break-word;
145
+
hyphens: none;
146
+
}
147
+
#headerText {
148
+
margin-left: 10px;
149
+
font-size: 0.9em;
150
+
text-align: start;
151
+
word-break: break-word;
152
+
max-width: 80%;
153
+
max-height: 95%;
154
+
overflow: hidden;
155
+
align-self: flex-start;
156
+
margin-top: auto;
157
+
margin-bottom: auto;
158
+
}
159
+
#avatar {
160
+
height: 60px;
161
+
width: 60px;
162
+
margin: 0px;
163
+
margin-left: 0px;
164
+
overflow: hidden;
165
+
object-fit: cover;
166
+
border-right: var(--border-color) 1px solid;
167
+
}
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 10px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
}
176
+
#carouselControls {
177
+
display: flex;
178
+
justify-content: space-between;
179
+
align-items: center;
180
+
width: 100%;
181
+
max-width: 500px;
182
+
margin-top: 5px;
183
+
}
184
+
#carouselIndicators {
185
+
display: flex;
186
+
gap: 5px;
187
+
}
188
+
.indicator {
189
+
width: 8px;
190
+
height: 8px;
191
+
background-color: var(--indicator-inactive-color);
192
+
}
193
+
.indicator.active {
194
+
background-color: var(--indicator-active-color);
195
+
}
196
+
#prevBtn,
197
+
#nextBtn {
198
+
background-color: rgba(31, 17, 69, 0.7);
199
+
color: var(--text-color);
200
+
border: 1px solid var(--border-color);
201
+
width: 30px;
202
+
height: 30px;
203
+
cursor: pointer;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
}
208
+
#prevBtn:disabled,
209
+
#nextBtn:disabled {
210
+
opacity: 0.5;
211
+
cursor: not-allowed;
212
+
}
213
+
#embedVideo {
214
+
width: 100%;
215
+
max-width: 500px;
216
+
margin-top: 10px;
217
+
align-self: center;
218
+
}
219
+
220
+
#embedImages {
221
+
min-width: min(100%, 500px);
222
+
max-width: min(100%, 500px);
223
+
max-height: 500px;
224
+
object-fit: contain;
225
+
226
+
margin: 0;
227
+
}
228
+
229
+
/* Account Component */
230
+
#accountContainer {
231
+
display: flex;
232
+
text-align: start;
233
+
align-items: center;
234
+
background-color: var(--background-color);
235
+
padding: 0px;
236
+
margin-bottom: 15px;
237
+
border: 1px solid var(--border-color);
238
+
min-height: 30px;
239
+
}
240
+
#accountName {
241
+
margin-left: 10px;
242
+
font-size: 1em;
243
+
max-width: 80%;
244
+
245
+
/* replace overflow with ellipsis */
246
+
overflow: hidden;
247
+
text-overflow: ellipsis;
248
+
white-space: nowrap;
249
+
}
250
+
251
+
252
+
.no-avatar {
253
+
margin-left: 70px !important;
254
+
}
255
+
256
+
/* App.Svelte */
257
+
/* desktop style */
258
+
259
+
#Content {
260
+
display: flex;
261
+
/* split the screen in half, left for accounts, right for posts */
262
+
width: 100%;
263
+
height: 100%;
264
+
flex-direction: row;
265
+
justify-content: space-between;
266
+
align-items: center;
267
+
background-color: var(--background-color);
268
+
color: var(--text-color);
269
+
}
270
+
#Feed {
271
+
overflow-y: scroll;
272
+
width: 65%;
273
+
height: 100vh;
274
+
padding: 20px;
275
+
padding-bottom: 0;
276
+
padding-top: 0;
277
+
margin-top: 0;
278
+
margin-bottom: 0;
279
+
}
280
+
#spacer {
281
+
padding: 0;
282
+
margin: 0;
283
+
height: 10vh;
284
+
width: 100%;
285
+
}
286
+
#Account {
287
+
width: 35%;
288
+
display: flex;
289
+
flex-direction: column;
290
+
border: 1px solid var(--border-color);
291
+
background-color: var(--content-background-color);
292
+
height: 80vh;
293
+
padding: 20px;
294
+
margin-left: 20px;
295
+
}
296
+
#accountsList {
297
+
display: flex;
298
+
flex-direction: column;
299
+
overflow-y: scroll;
300
+
height: 100%;
301
+
width: 100%;
302
+
padding: 0px;
303
+
margin: 0px;
304
+
}
305
+
306
+
#Header {
307
+
text-align: center;
308
+
font-size: 2em;
309
+
margin-bottom: 20px;
310
+
}
311
+
312
+
/* mobile style */
313
+
@media screen and (max-width: 600px) {
314
+
#Content {
315
+
flex-direction: column;
316
+
width: auto;
317
+
padding-left: 0px;
318
+
padding-right: 0px;
319
+
margin-top: 5%;
320
+
}
321
+
#Account {
322
+
width: 85%;
323
+
padding-left: 5%;
324
+
padding-right: 5%;
325
+
margin-bottom: 20px;
326
+
margin-left: 5%;
327
+
margin-right: 5%;
328
+
height: auto;
329
+
}
330
+
#Feed {
331
+
width: 95%;
332
+
margin: 0px;
333
+
margin-left: 10%;
334
+
margin-right: 10%;
335
+
padding: 0px;
336
+
overflow-y: visible;
337
+
}
338
+
339
+
#spacer {
340
+
height: 0;
341
+
}
342
+
}
343
+
344
+
::-webkit-scrollbar {
345
+
width: 0px;
346
+
background: transparent;
347
+
padding: 0;
348
+
margin: 0;
349
+
}
350
+
::-webkit-scrollbar-thumb {
351
+
background: transparent;
352
+
border-radius: 0;
353
+
}
354
+
::-webkit-scrollbar-track {
355
+
background: transparent;
356
+
border-radius: 0;
357
+
}
358
+
::-webkit-scrollbar-corner {
359
+
background: transparent;
360
+
border-radius: 0;
361
+
}
362
+
::-webkit-scrollbar-button {
363
+
background: transparent;
364
+
border-radius: 0;
365
+
}
366
+
367
+
* {
368
+
scrollbar-width: none;
369
+
scrollbar-color: transparent transparent;
370
+
-ms-overflow-style: none; /* IE and Edge */
371
+
-webkit-overflow-scrolling: touch;
372
+
-webkit-scrollbar: none; /* Safari */
373
+
}
+32
theming.ts
+32
theming.ts
···
1
+
import { Plugin } from 'vite';
2
+
import { Config } from './config';
3
+
4
+
5
+
// Replaces app.css with the contents of the file specified in the
6
+
// config file.
7
+
export const themePlugin = (): Plugin => {
8
+
const themeFolder = Config.THEME;
9
+
console.log(`Using theme folder: ${themeFolder}`);
10
+
return {
11
+
name: 'theme-generator',
12
+
enforce: 'pre', // Ensure this plugin runs first
13
+
transform(code, id) {
14
+
if (id.endsWith('app.css')) {
15
+
// Read the theme file and replace the contents of app.css with it
16
+
// Needs full path to the file
17
+
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
18
+
// Replace the contents of app.css with the theme code
19
+
20
+
// and add a comment at the top
21
+
const themeComment = `/* Generated from ${themeFolder} */\n`;
22
+
const themeCodeWithComment = themeComment + themeCode;
23
+
// Return the theme code as the new contents of app.css
24
+
return {
25
+
code: themeCodeWithComment,
26
+
map: null,
27
+
};
28
+
}
29
+
return null;
30
+
}
31
+
};
32
+
};
+5
-1
vite.config.ts
+5
-1
vite.config.ts
···
1
1
import { defineConfig } from "vite";
2
2
import { svelte } from "@sveltejs/vite-plugin-svelte";
3
+
import { themePlugin } from "./theming";
3
4
4
5
// https://vite.dev/config/
5
6
export default defineConfig({
6
-
plugins: [svelte()],
7
+
plugins: [
8
+
themePlugin(),
9
+
svelte(),
10
+
],
7
11
});