baileytownsend.dev / repo-walk-example
Shows how to get repo export and walk it in TypeScript walktherepo.wisp.place
fork atom

some styling changes

baileytownsend.dev 3d98c447 81bbd2a6

options
unified split
Changed files
+30 -33
index.html
src
App.svelte
app.css
lib
RepoStats.svelte
SearchForm.svelte
+1 -1
index.html
··· 1 1 <!doctype html> 2 2 <html lang="en"> 3 - <head> 3 + <head data-theme="forest"> 4 4 <meta charset="UTF-8" /> 5 5 <link rel="icon" type="image/svg+xml" href="/dude.png" /> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+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
··· 1 1 @import "tailwindcss"; 2 - @plugin "daisyui"; 2 + @plugin "daisyui" { 3 + themes: forest --default; 4 + }
+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
··· 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">