olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
new homepage
handle.invalid
+184
-151
public/avatar/bad-example.com.jpg
public/avatar/bad-example.com.jpg
This is a binary file and will not be displayed.
public/avatar/danabra.mov.jpg
public/avatar/danabra.mov.jpg
This is a binary file and will not be displayed.
public/avatar/dholms.at.jpg
public/avatar/dholms.at.jpg
This is a binary file and will not be displayed.
public/avatar/futur.blue.jpg
public/avatar/futur.blue.jpg
This is a binary file and will not be displayed.
public/avatar/hailey.at.jpg
public/avatar/hailey.at.jpg
This is a binary file and will not be displayed.
public/avatar/jay.bsky.team.jpg
public/avatar/jay.bsky.team.jpg
This is a binary file and will not be displayed.
public/avatar/jaz.sh.jpg
public/avatar/jaz.sh.jpg
This is a binary file and will not be displayed.
public/avatar/juli.ee.jpg
public/avatar/juli.ee.jpg
This is a binary file and will not be displayed.
public/avatar/mary.my.id.jpg
public/avatar/mary.my.id.jpg
This is a binary file and will not be displayed.
public/avatar/pfrazee.com.jpg
public/avatar/pfrazee.com.jpg
This is a binary file and will not be displayed.
public/avatar/retr0.id.jpg
public/avatar/retr0.id.jpg
This is a binary file and will not be displayed.
+21
-18
src/components/favicon.tsx
+21
-18
src/components/favicon.tsx
···
1
-
import { createSignal, JSX, Show } from "solid-js";
1
+
import { createSignal, JSX, Match, Show, Switch } from "solid-js";
2
2
3
3
export const Favicon = (props: {
4
4
authority: string;
···
8
8
const domain = () => props.authority.split(".").reverse().join(".");
9
9
10
10
const content = (
11
-
<>
12
-
<Show when={!loaded()}>
13
-
<span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
14
-
</Show>
15
-
<img
16
-
src={
17
-
["bsky.app", "bsky.chat"].includes(domain()) ?
18
-
"https://web-cdn.bsky.app/static/apple-touch-icon.png"
19
-
: `https://${domain()}/favicon.ico`
20
-
}
21
-
alt=""
22
-
class="h-4 w-4"
23
-
classList={{ hidden: !loaded() }}
24
-
onLoad={() => setLoaded(true)}
25
-
onError={() => setLoaded(false)}
26
-
/>
27
-
</>
11
+
<Switch>
12
+
<Match when={domain() === "tangled.sh"}>
13
+
<span class="iconify i-tangled size-4" />
14
+
</Match>
15
+
<Match when={["bsky.app", "bsky.chat"].includes(domain())}>
16
+
<img src="https://web-cdn.bsky.app/static/apple-touch-icon.png" class="size-4" />
17
+
</Match>
18
+
<Match when={true}>
19
+
<Show when={!loaded()}>
20
+
<span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
21
+
</Show>
22
+
<img
23
+
src={`https://${domain()}/favicon.ico`}
24
+
class="size-4"
25
+
classList={{ hidden: !loaded() }}
26
+
onLoad={() => setLoaded(true)}
27
+
onError={() => setLoaded(false)}
28
+
/>
29
+
</Match>
30
+
</Switch>
28
31
);
29
32
30
33
return props.wrapper ?
+1
src/components/search.tsx
+1
src/components/search.tsx
+147
-133
src/views/home.tsx
+147
-133
src/views/home.tsx
···
1
1
import { A } from "@solidjs/router";
2
-
import { JSX } from "solid-js";
3
-
import { setOpenManager } from "../auth/state.js";
2
+
import { For, JSX } from "solid-js";
3
+
import { setOpenManager } from "../auth/state";
4
+
5
+
type ProfileData = {
6
+
did: string;
7
+
handle: string;
8
+
};
4
9
5
10
export const Home = () => {
6
11
const FooterLink = (props: {
···
18
23
</a>
19
24
);
20
25
21
-
return (
22
-
<div class="flex w-full flex-col gap-6 px-2 wrap-break-word">
23
-
<div class="flex flex-col gap-3">
24
-
<h1 class="text-lg font-semibold">Atmosphere Explorer</h1>
26
+
const allExampleProfiles: ProfileData[] = [
27
+
{ did: "did:plc:7vimlesenouvuaqvle42yhvo", handle: "juli.ee" },
28
+
{ did: "did:plc:oisofpd7lj26yvgiivf3lxsi", handle: "hailey.at" },
29
+
{ did: "did:plc:vwzwgnygau7ed7b7wt5ux7y2", handle: "retr0.id" },
30
+
{ did: "did:plc:oky5czdrnfjpqslsw2a5iclo", handle: "jay.bsky.team" },
31
+
{ did: "did:plc:ragtjsm2j2vknwkz3zp4oxrd", handle: "pfrazee.com" },
32
+
{ did: "did:plc:vc7f4oafdgxsihk4cry2xpze", handle: "jcsalterego.bsky.social" },
33
+
{ did: "did:plc:uu5axsmbm2or2dngy4gwchec", handle: "futur.blue" },
34
+
{ did: "did:plc:ia76kvnndjutgedggx2ibrem", handle: "mary.my.id" },
35
+
{ did: "did:plc:fpruhuo22xkm5o7ttr2ktxdo", handle: "danabra.mov" },
36
+
{ did: "did:plc:hdhoaan3xa3jiuq4fg4mefid", handle: "bad-example.com" },
37
+
{ did: "did:plc:yk4dd2qkboz2yv6tpubpc6co", handle: "dholms.at" },
38
+
{ did: "did:plc:q6gjnaw2blty4crticxkmujt", handle: "jaz.sh" },
39
+
];
25
40
26
-
{/* Explore Section */}
27
-
<section class="flex flex-col gap-2">
28
-
<h2 class="text-sm font-semibold tracking-wide text-neutral-500 uppercase dark:text-neutral-400">
29
-
Explore
30
-
</h2>
31
-
<div class="flex flex-col gap-2">
32
-
<a
33
-
href="https://atproto.com"
34
-
target="_blank"
35
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
36
-
>
37
-
<div class="iconify lucide--at-sign" />
38
-
<span class="underline decoration-transparent group-hover:decoration-current">
39
-
Browse the public data on atproto
40
-
</span>
41
-
<div />
42
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
43
-
Inspect the content of any PDS
44
-
</span>
45
-
</a>
46
-
<a
47
-
href="https://microcosm.blue"
48
-
target="_blank"
49
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
50
-
>
51
-
<div class="iconify lucide--sparkle" />
52
-
<span class="underline decoration-transparent group-hover:decoration-current">
53
-
Backlinks support with constellation
54
-
</span>
55
-
<div />
56
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
57
-
Track links to any record or repository
58
-
</span>
59
-
</a>
60
-
<button
61
-
onclick={() => setOpenManager(true)}
62
-
class="group grid cursor-pointer grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 text-left hover:text-blue-500 dark:hover:text-blue-400"
63
-
>
64
-
<div class="iconify lucide--user-round-pen" />
65
-
<span class="underline decoration-transparent group-hover:decoration-current">
66
-
Sign in to manage your account
67
-
</span>
68
-
<div />
69
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
70
-
Create, edit, and delete records
71
-
</span>
72
-
</button>
73
-
</div>
74
-
</section>
41
+
const profiles = [...allExampleProfiles].sort(() => Math.random() - 0.5).slice(0, 3);
75
42
76
-
{/* Relay Section */}
77
-
<section class="flex flex-col gap-2">
78
-
<h2 class="text-sm font-semibold tracking-wide text-neutral-500 uppercase dark:text-neutral-400">
79
-
Relay
80
-
</h2>
81
-
<div class="flex flex-col gap-2">
82
-
<A
83
-
href="/jetstream"
84
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
85
-
>
86
-
<div class="iconify lucide--radio-tower" />
87
-
<span class="underline decoration-transparent group-hover:decoration-current">
88
-
Jetstream
89
-
</span>
90
-
<div />
91
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
92
-
Simplified JSON event stream
93
-
</span>
94
-
</A>
95
-
<A
96
-
href="/firehose"
97
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
98
-
>
99
-
<div class="iconify lucide--rss" />
100
-
<span class="underline decoration-transparent group-hover:decoration-current">
101
-
Firehose
102
-
</span>
103
-
<div />
104
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
105
-
Raw repository event stream
106
-
</span>
107
-
</A>
108
-
<A
109
-
href="/spacedust"
110
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
111
-
>
112
-
<div class="iconify lucide--orbit" />
113
-
<span class="underline decoration-transparent group-hover:decoration-current">
114
-
Spacedust
115
-
</span>
116
-
<div />
117
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
118
-
Interaction links event stream
119
-
</span>
120
-
</A>
43
+
return (
44
+
<div class="flex w-full flex-col gap-5 px-2 wrap-break-word">
45
+
{/* Welcome Section */}
46
+
<div class="flex flex-col gap-4">
47
+
<div class="flex flex-col gap-1">
48
+
<h1 class="text-lg font-semibold">Atmosphere Explorer</h1>
49
+
<div class="text-sm text-neutral-600 dark:text-neutral-300">
50
+
<p>
51
+
Browse the public data on the{" "}
52
+
<a
53
+
href="https://atproto.com"
54
+
target="_blank"
55
+
class="underline decoration-neutral-400 transition-colors hover:text-blue-500 hover:decoration-blue-500 dark:decoration-neutral-500 dark:hover:text-blue-400"
56
+
>
57
+
AT Protocol
58
+
</a>
59
+
</p>
121
60
</div>
122
-
</section>
61
+
</div>
123
62
124
-
{/* Tools Section */}
125
-
<section class="flex flex-col gap-2">
126
-
<h2 class="text-sm font-semibold tracking-wide text-neutral-500 uppercase dark:text-neutral-400">
127
-
Tools
128
-
</h2>
129
-
<div class="flex flex-col gap-2">
130
-
<A
131
-
href="/labels"
132
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
133
-
>
134
-
<div class="iconify lucide--tag" />
135
-
<span class="underline decoration-transparent group-hover:decoration-current">
136
-
Labels
137
-
</span>
138
-
<div />
139
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
140
-
Query labels from moderation services
141
-
</span>
142
-
</A>
143
-
<A
144
-
href="/car"
145
-
class="group grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-0.5 hover:text-blue-500 dark:hover:text-blue-400"
146
-
>
147
-
<div class="iconify lucide--folder-archive" />
148
-
<span class="underline decoration-transparent group-hover:decoration-current">
149
-
Archive
150
-
</span>
151
-
<div />
152
-
<span class="text-xs text-neutral-500 dark:text-neutral-400">
153
-
Explore and unpack repository archives
154
-
</span>
155
-
</A>
63
+
{/* Example Repos */}
64
+
<section class="flex flex-col gap-3">
65
+
<div class="flex justify-between">
66
+
<For each={profiles}>
67
+
{(profile) => (
68
+
<A
69
+
href={`/at://${profile.did}`}
70
+
class="group flex min-w-0 basis-1/3 flex-col items-center gap-1.5 transition-transform hover:scale-105 active:scale-105"
71
+
>
72
+
<img
73
+
src={`/avatar/${profile.handle}.jpg`}
74
+
alt={`Bluesky profile picture of ${profile.handle}`}
75
+
class="size-16 rounded-full ring-2 ring-transparent transition-all group-hover:ring-blue-500 active:ring-blue-500 dark:group-hover:ring-blue-400 dark:active:ring-blue-400"
76
+
/>
77
+
<span class="w-full truncate text-center text-xs text-neutral-600 dark:text-neutral-300">
78
+
@{profile.handle}
79
+
</span>
80
+
</A>
81
+
)}
82
+
</For>
156
83
</div>
157
84
</section>
85
+
<p class="text-xs text-neutral-500 dark:text-neutral-400">
86
+
or use the search{" "}
87
+
<kbd class="rounded bg-neutral-200 px-1 py-0.5 font-mono text-[10px] dark:bg-neutral-700">
88
+
Ctrl+K
89
+
</kbd>{" "}
90
+
to find any account
91
+
</p>
92
+
<button
93
+
type="button"
94
+
onclick={() => setOpenManager(true)}
95
+
class="dark:bg-dark-300 dark:hover:bg-dark-200 dark:active:bg-dark-100 w-fit rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:text-neutral-300"
96
+
>
97
+
Sign in to manage records
98
+
</button>
99
+
</div>
100
+
101
+
<div class="flex flex-col gap-4 text-sm">
102
+
<div class="flex flex-col gap-2">
103
+
<A
104
+
href="/jetstream"
105
+
class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
106
+
>
107
+
<div class="iconify lucide--radio-tower" />
108
+
<span class="underline decoration-transparent group-hover:decoration-current">
109
+
Jetstream
110
+
</span>
111
+
<div />
112
+
<span class="text-xs text-neutral-500 dark:text-neutral-400">
113
+
Event stream with filtering
114
+
</span>
115
+
</A>
116
+
<A
117
+
href="/firehose"
118
+
class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
119
+
>
120
+
<div class="iconify lucide--rss" />
121
+
<span class="underline decoration-transparent group-hover:decoration-current">
122
+
Firehose
123
+
</span>
124
+
<div />
125
+
<span class="text-xs text-neutral-500 dark:text-neutral-400">
126
+
Raw relay event stream
127
+
</span>
128
+
</A>
129
+
<A
130
+
href="/spacedust"
131
+
class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
132
+
>
133
+
<div class="iconify lucide--orbit" />
134
+
<span class="underline decoration-transparent group-hover:decoration-current">
135
+
Spacedust
136
+
</span>
137
+
<div />
138
+
<span class="text-xs text-neutral-500 dark:text-neutral-400">
139
+
Interaction links stream
140
+
</span>
141
+
</A>
142
+
</div>
143
+
144
+
<div class="flex flex-col gap-2">
145
+
<A
146
+
href="/labels"
147
+
class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
148
+
>
149
+
<div class="iconify lucide--tag" />
150
+
<span class="underline decoration-transparent group-hover:decoration-current">
151
+
Labels
152
+
</span>
153
+
<div />
154
+
<span class="text-xs text-neutral-500 dark:text-neutral-400">
155
+
Query labeler services
156
+
</span>
157
+
</A>
158
+
<A
159
+
href="/car"
160
+
class="group grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
161
+
>
162
+
<div class="iconify lucide--folder-archive" />
163
+
<span class="underline decoration-transparent group-hover:decoration-current">
164
+
Archive
165
+
</span>
166
+
<div />
167
+
<span class="text-xs text-neutral-500 dark:text-neutral-400">
168
+
Explore and unpack CAR files
169
+
</span>
170
+
</A>
171
+
</div>
158
172
</div>
159
173
160
174
<div class="flex justify-center gap-1.5 text-sm text-neutral-600 sm:gap-2 dark:text-neutral-300">
+6
src/views/labels.tsx
+6
src/views/labels.tsx
···
200
200
<>
201
201
<Title>Labels - PDSls</Title>
202
202
<div class="flex w-full flex-col items-center">
203
+
<div class="flex w-full flex-col gap-y-1 px-3 pb-3">
204
+
<h1 class="text-lg font-semibold">Labels</h1>
205
+
<p class="text-sm text-neutral-600 dark:text-neutral-400">
206
+
Query labels applied by labelers to accounts and records.
207
+
</p>
208
+
</div>
203
209
<form
204
210
ref={formRef}
205
211
class="flex w-full max-w-3xl flex-col gap-y-3 px-3 pb-2"
+4
src/views/stream/config.ts
+4
src/views/stream/config.ts
···
21
21
22
22
export type StreamConfig = {
23
23
label: string;
24
+
description: string;
24
25
icon: string;
25
26
defaultInstance: string;
26
27
fields: FormField[];
···
34
35
export const STREAM_CONFIGS: Record<StreamType, StreamConfig> = {
35
36
jetstream: {
36
37
label: "Jetstream",
38
+
description: "A simplified event stream with support for collection and DID filtering.",
37
39
icon: "lucide--radio-tower",
38
40
defaultInstance: "wss://jetstream1.us-east.bsky.network/subscribe",
39
41
useFirehoseLib: false,
···
97
99
98
100
firehose: {
99
101
label: "Firehose",
102
+
description: "The raw event stream from a relay or PDS.",
100
103
icon: "lucide--rss",
101
104
defaultInstance: "wss://bsky.network",
102
105
useFirehoseLib: true,
···
132
135
133
136
spacedust: {
134
137
label: "Spacedust",
138
+
description: "A stream of links showing interactions across the network.",
135
139
icon: "lucide--link",
136
140
defaultInstance: "wss://spacedust.microcosm.blue/subscribe",
137
141
useFirehoseLib: false,
+5
src/views/stream/index.tsx
+5
src/views/stream/index.tsx
···
335
335
</For>
336
336
</div>
337
337
338
+
{/* Stream Description */}
339
+
<div class="w-full px-2 text-center">
340
+
<p class="text-sm text-neutral-600 dark:text-neutral-400">{config().description}</p>
341
+
</div>
342
+
338
343
{/* Connection Form */}
339
344
<Show when={!connected()}>
340
345
<form ref={formRef} class="flex w-full flex-col gap-2 p-2 text-sm">