forked from
pds.ls/pdsls
atproto explorer
use router links for more internal links (#19)
some links broke when i swapped in the HashRouter to spin up pdsls on a
simple http server. this tries to update all the internal links to use
the router-aware `A` component (unless i missed any), so hash routing
works!
+33
-30
+5
-4
src/components/json.tsx
+5
-4
src/components/json.tsx
···
1
1
import VideoPlayer from "./video-player";
2
2
import { createSignal, For } from "solid-js";
3
+
import { A } from "@solidjs/router";
3
4
4
5
interface AtBlob {
5
6
$type: string;
···
25
26
{(part) => (
26
27
<>
27
28
{part.startsWith("at://") && part.split(" ").length === 1 ?
28
-
<a class="underline" href={part.replace("at://", "/at/")}>
29
+
<A class="underline" href={part.replace("at://", "/at/")}>
29
30
{part}
30
-
</a>
31
+
</A>
31
32
: (
32
33
part.startsWith("did:") &&
33
34
part.split(" ").length === 1 &&
34
35
part.split(":").length === 3
35
36
) ?
36
-
<a class="underline" href={`/at/${part}`}>
37
+
<A class="underline" href={`/at/${part}`}>
37
38
{part}
38
-
</a>
39
+
</A>
39
40
: (
40
41
isURL(part) &&
41
42
["http:", "https:", "web+at:"].includes(new URL(part).protocol) &&
+3
-3
src/components/search.tsx
+3
-3
src/components/search.tsx
···
1
1
import { resolveHandle } from "../utils/api.js";
2
-
import { action, redirect, useSubmission } from "@solidjs/router";
2
+
import { A, action, redirect, useSubmission } from "@solidjs/router";
3
3
import Tooltip from "./tooltip.jsx";
4
4
import { Show } from "solid-js";
5
5
import { agent, loginState } from "../components/login.jsx";
···
69
69
<Tooltip
70
70
text="Repository"
71
71
children={
72
-
<a href={`/at/${agent.sub}`} class="flex items-center">
72
+
<A href={`/at/${agent.sub}`} class="flex items-center">
73
73
<button class="i-tabler-binary-tree text-xl" />
74
-
</a>
74
+
</A>
75
75
}
76
76
/>
77
77
</Show>
+5
-5
src/layout.tsx
+5
-5
src/layout.tsx
···
1
1
import { createSignal, ErrorBoundary, onMount, Show, Suspense } from "solid-js";
2
-
import { RouteSectionProps, useLocation, useParams } from "@solidjs/router";
2
+
import { A, RouteSectionProps, useLocation, useParams } from "@solidjs/router";
3
3
import { agent, loginState, retrieveSession } from "./components/login.jsx";
4
4
import { CreateRecord } from "./components/create.jsx";
5
5
import Tooltip from "./components/tooltip.jsx";
···
47
47
>
48
48
<div class="mb-2 flex w-[21rem] items-center">
49
49
<div class="flex basis-1/3 gap-x-2">
50
-
<a href="/jetstream">
50
+
<A href="/jetstream">
51
51
<Tooltip text="Jetstream">
52
52
<div class="i-ic-outline-cell-tower text-xl" />
53
53
</Tooltip>
54
-
</a>
54
+
</A>
55
55
<AccountManager />
56
56
<Show when={loginState()}>
57
57
<CreateRecord />
58
58
</Show>
59
59
</div>
60
60
<div class="basis-1/3 text-center font-mono text-xl font-bold">
61
-
<a href="/" class="hover:underline">
61
+
<A href="/" class="hover:underline">
62
62
PDSls
63
-
</a>
63
+
</A>
64
64
</div>
65
65
<div class="justify-right flex basis-1/3 items-center gap-x-2">
66
66
<a href="https://github.com/notjuliet/pdsls" target="_blank">
+14
-12
src/views/home.tsx
+14
-12
src/views/home.tsx
···
1
+
import { A } from "@solidjs/router";
2
+
1
3
const Home = () => {
2
4
return (
3
5
<div class="mt-4 flex w-full flex-col break-words">
···
26
28
Jetstream
27
29
</a>{" "}
28
30
viewer is also available{" "}
29
-
<a href="/jetstream" class="text-lightblue-500 hover:underline">
31
+
<A href="/jetstream" class="text-lightblue-500 hover:underline">
30
32
here
31
-
</a>
33
+
</A>
32
34
.
33
35
</p>
34
36
<p>
35
-
<a
37
+
<A
36
38
href="https://atproto.com/specs/sync#firehose"
37
39
class="text-lightblue-500 hover:underline"
38
40
target="_blank"
39
41
>
40
42
Firehose
41
-
</a>{" "}
43
+
</A>{" "}
42
44
support can be found{" "}
43
-
<a href="/firehose" class="text-lightblue-500 hover:underline">
45
+
<A href="/firehose" class="text-lightblue-500 hover:underline">
44
46
here
45
-
</a>
47
+
</A>
46
48
.
47
49
</p>
48
50
</div>
···
51
53
<div>
52
54
<span class="font-semibold text-orange-400">PDS URL</span>:
53
55
<div>
54
-
<a href="/pds.moe" class="text-lightblue-500 hover:underline">
56
+
<A href="/pds.moe" class="text-lightblue-500 hover:underline">
55
57
https://pds.moe
56
-
</a>
58
+
</A>
57
59
</div>
58
60
</div>
59
61
<div>
60
62
<span class="font-semibold text-orange-400">AT URI</span> (at://
61
63
optional, DID or handle alone also works):
62
64
<div>
63
-
<a
65
+
<A
64
66
href="/at/did:plc:oisofpd7lj26yvgiivf3lxsi/app.bsky.feed.post/3l2zpbbhuvw2h"
65
67
class="text-lightblue-500 hover:underline"
66
68
>
67
69
at://did:plc:oisofpd7lj26yvgiivf3lxsi/app.bsky.feed.post/3l2zpbbhuvw2h
68
-
</a>
70
+
</A>
69
71
</div>
70
72
</div>
71
73
<div>
72
74
<span class="font-semibold text-orange-400">Bluesky Link</span> (posts
73
75
and profiles):
74
76
<div>
75
-
<a
77
+
<A
76
78
href="/at/did:plc:vwzwgnygau7ed7b7wt5ux7y2/app.bsky.feed.post/3khpasmu4ou2l"
77
79
class="text-lightblue-500 hover:underline"
78
80
>
79
81
https://bsky.app/profile/retr0.id/post/3khpasmu4ou2l
80
-
</a>
82
+
</A>
81
83
</div>
82
84
</div>
83
85
</div>
+3
-3
src/views/labels.tsx
+3
-3
src/views/labels.tsx
···
1
1
import { createResource, createSignal, For, onMount, Show } from "solid-js";
2
2
import { CredentialManager, XRPC } from "@atcute/client";
3
-
import { useParams, useSearchParams } from "@solidjs/router";
3
+
import { A, useParams, useSearchParams } from "@solidjs/router";
4
4
import { labelerCache, resolvePDS } from "../utils/api.js";
5
5
import { ComAtprotoLabelDefs } from "@atcute/client/lexicons";
6
6
import { localDateFromTimestamp } from "../utils/date.js";
···
141
141
<div class="min-w-[5rem] font-semibold text-stone-600 dark:text-stone-400">
142
142
URI
143
143
</div>
144
-
<a
144
+
<A
145
145
href={`/at/${label.uri.replace("at://", "")}`}
146
146
target="_blank"
147
147
class="underline"
148
148
>
149
149
{label.uri}
150
-
</a>
150
+
</A>
151
151
</div>
152
152
<Show when={label.cid}>
153
153
<div class="flex gap-x-2">
+3
-3
src/views/pds.tsx
+3
-3
src/views/pds.tsx
···
1
1
import { createSignal, For, Show, createResource } from "solid-js";
2
2
import { CredentialManager, XRPC } from "@atcute/client";
3
3
import { ComAtprotoSyncListRepos } from "@atcute/client/lexicons";
4
-
import { useParams } from "@solidjs/router";
4
+
import { A, useParams } from "@solidjs/router";
5
5
import { setPDS } from "../components/navbar";
6
6
import Tooltip from "../components/tooltip";
7
7
···
55
55
</p>
56
56
<For each={repos()}>
57
57
{(repo) => (
58
-
<a
58
+
<A
59
59
href={`/at/${repo.did}`}
60
60
classList={{
61
61
"w-full flex font-mono relative": true,
···
70
70
</Tooltip>
71
71
</Show>
72
72
<span class="w-full hover:underline">{repo.did}</span>
73
-
</a>
73
+
</A>
74
74
)}
75
75
</For>
76
76
<div class="flex w-full justify-center">