kilroy.bluecanary.dev
juli.ee
+81
-72
src/components/backlinks.tsx
+81
-72
src/components/backlinks.tsx
···
11
import { Button } from "./button.jsx";
12
13
type Backlink = {
14
-
collection: string;
15
path: string;
16
counts: { distinct_dids: number; records: number };
17
};
18
19
const linksBySource = (links: Record<string, any>) => {
20
-
let out: Backlink[] = [];
21
Object.keys(links)
22
.toSorted()
23
.forEach((collection) => {
···
26
.toSorted()
27
.forEach((path) => {
28
if (paths[path].records === 0) return;
29
-
out.push({ collection, path, counts: paths[path] });
30
});
31
});
32
return out;
···
48
49
return (
50
<div class="flex w-full flex-col gap-1 text-sm wrap-anywhere">
51
-
<Show when={response()?.length === 0}>
52
-
<p>No backlinks found.</p>
53
-
</Show>
54
-
<For each={response()}>
55
-
{({ collection, path, counts }) => (
56
-
<div>
57
<div>
58
<div class="flex items-center gap-1">
59
<span
···
62
></span>
63
{collection}
64
</div>
65
-
<div class="flex items-center gap-1">
66
-
<span
67
-
title="Record path where the link is found"
68
-
class="iconify lucide--route shrink-0"
69
-
></span>
70
-
{path.slice(1)}
71
-
</div>
72
-
</div>
73
-
<div class="ml-4.5">
74
-
<p>
75
-
<button
76
-
class="text-blue-400 hover:underline active:underline"
77
-
title="Show linking records"
78
-
onclick={() =>
79
-
(
80
-
show()?.collection === collection &&
81
-
show()?.path === path &&
82
-
!show()?.showDids
83
-
) ?
84
-
setShow(null)
85
-
: setShow({ collection, path, showDids: false })
86
-
}
87
-
>
88
-
{counts.records} record{counts.records < 2 ? "" : "s"}
89
-
</button>
90
-
{" from "}
91
-
<button
92
-
class="text-blue-400 hover:underline active:underline"
93
-
title="Show linking DIDs"
94
-
onclick={() =>
95
-
show()?.collection === collection && show()?.path === path && show()?.showDids ?
96
-
setShow(null)
97
-
: setShow({ collection, path, showDids: true })
98
-
}
99
-
>
100
-
{counts.distinct_dids} DID
101
-
{counts.distinct_dids < 2 ? "" : "s"}
102
-
</button>
103
-
</p>
104
-
<Show when={show()?.collection === collection && show()?.path === path}>
105
-
<Show when={show()?.showDids}>
106
-
{/* putting this in the `dids` prop directly failed to re-render. idk how to solidjs. */}
107
-
<p class="w-full font-semibold">Distinct identities</p>
108
-
<BacklinkItems
109
-
target={props.target}
110
-
collection={collection}
111
-
path={path}
112
-
dids={true}
113
-
/>
114
-
</Show>
115
-
<Show when={!show()?.showDids}>
116
-
<p class="w-full font-semibold">Records</p>
117
-
<BacklinkItems
118
-
target={props.target}
119
-
collection={collection}
120
-
path={path}
121
-
dids={false}
122
-
/>
123
-
</Show>
124
-
</Show>
125
</div>
126
-
</div>
127
-
)}
128
-
</For>
129
</div>
130
);
131
};
···
11
import { Button } from "./button.jsx";
12
13
type Backlink = {
14
path: string;
15
counts: { distinct_dids: number; records: number };
16
};
17
18
const linksBySource = (links: Record<string, any>) => {
19
+
let out: Record<string, Backlink[]> = {};
20
Object.keys(links)
21
.toSorted()
22
.forEach((collection) => {
···
25
.toSorted()
26
.forEach((path) => {
27
if (paths[path].records === 0) return;
28
+
if (out[collection]) out[collection].push({ path, counts: paths[path] });
29
+
else out[collection] = [{ path, counts: paths[path] }];
30
});
31
});
32
return out;
···
48
49
return (
50
<div class="flex w-full flex-col gap-1 text-sm wrap-anywhere">
51
+
<Show
52
+
when={response() && Object.keys(response()!).length}
53
+
fallback={<p>No backlinks found.</p>}
54
+
>
55
+
<For each={Object.keys(response()!)}>
56
+
{(collection) => (
57
<div>
58
<div class="flex items-center gap-1">
59
<span
···
62
></span>
63
{collection}
64
</div>
65
+
<For each={response()![collection]}>
66
+
{({ path, counts }) => (
67
+
<div class="ml-4.5">
68
+
<div class="flex items-center gap-1">
69
+
<span
70
+
title="Record path where the link is found"
71
+
class="iconify lucide--route shrink-0"
72
+
></span>
73
+
{path.slice(1)}
74
+
</div>
75
+
<div class="ml-4.5">
76
+
<p>
77
+
<button
78
+
class="text-blue-400 hover:underline active:underline"
79
+
title="Show linking records"
80
+
onclick={() =>
81
+
(
82
+
show()?.collection === collection &&
83
+
show()?.path === path &&
84
+
!show()?.showDids
85
+
) ?
86
+
setShow(null)
87
+
: setShow({ collection, path, showDids: false })
88
+
}
89
+
>
90
+
{counts.records} record{counts.records < 2 ? "" : "s"}
91
+
</button>
92
+
{" from "}
93
+
<button
94
+
class="text-blue-400 hover:underline active:underline"
95
+
title="Show linking DIDs"
96
+
onclick={() =>
97
+
(
98
+
show()?.collection === collection &&
99
+
show()?.path === path &&
100
+
show()?.showDids
101
+
) ?
102
+
setShow(null)
103
+
: setShow({ collection, path, showDids: true })
104
+
}
105
+
>
106
+
{counts.distinct_dids} DID
107
+
{counts.distinct_dids < 2 ? "" : "s"}
108
+
</button>
109
+
</p>
110
+
<Show when={show()?.collection === collection && show()?.path === path}>
111
+
<Show when={show()?.showDids}>
112
+
<p class="w-full font-semibold">Distinct identities</p>
113
+
<BacklinkItems
114
+
target={props.target}
115
+
collection={collection}
116
+
path={path}
117
+
dids={true}
118
+
/>
119
+
</Show>
120
+
<Show when={!show()?.showDids}>
121
+
<p class="w-full font-semibold">Records</p>
122
+
<BacklinkItems
123
+
target={props.target}
124
+
collection={collection}
125
+
path={path}
126
+
dids={false}
127
+
/>
128
+
</Show>
129
+
</Show>
130
+
</div>
131
+
</div>
132
+
)}
133
+
</For>
134
</div>
135
+
)}
136
+
</For>
137
+
</Show>
138
</div>
139
);
140
};