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