Accounts component

src/App.svelte

@@ -1,19 +1,35 @@
 <script lang="ts">
   import PostComponent from "./lib/PostComponent.svelte";
-  import { fetchAllPosts, Post } from "./lib/pdsfetch";
+  import AccountComponent from "./lib/AccountComponent.svelte";
+  import { fetchAllPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   const postsPromise = fetchAllPosts();
+  const accountsPromise = getAllMetadataFromPds();
 </script>
 
 <main>
+  <h1>Welcome to the Feed</h1>
+  {#await accountsPromise}
+    <p>Loading...</p>
+  {:then accountsData}
+    <div id="Account">
+      {#each accountsData as accountObject}
+        <AccountComponent account={accountObject} />
+      {/each}
+    </div>
+  {:catch error}
+    <p>Error: {error.message}</p>    
+  {/await}
+
   {#await postsPromise}
     <p>Loading...</p>
   {:then postsData}
+    <div id="Feed">
       {#each postsData as postObject}
         <PostComponent post={postObject as Post} />
       {/each}
+    </div>
   {/await}
 </main>
 
 <style>
-
 </style>

src/lib/AccountComponent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { AccountMetadata } from "./pdsfetch";
+    const { account }: { account: AccountMetadata } = $props();
+</script>
+<div id="accountContainer">
+        {#if account.avatarCid}
+            <img
+                id="avatar"
+                alt="avatar of {account.displayName}"
+                src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
+            />
+        {/if}
+        <p>{account.displayName}</p>
+</div>
+<style>
+    #accountContainer {
+        display: column;
+        text-align: start;
+        border: 2px solid black;
+        padding: 4%;
+    }
+    #avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
+</style>

src/lib/PostComponent.svelte

@@ -8,6 +8,7 @@
     {#if post.authorAvatarCid}
       <img
         id="avatar"
+        alt="avatar of {post.displayName}"
         src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.authorAvatarCid}"
       />
     {/if}
@@ -18,13 +19,16 @@
     {#if post.replyingDid}
       <p>Replying to: {post.replyingDid}</p>
     {/if}
-    {#if post.imagesLinksCid}
-      {#each post.imagesLinksCid as imageLink}
+    {#if post.imagesCid}
+      <div id="imagesContainer">
+        {#each post.imagesCid as imageLink}
           <img
             id="embedImages"
+            alt="Post Image"
             src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={imageLink}"
           />
         {/each}
+      </div>
     {/if}
     {#if post.videosLinkCid}
       <video

src/lib/pdsfetch.ts

@@ -1,5 +1,10 @@
 import { simpleFetchHandler, XRPC } from "@atcute/client";
 import "@atcute/bluesky/lexicons";
+import type {
+  AppBskyActorDefs,
+  AppBskyFeedPost,
+  ComAtprotoRepoListRecords,
+} from "@atcute/client/lexicons";
 // import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
 // import { AppBskyFeedPost } from "@atcute/client/lexicons";
 // import { AppBskyActorDefs } from "@atcute/client/lexicons";
@@ -18,10 +23,13 @@ class Post {
   timenotstamp: string;
   quotingDid: string | null;
   replyingDid: string | null;
-  imagesLinksCid: string[] | null;
+  imagesCid: string[] | null;
   videosLinkCid: string | null;
 
-  constructor(record: ComAtprotoRepoListRecords.Record, account : AccountMetadata) {
+  constructor(
+    record: ComAtprotoRepoListRecords.Record,
+    account: AccountMetadata,
+  ) {
     this.authorDid = account.did;
     this.authorAvatarCid = account.avatarCid;
     this.displayName = account.displayName;
@@ -35,11 +43,11 @@ class Post {
       this.replyingDid = null;
     }
     this.quotingDid = null;
-    this.imagesLinksCid = null;
+    this.imagesCid = null;
     this.videosLinkCid = null;
     switch (post.embed?.$type) {
       case "app.bsky.embed.images":
-        this.imagesLinksCid = post.embed.images.map((imageRecord) =>
+        this.imagesCid = post.embed.images.map((imageRecord: any) =>
           imageRecord.image.ref.$link
         );
         break;
@@ -53,7 +61,7 @@ class Post {
         this.quotingDid = didFromATuri(post.embed.record.record.uri).repo;
         switch (post.embed.media.$type) {
           case "app.bsky.embed.images":
-            this.imagesLinksCid = post.embed.media.images.map((imageRecord) =>
+            this.imagesCid = post.embed.media.images.map((imageRecord) =>
               imageRecord.image.ref.$link
             );
 
@@ -142,10 +150,19 @@ const fetchAllPosts = async () => {
     ),
   );
   const posts: Post[] = postRecords.flatMap((userFetch) =>
-    userFetch.records.map((record) => new Post(record, users.find((user : AccountMetadata) => user.did == userFetch.did)))
+    userFetch.records.map((record) => {
+      const user = users.find((user: AccountMetadata) =>
+        user.did == userFetch.did
+      );
+      if (!user) {
+        throw new Error(`User with DID ${userFetch.did} not found`);
+      }
+      return new Post(record, user);
+    })
   );
   posts.sort((a, b) => b.timestamp - a.timestamp);
   return posts;
 };
 
-export { fetchAllPosts, Post };
+export { fetchAllPosts, getAllMetadataFromPds, Post };
+export type { AccountMetadata };