witchcraft.systems
+3
-8
README.md
+3
-8
README.md
···
46
46
47
47
## theming
48
48
49
-
the colors are designated in [`src/app.css`](src/app.css) as variables, go crazy with them
49
+
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.
50
50
51
-
the rest is done by editing the css files and style tags directly, good luck
51
+
currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
52
52
53
-
relevant files:
54
-
55
-
- [`src/App.svelte`](src/App.svelte)
56
-
- [`src/app.css`](src/app.css)
57
-
- [`src/lib/AccountComponent.svelte`](src/lib/AccountComponent.svelte)
58
-
- [`src/lib/PostComponent.svelte`](src/lib/PostComponent.svelte)
53
+
you can switch themes by changing the `theme` property in `config.ts`.
59
54
60
55
the favicon is located at [`public/favicon.ico`](public/favicon.ico)
61
56
+7
-3
src/lib/AccountComponent.svelte
+7
-3
src/lib/AccountComponent.svelte
···
12
12
alt="avatar of {account.displayName}"
13
13
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14
14
/>
15
+
<div id="accountName">
16
+
{account.displayName || account.handle || account.did}
17
+
</div>
18
+
{:else}
19
+
<div id="accountName" class="no-avatar">
20
+
{account.displayName || account.handle || account.did}
21
+
</div>
15
22
{/if}
16
-
<div id="accountName">
17
-
{account.displayName || account.handle || account.did}
18
-
</div>
19
23
</div>
20
24
</a>
21
25
+17
-10
src/lib/pdsfetch.ts
+17
-10
src/lib/pdsfetch.ts
···
132
132
const getAccountMetadata = async (
133
133
did: `did:${string}:${string}`,
134
134
) => {
135
-
// gonna assume self exists in the app.bsky.actor.profile
135
+
const account: AccountMetadata = {
136
+
did: did,
137
+
handle: "", // Guaranteed to be filled out later
138
+
displayName: "",
139
+
avatarCid: null,
140
+
};
141
+
136
142
try {
137
143
const { data } = await rpc.get("com.atproto.repo.getRecord", {
138
144
params: {
···
142
148
},
143
149
});
144
150
const value = data.value as AppBskyActorProfile.Record;
145
-
const handle = await blueskyHandleFromDid(did);
146
-
const account: AccountMetadata = {
147
-
did: did,
148
-
handle: handle,
149
-
displayName: value.displayName || "",
150
-
avatarCid: null,
151
-
};
151
+
account.displayName = value.displayName || "";
152
152
if (value.avatar) {
153
153
account.avatarCid = value.avatar.ref["$link"];
154
154
}
155
-
return account;
155
+
} catch (e) {
156
+
console.warn(`Error fetching profile for ${did}:`, e);
157
+
}
158
+
159
+
try {
160
+
account.handle = await blueskyHandleFromDid(did);
156
161
} catch (e) {
157
-
console.error(`Error fetching metadata for ${did}:`, e);
162
+
console.error(`Error fetching handle for ${did}:`, e);
158
163
return null;
159
164
}
165
+
166
+
return account;
160
167
};
161
168
162
169
const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {
+5
themes/express/theme.css
+5
themes/express/theme.css
···
237
237
margin-right: 4px;
238
238
border: 4px solid var(--border-color);
239
239
box-shadow: var(--border-color) 10px 10px;
240
+
min-height: 30px;
240
241
}
241
242
#accountName {
242
243
margin-left: 10px;
···
247
248
overflow: hidden;
248
249
text-overflow: ellipsis;
249
250
white-space: nowrap;
251
+
}
252
+
253
+
.no-avatar {
254
+
margin-left: 40px !important;
250
255
}
251
256
252
257
/* App.Svelte */
+6
themes/witchcraft/theme.css
+6
themes/witchcraft/theme.css
···
235
235
padding: 0px;
236
236
margin-bottom: 15px;
237
237
border: 1px solid var(--border-color);
238
+
min-height: 30px;
238
239
}
239
240
#accountName {
240
241
margin-left: 10px;
···
245
246
overflow: hidden;
246
247
text-overflow: ellipsis;
247
248
white-space: nowrap;
249
+
}
250
+
251
+
252
+
.no-avatar {
253
+
margin-left: 70px !important;
248
254
}
249
255
250
256
/* App.Svelte */