audio streaming app
plyr.fm
docs: add status page and devlog links to header (#1052)
add bar-chart icon linking to status.zzstoatzz.io/@plyr.fm (matching
the main app's header) and pencil icon linking to plyr.leaflet.pub
devlog alongside the existing source code link.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
Claude Opus 4.6
and committed by
GitHub
ff8262be
0e8b724f
+33
-17
docs-site/src/components/SocialIcons.astro
+33
-17
docs-site/src/components/SocialIcons.astro
···
1
1
---
2
-
// replaces Starlight's default SocialIcons with a single link to the tangled repo
2
+
// replaces Starlight's default SocialIcons with links to status, devlog, and source
3
3
---
4
4
5
5
<div class="social-icons">
6
6
<a
7
+
href="https://status.zzstoatzz.io/@plyr.fm"
8
+
aria-label="status page"
9
+
title="status"
10
+
target="_blank"
11
+
rel="noopener"
12
+
class="social-link"
13
+
>
14
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
15
+
<rect x="6" y="14" width="4" height="6" rx="1"></rect>
16
+
<rect x="14" y="8" width="4" height="12" rx="1"></rect>
17
+
</svg>
18
+
</a>
19
+
<a
20
+
href="https://plyr.leaflet.pub"
21
+
aria-label="devlog"
22
+
title="devlog"
23
+
target="_blank"
24
+
rel="noopener"
25
+
class="social-link"
26
+
>
27
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
28
+
<path d="M12 20h9"></path>
29
+
<path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.855z"></path>
30
+
</svg>
31
+
</a>
32
+
<a
7
33
href="https://tangled.org/zzstoatzz.io/plyr.fm"
8
-
aria-label="tangled.org"
34
+
aria-label="source code"
35
+
title="source"
9
36
target="_blank"
10
37
rel="noopener"
11
-
class="tangled-link"
38
+
class="social-link"
12
39
>
13
-
<svg
14
-
xmlns="http://www.w3.org/2000/svg"
15
-
width="16"
16
-
height="16"
17
-
viewBox="0 0 24 24"
18
-
fill="none"
19
-
stroke="currentColor"
20
-
stroke-width="2"
21
-
stroke-linecap="round"
22
-
stroke-linejoin="round"
23
-
aria-hidden="true"
24
-
>
40
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
25
41
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
26
42
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
27
43
</svg>
···
35
51
gap: 0.5rem;
36
52
}
37
53
38
-
.tangled-link {
54
+
.social-link {
39
55
color: var(--sl-color-gray-1);
40
56
transition: color 0.2s ease;
41
57
display: flex;
42
58
align-items: center;
43
59
}
44
60
45
-
.tangled-link:hover {
61
+
.social-link:hover {
46
62
color: var(--sl-color-white);
47
63
}
48
64
</style>