Shows how to get repo export and walk it in TypeScript
walktherepo.wisp.place
some styling changes
+30
-33
+1
-1
index.html
+1
-1
index.html
+10
-14
src/App.svelte
+10
-14
src/App.svelte
···
4
4
import RepoStats from './lib/RepoStats.svelte';
5
5
6
6
let showRepoStats = $state(false);
7
-
let did = $state('');
8
-
let pdsUrl = $state('');
9
-
let slowPoke = $state(false);
7
+
let searchResults = $state({
8
+
did: '',
9
+
handle: '',
10
+
pdsUrl: '',
11
+
slowPoke: false
12
+
});
10
13
11
-
const resolvedResult = (didResult: string, pdsUrlResult: string, slowPokeResult: boolean) => {
12
-
did = didResult;
13
-
pdsUrl = pdsUrlResult;
14
-
slowPoke = slowPokeResult;
14
+
const resolvedResult = (didResult: string, handle: string, pdsUrlResult: string, slowPokeResult: boolean) => {
15
+
searchResults = {did: didResult, handle: handle, pdsUrl: pdsUrlResult, slowPoke: slowPokeResult};
15
16
showRepoStats = true;
16
17
};
17
-
18
18
19
19
</script>
20
20
21
21
<main class="container mx-auto px-4 py-8 max-w-4xl">
22
22
<div class="text-center mb-8">
23
23
{#if showRepoStats}
24
-
{#if slowPoke}
25
-
<h2 class="text-3xl font-bold text-primary">Walking the repo via api calls</h2>
26
-
{:else}
27
-
<h2 class="text-3xl font-bold text-primary">Walking the repo via repo export</h2>
28
-
{/if}
24
+
<h2 class="text-2xl font-bold text-primary">Walking <a class="link link-info" href="https://pdsls.dev/at://{searchResults.did}" target="_blank">{searchResults.handle}</a>'s {searchResults.slowPoke ? 'via api calls' : 'via export'}</h2>
29
25
{:else}
30
26
<h1 class="text-5xl font-bold mb-4">Repo Walk Example</h1>
31
27
<p class="text-lg mb-2">Demo showing why you may rather export the users whole repo instead of walking it via api calls</p>
···
36
32
<div class="card bg-base-200 shadow-xl">
37
33
<div class="card-body">
38
34
{#if showRepoStats}
39
-
<RepoStats did={did} pdsUrl={pdsUrl} slowPokeMode={slowPoke}/>
35
+
<RepoStats did={searchResults.did} pdsUrl={searchResults.pdsUrl} slowPokeMode={searchResults.slowPoke} handle={searchResults.handle}/>
40
36
{:else}
41
37
<SearchForm resolvedResult={resolvedResult}/>
42
38
{/if}
+3
-1
src/app.css
+3
-1
src/app.css
+3
-3
src/lib/RepoStats.svelte
+3
-3
src/lib/RepoStats.svelte
···
4
4
import type {} from '@atcute/atproto';
5
5
import { repoEntryTransform } from '@atcute/repo';
6
6
7
-
const { did, pdsUrl, slowPokeMode } = $props();
7
+
const { did, handle, pdsUrl, slowPokeMode } = $props();
8
8
9
9
interface CountedCollection {
10
10
collection: string;
···
272
272
273
273
<div class="card bg-base-300 shadow-xl w-full">
274
274
<div class="card-body">
275
-
<h3 class="card-title">Collections Breakdown</h3>
275
+
<h3 class="card-title">{handle}'s Collections Breakdown</h3>
276
276
<ol class="list-decimal list-inside space-y-2">
277
277
{#each collectionsOrdered as collection (collection.collection)}
278
278
<li class="text-sm">
279
-
<span class="font-mono text-primary">{collection.collection}</span>
279
+
<a class="link font-mono text-primary" href="https://pdsls.dev/at://{did}/{collection.collection}" target="_blank">{collection.collection}</a>
280
280
<span class="badge badge-sm ml-2">{collection.count.toLocaleString()} records</span>
281
281
</li>
282
282
{/each}
+13
-14
src/lib/SearchForm.svelte
+13
-14
src/lib/SearchForm.svelte
···
37
37
event.preventDefault();
38
38
error = null;
39
39
try {
40
-
if (!isHandle(handleToLookUp)) {
40
+
let handle = handleToLookUp.replace(/^@/, '').toLowerCase();
41
+
if (!isHandle(handle)) {
41
42
error = 'Not a valid handle';
42
43
return;
43
44
}
44
-
45
-
let did = await handleResolver.resolve(handleToLookUp);
45
+
let did = await handleResolver.resolve(handle);
46
46
47
47
const didDoc = await didResolver.resolve(did);
48
48
const pdsUrl = getPdsEndpoint(didDoc);
49
49
50
-
resolvedResult(did, pdsUrl, slowpoke);
50
+
resolvedResult(did, handle, pdsUrl, slowpoke);
51
51
}catch(e){
52
52
if (e instanceof Error) {
53
53
error = e.message;
···
59
59
</script>
60
60
61
61
<form onsubmit={searchForUser} class="space-y-4">
62
-
<div class="form-control w-full">
63
-
<label class="label" for="search">
64
-
<span class="label-text font-semibold">ATProto Handle</span>
65
-
</label>
62
+
<fieldset class="fieldset w-full">
63
+
<label class="label" for="search">ATProto Handle</label>
66
64
<input
67
65
bind:value={handleToLookUp}
68
66
id="search"
···
70
68
placeholder="alice.bsky.social"
71
69
class="input input-bordered w-full"
72
70
/>
73
-
</div>
71
+
</fieldset>
74
72
75
-
<div class="form-control">
76
-
<label class="label cursor-pointer justify-start gap-3">
77
-
<input bind:checked={slowpoke} type="checkbox" class="checkbox checkbox-primary"/>
78
-
<span class="label-text">slowpoke (uses web calls to walk the repository to show you the speed difference)</span>
73
+
<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
74
+
<legend class="fieldset-legend">Slow Poke</legend>
75
+
<label class="label">
76
+
<input type="checkbox" bind:checked={slowpoke} class="toggle" />
77
+
uses web calls to walk the repo to show you the speed difference
79
78
</label>
80
-
</div>
79
+
</fieldset>
81
80
82
81
{#if error}
83
82
<div class="alert alert-error">