README.md

@@ -46,11 +46,16 @@ we use our own CI/CD workflow at [`.forgejo/workflows/deploy.yaml`](.forgejo/wor
 
 ## theming
 
-themes are located in the `themes/` directory, you can create your own theme by copying one of the existing themes and modifying it to your liking.
+the colors are designated in [`src/app.css`](src/app.css) as variables, go crazy with them
 
-currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
+the rest is done by editing the css files and style tags directly, good luck
 
-you can switch themes by changing the `theme` property in `config.ts`.
+relevant files:
+
+- [`src/App.svelte`](src/App.svelte)
+- [`src/app.css`](src/app.css)
+- [`src/lib/AccountComponent.svelte`](src/lib/AccountComponent.svelte)
+- [`src/lib/PostComponent.svelte`](src/lib/PostComponent.svelte)
 
 the favicon is located at [`public/favicon.ico`](public/favicon.ico)
 

src/lib/AccountComponent.svelte

@@ -12,14 +12,10 @@
         alt="avatar of {account.displayName}"
         src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
       />
+    {/if}
     <div id="accountName">
       {account.displayName || account.handle || account.did}
     </div>
-    {:else}
-      <div id="accountName" class="no-avatar">
-        {account.displayName || account.handle || account.did}
-      </div>
-    {/if}
   </div>
 </a>
 

src/lib/pdsfetch.ts

@@ -132,13 +132,7 @@ const getDidsFromPDS = async (): Promise<At.Did[]> => {
 const getAccountMetadata = async (
   did: `did:${string}:${string}`,
 ) => {
-  const account: AccountMetadata = {
-    did: did,
-    handle: "", // Guaranteed to be filled out later
-    displayName: "",
-    avatarCid: null,
-  };
-
+  // gonna assume self exists in the app.bsky.actor.profile
   try {
     const { data } = await rpc.get("com.atproto.repo.getRecord", {
       params: {
@@ -148,22 +142,21 @@ const getAccountMetadata = async (
       },
     });
     const value = data.value as AppBskyActorProfile.Record;
-    account.displayName = value.displayName || "";
+    const handle = await blueskyHandleFromDid(did);
+    const account: AccountMetadata = {
+      did: did,
+      handle: handle,
+      displayName: value.displayName || "",
+      avatarCid: null,
+    };
     if (value.avatar) {
       account.avatarCid = value.avatar.ref["$link"];
     }
+    return account;
   } catch (e) {
-    console.warn(`Error fetching profile for ${did}:`, e);
-  }
-
-  try {
-    account.handle = await blueskyHandleFromDid(did);
-  } catch (e) {
-    console.error(`Error fetching handle for ${did}:`, e);
+    console.error(`Error fetching metadata for ${did}:`, e);
     return null;
   }
-
-  return account;
 };
 
 const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {

themes/express/theme.css

@@ -237,7 +237,6 @@ a:hover {
   margin-right: 4px;
   border: 4px solid var(--border-color);
   box-shadow: var(--border-color) 10px 10px;
-  min-height: 30px;
 }
 #accountName {
   margin-left: 10px;
@@ -250,10 +249,6 @@ a:hover {
   white-space: nowrap;
 }
 
-.no-avatar {
-    margin-left: 40px !important;
-}
-
 /* App.Svelte */
 /* desktop style */
 

themes/witchcraft/theme.css

@@ -235,7 +235,6 @@ a:hover {
   padding: 0px;
   margin-bottom: 15px;
   border: 1px solid var(--border-color);
-  min-height: 30px;
 }
 #accountName {
   margin-left: 10px;
@@ -248,11 +247,6 @@ a:hover {
   white-space: nowrap;
 }
 
-
-.no-avatar {
-    margin-left: 70px !important;
-}
-
 /* App.Svelte */
 /* desktop style */