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
-2
README.md
+6
-2
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
+
the colors are designated in [`src/app.css`](src/app.css) as variables, go crazy with them
50
+
51
+
the rest is done by editing the css files and style tags directly, good luck
48
52
49
53
relevant files:
50
54
-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 = 5;
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
+
}
+177
-57
deno.lock
+177
-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",
12
+
"npm:svelte-infinite-loading@^1.4.0": "1.4.0",
11
13
"npm:svelte@^5.23.1": "5.28.1_acorn@8.14.1",
12
14
"npm:typescript@~5.7.2": "5.7.3",
13
15
"npm:vite@^6.3.1": "6.3.2_picomatch@4.0.2"
···
53
55
"integrity": "sha512-GEhUCk9c4XbNxi+0YZHZsV4fYNd6HejfWuN4Ti4c02DauX+LyX5WY1Y3WfyZ8Pxxl0zqhs+MLtW98cMh86vv6g=="
54
56
},
55
57
"@esbuild/aix-ppc64@0.25.2": {
56
-
"integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag=="
58
+
"integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==",
59
+
"os": ["aix"],
60
+
"cpu": ["ppc64"]
57
61
},
58
62
"@esbuild/android-arm64@0.25.2": {
59
-
"integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w=="
63
+
"integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==",
64
+
"os": ["android"],
65
+
"cpu": ["arm64"]
60
66
},
61
67
"@esbuild/android-arm@0.25.2": {
62
-
"integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA=="
68
+
"integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==",
69
+
"os": ["android"],
70
+
"cpu": ["arm"]
63
71
},
64
72
"@esbuild/android-x64@0.25.2": {
65
-
"integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg=="
73
+
"integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==",
74
+
"os": ["android"],
75
+
"cpu": ["x64"]
66
76
},
67
77
"@esbuild/darwin-arm64@0.25.2": {
68
-
"integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA=="
78
+
"integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==",
79
+
"os": ["darwin"],
80
+
"cpu": ["arm64"]
69
81
},
70
82
"@esbuild/darwin-x64@0.25.2": {
71
-
"integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA=="
83
+
"integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==",
84
+
"os": ["darwin"],
85
+
"cpu": ["x64"]
72
86
},
73
87
"@esbuild/freebsd-arm64@0.25.2": {
74
-
"integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w=="
88
+
"integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==",
89
+
"os": ["freebsd"],
90
+
"cpu": ["arm64"]
75
91
},
76
92
"@esbuild/freebsd-x64@0.25.2": {
77
-
"integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ=="
93
+
"integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==",
94
+
"os": ["freebsd"],
95
+
"cpu": ["x64"]
78
96
},
79
97
"@esbuild/linux-arm64@0.25.2": {
80
-
"integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g=="
98
+
"integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==",
99
+
"os": ["linux"],
100
+
"cpu": ["arm64"]
81
101
},
82
102
"@esbuild/linux-arm@0.25.2": {
83
-
"integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g=="
103
+
"integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==",
104
+
"os": ["linux"],
105
+
"cpu": ["arm"]
84
106
},
85
107
"@esbuild/linux-ia32@0.25.2": {
86
-
"integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ=="
108
+
"integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==",
109
+
"os": ["linux"],
110
+
"cpu": ["ia32"]
87
111
},
88
112
"@esbuild/linux-loong64@0.25.2": {
89
-
"integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w=="
113
+
"integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==",
114
+
"os": ["linux"],
115
+
"cpu": ["loong64"]
90
116
},
91
117
"@esbuild/linux-mips64el@0.25.2": {
92
-
"integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q=="
118
+
"integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==",
119
+
"os": ["linux"],
120
+
"cpu": ["mips64el"]
93
121
},
94
122
"@esbuild/linux-ppc64@0.25.2": {
95
-
"integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g=="
123
+
"integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==",
124
+
"os": ["linux"],
125
+
"cpu": ["ppc64"]
96
126
},
97
127
"@esbuild/linux-riscv64@0.25.2": {
98
-
"integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw=="
128
+
"integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==",
129
+
"os": ["linux"],
130
+
"cpu": ["riscv64"]
99
131
},
100
132
"@esbuild/linux-s390x@0.25.2": {
101
-
"integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q=="
133
+
"integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==",
134
+
"os": ["linux"],
135
+
"cpu": ["s390x"]
102
136
},
103
137
"@esbuild/linux-x64@0.25.2": {
104
-
"integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg=="
138
+
"integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==",
139
+
"os": ["linux"],
140
+
"cpu": ["x64"]
105
141
},
106
142
"@esbuild/netbsd-arm64@0.25.2": {
107
-
"integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw=="
143
+
"integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==",
144
+
"os": ["netbsd"],
145
+
"cpu": ["arm64"]
108
146
},
109
147
"@esbuild/netbsd-x64@0.25.2": {
110
-
"integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg=="
148
+
"integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==",
149
+
"os": ["netbsd"],
150
+
"cpu": ["x64"]
111
151
},
112
152
"@esbuild/openbsd-arm64@0.25.2": {
113
-
"integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg=="
153
+
"integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==",
154
+
"os": ["openbsd"],
155
+
"cpu": ["arm64"]
114
156
},
115
157
"@esbuild/openbsd-x64@0.25.2": {
116
-
"integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw=="
158
+
"integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==",
159
+
"os": ["openbsd"],
160
+
"cpu": ["x64"]
117
161
},
118
162
"@esbuild/sunos-x64@0.25.2": {
119
-
"integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA=="
163
+
"integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==",
164
+
"os": ["sunos"],
165
+
"cpu": ["x64"]
120
166
},
121
167
"@esbuild/win32-arm64@0.25.2": {
122
-
"integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q=="
168
+
"integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==",
169
+
"os": ["win32"],
170
+
"cpu": ["arm64"]
123
171
},
124
172
"@esbuild/win32-ia32@0.25.2": {
125
-
"integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg=="
173
+
"integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==",
174
+
"os": ["win32"],
175
+
"cpu": ["ia32"]
126
176
},
127
177
"@esbuild/win32-x64@0.25.2": {
128
-
"integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA=="
178
+
"integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==",
179
+
"os": ["win32"],
180
+
"cpu": ["x64"]
129
181
},
130
182
"@jridgewell/gen-mapping@0.3.8": {
131
183
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
···
152
204
]
153
205
},
154
206
"@rollup/rollup-android-arm-eabi@4.40.0": {
155
-
"integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg=="
207
+
"integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
208
+
"os": ["android"],
209
+
"cpu": ["arm"]
156
210
},
157
211
"@rollup/rollup-android-arm64@4.40.0": {
158
-
"integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w=="
212
+
"integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
213
+
"os": ["android"],
214
+
"cpu": ["arm64"]
159
215
},
160
216
"@rollup/rollup-darwin-arm64@4.40.0": {
161
-
"integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ=="
217
+
"integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
218
+
"os": ["darwin"],
219
+
"cpu": ["arm64"]
162
220
},
163
221
"@rollup/rollup-darwin-x64@4.40.0": {
164
-
"integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA=="
222
+
"integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
223
+
"os": ["darwin"],
224
+
"cpu": ["x64"]
165
225
},
166
226
"@rollup/rollup-freebsd-arm64@4.40.0": {
167
-
"integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg=="
227
+
"integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
228
+
"os": ["freebsd"],
229
+
"cpu": ["arm64"]
168
230
},
169
231
"@rollup/rollup-freebsd-x64@4.40.0": {
170
-
"integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw=="
232
+
"integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
233
+
"os": ["freebsd"],
234
+
"cpu": ["x64"]
171
235
},
172
236
"@rollup/rollup-linux-arm-gnueabihf@4.40.0": {
173
-
"integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA=="
237
+
"integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
238
+
"os": ["linux"],
239
+
"cpu": ["arm"]
174
240
},
175
241
"@rollup/rollup-linux-arm-musleabihf@4.40.0": {
176
-
"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"]
177
245
},
178
246
"@rollup/rollup-linux-arm64-gnu@4.40.0": {
179
-
"integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg=="
247
+
"integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
248
+
"os": ["linux"],
249
+
"cpu": ["arm64"]
180
250
},
181
251
"@rollup/rollup-linux-arm64-musl@4.40.0": {
182
-
"integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ=="
252
+
"integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
253
+
"os": ["linux"],
254
+
"cpu": ["arm64"]
183
255
},
184
256
"@rollup/rollup-linux-loongarch64-gnu@4.40.0": {
185
-
"integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg=="
257
+
"integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
258
+
"os": ["linux"],
259
+
"cpu": ["loong64"]
186
260
},
187
261
"@rollup/rollup-linux-powerpc64le-gnu@4.40.0": {
188
-
"integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw=="
262
+
"integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
263
+
"os": ["linux"],
264
+
"cpu": ["ppc64"]
189
265
},
190
266
"@rollup/rollup-linux-riscv64-gnu@4.40.0": {
191
-
"integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA=="
267
+
"integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
268
+
"os": ["linux"],
269
+
"cpu": ["riscv64"]
192
270
},
193
271
"@rollup/rollup-linux-riscv64-musl@4.40.0": {
194
-
"integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ=="
272
+
"integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
273
+
"os": ["linux"],
274
+
"cpu": ["riscv64"]
195
275
},
196
276
"@rollup/rollup-linux-s390x-gnu@4.40.0": {
197
-
"integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw=="
277
+
"integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
278
+
"os": ["linux"],
279
+
"cpu": ["s390x"]
198
280
},
199
281
"@rollup/rollup-linux-x64-gnu@4.40.0": {
200
-
"integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ=="
282
+
"integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
283
+
"os": ["linux"],
284
+
"cpu": ["x64"]
201
285
},
202
286
"@rollup/rollup-linux-x64-musl@4.40.0": {
203
-
"integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw=="
287
+
"integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
288
+
"os": ["linux"],
289
+
"cpu": ["x64"]
204
290
},
205
291
"@rollup/rollup-win32-arm64-msvc@4.40.0": {
206
-
"integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ=="
292
+
"integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
293
+
"os": ["win32"],
294
+
"cpu": ["arm64"]
207
295
},
208
296
"@rollup/rollup-win32-ia32-msvc@4.40.0": {
209
-
"integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA=="
297
+
"integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
298
+
"os": ["win32"],
299
+
"cpu": ["ia32"]
210
300
},
211
301
"@rollup/rollup-win32-x64-msvc@4.40.0": {
212
-
"integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ=="
302
+
"integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
303
+
"os": ["win32"],
304
+
"cpu": ["x64"]
213
305
},
214
306
"@sveltejs/acorn-typescript@1.0.5_acorn@8.14.1": {
215
307
"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
···
246
338
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
247
339
},
248
340
"acorn@8.14.1": {
249
-
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="
341
+
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
342
+
"bin": true
250
343
},
251
344
"aria-query@5.3.2": {
252
345
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
···
274
367
},
275
368
"esbuild@0.25.2": {
276
369
"integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
277
-
"dependencies": [
370
+
"optionalDependencies": [
278
371
"@esbuild/aix-ppc64",
279
372
"@esbuild/android-arm",
280
373
"@esbuild/android-arm64",
···
300
393
"@esbuild/win32-arm64",
301
394
"@esbuild/win32-ia32",
302
395
"@esbuild/win32-x64"
303
-
]
396
+
],
397
+
"scripts": true,
398
+
"bin": true
304
399
},
305
400
"esm-env@1.2.2": {
306
401
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
···
315
410
"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
316
411
"dependencies": [
317
412
"picomatch"
413
+
],
414
+
"optionalPeers": [
415
+
"picomatch"
318
416
]
319
417
},
320
418
"fsevents@2.3.3": {
321
-
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="
419
+
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
420
+
"os": ["darwin"],
421
+
"scripts": true
322
422
},
323
423
"is-reference@3.0.3": {
324
424
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
···
347
447
"ms@2.1.3": {
348
448
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
349
449
},
450
+
"mutex-ts@1.2.1": {
451
+
"integrity": "sha512-OkcXgf0viuCgYdnm48kiNQ9PzC5OzISQ261svHr/Ybc2vBYC/5xfLXn44hQ+dYRX74v7MCSqV/LKPEbpYdDybw=="
452
+
},
350
453
"nanoid@3.3.11": {
351
-
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
454
+
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
455
+
"bin": true
352
456
},
353
457
"picocolors@1.1.1": {
354
458
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
···
370
474
"rollup@4.40.0": {
371
475
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
372
476
"dependencies": [
477
+
"@types/estree"
478
+
],
479
+
"optionalDependencies": [
373
480
"@rollup/rollup-android-arm-eabi",
374
481
"@rollup/rollup-android-arm64",
375
482
"@rollup/rollup-darwin-arm64",
···
390
497
"@rollup/rollup-win32-arm64-msvc",
391
498
"@rollup/rollup-win32-ia32-msvc",
392
499
"@rollup/rollup-win32-x64-msvc",
393
-
"@types/estree",
394
500
"fsevents"
395
-
]
501
+
],
502
+
"bin": true
396
503
},
397
504
"sade@1.8.1": {
398
505
"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
···
413
520
"sade",
414
521
"svelte",
415
522
"typescript"
416
-
]
523
+
],
524
+
"bin": true
525
+
},
526
+
"svelte-infinite-loading@1.4.0": {
527
+
"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg=="
417
528
},
418
529
"svelte@5.28.1_acorn@8.14.1": {
419
530
"integrity": "sha512-iOa9WmfNG95lSOSJdMhdjJ4Afok7IRAQYXpbnxhd5EINnXseG0GVa9j6WPght4eX78XfFez45Fi+uRglGKPV/Q==",
···
442
553
]
443
554
},
444
555
"typescript@5.7.3": {
445
-
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="
556
+
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
557
+
"bin": true
446
558
},
447
559
"vite@6.3.2_picomatch@4.0.2": {
448
560
"integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
449
561
"dependencies": [
450
562
"esbuild",
451
563
"fdir",
452
-
"fsevents",
453
564
"picomatch",
454
565
"postcss",
455
566
"rollup",
456
567
"tinyglobby"
457
-
]
568
+
],
569
+
"optionalDependencies": [
570
+
"fsevents"
571
+
],
572
+
"bin": true
458
573
},
459
574
"vitefu@1.0.6_vite@6.3.2__picomatch@4.0.2": {
460
575
"integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
461
576
"dependencies": [
577
+
"vite"
578
+
],
579
+
"optionalPeers": [
462
580
"vite"
463
581
]
464
582
},
···
475
593
"npm:@sveltejs/vite-plugin-svelte@^5.0.3",
476
594
"npm:@tsconfig/svelte@^5.0.4",
477
595
"npm:moment@^2.30.1",
596
+
"npm:mutex-ts@^1.2.1",
478
597
"npm:svelte-check@^4.1.5",
598
+
"npm:svelte-infinite-loading@^1.4.0",
479
599
"npm:svelte@^5.23.1",
480
600
"npm:typescript@~5.7.2",
481
601
"npm:vite@^6.3.1"
+3
-1
package.json
+3
-1
package.json
···
13
13
"@atcute/bluesky": "^2.0.2",
14
14
"@atcute/client": "^3.0.1",
15
15
"@atcute/identity-resolver": "^0.1.2",
16
-
"moment": "^2.30.1"
16
+
"moment": "^2.30.1",
17
+
"mutex-ts": "^1.2.1",
18
+
"svelte-infinite-loading": "^1.4.0"
17
19
},
18
20
"devDependencies": {
19
21
"@sveltejs/vite-plugin-svelte": "^5.0.3",
+57
-103
src/App.svelte
+57
-103
src/App.svelte
···
1
1
<script lang="ts">
2
2
import PostComponent from "./lib/PostComponent.svelte";
3
3
import AccountComponent from "./lib/AccountComponent.svelte";
4
+
import InfiniteLoading from "svelte-infinite-loading";
4
5
import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
5
6
import { Config } from "../config";
6
-
const postsPromise = getNextPosts();
7
7
const accountsPromise = getAllMetadataFromPds();
8
+
import { onMount } from "svelte";
9
+
10
+
let posts: Post[] = [];
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
+
32
+
onMount(() => {
33
+
// Fetch initial posts
34
+
getNextPosts().then((initialPosts) => {
35
+
posts = initialPosts;
36
+
});
37
+
});
38
+
// Infinite loading function
39
+
const onInfinite = ({
40
+
detail: { loaded, complete },
41
+
}: {
42
+
detail: { loaded: () => void; complete: () => void };
43
+
}) => {
44
+
getNextPosts().then((newPosts) => {
45
+
console.log("Loading next posts...");
46
+
if (newPosts.length > 0) {
47
+
posts = [...posts, ...newPosts];
48
+
loaded();
49
+
} else {
50
+
complete();
51
+
}
52
+
});
53
+
};
8
54
</script>
9
55
10
56
<main>
···
12
58
{#await accountsPromise}
13
59
<p>Loading...</p>
14
60
{:then accountsData}
15
-
16
61
<div id="Account">
17
-
<h1 id="Header">ATProto PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
18
63
<p>Home to {accountsData.length} accounts</p>
19
64
<div id="accountsList">
20
65
{#each accountsData as accountObject}
···
27
72
<p>Error: {error.message}</p>
28
73
{/await}
29
74
30
-
{#await postsPromise}
31
-
<p>Loading...</p>
32
-
{:then postsData}
33
-
<button on:click={getNextPosts}>
34
-
Load more posts
35
-
</button>
36
-
<div id="Feed">
37
-
<div id="spacer"></div>
38
-
{#each postsData as postObject}
39
-
<PostComponent post={postObject as Post} />
40
-
{/each}
41
-
<div id="spacer"></div>
42
-
</div>
43
-
{/await}
75
+
<div id="Feed">
76
+
<div id="spacer"></div>
77
+
{#each posts as postObject}
78
+
<PostComponent post={postObject as Post} />
79
+
{/each}
80
+
<InfiniteLoading on:infinite={onInfinite} distance={3000} />
81
+
<div id="spacer"></div>
82
+
</div>
44
83
</div>
45
84
</main>
46
85
47
86
<style>
48
-
/* desktop style */
49
-
50
-
#Content {
51
-
display: flex;
52
-
/* split the screen in half, left for accounts, right for posts */
53
-
width: 100%;
54
-
height: 100%;
55
-
flex-direction: row;
56
-
justify-content: space-between;
57
-
align-items: center;
58
-
background-color: var(--background-color);
59
-
color: var(--text-color);
60
-
}
61
-
#Feed {
62
-
width: 65%;
63
-
height: 100vh;
64
-
overflow-y: scroll;
65
-
padding: 20px;
66
-
padding-bottom: 0;
67
-
padding-top: 0;
68
-
margin-top: 0;
69
-
margin-bottom: 0;
70
-
}
71
-
#spacer {
72
-
padding: 0;
73
-
margin: 0;
74
-
height: 10vh;
75
-
width: 100%;
76
-
}
77
-
#Account {
78
-
width: 35%;
79
-
display: flex;
80
-
flex-direction: column;
81
-
border: 1px solid var(--border-color);
82
-
background-color: var(--content-background-color);
83
-
height: 80vh;
84
-
padding: 20px;
85
-
margin-left: 20px;
86
-
}
87
-
#accountsList {
88
-
display: flex;
89
-
flex-direction: column;
90
-
overflow-y: scroll;
91
-
height: 100%;
92
-
width: 100%;
93
-
padding: 0px;
94
-
margin: 0px;
95
-
}
96
-
97
-
#Header {
98
-
text-align: center;
99
-
font-size: 2em;
100
-
margin-bottom: 20px;
101
-
}
102
-
103
-
/* mobile style */
104
-
@media screen and (max-width: 600px) {
105
-
#Content {
106
-
flex-direction: column;
107
-
width: auto;
108
-
padding-left: 0px;
109
-
padding-right: 0px;
110
-
margin-top: 5%;
111
-
}
112
-
#Account {
113
-
width: auto;
114
-
padding-left: 5%;
115
-
padding-right: 5%;
116
-
margin-bottom: 20px;
117
-
margin-left: 5%;
118
-
margin-right: 5%;
119
-
height: auto;
120
-
}
121
-
#Feed {
122
-
width: 95%;
123
-
margin: 0px;
124
-
margin-left: 10%;
125
-
margin-right: 10%;
126
-
padding: 0px;
127
-
height: auto;
128
-
}
129
-
130
-
#spacer {
131
-
height: 0;
132
-
}
133
-
}
87
+
134
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
+
}
-24
src/lib/AccountComponent.svelte
-24
src/lib/AccountComponent.svelte
···
20
20
</a>
21
21
22
22
<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
23
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
24
</style>
+10
-144
src/lib/PostComponent.svelte
+10
-144
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
···
113
113
<div id="carouselControls">
114
114
<button
115
115
id="prevBtn"
116
-
on:click={prevImage}
116
+
onclick={prevImage}
117
117
disabled={currentImageIndex === 0}>←</button
118
118
>
119
119
<div id="carouselIndicators">
···
125
125
</div>
126
126
<button
127
127
id="nextBtn"
128
-
on:click={nextImage}
128
+
onclick={nextImage}
129
129
disabled={currentImageIndex === post.imagesCid.length - 1}
130
130
>→</button
131
131
>
···
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>
+40
-80
src/lib/pdsfetch.ts
+40
-80
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";
···
26
27
}
27
28
28
29
let accountsMetadata: AccountMetadata[] = [];
29
-
// a chronologically sorted list of posts for all users, that will be shown by svelte
30
-
// getNextPosts will populate this list with additional posts as needed
31
-
let posts: Post[] = [];
30
+
32
31
interface atUriObject {
33
32
repo: string;
34
33
collection: string;
···
48
47
replyingUri: atUriObject | null;
49
48
imagesCid: string[] | null;
50
49
videosLinkCid: string | null;
50
+
gifLink: string | null;
51
51
52
52
constructor(
53
53
record: ComAtprotoRepoListRecords.Record,
···
71
71
this.quotingUri = null;
72
72
this.imagesCid = null;
73
73
this.videosLinkCid = null;
74
+
this.gifLink = null;
74
75
switch (post.embed?.$type) {
75
76
case "app.bsky.embed.images":
76
77
this.imagesCid = post.embed.images.map(
···
98
99
break;
99
100
}
100
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;
101
107
}
102
108
}
103
109
}
···
163
169
return metadata.filter((account) => account !== null) as AccountMetadata[];
164
170
};
165
171
166
-
// OLD
167
-
const fetchPosts = async (did: string) => {
168
-
try {
169
-
const { data } = await rpc.get("com.atproto.repo.listRecords", {
170
-
params: {
171
-
repo: did as At.Identifier,
172
-
collection: "app.bsky.feed.post",
173
-
limit: Config.MAX_POSTS,
174
-
},
175
-
});
176
-
return {
177
-
records: data.records as ComAtprotoRepoListRecords.Record[],
178
-
did: did,
179
-
error: false,
180
-
};
181
-
} catch (e) {
182
-
console.error(`Error fetching posts for ${did}:`, e);
183
-
return {
184
-
records: [],
185
-
did: did,
186
-
error: true,
187
-
};
188
-
}
189
-
};
190
-
191
172
const identityResolve = async (did: At.Did) => {
192
173
const resolver = new CompositeDidDocumentResolver({
193
174
methods: {
···
242
223
}
243
224
});
244
225
if (cutoffDate) {
245
-
console.log("Cutoff date:", cutoffDate);
246
226
return cutoffDate;
247
227
} else {
248
228
return new Date(now);
···
259
239
return postDate >= cutoffDate;
260
240
});
261
241
if (filtered.length > 0) {
262
-
postAcc.account.currentCursor = filtered[filtered.length - 1].cid;
242
+
postAcc.account.currentCursor = processAtUri(filtered[filtered.length - 1].uri).rkey;
263
243
}
264
244
return {
265
245
posts: filtered,
···
268
248
});
269
249
return filteredPosts;
270
250
};
251
+
252
+
const postsMutex = new Mutex();
253
+
// nightmare function. However it works so I am not touching it
271
254
const getNextPosts = async () => {
255
+
const release = await postsMutex.obtain();
272
256
if (!accountsMetadata.length) {
273
257
accountsMetadata = await getAllMetadataFromPds();
274
258
}
···
298
282
const cutoffDate = getCutoffDate(recordsFiltered);
299
283
const recordsCutoff = filterPostsByDate(recordsFiltered, cutoffDate);
300
284
// update the accountMetadata with the new cursor
301
-
accountsMetadata = recordsCutoff.map((postAcc) => postAcc.account);
285
+
accountsMetadata = accountsMetadata.map((account) => {
286
+
const postAcc = recordsCutoff.find(
287
+
(postAcc) => postAcc.account.did == account.did,
288
+
);
289
+
if (postAcc) {
290
+
account.currentCursor = postAcc.account.currentCursor;
291
+
}
292
+
return account;
293
+
}
294
+
);
302
295
// throw the records in a big single array
303
296
let records = recordsCutoff.flatMap((postAcc) => postAcc.posts);
304
297
// sort the records by timestamp
···
310
303
(b.value as AppBskyFeedPost.Record).createdAt,
311
304
).getTime();
312
305
return bDate - aDate;
313
-
}
314
-
);
306
+
});
315
307
// filter out posts that are in the future
316
308
if (!Config.SHOW_FUTURE_POSTS) {
317
309
const now = Date.now();
···
322
314
return postDate <= now;
323
315
});
324
316
}
325
-
// append the new posts to the existing posts
326
-
posts = posts.concat(
327
-
records.map((record) => {
328
-
const account = accountsMetadata.find(
329
-
(account) => account.did == processAtUri(record.uri).repo,
317
+
318
+
const newPosts = records.map((record) => {
319
+
const account = accountsMetadata.find(
320
+
(account) => account.did == processAtUri(record.uri).repo,
321
+
);
322
+
if (!account) {
323
+
throw new Error(
324
+
`Account with DID ${processAtUri(record.uri).repo} not found`,
330
325
);
331
-
if (!account) {
332
-
throw new Error(`Account with DID ${processAtUri(record.uri).repo} not found`);
333
-
}
334
-
return new Post(record, account);
335
-
}),
336
-
);
337
-
console.log("Fetched posts:", posts);
338
-
return posts;
326
+
}
327
+
return new Post(record, account);
328
+
});
329
+
// release the mutex
330
+
release();
331
+
return newPosts;
339
332
};
340
333
341
334
const fetchPostsForUser = async (did: At.Did, cursor: string | null) => {
···
355
348
}
356
349
};
357
350
358
-
// const fetchAllPosts = async () => {
359
-
// const users: AccountMetadata[] = await getAllMetadataFromPds();
360
-
// const postRecords = await Promise.all(
361
-
// users.map(
362
-
// async (metadata: AccountMetadata) => await fetchPosts(metadata.did),
363
-
// ),
364
-
// );
365
-
// // Filter out any records that have an error
366
-
// const validPostRecords = postRecords.filter((record) => !record.error);
367
-
368
-
// const posts: Post[] = validPostRecords.flatMap((userFetch) =>
369
-
// userFetch.records.map((record) => {
370
-
// const user = users.find(
371
-
// (user: AccountMetadata) => user.did == userFetch.did,
372
-
// );
373
-
// if (!user) {
374
-
// throw new Error(`User with DID ${userFetch.did} not found`);
375
-
// }
376
-
// return new Post(record, user);
377
-
// })
378
-
// );
379
-
380
-
// posts.sort((a, b) => b.timestamp - a.timestamp);
381
-
382
-
// if (!Config.SHOW_FUTURE_POSTS) {
383
-
// // Filter out posts that are in the future
384
-
// const now = Date.now();
385
-
// const filteredPosts = posts.filter((post) => post.timestamp <= now);
386
-
// return filteredPosts.slice(0, Config.MAX_POSTS);
387
-
// }
388
-
389
-
// return posts.slice(0, Config.MAX_POSTS);
390
-
// };
391
-
export { getAllMetadataFromPds, getNextPosts, Post, posts };
351
+
export { getAllMetadataFromPds, getNextPosts, Post };
392
352
export type { AccountMetadata };
+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
+
}
+370
themes/express/theme.css
+370
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
+
}
241
+
#accountName {
242
+
margin-left: 10px;
243
+
font-size: 1em;
244
+
max-width: 80%;
245
+
246
+
/* replace overflow with ellipsis */
247
+
overflow: hidden;
248
+
text-overflow: ellipsis;
249
+
white-space: nowrap;
250
+
}
251
+
252
+
/* App.Svelte */
253
+
/* desktop style */
254
+
255
+
#Content {
256
+
display: flex;
257
+
/* split the screen in half, left for accounts, right for posts */
258
+
width: 100%;
259
+
height: 100%;
260
+
flex-direction: row;
261
+
justify-content: space-between;
262
+
align-items: center;
263
+
background-color: var(--background-color);
264
+
color: var(--text-color);
265
+
}
266
+
#Feed {
267
+
overflow-y: scroll;
268
+
width: 65%;
269
+
height: 100vh;
270
+
padding: 20px;
271
+
padding-bottom: 0;
272
+
padding-top: 0;
273
+
margin-top: 0;
274
+
margin-bottom: 0;
275
+
}
276
+
#spacer {
277
+
padding: 0;
278
+
margin: 0;
279
+
height: 10vh;
280
+
width: 100%;
281
+
}
282
+
#Account {
283
+
width: 35%;
284
+
display: flex;
285
+
flex-direction: column;
286
+
border: 4px solid var(--border-color);
287
+
background-color: var(--content-background-color);
288
+
box-shadow: var(--border-color) 10px 10px;
289
+
height: 80vh;
290
+
padding: 20px;
291
+
margin-left: 20px;
292
+
}
293
+
#accountsList {
294
+
display: flex;
295
+
flex-direction: column;
296
+
overflow-y: scroll;
297
+
height: 100%;
298
+
width: 100%;
299
+
padding: 0px;
300
+
margin: 0px;
301
+
}
302
+
303
+
#Header {
304
+
text-align: center;
305
+
font-size: 2em;
306
+
margin-bottom: 20px;
307
+
}
308
+
309
+
/* mobile style */
310
+
@media screen and (max-width: 600px) {
311
+
#Content {
312
+
flex-direction: column;
313
+
width: auto;
314
+
padding-left: 0px;
315
+
padding-right: 0px;
316
+
margin-top: 5%;
317
+
}
318
+
#Account {
319
+
width: 85%;
320
+
padding-left: 5%;
321
+
padding-right: 5%;
322
+
margin-bottom: 20px;
323
+
margin-left: 5%;
324
+
margin-right: 5%;
325
+
height: auto;
326
+
}
327
+
#Feed {
328
+
width: 95%;
329
+
margin: 0px;
330
+
margin-left: 10%;
331
+
margin-right: 10%;
332
+
padding: 0px;
333
+
overflow-y: visible;
334
+
}
335
+
336
+
#spacer {
337
+
height: 0;
338
+
}
339
+
}
340
+
341
+
::-webkit-scrollbar {
342
+
width: 0px;
343
+
background: transparent;
344
+
padding: 0;
345
+
margin: 0;
346
+
}
347
+
::-webkit-scrollbar-thumb {
348
+
background: transparent;
349
+
border-radius: 0;
350
+
}
351
+
::-webkit-scrollbar-track {
352
+
background: transparent;
353
+
border-radius: 0;
354
+
}
355
+
::-webkit-scrollbar-corner {
356
+
background: transparent;
357
+
border-radius: 0;
358
+
}
359
+
::-webkit-scrollbar-button {
360
+
background: transparent;
361
+
border-radius: 0;
362
+
}
363
+
364
+
* {
365
+
scrollbar-width: none;
366
+
scrollbar-color: transparent transparent;
367
+
-ms-overflow-style: none; /* IE and Edge */
368
+
-webkit-overflow-scrolling: touch;
369
+
-webkit-scrollbar: none; /* Safari */
370
+
}
+367
themes/witchcraft/theme.css
+367
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
+
}
239
+
#accountName {
240
+
margin-left: 10px;
241
+
font-size: 1em;
242
+
max-width: 80%;
243
+
244
+
/* replace overflow with ellipsis */
245
+
overflow: hidden;
246
+
text-overflow: ellipsis;
247
+
white-space: nowrap;
248
+
}
249
+
250
+
/* App.Svelte */
251
+
/* desktop style */
252
+
253
+
#Content {
254
+
display: flex;
255
+
/* split the screen in half, left for accounts, right for posts */
256
+
width: 100%;
257
+
height: 100%;
258
+
flex-direction: row;
259
+
justify-content: space-between;
260
+
align-items: center;
261
+
background-color: var(--background-color);
262
+
color: var(--text-color);
263
+
}
264
+
#Feed {
265
+
overflow-y: scroll;
266
+
width: 65%;
267
+
height: 100vh;
268
+
padding: 20px;
269
+
padding-bottom: 0;
270
+
padding-top: 0;
271
+
margin-top: 0;
272
+
margin-bottom: 0;
273
+
}
274
+
#spacer {
275
+
padding: 0;
276
+
margin: 0;
277
+
height: 10vh;
278
+
width: 100%;
279
+
}
280
+
#Account {
281
+
width: 35%;
282
+
display: flex;
283
+
flex-direction: column;
284
+
border: 1px solid var(--border-color);
285
+
background-color: var(--content-background-color);
286
+
height: 80vh;
287
+
padding: 20px;
288
+
margin-left: 20px;
289
+
}
290
+
#accountsList {
291
+
display: flex;
292
+
flex-direction: column;
293
+
overflow-y: scroll;
294
+
height: 100%;
295
+
width: 100%;
296
+
padding: 0px;
297
+
margin: 0px;
298
+
}
299
+
300
+
#Header {
301
+
text-align: center;
302
+
font-size: 2em;
303
+
margin-bottom: 20px;
304
+
}
305
+
306
+
/* mobile style */
307
+
@media screen and (max-width: 600px) {
308
+
#Content {
309
+
flex-direction: column;
310
+
width: auto;
311
+
padding-left: 0px;
312
+
padding-right: 0px;
313
+
margin-top: 5%;
314
+
}
315
+
#Account {
316
+
width: 85%;
317
+
padding-left: 5%;
318
+
padding-right: 5%;
319
+
margin-bottom: 20px;
320
+
margin-left: 5%;
321
+
margin-right: 5%;
322
+
height: auto;
323
+
}
324
+
#Feed {
325
+
width: 95%;
326
+
margin: 0px;
327
+
margin-left: 10%;
328
+
margin-right: 10%;
329
+
padding: 0px;
330
+
overflow-y: visible;
331
+
}
332
+
333
+
#spacer {
334
+
height: 0;
335
+
}
336
+
}
337
+
338
+
::-webkit-scrollbar {
339
+
width: 0px;
340
+
background: transparent;
341
+
padding: 0;
342
+
margin: 0;
343
+
}
344
+
::-webkit-scrollbar-thumb {
345
+
background: transparent;
346
+
border-radius: 0;
347
+
}
348
+
::-webkit-scrollbar-track {
349
+
background: transparent;
350
+
border-radius: 0;
351
+
}
352
+
::-webkit-scrollbar-corner {
353
+
background: transparent;
354
+
border-radius: 0;
355
+
}
356
+
::-webkit-scrollbar-button {
357
+
background: transparent;
358
+
border-radius: 0;
359
+
}
360
+
361
+
* {
362
+
scrollbar-width: none;
363
+
scrollbar-color: transparent transparent;
364
+
-ms-overflow-style: none; /* IE and Edge */
365
+
-webkit-overflow-scrolling: touch;
366
+
-webkit-scrollbar: none; /* Safari */
367
+
}
+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
});