diff --git a/README.md b/README.md index 5fd9458..45276cb 100644 --- a/README.md +++ b/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) diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte index faf6251..3f12cf7 100644 --- a/src/lib/AccountComponent.svelte +++ b/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}" /> -
- {account.displayName || account.handle || account.did} -
- {:else} -
- {account.displayName || account.handle || account.did} -
{/if} +
+ {account.displayName || account.handle || account.did} +
diff --git a/src/lib/pdsfetch.ts b/src/lib/pdsfetch.ts index d57aff4..20120fb 100644 --- a/src/lib/pdsfetch.ts +++ b/src/lib/pdsfetch.ts @@ -132,13 +132,7 @@ const getDidsFromPDS = async (): Promise => { 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 => { diff --git a/themes/express/theme.css b/themes/express/theme.css index 58c399e..cbc2336 100644 --- a/themes/express/theme.css +++ b/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 */ diff --git a/themes/witchcraft/theme.css b/themes/witchcraft/theme.css index 8ad63d4..cd15805 100644 --- a/themes/witchcraft/theme.css +++ b/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 */