A music player that connects to your cloud/distributed storage.
chore: recommended input & output
+30
-6
+16
-3
src/facets/connect/index.html
+16
-3
src/facets/connect/index.html
···
111
111
}
112
112
113
113
.connect-item__name {
114
+
align-items: center;
115
+
display: flex;
114
116
font-weight: 600;
115
-
overflow: hidden;
116
-
text-overflow: ellipsis;
117
-
white-space: nowrap;
117
+
gap: var(--space-xs);
118
+
}
119
+
120
+
.connect-item__badge {
121
+
background: oklch(from var(--text-color) l c h / 0.075);
122
+
border-radius: 9999px;
123
+
color: oklch(from var(--text-color) l c h / 0.5);
124
+
flex-shrink: 0;
125
+
font-size: 50%;
126
+
font-weight: 500;
127
+
letter-spacing: var(--tracking-wide);
128
+
padding: var(--space-3xs);
129
+
text-box: trim-both cap alphabetic;
130
+
text-transform: uppercase;
118
131
}
119
132
120
133
.connect-item__detail {
+14
-3
src/facets/connect/index.inline.js
+14
-3
src/facets/connect/index.inline.js
···
20
20
"facets/connect/webdav/index.html": "hard-drive",
21
21
};
22
22
23
+
const recommended = new Set([
24
+
"facets/connect/atproto/index.html",
25
+
"facets/connect/dropbox/index.html",
26
+
"facets/connect/local/index.html",
27
+
]);
28
+
23
29
const facets = facetsData
24
30
.filter(
25
31
(f) =>
···
31
37
description: f.desc,
32
38
icon: icons[f.url] ?? "plug",
33
39
href: loaderHref(f.url),
34
-
}));
40
+
isRecommended: recommended.has(f.url),
41
+
}))
42
+
;
35
43
36
44
const main = document.querySelector("main");
37
45
if (!main) throw new Error("No <main> element");
···
59
67
</div>
60
68
<div class="connect-index__right">
61
69
<ul class="connect-list">
62
-
${facets.map(({ name, description, icon, href }) =>
70
+
${facets.map(({ name, description, icon, href, isRecommended }) =>
63
71
html`
64
72
<li>
65
73
<a class="connect-item" href="${href}">
66
74
<i class="ph-fill ph-${icon} connect-item__icon"></i>
67
75
<div class="connect-item__info">
68
-
<span class="connect-item__name">${name}</span>
76
+
<span class="connect-item__name">
77
+
${name}
78
+
${isRecommended ? html`<span class="connect-item__badge">Recommended</span>` : ""}
79
+
</span>
69
80
<span class="connect-item__detail">${description}</span>
70
81
</div>
71
82
</a>