baileytownsend.dev
A fork of pds-dash for selfhosted.social
idk i found the deno lint and fmt commands
+2
-3
.forgejo/workflows/deploy.yaml
+2
-3
.forgejo/workflows/deploy.yaml
···
6
- main
7
- astra/ci
8
9
-
10
jobs:
11
deploy:
12
name: Deploy
···
25
26
- name: Copy config file to root
27
run: cp overrides/config.ts ./config.ts
28
-
29
- name: Setup Node.js
30
uses: actions/setup-node@v3
31
with:
32
-
node-version: '20'
33
34
- name: Setup Deno
35
uses: https://github.com/denoland/setup-deno@v2
···
6
- main
7
- astra/ci
8
9
jobs:
10
deploy:
11
name: Deploy
···
24
25
- name: Copy config file to root
26
run: cp overrides/config.ts ./config.ts
27
+
28
- name: Setup Node.js
29
uses: actions/setup-node@v3
30
with:
31
+
node-version: "20"
32
33
- name: Setup Deno
34
uses: https://github.com/denoland/setup-deno@v2
+25
-12
README.md
+25
-12
README.md
···
1
# pds-dash
2
3
-
A fork of [pds-dash](https://git.witchcraft.systems/scientific-witchery/pds-dash) for [selfhosted.social](https://selfhosted.social). The top part of the readme is about this fork.
4
-
See after [Original Readme](#original-readme) to see the original readme for setup
5
6
This fork is much the same but a few differences:
7
- [New theme](/themes/dark/theme.css)
8
-
- Uses the CDN for loading images and videos instead of `com.atproto.sync.getBlob`
9
-
- Caches a couple of things like did -> handle and PDS user profile lexicon inside localstorage. Not the best, but was simpler and has a expire on get.
10
- The text "Home to x accounts" only shows active accounts.
11
- I did add a sponsor button for my GitHub.
12
13
-
An example of a caddy file you can use
14
```caddyfile
15
# Should be all the endpoints a PDS calls
16
@pds {
···
31
try_files {path} /index.html
32
file_server
33
}
34
-
35
```
36
-
37
38
# Original Readme
39
···
47
48
### installing
49
50
-
clone the repo, copy `config.ts.example` to `config.ts` and edit it to your liking.
51
52
then, install dependencies using deno:
53
···
75
76
## deploying
77
78
-
we use our own CI/CD workflow at [`.forgejo/workflows/deploy.yaml`](.forgejo/workflows/deploy.yaml), but it boils down to building the project bundle and deploying it to a web server. it'll probably make more sense to host it on the same domain as your PDS, but it doesn't affect anything if you host it somewhere else.
79
80
## configuring
81
82
-
[`config.ts`](config.ts) is the main configuration file, you can find more information in the file itself.
83
84
## theming
85
86
-
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.
87
88
-
currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
89
90
you can switch themes by changing the `theme` property in `config.ts`.
91
···
1
# pds-dash
2
3
+
A fork of
4
+
[pds-dash](https://git.witchcraft.systems/scientific-witchery/pds-dash) for
5
+
[selfhosted.social](https://selfhosted.social). The top part of the readme is
6
+
about this fork. See after [Original Readme](#original-readme) to see the
7
+
original readme for setup
8
9
This fork is much the same but a few differences:
10
+
11
- [New theme](/themes/dark/theme.css)
12
+
- Uses the CDN for loading images and videos instead of
13
+
`com.atproto.sync.getBlob`
14
+
- Caches a couple of things like did -> handle and PDS user profile lexicon
15
+
inside localstorage. Not the best, but was simpler and has a expire on get.
16
- The text "Home to x accounts" only shows active accounts.
17
- I did add a sponsor button for my GitHub.
18
19
+
An example of a caddy file you can use
20
+
21
```caddyfile
22
# Should be all the endpoints a PDS calls
23
@pds {
···
38
try_files {path} /index.html
39
file_server
40
}
41
```
42
43
# Original Readme
44
···
52
53
### installing
54
55
+
clone the repo, copy `config.ts.example` to `config.ts` and edit it to your
56
+
liking.
57
58
then, install dependencies using deno:
59
···
81
82
## deploying
83
84
+
we use our own CI/CD workflow at
85
+
[`.forgejo/workflows/deploy.yaml`](.forgejo/workflows/deploy.yaml), but it boils
86
+
down to building the project bundle and deploying it to a web server. it'll
87
+
probably make more sense to host it on the same domain as your PDS, but it
88
+
doesn't affect anything if you host it somewhere else.
89
90
## configuring
91
92
+
[`config.ts`](config.ts) is the main configuration file, you can find more
93
+
information in the file itself.
94
95
## theming
96
97
+
themes are located in the `themes/` directory, you can create your own theme by
98
+
copying one of the existing themes and modifying it to your liking.
99
100
+
currently, the name of the theme is determined by the directory name, and the
101
+
theme itself is defined in `theme.css` inside that directory.
102
103
you can switch themes by changing the `theme` property in `config.ts`.
104
+69
deno.lock
+69
deno.lock
···
4
"npm:@atcute/bluesky@^2.0.2": "2.0.2_@atcute+client@3.0.1",
5
"npm:@atcute/client@^3.0.1": "3.0.1",
6
"npm:@atcute/identity-resolver@~0.1.2": "0.1.2_@atcute+identity@0.1.3",
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
"npm:@tsconfig/svelte@^5.0.4": "5.0.4",
9
"npm:hls.js@^1.6.12": "1.6.12",
···
52
"@badrap/valita"
53
]
54
},
55
"@badrap/valita@0.4.4": {
56
"integrity": "sha512-GEhUCk9c4XbNxi+0YZHZsV4fYNd6HejfWuN4Ti4c02DauX+LyX5WY1Y3WfyZ8Pxxl0zqhs+MLtW98cMh86vv6g=="
57
},
···
345
"aria-query@5.3.2": {
346
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
347
},
348
"axobject-query@4.1.0": {
349
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
350
},
···
421
"os": ["darwin"],
422
"scripts": true
423
},
424
"hls.js@1.6.12": {
425
"integrity": "sha512-Pz+7IzvkbAht/zXvwLzA/stUHNqztqKvlLbfpq6ZYU68+gZ+CZMlsbQBPUviRap+3IQ41E39ke7Ia+yvhsehEQ=="
426
},
···
430
"@types/estree"
431
]
432
},
433
"kleur@4.1.5": {
434
"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
435
},
···
450
},
451
"ms@2.1.3": {
452
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
453
},
454
"mutex-ts@1.2.1": {
455
"integrity": "sha512-OkcXgf0viuCgYdnm48kiNQ9PzC5OzISQ261svHr/Ybc2vBYC/5xfLXn44hQ+dYRX74v7MCSqV/LKPEbpYdDybw=="
···
556
"picomatch"
557
]
558
},
559
"typescript@5.7.3": {
560
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
561
"bin": true
562
},
563
"vite@6.3.2_picomatch@4.0.2": {
564
"integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
···
586
},
587
"zimmerframe@1.1.2": {
588
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
589
}
590
},
591
"workspace": {
···
594
"npm:@atcute/bluesky@^2.0.2",
595
"npm:@atcute/client@^3.0.1",
596
"npm:@atcute/identity-resolver@~0.1.2",
597
"npm:@sveltejs/vite-plugin-svelte@^5.0.3",
598
"npm:@tsconfig/svelte@^5.0.4",
599
"npm:hls.js@^1.6.12",
···
4
"npm:@atcute/bluesky@^2.0.2": "2.0.2_@atcute+client@3.0.1",
5
"npm:@atcute/client@^3.0.1": "3.0.1",
6
"npm:@atcute/identity-resolver@~0.1.2": "0.1.2_@atcute+identity@0.1.3",
7
+
"npm:@atproto/api@~0.16.9": "0.16.9",
8
"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",
9
"npm:@tsconfig/svelte@^5.0.4": "5.0.4",
10
"npm:hls.js@^1.6.12": "1.6.12",
···
53
"@badrap/valita"
54
]
55
},
56
+
"@atproto/api@0.16.9": {
57
+
"integrity": "sha512-hXbnBIDEIwXxxyduxxZsf0aP8Z+JKyfG7L47FZqAYOI6uNm8oBTLLrHQ2RmJZZeyMIMM17gvxNtPDoULKQfupw==",
58
+
"dependencies": [
59
+
"@atproto/common-web",
60
+
"@atproto/lexicon",
61
+
"@atproto/syntax",
62
+
"@atproto/xrpc",
63
+
"await-lock",
64
+
"multiformats",
65
+
"tlds",
66
+
"zod"
67
+
]
68
+
},
69
+
"@atproto/common-web@0.4.3": {
70
+
"integrity": "sha512-nRDINmSe4VycJzPo6fP/hEltBcULFxt9Kw7fQk6405FyAWZiTluYHlXOnU7GkQfeUK44OENG1qFTBcmCJ7e8pg==",
71
+
"dependencies": [
72
+
"graphemer",
73
+
"multiformats",
74
+
"uint8arrays",
75
+
"zod"
76
+
]
77
+
},
78
+
"@atproto/lexicon@0.5.1": {
79
+
"integrity": "sha512-y8AEtYmfgVl4fqFxqXAeGvhesiGkxiy3CWoJIfsFDDdTlZUC8DFnZrYhcqkIop3OlCkkljvpSJi1hbeC1tbi8A==",
80
+
"dependencies": [
81
+
"@atproto/common-web",
82
+
"@atproto/syntax",
83
+
"iso-datestring-validator",
84
+
"multiformats",
85
+
"zod"
86
+
]
87
+
},
88
+
"@atproto/syntax@0.4.1": {
89
+
"integrity": "sha512-CJdImtLAiFO+0z3BWTtxwk6aY5w4t8orHTMVJgkf++QRJWTxPbIFko/0hrkADB7n2EruDxDSeAgfUGehpH6ngw=="
90
+
},
91
+
"@atproto/xrpc@0.7.5": {
92
+
"integrity": "sha512-MUYNn5d2hv8yVegRL0ccHvTHAVj5JSnW07bkbiaz96UH45lvYNRVwt44z+yYVnb0/mvBzyD3/ZQ55TRGt7fHkA==",
93
+
"dependencies": [
94
+
"@atproto/lexicon",
95
+
"zod"
96
+
]
97
+
},
98
"@badrap/valita@0.4.4": {
99
"integrity": "sha512-GEhUCk9c4XbNxi+0YZHZsV4fYNd6HejfWuN4Ti4c02DauX+LyX5WY1Y3WfyZ8Pxxl0zqhs+MLtW98cMh86vv6g=="
100
},
···
388
"aria-query@5.3.2": {
389
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
390
},
391
+
"await-lock@2.2.2": {
392
+
"integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw=="
393
+
},
394
"axobject-query@4.1.0": {
395
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
396
},
···
467
"os": ["darwin"],
468
"scripts": true
469
},
470
+
"graphemer@1.4.0": {
471
+
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
472
+
},
473
"hls.js@1.6.12": {
474
"integrity": "sha512-Pz+7IzvkbAht/zXvwLzA/stUHNqztqKvlLbfpq6ZYU68+gZ+CZMlsbQBPUviRap+3IQ41E39ke7Ia+yvhsehEQ=="
475
},
···
479
"@types/estree"
480
]
481
},
482
+
"iso-datestring-validator@2.2.2": {
483
+
"integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA=="
484
+
},
485
"kleur@4.1.5": {
486
"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
487
},
···
502
},
503
"ms@2.1.3": {
504
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
505
+
},
506
+
"multiformats@9.9.0": {
507
+
"integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg=="
508
},
509
"mutex-ts@1.2.1": {
510
"integrity": "sha512-OkcXgf0viuCgYdnm48kiNQ9PzC5OzISQ261svHr/Ybc2vBYC/5xfLXn44hQ+dYRX74v7MCSqV/LKPEbpYdDybw=="
···
611
"picomatch"
612
]
613
},
614
+
"tlds@1.260.0": {
615
+
"integrity": "sha512-78+28EWBhCEE7qlyaHA9OR3IPvbCLiDh3Ckla593TksfFc9vfTsgvH7eS+dr3o9qr31gwGbogcI16yN91PoRjQ==",
616
+
"bin": true
617
+
},
618
"typescript@5.7.3": {
619
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
620
"bin": true
621
+
},
622
+
"uint8arrays@3.0.0": {
623
+
"integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==",
624
+
"dependencies": [
625
+
"multiformats"
626
+
]
627
},
628
"vite@6.3.2_picomatch@4.0.2": {
629
"integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
···
651
},
652
"zimmerframe@1.1.2": {
653
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
654
+
},
655
+
"zod@3.25.76": {
656
+
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="
657
}
658
},
659
"workspace": {
···
662
"npm:@atcute/bluesky@^2.0.2",
663
"npm:@atcute/client@^3.0.1",
664
"npm:@atcute/identity-resolver@~0.1.2",
665
+
"npm:@atproto/api@~0.16.9",
666
"npm:@sveltejs/vite-plugin-svelte@^5.0.3",
667
"npm:@tsconfig/svelte@^5.0.4",
668
"npm:hls.js@^1.6.12",
+4
-2
index.html
+4
-2
index.html
+1
package.json
+1
package.json
+2
-2
src/app.css
+2
-2
src/app.css
+63
-6
src/lib/AccountComponent.svelte
+63
-6
src/lib/AccountComponent.svelte
···
32
src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
33
/>
34
</span>
35
-
<div id="accountName">
36
-
{account.displayName || account.handle || account.did}
37
</div>
38
{:else}
39
<span class="avatar-wrapper">
···
47
src="/unknown.png"
48
/>
49
</span>
50
-
<div id="accountName" class="no-avatar">
51
-
{account.displayName || account.handle || account.did}
52
</div>
53
{/if}
54
</div>
55
</a>
56
57
<style>
58
-
.avatar-wrapper { position: relative; display: inline-block; }
59
-
.avatar-badge { position: absolute; top: 34px; left: 40px; font-size: 24px; line-height: 1; }
60
</style>
···
32
src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
33
/>
34
</span>
35
+
<div class="name-block" style="margin-left: 12px;">
36
+
<div id="accountName" style="margin-left: 0;">
37
+
{account.displayName || account.handle || account.did}
38
+
</div>
39
+
{#if nowListeningTo}
40
+
<div class="now-playing"><span>{nowListeningTo}</span></div>
41
+
{/if}
42
</div>
43
{:else}
44
<span class="avatar-wrapper">
···
52
src="/unknown.png"
53
/>
54
</span>
55
+
<div class="name-block" style="margin-left: 12px;">
56
+
<div id="accountName" style="margin-left: 0;">
57
+
{account.displayName || account.handle || account.did}
58
+
</div>
59
+
{#if nowListeningTo}
60
+
<div class="now-playing"><span>{nowListeningTo}</span></div>
61
+
{/if}
62
</div>
63
{/if}
64
</div>
65
</a>
66
67
<style>
68
+
.avatar-wrapper {
69
+
position: relative;
70
+
display: inline-block;
71
+
}
72
+
73
+
.avatar-badge {
74
+
position: absolute;
75
+
top: 34px;
76
+
left: 40px;
77
+
font-size: 24px;
78
+
line-height: 1;
79
+
}
80
+
81
+
.name-block {
82
+
display: flex;
83
+
flex-direction: column;
84
+
min-width: 0;
85
+
flex: 1;
86
+
}
87
+
88
+
#accountName {
89
+
max-width: 100%;
90
+
overflow: hidden;
91
+
text-overflow: ellipsis;
92
+
white-space: nowrap;
93
+
}
94
+
95
+
.now-playing {
96
+
font-size: 0.8em;
97
+
opacity: 0.8;
98
+
margin-top: 2px;
99
+
white-space: nowrap;
100
+
overflow: hidden;
101
+
}
102
+
103
+
.now-playing > span {
104
+
display: inline-block;
105
+
padding-left: 100%;
106
+
animation: account-now-playing-marquee 25s linear infinite;
107
+
}
108
+
109
+
@keyframes account-now-playing-marquee {
110
+
from {
111
+
transform: translateX(0);
112
+
}
113
+
to {
114
+
transform: translateX(-100%);
115
+
}
116
+
}
117
</style>
+13
-1
src/lib/PostComponent.svelte
+13
-1
src/lib/PostComponent.svelte
···
136
.quotingUri.rkey}">quoting {post.quotingUri.repo}</a
137
>
138
{/if}
139
+
<div id="postText">
140
+
{#each post.richText.segments() as segment}
141
+
{#if segment.mention}
142
+
<a href="{Config.FRONTEND_URL}/profile/{segment.mention.did}"
143
+
>{segment.text}</a
144
+
>
145
+
{:else if segment.link}
146
+
<a style="text-decoration: underline" href="{segment.link.uri}">{segment.text}</a>
147
+
{:else if segment.text}
148
+
{segment.text}
149
+
{/if}
150
+
{/each}
151
+
</div>
152
{#if post.imagesCid && post.imagesCid.length > 0}
153
<div id="carouselContainer">
154
<img
+103
-95
src/lib/pdsfetch.ts
+103
-95
src/lib/pdsfetch.ts
···
1
import { simpleFetchHandler, XRPC } from "@atcute/client";
2
import "@atcute/bluesky/lexicons";
3
import type {
4
-
AppBskyActorDefs,
5
AppBskyActorProfile,
6
AppBskyFeedPost,
7
At,
8
ComAtprotoRepoListRecords,
···
12
PlcDidDocumentResolver,
13
WebDidDocumentResolver,
14
} from "@atcute/identity-resolver";
15
-
import { Config } from "../../config";
16
-
import { Mutex } from "mutex-ts"
17
import moment from "moment";
18
-
import type {DidDocument} from "@atcute/client/utils/did";
19
// import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
20
// import { AppBskyFeedPost } from "@atcute/client/lexicons";
21
// import { AppBskyActorDefs } from "@atcute/client/lexicons";
···
50
imagesCid: string[] | null;
51
videosLinkCid: string | null;
52
gifLink: string | null;
53
54
constructor(
55
record: ComAtprotoRepoListRecords.Record,
56
account: AccountMetadata,
57
) {
58
this.postCid = record.cid;
59
this.recordName = processAtUri(record.uri).rkey;
60
this.authorDid = account.did;
···
77
switch (post.embed?.$type) {
78
case "app.bsky.embed.images":
79
this.imagesCid = post.embed.images.map(
80
-
(imageRecord: any) => imageRecord.image.ref.$link,
81
);
82
break;
83
case "app.bsky.embed.video":
···
119
};
120
};
121
122
-
123
const rpc = new XRPC({
124
handler: simpleFetchHandler({
125
service: Config.PDS_URL,
126
}),
127
});
128
129
-
const slingShot = new XRPC({
130
-
handler: simpleFetchHandler({
131
-
service: "https://slingshot.microcosm.blue",
132
-
}),
133
-
});
134
-
135
const getDidsFromPDS = async (): Promise<At.Did[]> => {
136
const { data } = await rpc.get("com.atproto.sync.listRepos", {
137
params: {
138
-
limit: 1000,
139
},
140
});
141
-
return data.repos.filter(x => x.active).map((repo: any) => repo.did).reverse() as At.Did[];
142
};
143
const getAccountMetadata = async (
144
did: `did:${string}:${string}`,
···
213
const localStorageKey = `did-handle:${did}`;
214
const cachedResult = cacheGet<string>(localStorageKey);
215
if (cachedResult) {
216
-
return cachedResult;
217
}
218
const doc = await identityResolve(did);
219
if (doc.alsoKnownAs) {
···
267
return postDate >= cutoffDate;
268
});
269
if (filtered.length > 0) {
270
-
postAcc.account.currentCursor = processAtUri(filtered[filtered.length - 1].uri).rkey;
271
}
272
return {
273
posts: filtered,
···
318
account.currentCursor = postAcc.account.currentCursor;
319
}
320
return account;
321
-
}
322
-
);
323
// throw the records in a big single array
324
let records = recordsCutoff.flatMap((postAcc) => postAcc.posts);
325
// sort the records by timestamp
···
352
`Account with DID ${processAtUri(record.uri).repo} not found`,
353
);
354
}
355
-
return new Post(record, account);
356
});
357
// release the mutex
358
release();
···
377
};
378
379
type artists = {
380
-
artistName: string;
381
-
}
382
383
type dietTeal = {
384
-
artists: artists[];
385
-
trackName: string;
386
-
playedTime: number;
387
-
}
388
389
-
const getTealNowListeningTo = async (did: At.Did) => {
390
-
const { data } = await rpc.get("com.atproto.repo.listRecords", {
391
-
params: {
392
-
repo: did as At.Identifier,
393
-
collection: "fm.teal.alpha.feed.play",
394
-
limit: 1
395
-
},
396
-
});
397
-
if (data.records.length > 0) {
398
-
const record = data.records[0] as ComAtprotoRepoListRecords.Record;
399
-
const value = record.value as dietTeal;
400
-
const artists = value.artists.map((artist) => artist.artistName).join(", ");
401
-
const timeStamp = moment(value.playedTime).isBefore(moment().subtract(1, "month"))
402
-
? moment(value.playedTime).format("MMM D, YYYY")
403
-
: moment(value.playedTime).fromNow()
404
-
return `Listening to ${value.trackName} by ${artists} ${timeStamp}`;
405
-
}
406
-
console.log(data);
407
-
return null;
408
-
}
409
410
type statusSphere = {
411
-
status: string;
412
-
}
413
414
const getStatusSphere = async (did: At.Did) => {
415
-
const { data } = await rpc.get("com.atproto.repo.listRecords", {
416
-
params: {
417
-
repo: did as At.Identifier,
418
-
collection: "xyz.statusphere.status",
419
-
limit: 1
420
-
},
421
-
});
422
-
if (data.records.length > 0) {
423
-
const record = data.records[0].value as statusSphere;
424
-
return record.status;
425
-
}
426
-
return null;
427
-
}
428
429
type CacheEntry<T> = {
430
-
data: T;
431
-
expire_timestamp: number;
432
-
}
433
-
434
435
const cacheSet = <T>(key: string, value: T) => {
436
-
try{
437
-
const day = 60 * 60 * 24 * 1000;
438
-
const cacheData: CacheEntry<T> = {
439
-
data: value,
440
-
expire_timestamp: Date.now() + day
441
-
}
442
-
localStorage.setItem(key, JSON.stringify(cacheData));
443
-
}
444
-
catch(e){
445
-
console.error("Error caching data:", e);
446
-
//Going just clear the cache and assume it's full.
447
-
localStorage.clear();
448
-
}
449
-
}
450
451
const cacheGet = <T>(key: string): T | null => {
452
-
try{
453
-
const cachedData = localStorage.getItem(key);
454
-
if (cachedData) {
455
-
const parsedData = JSON.parse(cachedData) as CacheEntry<T>;
456
-
if (parsedData.expire_timestamp > Date.now() ) {
457
-
return parsedData.data;
458
-
} else {
459
-
localStorage.removeItem(key);
460
-
}
461
-
}
462
-
//Return null if empty or expired
463
-
return null;
464
-
}catch(e){
465
-
console.error("Error fetching data from cache:", e);
466
-
return null;
467
}
468
-
}
469
470
-
export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo, getStatusSphere };
471
export type { AccountMetadata };
···
1
import { simpleFetchHandler, XRPC } from "@atcute/client";
2
import "@atcute/bluesky/lexicons";
3
import type {
4
AppBskyActorProfile,
5
+
AppBskyEmbedImages,
6
AppBskyFeedPost,
7
At,
8
ComAtprotoRepoListRecords,
···
12
PlcDidDocumentResolver,
13
WebDidDocumentResolver,
14
} from "@atcute/identity-resolver";
15
+
import { Config } from "../../config.ts";
16
+
import { Mutex } from "mutex-ts";
17
import moment from "moment";
18
+
import { RichText } from "@atproto/api";
19
+
20
// import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
21
// import { AppBskyFeedPost } from "@atcute/client/lexicons";
22
// import { AppBskyActorDefs } from "@atcute/client/lexicons";
···
51
imagesCid: string[] | null;
52
videosLinkCid: string | null;
53
gifLink: string | null;
54
+
richText: RichText;
55
56
constructor(
57
record: ComAtprotoRepoListRecords.Record,
58
account: AccountMetadata,
59
+
richText: RichText,
60
) {
61
+
this.richText = richText;
62
this.postCid = record.cid;
63
this.recordName = processAtUri(record.uri).rkey;
64
this.authorDid = account.did;
···
81
switch (post.embed?.$type) {
82
case "app.bsky.embed.images":
83
this.imagesCid = post.embed.images.map(
84
+
(imageRecord: AppBskyEmbedImages.Image) =>
85
+
imageRecord.image.ref.$link,
86
);
87
break;
88
case "app.bsky.embed.video":
···
124
};
125
};
126
127
const rpc = new XRPC({
128
handler: simpleFetchHandler({
129
service: Config.PDS_URL,
130
}),
131
});
132
133
const getDidsFromPDS = async (): Promise<At.Did[]> => {
134
const { data } = await rpc.get("com.atproto.sync.listRepos", {
135
params: {
136
+
limit: 1000,
137
},
138
});
139
+
return data.repos.filter((x) => x.active).map((repo: Repo) => repo.did)
140
+
.reverse() as At.Did[];
141
};
142
const getAccountMetadata = async (
143
did: `did:${string}:${string}`,
···
212
const localStorageKey = `did-handle:${did}`;
213
const cachedResult = cacheGet<string>(localStorageKey);
214
if (cachedResult) {
215
+
return cachedResult;
216
}
217
const doc = await identityResolve(did);
218
if (doc.alsoKnownAs) {
···
266
return postDate >= cutoffDate;
267
});
268
if (filtered.length > 0) {
269
+
postAcc.account.currentCursor =
270
+
processAtUri(filtered[filtered.length - 1].uri).rkey;
271
}
272
return {
273
posts: filtered,
···
318
account.currentCursor = postAcc.account.currentCursor;
319
}
320
return account;
321
+
});
322
// throw the records in a big single array
323
let records = recordsCutoff.flatMap((postAcc) => postAcc.posts);
324
// sort the records by timestamp
···
351
`Account with DID ${processAtUri(record.uri).repo} not found`,
352
);
353
}
354
+
const post = record.value as AppBskyFeedPost.Record;
355
+
const richText = new RichText({ text: post.text, facets: post.facets });
356
+
357
+
return new Post(record, account, richText);
358
});
359
// release the mutex
360
release();
···
379
};
380
381
type artists = {
382
+
artistName: string;
383
+
};
384
385
type dietTeal = {
386
+
artists: artists[];
387
+
trackName: string;
388
+
playedTime: number;
389
+
};
390
391
+
const getTealNowListeningTo = async (did: At.Did) => {
392
+
const { data } = await rpc.get("com.atproto.repo.listRecords", {
393
+
params: {
394
+
repo: did as At.Identifier,
395
+
collection: "fm.teal.alpha.feed.play",
396
+
limit: 1,
397
+
},
398
+
});
399
+
if (data.records.length > 0) {
400
+
const record = data.records[0] as ComAtprotoRepoListRecords.Record;
401
+
const value = record.value as dietTeal;
402
+
const artists = value.artists.map((artist) => artist.artistName).join(", ");
403
+
const timeStamp =
404
+
moment(value.playedTime).isBefore(moment().subtract(1, "month"))
405
+
? moment(value.playedTime).format("MMM D, YYYY")
406
+
: moment(value.playedTime).fromNow();
407
+
return `Listening to ${value.trackName} by ${artists} ${timeStamp}`;
408
+
}
409
+
console.log(data);
410
+
return null;
411
+
};
412
413
type statusSphere = {
414
+
status: string;
415
+
};
416
417
const getStatusSphere = async (did: At.Did) => {
418
+
const { data } = await rpc.get("com.atproto.repo.listRecords", {
419
+
params: {
420
+
repo: did as At.Identifier,
421
+
collection: "xyz.statusphere.status",
422
+
limit: 1,
423
+
},
424
+
});
425
+
if (data.records.length > 0) {
426
+
const record = data.records[0].value as statusSphere;
427
+
return record.status;
428
+
}
429
+
return null;
430
+
};
431
432
type CacheEntry<T> = {
433
+
data: T;
434
+
expire_timestamp: number;
435
+
};
436
437
const cacheSet = <T>(key: string, value: T) => {
438
+
try {
439
+
const day = 60 * 60 * 24 * 1000;
440
+
const cacheData: CacheEntry<T> = {
441
+
data: value,
442
+
expire_timestamp: Date.now() + day,
443
+
};
444
+
localStorage.setItem(key, JSON.stringify(cacheData));
445
+
} catch (e) {
446
+
console.error("Error caching data:", e);
447
+
//Going just clear the cache and assume it's full.
448
+
localStorage.clear();
449
+
}
450
+
};
451
452
const cacheGet = <T>(key: string): T | null => {
453
+
try {
454
+
const cachedData = localStorage.getItem(key);
455
+
if (cachedData) {
456
+
const parsedData = JSON.parse(cachedData) as CacheEntry<T>;
457
+
if (parsedData.expire_timestamp > Date.now()) {
458
+
return parsedData.data;
459
+
} else {
460
+
localStorage.removeItem(key);
461
+
}
462
}
463
+
//Return null if empty or expired
464
+
return null;
465
+
} catch (e) {
466
+
console.error("Error fetching data from cache:", e);
467
+
return null;
468
+
}
469
+
};
470
471
+
export {
472
+
blueskyHandleFromDid,
473
+
getAllMetadataFromPds,
474
+
getNextPosts,
475
+
getStatusSphere,
476
+
getTealNowListeningTo,
477
+
Post,
478
+
};
479
export type { AccountMetadata };
+27
-8
themes/dark/theme.css
+27
-8
themes/dark/theme.css
···
43
--header-background-color: var(--color-base-200);
44
--content-background-color: var(--color-base-200);
45
--text-color: var(--color-base-content);
46
-
--text-secondary-color: color-mix(in oklab, var(--color-base-content) 70%, var(--color-base-100));
47
--border-color: var(--color-base-300);
48
--link-color: var(--color-primary);
49
--link-hover-color: var(--color-primary-content);
···
52
--indicator-active-color: var(--color-primary);
53
54
/* Subtle hover background for dark */
55
-
--button-hover: color-mix(in oklab, var(--color-base-200) 80%, var(--color-base-content));
56
}
57
-
58
59
body {
60
margin: 0;
···
63
min-width: 320px;
64
min-height: 100vh;
65
background-color: var(--background-color);
66
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
67
font-size: 18px;
68
line-height: 1.5;
69
color: var(--text-color);
···
113
114
#postContainer:hover {
115
transform: translateY(-2px);
116
-
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
117
}
118
119
#postHeader {
···
320
object-fit: cover;
321
border-radius: 50%;
322
border: 2px solid white;
323
-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
324
}
325
326
/* App.Svelte Layout */
···
501
--header-background-color: var(--color-base-200);
502
--content-background-color: var(--color-base-200);
503
--text-color: var(--color-base-content);
504
-
--text-secondary-color: color-mix(in oklab, var(--color-base-content) 70%, var(--color-base-100));
505
--border-color: var(--color-base-300);
506
--link-color: var(--color-primary);
507
--link-hover-color: var(--color-primary-content);
···
510
--indicator-active-color: var(--color-primary);
511
512
/* Subtle hover background for dark */
513
-
--button-hover: color-mix(in oklab, var(--color-base-200) 80%, var(--color-base-content));
514
}
···
43
--header-background-color: var(--color-base-200);
44
--content-background-color: var(--color-base-200);
45
--text-color: var(--color-base-content);
46
+
--text-secondary-color: color-mix(
47
+
in oklab,
48
+
var(--color-base-content) 70%,
49
+
var(--color-base-100)
50
+
);
51
--border-color: var(--color-base-300);
52
--link-color: var(--color-primary);
53
--link-hover-color: var(--color-primary-content);
···
56
--indicator-active-color: var(--color-primary);
57
58
/* Subtle hover background for dark */
59
+
--button-hover: color-mix(
60
+
in oklab,
61
+
var(--color-base-200) 80%,
62
+
var(--color-base-content)
63
+
);
64
}
65
66
body {
67
margin: 0;
···
70
min-width: 320px;
71
min-height: 100vh;
72
background-color: var(--background-color);
73
+
font-family:
74
+
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
75
+
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
76
font-size: 18px;
77
line-height: 1.5;
78
color: var(--text-color);
···
122
123
#postContainer:hover {
124
transform: translateY(-2px);
125
+
box-shadow:
126
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
127
+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
128
}
129
130
#postHeader {
···
331
object-fit: cover;
332
border-radius: 50%;
333
border: 2px solid white;
334
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
335
}
336
337
/* App.Svelte Layout */
···
512
--header-background-color: var(--color-base-200);
513
--content-background-color: var(--color-base-200);
514
--text-color: var(--color-base-content);
515
+
--text-secondary-color: color-mix(
516
+
in oklab,
517
+
var(--color-base-content) 70%,
518
+
var(--color-base-100)
519
+
);
520
--border-color: var(--color-base-300);
521
--link-color: var(--color-primary);
522
--link-hover-color: var(--color-primary-content);
···
525
--indicator-active-color: var(--color-primary);
526
527
/* Subtle hover background for dark */
528
+
--button-hover: color-mix(
529
+
in oklab,
530
+
var(--color-base-200) 80%,
531
+
var(--color-base-content)
532
+
);
533
}
+12
-9
themes/default/theme.css
+12
-9
themes/default/theme.css
···
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;
···
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);
···
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 {
···
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 */
···
357
padding: 12px;
358
margin-top: 0;
359
}
360
-
361
#Account {
362
width: calc(100% - 32px);
363
padding: 16px;
···
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
}
···
420
-ms-overflow-style: none; /* IE and Edge */
421
-webkit-overflow-scrolling: touch;
422
-webkit-scrollbar: none; /* Safari */
423
-
}
···
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
body {
23
margin: 0;
···
26
min-width: 320px;
27
min-height: 100vh;
28
background-color: var(--background-color);
29
+
font-family:
30
+
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
31
+
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
32
font-size: 18px;
33
line-height: 1.5;
34
color: var(--text-color);
···
78
79
#postContainer:hover {
80
transform: translateY(-2px);
81
+
box-shadow:
82
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
83
+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
84
}
85
86
#postHeader {
···
287
object-fit: cover;
288
border-radius: 50%;
289
border: 2px solid white;
290
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
291
}
292
293
/* App.Svelte Layout */
···
360
padding: 12px;
361
margin-top: 0;
362
}
363
+
364
#Account {
365
width: calc(100% - 32px);
366
padding: 16px;
···
370
height: auto;
371
order: -1;
372
}
373
+
374
#Feed {
375
width: 100%;
376
margin: 0;
377
padding: 0;
378
overflow-y: visible;
379
}
380
+
381
#spacer {
382
height: 5vh;
383
}
···
423
-ms-overflow-style: none; /* IE and Edge */
424
-webkit-overflow-scrolling: touch;
425
-webkit-scrollbar: none; /* Safari */
426
+
}
+1
-1
themes/express/theme.css
+1
-1
themes/express/theme.css
+3
-5
themes/witchcraft/theme.css
+3
-5
themes/witchcraft/theme.css
···
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%);
···
17
--indicator-inactive-color: #4a4a4a;
18
--indicator-active-color: var(--border-color);
19
}
20
-
21
22
a {
23
font-weight: 500;
···
248
white-space: nowrap;
249
}
250
251
-
252
.no-avatar {
253
-
margin-left: 70px !important;
254
}
255
256
/* App.Svelte */
···
370
-ms-overflow-style: none; /* IE and Edge */
371
-webkit-overflow-scrolling: touch;
372
-webkit-scrollbar: none; /* Safari */
373
-
}
···
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%);
···
17
--indicator-inactive-color: #4a4a4a;
18
--indicator-active-color: var(--border-color);
19
}
20
21
a {
22
font-weight: 500;
···
247
white-space: nowrap;
248
}
249
250
.no-avatar {
251
+
margin-left: 70px !important;
252
}
253
254
/* App.Svelte */
···
368
-ms-overflow-style: none; /* IE and Edge */
369
-webkit-overflow-scrolling: touch;
370
-webkit-scrollbar: none; /* Safari */
371
+
}
+30
-27
theming.ts
+30
-27
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
-
};
···
1
+
import { Plugin } from "vite";
2
+
import { Config } from "./config";
3
4
// Replaces app.css with the contents of the file specified in the
5
// config file.
6
export const themePlugin = (): Plugin => {
7
+
const themeFolder = Config.THEME;
8
+
console.log(`Using theme folder: ${themeFolder}`);
9
+
return {
10
+
name: "theme-generator",
11
+
enforce: "pre", // Ensure this plugin runs first
12
+
transform(_code, id) {
13
+
if (id.endsWith("app.css")) {
14
+
// Read the theme file and replace the contents of app.css with it
15
+
// Needs full path to the file
16
+
//@ts-ignore Deno
17
+
const themeCode = Deno.readTextFileSync(
18
+
//@ts-ignore Deno
19
+
Deno.cwd() + "/themes/" + themeFolder + "/theme.css",
20
+
);
21
+
// Replace the contents of app.css with the theme code
22
23
+
// and add a comment at the top
24
+
const themeComment = `/* Generated from ${themeFolder} */\n`;
25
+
const themeCodeWithComment = themeComment + themeCode;
26
+
// Return the theme code as the new contents of app.css
27
+
return {
28
+
code: themeCodeWithComment,
29
+
map: null,
30
+
};
31
+
}
32
+
return null;
33
+
},
34
+
};
35
+
};
+1
-1
vite.config.ts
+1
-1
vite.config.ts