Cleanup the file structure

src/App.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import PostComponent from "./lib/PostComponent.svelte";
+  import { fetchAllPosts, Post } from "./lib/pdsfetch";
+  const postsPromise = fetchAllPosts();
+</script>
+
+<main>
+  {#await postsPromise}
+    <p>Loading...</p>
+  {:then postsData}
+    {#each postsData as postObject}
+      <PostComponent post={postObject as Post} />
+    {/each}
+  {/await}
+</main>
+
+<style>
+
+</style>

src/app.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/PostComponent.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Post } from "./pdsfetch";
+  let { post }: { post: Post } = $props();
+</script>
+
+<div id="postContainer">
+  <div id="postHeader">
+    {#if post.authorAvatarCid}
+      <img
+        id="avatar"
+        src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.authorAvatarCid}"
+      />
+    {/if}
+    <p>{post.displayName} | {post.timenotstamp}</p>
+  </div>
+  <div id="postContent">
+    <p>{post.text}</p>
+    {#if post.replyingDid}
+      <p>Replying to: {post.replyingDid}</p>
+    {/if}
+    {#if post.imagesLinksCid}
+      {#each post.imagesLinksCid as imageLink}
+        <img
+          id="embedImages"
+          src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={imageLink}"
+        />
+      {/each}
+    {/if}
+    {#if post.videosLinkCid}
+      <video
+        id="embedVideo"
+        src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"
+      />
+    {/if}
+  </div>
+</div>
+
+<style>
+  #postContainer {
+    display: column;
+    text-align: start;
+    border: 2px solid black;
+    padding: 4%;
+  }
+  #postHeader {
+    text-decoration: underline;
+  }
+  #avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+</style>

src/lib/pdsfetch.ts

@@ -0,0 +1,151 @@
+import { simpleFetchHandler, XRPC } from "@atcute/client";
+import "@atcute/bluesky/lexicons";
+// import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
+// import { AppBskyFeedPost } from "@atcute/client/lexicons";
+// import { AppBskyActorDefs } from "@atcute/client/lexicons";
+
+interface AccountMetadata {
+  did: string;
+  displayName: string;
+  avatarCid: string | null;
+}
+class Post {
+  authorDid: string;
+  authorAvatarCid: string | null;
+  displayName : string;
+  text: string;
+  timestamp: number;
+  timenotstamp: string;
+  quotingDid: string | null;
+  replyingDid: string | null;
+  imagesLinksCid: string[] | null;
+  videosLinkCid: string | null;
+
+  constructor(record: ComAtprotoRepoListRecords.Record, account : AccountMetadata) {
+    this.authorDid = account.did;
+    this.authorAvatarCid = account.avatarCid;
+    this.displayName = account.displayName;
+    const post = record.value as AppBskyFeedPost.Record;
+    this.timenotstamp = post.createdAt;
+    this.text = post.text;
+    this.timestamp = Date.parse(post.createdAt);
+    if (post.reply) {
+      this.replyingDid = didFromATuri(post.reply.parent.uri).repo;
+    } else {
+      this.replyingDid = null;
+    }
+    this.quotingDid = null;
+    this.imagesLinksCid = null;
+    this.videosLinkCid = null;
+    switch (post.embed?.$type) {
+      case "app.bsky.embed.images":
+        this.imagesLinksCid = post.embed.images.map((imageRecord) =>
+          imageRecord.image.ref.$link
+        );
+        break;
+      case "app.bsky.embed.video":
+        this.videosLinkCid = post.embed.video.ref.$link;
+        break;
+      case "app.bsky.embed.record":
+        this.quotingDid = didFromATuri(post.embed.record.uri).repo;
+        break;
+      case "app.bsky.embed.recordWithMedia":
+        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) =>
+              imageRecord.image.ref.$link
+            );
+
+            break;
+          case "app.bsky.embed.video":
+            this.videosLinkCid = post.embed.media.video.ref.$link;
+
+            break;
+        }
+        break;
+    }
+  }
+}
+
+const didFromATuri = (aturi: string) => {
+  const parts = aturi.split("/");
+  return {
+    repo: parts[2],
+    collection: parts[3],
+    rkey: parts[4],
+  };
+};
+
+const rpc = new XRPC({
+  handler: simpleFetchHandler({
+    service: "https://pds.witchcraft.systems",
+  }),
+});
+
+const getDidsFromPDS = async () => {
+  const { data } = await rpc.get("com.atproto.sync.listRepos", {
+    params: {},
+  });
+  return data.repos.map((repo: any) => (repo.did));
+};
+const getAccountMetadata = async (did: `did:${string}:${string}`) => {
+  // gonna assume self exists in the app.bsky.actor.profile
+  const { data } = await rpc.get("com.atproto.repo.getRecord", {
+    params: {
+      repo: did,
+      collection: "app.bsky.actor.profile",
+      rkey: "self",
+    },
+  });
+  const value = data.value as AppBskyActorDefs.ProfileView;
+  const account: AccountMetadata = {
+    did: did,
+    displayName: value.displayName || "",
+    avatarCid: null,
+  };
+  if (value.avatar) {
+    account.avatarCid = value.avatar.ref["$link"];
+  }
+  return account;
+};
+
+const getAllMetadataFromPds = async () => {
+  const dids = await getDidsFromPDS();
+  const metadata = await Promise.all(
+    dids.map(async (repo: `did:${string}:${string}`) => {
+      return await getAccountMetadata(repo);
+    }),
+  );
+  return metadata;
+};
+
+const fetchPosts = async (did: string) => {
+  const { data } = await rpc.get("com.atproto.repo.listRecords", {
+    params: {
+      repo: did,
+      collection: "app.bsky.feed.post",
+      limit: 5,
+    },
+  });
+  return {
+    records: data.records as ComAtprotoRepoListRecords.Record[],
+    did: did,
+  };
+};
+
+const fetchAllPosts = async () => {
+  const users: AccountMetadata[] = await getAllMetadataFromPds();
+  const postRecords = await Promise.all(
+    users.map(async (metadata: AccountMetadata) =>
+      await fetchPosts(metadata.did)
+    ),
+  );
+  const posts : Post[] = postRecords.flatMap((userFetch) =>
+    userFetch.records.map((record) => new Post(record, users.find((user : AccountMetadata) => user.did == userFetch.did)))
+  );
+  posts.sort((a, b) => b.timestamp - a.timestamp);
+  return posts;
+};
+
+export { fetchAllPosts, Post };

src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />