forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: connect facet
+127
-9
+10
-8
src/_data/facets.json
+10
-8
src/_data/facets.json
···
30
30
"desc": "Store tracks locally for offline usage automatically after they've been playing for a little while."
31
31
},
32
32
{
33
+
"url": "facets/connect/index.html",
34
+
"title": "Connect",
35
+
"category": "Data",
36
+
"featured": true,
37
+
"desc": "A listing of some of the options available to use as an audio source, or as a user-data storage method."
38
+
},
39
+
{
33
40
"url": "facets/connect/atproto/index.html",
34
41
"title": "Connect / AT Protocol",
35
42
"category": "Data",
36
-
"featured": true,
37
43
"desc": "Use your AT Protocol identity for user-data storage."
38
44
},
39
45
{
40
46
"url": "facets/connect/https/index.html",
41
47
"title": "Connect / HTTPS",
42
48
"category": "Data",
43
-
"desc": "Add HTTPS URLs as input."
49
+
"desc": "Add HTTPS URLs as audio sources."
44
50
},
45
51
{
46
52
"url": "facets/connect/icecast/index.html",
47
53
"title": "Connect / Icecast",
48
54
"category": "Data",
49
-
"featured": true,
50
-
"desc": "Add an Icecast stream as audio input."
55
+
"desc": "Add an Icecast stream as an audio source."
51
56
},
52
57
{
53
58
"url": "facets/connect/local/index.html",
54
59
"title": "Connect / Local",
55
60
"category": "Data",
56
-
"featured": true,
57
-
"desc": "Add local directories or files as audio input."
61
+
"desc": "Add local directories or files as audio sources."
58
62
},
59
63
{
60
64
"url": "facets/connect/opensubsonic/index.html",
61
65
"title": "Connect / OpenSubsonic",
62
66
"category": "Data",
63
-
"featured": true,
64
67
"desc": "Connect to an OpenSubsonic server for audio input."
65
68
},
66
69
{
67
70
"url": "facets/connect/s3/index.html",
68
71
"title": "Connect / S3",
69
72
"category": "Data",
70
-
"featured": true,
71
73
"desc": "Connect to an S3-compatible storage for audio input or user-data storage."
72
74
},
73
75
{
+1
src/facets/connect/common.css
+1
src/facets/connect/common.css
+1
-1
src/facets/connect/https/index.inline.js
+1
-1
src/facets/connect/https/index.inline.js
+32
src/facets/connect/index.html
+32
src/facets/connect/index.html
···
1
+
<style>
2
+
@import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
3
+
@import "./facets/connect/common.css" layer(connect);
4
+
5
+
@layer base, diffuse, wa;
6
+
7
+
ul li {
8
+
margin-left: 0;
9
+
}
10
+
11
+
.connect-item[href] {
12
+
text-decoration: none;
13
+
color: inherit;
14
+
border-radius: var(--wa-border-radius-m);
15
+
gap: var(--wa-space-m);
16
+
padding: var(--wa-space-2xs);
17
+
margin: calc(-1 * var(--wa-space-2xs));
18
+
19
+
&:hover {
20
+
background: var(--wa-color-fill-quiet);
21
+
}
22
+
}
23
+
</style>
24
+
25
+
<main class="wa-theme-default"></main>
26
+
27
+
<script type="module" src="./facets/connect/index.inline.js"></script>
28
+
29
+
<script type="module">
30
+
await customElements.whenDefined("wa-card");
31
+
document.querySelector("main")?.classList.add("has-loaded");
32
+
</script>
+80
src/facets/connect/index.inline.js
+80
src/facets/connect/index.inline.js
···
1
+
import { html, render as litRender } from "lit-html";
2
+
3
+
import "@awesome.me/webawesome/dist/components/card/card.js";
4
+
import "@awesome.me/webawesome/dist/components/divider/divider.js";
5
+
import "@awesome.me/webawesome/dist/components/icon/icon.js";
6
+
7
+
import "~/common/webawesome/detect-dark.js";
8
+
import "~/common/webawesome/phosphor/fill.js";
9
+
10
+
import { data as facetsData } from "~/facets/index.js";
11
+
12
+
document.title = "Connect | Diffuse";
13
+
14
+
/** @param {string} path */
15
+
const loaderHref = (path) => `../../l/?path=${encodeURIComponent(path)}`;
16
+
17
+
/** @type {Record<string, string>} */
18
+
const icons = {
19
+
"facets/connect/atproto/index.html": "at",
20
+
"facets/connect/https/index.html": "globe",
21
+
"facets/connect/icecast/index.html": "radio",
22
+
"facets/connect/local/index.html": "folder-open",
23
+
"facets/connect/opensubsonic/index.html": "broadcast",
24
+
"facets/connect/s3/index.html": "hard-drives",
25
+
};
26
+
27
+
const facets = facetsData
28
+
.filter(
29
+
(f) =>
30
+
f.url.startsWith("facets/connect/") &&
31
+
f.url !== "facets/connect/index.html",
32
+
)
33
+
.map((f) => ({
34
+
name: f.title.replace(/^Connect \/ /, ""),
35
+
description: f.desc,
36
+
icon: icons[f.url] ?? "plug",
37
+
href: loaderHref(f.url),
38
+
}));
39
+
40
+
const main = document.querySelector("main");
41
+
if (!main) throw new Error("No <main> element");
42
+
43
+
litRender(
44
+
html`
45
+
<wa-card>
46
+
<div slot="header" class="card-header">
47
+
<strong>Connect</strong>
48
+
</div>
49
+
<div class="card-body">
50
+
<p>
51
+
These are some of the options available to add as an audio source, or to
52
+
use as user-data storage. Some offer both, the remainder offers only one
53
+
or the other.
54
+
</p>
55
+
<wa-divider></wa-divider>
56
+
<ul class="connect-list">
57
+
${facets.map(({ name, description, icon, href }) =>
58
+
html`
59
+
<li>
60
+
<a class="connect-item" href="${href}">
61
+
<wa-icon
62
+
library="phosphor/fill"
63
+
name="${icon}"
64
+
class="wa-body-l"
65
+
style="flex-shrink: 0;"
66
+
></wa-icon>
67
+
<div class="connect-item__info">
68
+
<span class="connect-item__name">${name}</span>
69
+
<span class="connect-item__detail">${description}</span>
70
+
</div>
71
+
</a>
72
+
</li>
73
+
`
74
+
)}
75
+
</ul>
76
+
</div>
77
+
</wa-card>
78
+
`,
79
+
main,
80
+
);