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