vielle.dev / pdsls
forked from pds.ls/pdsls
atproto explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix padding

juliet.paris a4d639d9 785a22bf

verified
+200 -196
+1 -1
src/views/pds.tsx
··· 105 105 106 106 return ( 107 107 <Show when={repos() || response()}> 108 - <div class="flex w-full flex-col"> 108 + <div class="flex w-full flex-col px-2"> 109 109 <Show when={version()}> 110 110 {(version) => ( 111 111 <div class="flex items-baseline gap-x-1">
+3 -1
src/views/record.tsx
··· 217 217 <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 218 218 } 219 219 > 220 - <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} /> 220 + <div class="w-full px-2"> 221 + <Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} /> 222 + </div> 221 223 </Suspense> 222 224 </ErrorBoundary> 223 225 </Show>
+196 -194
src/views/repo.tsx
··· 187 187 </DropdownMenu> 188 188 </MenuProvider> 189 189 </div> 190 - <Show when={location.hash === "#logs"}> 191 - <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 192 - <Suspense 193 - fallback={ 194 - <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 195 - } 196 - > 197 - <PlcLogView did={did} /> 198 - </Suspense> 199 - </ErrorBoundary> 200 - </Show> 201 - <Show when={location.hash === "#backlinks"}> 202 - <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 203 - <Suspense 204 - fallback={ 205 - <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 206 - } 207 - > 208 - <Backlinks target={did} /> 209 - </Suspense> 210 - </ErrorBoundary> 211 - </Show> 212 - <Show when={location.hash === "#blobs"}> 213 - <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 214 - <Suspense 215 - fallback={ 216 - <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 217 - } 218 - > 219 - <BlobView pds={pds!} repo={did} /> 220 - </Suspense> 221 - </ErrorBoundary> 222 - </Show> 223 - <Show when={nsids() && (!location.hash || location.hash === "#collections")}> 224 - <TextInput 225 - name="filter" 226 - placeholder="Filter collections" 227 - onInput={(e) => setFilter(e.currentTarget.value)} 228 - class="grow" 229 - /> 230 - <div class="flex flex-col font-mono"> 231 - <div class="grid grid-cols-[min-content_1fr] items-center gap-x-2 overflow-hidden text-sm"> 232 - <For 233 - each={Object.keys(nsids() ?? {}).filter((authority) => 234 - filter() ? 235 - authority.startsWith(filter()!) || filter()?.startsWith(authority) 236 - : true, 237 - )} 190 + <div class="flex w-full flex-col gap-2 px-2"> 191 + <Show when={location.hash === "#logs"}> 192 + <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 193 + <Suspense 194 + fallback={ 195 + <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 196 + } 238 197 > 239 - {(authority) => ( 240 - <> 241 - <button onclick={() => toggleCollection(authority)} class="flex items-center"> 242 - <span 243 - classList={{ 244 - "iconify lucide--chevron-down text-lg transition-transform": true, 245 - "-rotate-90": nsids()?.[authority].hidden, 246 - }} 247 - ></span> 248 - </button> 249 - <button 250 - class="bg-transparent text-left wrap-anywhere" 251 - onclick={() => toggleCollection(authority)} 252 - > 253 - {authority} 254 - </button> 255 - <Show when={!nsids()?.[authority].hidden}> 256 - <div></div> 257 - <div class="flex flex-col"> 258 - <For 259 - each={nsids()?.[authority].nsids.filter((nsid) => 260 - filter() ? 261 - nsid.startsWith(filter()!.split(".").slice(2).join(".")) 262 - : true, 263 - )} 264 - > 265 - {(nsid) => ( 266 - <A 267 - href={`/at://${did}/${authority}.${nsid}`} 268 - class="text-blue-400 hover:underline active:underline" 269 - > 270 - {authority}.{nsid} 271 - </A> 272 - )} 273 - </For> 274 - </div> 275 - </Show> 276 - </> 277 - )} 278 - </For> 198 + <PlcLogView did={did} /> 199 + </Suspense> 200 + </ErrorBoundary> 201 + </Show> 202 + <Show when={location.hash === "#backlinks"}> 203 + <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 204 + <Suspense 205 + fallback={ 206 + <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 207 + } 208 + > 209 + <Backlinks target={did} /> 210 + </Suspense> 211 + </ErrorBoundary> 212 + </Show> 213 + <Show when={location.hash === "#blobs"}> 214 + <ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}> 215 + <Suspense 216 + fallback={ 217 + <div class="iconify lucide--loader-circle animate-spin self-center text-xl" /> 218 + } 219 + > 220 + <BlobView pds={pds!} repo={did} /> 221 + </Suspense> 222 + </ErrorBoundary> 223 + </Show> 224 + <Show when={nsids() && (!location.hash || location.hash === "#collections")}> 225 + <TextInput 226 + name="filter" 227 + placeholder="Filter collections" 228 + onInput={(e) => setFilter(e.currentTarget.value)} 229 + class="grow" 230 + /> 231 + <div class="flex flex-col font-mono"> 232 + <div class="grid grid-cols-[min-content_1fr] items-center gap-x-2 overflow-hidden text-sm"> 233 + <For 234 + each={Object.keys(nsids() ?? {}).filter((authority) => 235 + filter() ? 236 + authority.startsWith(filter()!) || filter()?.startsWith(authority) 237 + : true, 238 + )} 239 + > 240 + {(authority) => ( 241 + <> 242 + <button onclick={() => toggleCollection(authority)} class="flex items-center"> 243 + <span 244 + classList={{ 245 + "iconify lucide--chevron-down text-lg transition-transform": true, 246 + "-rotate-90": nsids()?.[authority].hidden, 247 + }} 248 + ></span> 249 + </button> 250 + <button 251 + class="bg-transparent text-left wrap-anywhere" 252 + onclick={() => toggleCollection(authority)} 253 + > 254 + {authority} 255 + </button> 256 + <Show when={!nsids()?.[authority].hidden}> 257 + <div></div> 258 + <div class="flex flex-col"> 259 + <For 260 + each={nsids()?.[authority].nsids.filter((nsid) => 261 + filter() ? 262 + nsid.startsWith(filter()!.split(".").slice(2).join(".")) 263 + : true, 264 + )} 265 + > 266 + {(nsid) => ( 267 + <A 268 + href={`/at://${did}/${authority}.${nsid}`} 269 + class="text-blue-400 hover:underline active:underline" 270 + > 271 + {authority}.{nsid} 272 + </A> 273 + )} 274 + </For> 275 + </div> 276 + </Show> 277 + </> 278 + )} 279 + </For> 280 + </div> 279 281 </div> 280 - </div> 281 - </Show> 282 - <Show when={location.hash === "#identity"}> 283 - <Show when={didDoc()}> 284 - {(didDocument) => ( 285 - <div class="flex flex-col gap-y-1 wrap-anywhere"> 286 - <div class="flex items-baseline justify-between gap-2"> 282 + </Show> 283 + <Show when={location.hash === "#identity"}> 284 + <Show when={didDoc()}> 285 + {(didDocument) => ( 286 + <div class="flex flex-col gap-y-1 wrap-anywhere"> 287 + <div class="flex items-baseline justify-between gap-2"> 288 + <div> 289 + <div class="flex items-center gap-1"> 290 + <div class="iconify lucide--id-card" /> 291 + <p class="font-semibold">ID</p> 292 + </div> 293 + <div class="text-sm">{didDocument().id}</div> 294 + </div> 295 + <Tooltip text="DID document"> 296 + <a 297 + href={ 298 + did.startsWith("did:plc") ? 299 + `${localStorage.plcDirectory ?? "https://plc.directory"}/${did}` 300 + : `https://${did.split("did:web:")[1]}/.well-known/did.json` 301 + } 302 + target="_blank" 303 + class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 304 + > 305 + <span class="iconify lucide--external-link"></span> 306 + </a> 307 + </Tooltip> 308 + </div> 287 309 <div> 288 310 <div class="flex items-center gap-1"> 289 - <div class="iconify lucide--id-card" /> 290 - <p class="font-semibold">ID</p> 311 + <div class="iconify lucide--at-sign" /> 312 + <p class="font-semibold">Aliases</p> 291 313 </div> 292 - <div class="text-sm">{didDocument().id}</div> 314 + <ul> 315 + <For each={didDocument().alsoKnownAs}> 316 + {(alias) => ( 317 + <li class="flex items-center gap-1 text-sm"> 318 + <span>{alias}</span> 319 + <Show when={alias.startsWith("at://")}> 320 + <Tooltip 321 + text={ 322 + validHandles[alias] === true ? "Valid handle" 323 + : validHandles[alias] === undefined ? 324 + "Validating" 325 + : "Invalid handle" 326 + } 327 + > 328 + <span 329 + classList={{ 330 + "iconify lucide--circle-check": validHandles[alias] === true, 331 + "iconify lucide--circle-x text-red-500 dark:text-red-400": 332 + validHandles[alias] === false, 333 + "iconify lucide--loader-circle animate-spin": 334 + validHandles[alias] === undefined, 335 + }} 336 + ></span> 337 + </Tooltip> 338 + </Show> 339 + </li> 340 + )} 341 + </For> 342 + </ul> 293 343 </div> 294 - <Tooltip text="DID document"> 295 - <a 296 - href={ 297 - did.startsWith("did:plc") ? 298 - `${localStorage.plcDirectory ?? "https://plc.directory"}/${did}` 299 - : `https://${did.split("did:web:")[1]}/.well-known/did.json` 300 - } 301 - target="_blank" 302 - class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 303 - > 304 - <span class="iconify lucide--external-link"></span> 305 - </a> 306 - </Tooltip> 307 - </div> 308 - <div> 309 - <div class="flex items-center gap-1"> 310 - <div class="iconify lucide--at-sign" /> 311 - <p class="font-semibold">Aliases</p> 344 + <div> 345 + <div class="flex items-center gap-1"> 346 + <div class="iconify lucide--hard-drive" /> 347 + <p class="font-semibold">Services</p> 348 + </div> 349 + <ul> 350 + <For each={didDocument().service}> 351 + {(service) => ( 352 + <li class="flex flex-col text-sm"> 353 + <span>#{service.id.split("#")[1]}</span> 354 + <a 355 + class="w-fit text-blue-400 hover:underline active:underline" 356 + href={service.serviceEndpoint.toString()} 357 + target="_blank" 358 + > 359 + {service.serviceEndpoint.toString()} 360 + </a> 361 + </li> 362 + )} 363 + </For> 364 + </ul> 312 365 </div> 313 - <ul> 314 - <For each={didDocument().alsoKnownAs}> 315 - {(alias) => ( 316 - <li class="flex items-center gap-1 text-sm"> 317 - <span>{alias}</span> 318 - <Show when={alias.startsWith("at://")}> 319 - <Tooltip 320 - text={ 321 - validHandles[alias] === true ? "Valid handle" 322 - : validHandles[alias] === undefined ? 323 - "Validating" 324 - : "Invalid handle" 325 - } 326 - > 327 - <span 328 - classList={{ 329 - "iconify lucide--circle-check": validHandles[alias] === true, 330 - "iconify lucide--circle-x text-red-500 dark:text-red-400": 331 - validHandles[alias] === false, 332 - "iconify lucide--loader-circle animate-spin": 333 - validHandles[alias] === undefined, 334 - }} 335 - ></span> 336 - </Tooltip> 366 + <div> 367 + <div class="flex items-center gap-1"> 368 + <div class="iconify lucide--shield-check" /> 369 + <p class="font-semibold">Verification methods</p> 370 + </div> 371 + <ul> 372 + <For each={didDocument().verificationMethod}> 373 + {(verif) => ( 374 + <Show when={verif.publicKeyMultibase}> 375 + {(key) => ( 376 + <li class="flex flex-col text-sm"> 377 + <span>#{verif.id.split("#")[1]}</span> 378 + <span class="flex items-center gap-0.5"> 379 + <div class="iconify lucide--key-round" /> 380 + <ErrorBoundary fallback={<>unknown</>}> 381 + {parsePublicMultikey(key()).type} 382 + </ErrorBoundary> 383 + </span> 384 + <span class="truncate">{key()}</span> 385 + </li> 386 + )} 337 387 </Show> 338 - </li> 339 - )} 340 - </For> 341 - </ul> 342 - </div> 343 - <div> 344 - <div class="flex items-center gap-1"> 345 - <div class="iconify lucide--hard-drive" /> 346 - <p class="font-semibold">Services</p> 388 + )} 389 + </For> 390 + </ul> 347 391 </div> 348 - <ul> 349 - <For each={didDocument().service}> 350 - {(service) => ( 351 - <li class="flex flex-col text-sm"> 352 - <span>#{service.id.split("#")[1]}</span> 353 - <a 354 - class="w-fit text-blue-400 hover:underline active:underline" 355 - href={service.serviceEndpoint.toString()} 356 - target="_blank" 357 - > 358 - {service.serviceEndpoint.toString()} 359 - </a> 360 - </li> 361 - )} 362 - </For> 363 - </ul> 364 392 </div> 365 - <div> 366 - <div class="flex items-center gap-1"> 367 - <div class="iconify lucide--shield-check" /> 368 - <p class="font-semibold">Verification methods</p> 369 - </div> 370 - <ul> 371 - <For each={didDocument().verificationMethod}> 372 - {(verif) => ( 373 - <Show when={verif.publicKeyMultibase}> 374 - {(key) => ( 375 - <li class="flex flex-col text-sm"> 376 - <span>#{verif.id.split("#")[1]}</span> 377 - <span class="flex items-center gap-0.5"> 378 - <div class="iconify lucide--key-round" /> 379 - <ErrorBoundary fallback={<>unknown</>}> 380 - {parsePublicMultikey(key()).type} 381 - </ErrorBoundary> 382 - </span> 383 - <span class="truncate">{key()}</span> 384 - </li> 385 - )} 386 - </Show> 387 - )} 388 - </For> 389 - </ul> 390 - </div> 391 - </div> 392 - )} 393 + )} 394 + </Show> 393 395 </Show> 394 - </Show> 396 + </div> 395 397 </div> 396 398 </Show> 397 399 );