forked from
joebasser.com/atmosphere-account
this repo has no description
revert(explore): use real client favicons (keep witchsky override)
Drop the four hand-built SVG client icons and go back to the per-client
favicon-from-source approach (Google S2 favicon CDN), so each client
shows its own real mark — bsky.app, blacksky.community, anisota.net,
deer.social. Witchsky stays on the locally-hosted PNG the user supplied
because witchsky.app's served favicon isn't a clean mark.
The 'Open on <client>' button on profile detail pages and the picker
inside the create/manage form both render each favicon on a small
white rounded chip, so the varied per-client colors sit cleanly
against the Atmosphere blue button background and don't look jarring.
Made-with: Cursor
+27
-107
+8
-4
assets/styles.css
+8
-4
assets/styles.css
···
2128
2128
height: 32px;
2129
2129
border-radius: 9px;
2130
2130
flex-shrink: 0;
2131
-
background: transparent;
2131
+
background: #ffffff;
2132
2132
object-fit: contain;
2133
+
padding: 4px;
2134
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
2133
2135
}
2134
2136
.profile-action-icon--glyph {
2135
2137
background: rgba(18, 26, 47, 0.08);
···
2384
2386
pointer-events: none;
2385
2387
}
2386
2388
.bsky-client-icon {
2387
-
width: 40px;
2388
-
height: 40px;
2389
+
width: 36px;
2390
+
height: 36px;
2389
2391
border-radius: 10px;
2390
2392
flex-shrink: 0;
2391
-
background: transparent;
2393
+
background: #ffffff;
2392
2394
object-fit: contain;
2395
+
padding: 4px;
2396
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
2393
2397
}
2394
2398
.bsky-client-meta {
2395
2399
display: flex;
+19
-5
lib/bsky-clients.ts
+19
-5
lib/bsky-clients.ts
···
21
21
name: string;
22
22
/** Bare hostname (used in UI subtitles + as the profile URL host). */
23
23
domain: string;
24
-
/** Path under /static/clients/ for the rendered button icon. */
24
+
/**
25
+
* URL for the small button-icon. By default we route through Google's
26
+
* S2 favicon CDN so each client's real favicon comes through without
27
+
* us having to ship per-client artwork. A few entries (e.g. witchsky)
28
+
* override this with a locally-hosted asset.
29
+
*/
25
30
iconUrl: string;
26
31
/** Returns the profile URL for a given handle on this client. */
27
32
profileUrl: (handle: string) => string;
···
29
34
30
35
const profileUrlAt = (host: string) => (handle: string): string =>
31
36
`https://${host}/profile/${encodeURIComponent(handle)}`;
37
+
38
+
const faviconFor = (domain: string, size = 64): string =>
39
+
`https://www.google.com/s2/favicons?sz=${size}&domain=${
40
+
encodeURIComponent(domain)
41
+
}`;
32
42
33
43
export const BSKY_CLIENTS: BskyClient[] = [
34
44
{
35
45
id: "bluesky",
36
46
name: "Bluesky",
37
47
domain: "bsky.app",
38
-
iconUrl: "/clients/bluesky.svg",
48
+
iconUrl: faviconFor("bsky.app"),
39
49
profileUrl: profileUrlAt("bsky.app"),
40
50
},
41
51
{
42
52
id: "blacksky",
43
53
name: "Blacksky",
44
54
domain: "blacksky.community",
45
-
iconUrl: "/clients/blacksky.svg",
55
+
iconUrl: faviconFor("blacksky.community"),
46
56
profileUrl: profileUrlAt("blacksky.community"),
47
57
},
48
58
{
49
59
id: "anisota",
50
60
name: "Anisota",
51
61
domain: "anisota.net",
52
-
iconUrl: "/clients/anisota.svg",
62
+
iconUrl: faviconFor("anisota.net"),
53
63
profileUrl: profileUrlAt("anisota.net"),
54
64
},
55
65
{
56
66
id: "deer",
57
67
name: "Deer Social",
58
68
domain: "deer.social",
59
-
iconUrl: "/clients/deer.svg",
69
+
iconUrl: faviconFor("deer.social"),
60
70
profileUrl: profileUrlAt("deer.social"),
61
71
},
62
72
{
73
+
/**
74
+
* Locally-hosted because witchsky.app's served favicon isn't a clean
75
+
* mark — the user supplied a higher-fidelity icon to use instead.
76
+
*/
63
77
id: "witchsky",
64
78
name: "Witchsky",
65
79
domain: "witchsky.app",
-27
static/clients/anisota.svg
-27
static/clients/anisota.svg
···
1
-
<svg
2
-
xmlns="http://www.w3.org/2000/svg"
3
-
viewBox="0 0 64 64"
4
-
role="img"
5
-
aria-label="Anisota"
6
-
>
7
-
<defs>
8
-
<linearGradient id="ani-bg" x1="0" y1="0" x2="1" y2="1">
9
-
<stop offset="0" stop-color="#f6e1b8" />
10
-
<stop offset="1" stop-color="#e3a85a" />
11
-
</linearGradient>
12
-
</defs>
13
-
<rect width="64" height="64" rx="14" fill="url(#ani-bg)" />
14
-
<g fill="#3b1d0a">
15
-
<ellipse cx="20" cy="26" rx="11" ry="8" transform="rotate(-22 20 26)" />
16
-
<ellipse cx="44" cy="26" rx="11" ry="8" transform="rotate(22 44 26)" />
17
-
<ellipse cx="22" cy="42" rx="9" ry="6" transform="rotate(20 22 42)" />
18
-
<ellipse cx="42" cy="42" rx="9" ry="6" transform="rotate(-20 42 42)" />
19
-
<ellipse cx="32" cy="34" rx="3" ry="14" />
20
-
</g>
21
-
<g fill="#f8e6c2">
22
-
<circle cx="18" cy="24" r="2" />
23
-
<circle cx="46" cy="24" r="2" />
24
-
<circle cx="22" cy="42" r="1.5" />
25
-
<circle cx="42" cy="42" r="1.5" />
26
-
</g>
27
-
</svg>
-20
static/clients/blacksky.svg
-20
static/clients/blacksky.svg
···
1
-
<svg
2
-
xmlns="http://www.w3.org/2000/svg"
3
-
viewBox="0 0 64 64"
4
-
role="img"
5
-
aria-label="Blacksky"
6
-
>
7
-
<rect width="64" height="64" rx="14" fill="#0a0a0a" />
8
-
<g stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" fill="none">
9
-
<line x1="32" y1="10" x2="32" y2="20" />
10
-
<line x1="32" y1="44" x2="32" y2="54" />
11
-
<line x1="10" y1="32" x2="20" y2="32" />
12
-
<line x1="44" y1="32" x2="54" y2="32" />
13
-
<line x1="16.5" y1="16.5" x2="23.5" y2="23.5" />
14
-
<line x1="40.5" y1="40.5" x2="47.5" y2="47.5" />
15
-
<line x1="47.5" y1="16.5" x2="40.5" y2="23.5" />
16
-
<line x1="23.5" y1="40.5" x2="16.5" y2="47.5" />
17
-
</g>
18
-
<circle cx="32" cy="32" r="8" fill="#ffffff" />
19
-
<circle cx="32" cy="32" r="4.5" fill="#0a0a0a" />
20
-
</svg>
-18
static/clients/bluesky.svg
-18
static/clients/bluesky.svg
···
1
-
<svg
2
-
xmlns="http://www.w3.org/2000/svg"
3
-
viewBox="0 0 64 64"
4
-
role="img"
5
-
aria-label="Bluesky"
6
-
>
7
-
<defs>
8
-
<linearGradient id="bsky-bg" x1="0" y1="0" x2="0" y2="1">
9
-
<stop offset="0" stop-color="#7ec0ff" />
10
-
<stop offset="1" stop-color="#1185fe" />
11
-
</linearGradient>
12
-
</defs>
13
-
<rect width="64" height="64" rx="14" fill="url(#bsky-bg)" />
14
-
<path
15
-
fill="#ffffff"
16
-
d="M32 24c-3.6-6.4-9.6-10.5-13.5-10.5-3 0-4.5 2.4-4.5 5.6 0 3 1 8.6 2.1 11.7 1.5 4.4 4.4 5.4 9.4 5 .5 0 .9 0 1.3-.1-.4.1-.8.2-1.3.3-7.6 1.6-9.8 5-5.3 12.6.6 1 4.5 4.4 8.4-3.4l3.4-6.7 3.4 6.7c3.9 7.8 7.8 4.4 8.4 3.4 4.5-7.6 2.3-11-5.3-12.6-.5-.1-.9-.2-1.3-.3.4 0 .8.1 1.3.1 5 .4 7.9-.6 9.4-5 1.1-3.1 2.1-8.7 2.1-11.7 0-3.2-1.5-5.6-4.5-5.6C41.6 13.5 35.6 17.6 32 24z"
17
-
/>
18
-
</svg>
-33
static/clients/deer.svg
-33
static/clients/deer.svg
···
1
-
<svg
2
-
xmlns="http://www.w3.org/2000/svg"
3
-
viewBox="0 0 64 64"
4
-
role="img"
5
-
aria-label="Deer Social"
6
-
>
7
-
<defs>
8
-
<linearGradient id="deer-bg" x1="0" y1="0" x2="0" y2="1">
9
-
<stop offset="0" stop-color="#2f5a3a" />
10
-
<stop offset="1" stop-color="#16331f" />
11
-
</linearGradient>
12
-
</defs>
13
-
<rect width="64" height="64" rx="14" fill="url(#deer-bg)" />
14
-
<g
15
-
fill="#dcc8a0"
16
-
stroke="#dcc8a0"
17
-
stroke-linejoin="round"
18
-
stroke-linecap="round"
19
-
>
20
-
<path
21
-
d="M32 50c-6 0-10-4.5-10-10v-7c0-3.5 2-7 4-9 1-1 1.5-2 1-4-1-3 0-5 2-5 1 0 2 .8 3 2 1-1.2 2-2 3-2 2 0 3 2 2 5-.5 2 0 3 1 4 2 2 4 5.5 4 9v7c0 5.5-4 10-10 10z"
22
-
/>
23
-
<g fill="none" stroke-width="2.6">
24
-
<path d="M22 28c-1-3-3-5-5-7m5 7c-2-1-4-1-6-3m6 3c-1-2-1-4-2-6" />
25
-
<path d="M42 28c1-3 3-5 5-7m-5 7c2-1 4-1 6-3m-6 3c1-2 1-4 2-6" />
26
-
</g>
27
-
</g>
28
-
<g fill="#16331f">
29
-
<circle cx="27" cy="38" r="1.6" />
30
-
<circle cx="37" cy="38" r="1.6" />
31
-
<ellipse cx="32" cy="44.5" rx="2" ry="1.3" />
32
-
</g>
33
-
</svg>
