forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: various css architecture improvements, phosphor icons, webawesome setup, connect s3 prep, etc.
+246
-82
+12
-13
_config.ts
+12
-13
_config.ts
···
42
42
bundle: true,
43
43
format: "esm",
44
44
minify: true,
45
-
external: ["./file-tree.json"],
45
+
external: ["./file-tree.json", "@awesome.me/webawesome/*"],
46
46
platform: "browser",
47
47
plugins: [
48
48
// @ts-ignore
···
221
221
222
222
function phosphor(path: string) {
223
223
site.remoteFile(
224
-
`vendor/@phosphor-icons/${path}`,
224
+
`vendor/@phosphor-icons/web/${path}`,
225
225
import.meta.resolve(`./node_modules/@phosphor-icons/web/src/${path}`),
226
226
);
227
227
228
-
site.add(`vendor/@phosphor-icons/${path}`);
228
+
site.add(`vendor/@phosphor-icons/web/${path}`);
229
229
}
230
230
231
-
phosphor("fill/style.css");
232
-
phosphor("fill/Phosphor-Fill.svg");
233
-
phosphor("fill/Phosphor-Fill.ttf");
234
-
phosphor("fill/Phosphor-Fill.woff");
235
-
phosphor("fill/Phosphor-Fill.woff2");
236
-
phosphor("bold/style.css");
237
-
phosphor("bold/Phosphor-Bold.svg");
238
-
phosphor("bold/Phosphor-Bold.ttf");
239
-
phosphor("bold/Phosphor-Bold.woff");
240
-
phosphor("bold/Phosphor-Bold.woff2");
231
+
["bold", "duotone", "fill", "light", "regular", "light"].forEach((v) => {
232
+
const f = v === "regular" ? "" : `-${v[0].toUpperCase()}${v.slice(1)}`;
233
+
phosphor(`${v}/selection.json`);
234
+
phosphor(`${v}/style.css`);
235
+
phosphor(`${v}/Phosphor${f}.svg`);
236
+
phosphor(`${v}/Phosphor${f}.ttf`);
237
+
phosphor(`${v}/Phosphor${f}.woff`);
238
+
phosphor(`${v}/Phosphor${f}.woff2`);
239
+
});
241
240
242
241
////////////////////////////////////////////
243
242
// WEB AWESOME
+1
deno.jsonc
+1
deno.jsonc
···
26
26
"@codemirror/lang-html": "npm:@codemirror/lang-html@^6.4.11",
27
27
"@codemirror/lang-javascript": "npm:@codemirror/lang-javascript@^6.2.5",
28
28
"@fcrozatier/htmlcrunch": "jsr:@fcrozatier/htmlcrunch@^1.5.1",
29
+
"@fortawesome/free-regular-svg-icons": "npm:@fortawesome/free-regular-svg-icons@^7.2.0",
29
30
"@fry69/deep-diff": "jsr:@fry69/deep-diff@^0.1.10",
30
31
"@mary/ds-queue": "jsr:@mary/ds-queue@^0.1.3",
31
32
"@noble/ciphers": "npm:@noble/ciphers@^2.1.1",
+7
src/_data/facets.json
+7
src/_data/facets.json
···
30
30
"desc": "Store tracks locally for offline usage automatically after they've been playing for a while."
31
31
},
32
32
{
33
+
"url": "facets/connect/s3/index.html",
34
+
"title": "Connect to S3",
35
+
"category": "Data",
36
+
"featured": true,
37
+
"desc": "Connect to an S3-compatible storage for audio input or user-data storage."
38
+
},
39
+
{
33
40
"url": "facets/data/export-import/index.html",
34
41
"title": "Export & Import",
35
42
"category": "Data",
+3
-1
src/_includes/layouts/diffuse.vto
+3
-1
src/_includes/layouts/diffuse.vto
···
43
43
"~/": "./",
44
44
45
45
"@atcute/tid": "./vendor/@atcute/tid/index.js",
46
+
46
47
"@awesome.me/webawesome/dist/": "./vendor/@awesome.me/webawesome/",
47
-
"@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/"
48
+
"@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/",
49
+
"@phosphor-icons/web/": "./vendor/@phosphor-icons/web/"
48
50
}
49
51
}
50
52
</script>
+2
-2
src/_includes/layouts/kitchen.vto
+2
-2
src/_includes/layouts/kitchen.vto
···
7
7
- styles/base.css
8
8
- styles/diffuse/page.css
9
9
- styles/diffuse/code-editor.css
10
-
- vendor/@phosphor-icons/bold/style.css
11
-
- vendor/@phosphor-icons/fill/style.css
10
+
- vendor/@phosphor-icons/web/bold/style.css
11
+
- vendor/@phosphor-icons/web/fill/style.css
12
12
13
13
scripts:
14
14
- common/pages/ppr.js
+32
src/common/webawesome/phosphor/_lib.js
+32
src/common/webawesome/phosphor/_lib.js
···
1
+
/**
2
+
* @param {{ icons: Array<{ icon: { paths: string[], attrs: object[] }, properties: { name: string } }> }} selection
3
+
* @returns {Map<string, { paths: string[], attrs: object[] }>}
4
+
*/
5
+
export function buildIconMap(selection) {
6
+
const map = new Map();
7
+
for (const icon of selection.icons) {
8
+
const { name } = icon.properties;
9
+
// Strip weight suffix to get base name (e.g. "gear-bold" → "gear")
10
+
const baseName = name.replace(/-(?:bold|fill|light|thin|regular|duotone)$/, "");
11
+
map.set(baseName, { paths: icon.icon.paths, attrs: icon.icon.attrs });
12
+
}
13
+
return map;
14
+
}
15
+
16
+
/**
17
+
* @param {string[]} paths
18
+
* @param {object[]} attrs
19
+
* @returns {string}
20
+
*/
21
+
export function makeSvgDataUrl(paths, attrs) {
22
+
const pathEls = paths
23
+
.map((d, i) => {
24
+
const a = attrs[i] ?? {};
25
+
const attrStr = Object.entries(a)
26
+
.map(([k, v]) => `${k}="${v}"`)
27
+
.join(" ");
28
+
return attrStr ? `<path ${attrStr} d="${d}"/>` : `<path d="${d}"/>`;
29
+
})
30
+
.join("");
31
+
return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor">${pathEls}</svg>`)}`;
32
+
}
+15
src/common/webawesome/phosphor/bold.js
+15
src/common/webawesome/phosphor/bold.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/bold/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/bold", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+15
src/common/webawesome/phosphor/duotone.js
+15
src/common/webawesome/phosphor/duotone.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/duotone/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/duotone", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+15
src/common/webawesome/phosphor/fill.js
+15
src/common/webawesome/phosphor/fill.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/fill/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/fill", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+15
src/common/webawesome/phosphor/light.js
+15
src/common/webawesome/phosphor/light.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/light/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/light", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+15
src/common/webawesome/phosphor/regular.js
+15
src/common/webawesome/phosphor/regular.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/regular/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/regular", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+15
src/common/webawesome/phosphor/thin.js
+15
src/common/webawesome/phosphor/thin.js
···
1
+
import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js";
2
+
import data from "@phosphor-icons/web/thin/selection.json" with {
3
+
type: "json",
4
+
};
5
+
6
+
import { buildIconMap, makeSvgDataUrl } from "./_lib.js";
7
+
8
+
const map = buildIconMap(data);
9
+
10
+
registerIconLibrary("phosphor/thin", {
11
+
resolver: (name) => {
12
+
const icon = map.get(name);
13
+
return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : "";
14
+
},
15
+
});
+2
-2
src/elements.vto
+2
-2
src/elements.vto
+21
src/facets/connect/s3/index.html
+21
src/facets/connect/s3/index.html
···
1
+
<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/webawesome.css" />
2
+
3
+
<style>
4
+
#container {
5
+
display: flex;
6
+
align-items: center;
7
+
justify-content: center;
8
+
min-height: 100dvh;
9
+
}
10
+
</style>
11
+
12
+
<main class="wa-theme-default wa-cloak wa-stack wa-gap-2xl">
13
+
<div class="wa-stack wa-gap-xs wa-align-items-center">
14
+
<h2 class="wa-heading-2xl">Connect S3</h2>
15
+
<p class="wa-caption-m">
16
+
Connect to an S3-compatible storage for audio input or user-data storage.
17
+
</p>
18
+
</div>
19
+
</main>
20
+
21
+
<script type="module" src="facets/connect/s3/index.inline.js"></script>
+7
src/facets/connect/s3/index.inline.js
+7
src/facets/connect/s3/index.inline.js
···
1
+
import "@awesome.me/webawesome/dist/components/card/card.js";
2
+
import "@awesome.me/webawesome/dist/components/button/button.js";
3
+
import "@awesome.me/webawesome/dist/components/drawer/drawer.js";
4
+
import "@awesome.me/webawesome/dist/components/input/input.js";
5
+
import "@awesome.me/webawesome/dist/components/icon/icon.js";
6
+
7
+
import "~/common/webawesome/detect-dark.js";
+1
-1
src/facets/data/export-import/index.html
+1
-1
src/facets/data/export-import/index.html
+2
-2
src/facets/data/v3-import/index.html
+2
-2
src/facets/data/v3-import/index.html
···
29
29
<style>
30
30
@import "./styles/base.css";
31
31
@import "./styles/wireframe/ui.css";
32
-
@import "./vendor/@phosphor-icons/bold/style.css";
33
-
@import "./vendor/@phosphor-icons/fill/style.css";
32
+
@import "./vendor/@phosphor-icons/web/bold/style.css";
33
+
@import "./vendor/@phosphor-icons/web/fill/style.css";
34
34
35
35
body {
36
36
display: flex;
+48
-46
src/facets/misc/scrobble/last.fm/index.html
+48
-46
src/facets/misc/scrobble/last.fm/index.html
···
1
-
<link rel="stylesheet" href="vendor/@awesome.me/webawesome/styles/themes/default.css" />
1
+
<style>
2
+
@import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
2
3
3
-
<main>
4
-
<wa-card>
5
-
<div slot="header" class="card-header">
6
-
<strong>Last.fm</strong>
7
-
<!--<wa-button id="settings-btn" appearance="plain" size="small" aria-label="API credentials">
8
-
<wa-icon name="gear"></wa-icon>
9
-
</wa-button>-->
10
-
</div>
4
+
@layer base, diffuse, wa;
11
5
12
-
<div id="state-connect" class="card-body">
13
-
<p>Connect your Last.fm account to start scrobbling.</p>
14
-
<wa-button id="sign-in-btn" variant="brand" appearance="filled">
15
-
<wa-icon slot="prefix" name="plug"></wa-icon>
16
-
Connect
17
-
</wa-button>
18
-
</div>
19
-
20
-
<div id="state-connected" class="card-body" hidden>
21
-
<p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
22
-
<wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
23
-
<wa-icon slot="prefix" name="plug-slash"></wa-icon>
24
-
Disconnect
25
-
</wa-button>
26
-
</div>
27
-
</wa-card>
28
-
29
-
<wa-drawer id="credentials-drawer" label="API Credentials" placement="end">
30
-
<div class="drawer-body">
31
-
<wa-input id="api-key-input" label="API Key" placeholder="Default"></wa-input>
32
-
<wa-input
33
-
id="api-secret-input"
34
-
label="API Secret"
35
-
type="password"
36
-
placeholder="Default"
37
-
></wa-input>
38
-
</div>
39
-
<div slot="footer" class="drawer-footer">
40
-
<wa-button id="save-creds-btn" variant="brand" appearance="filled">Save</wa-button>
41
-
<wa-button id="reset-creds-btn" variant="neutral" appearance="outlined"
42
-
>Reset to defaults</wa-button
43
-
>
44
-
</div>
45
-
</wa-drawer>
46
-
</main>
47
-
48
-
<style>
49
6
#container {
50
7
display: flex;
51
8
align-items: center;
···
100
57
margin: 0;
101
58
}
102
59
</style>
60
+
61
+
<main class="wa-theme-default">
62
+
<wa-card>
63
+
<div slot="header" class="card-header">
64
+
<strong>Last.fm</strong>
65
+
<!--<wa-button id="settings-btn" appearance="plain" size="small" aria-label="API credentials">
66
+
<wa-icon name="gear"></wa-icon>
67
+
</wa-button>-->
68
+
</div>
69
+
70
+
<div id="state-connect" class="card-body">
71
+
<p>Connect your Last.fm account to start scrobbling.</p>
72
+
<wa-button id="sign-in-btn" variant="brand" appearance="filled">
73
+
<wa-icon slot="start" library="phosphor/bold" name="plugs"></wa-icon>
74
+
Connect
75
+
</wa-button>
76
+
</div>
77
+
78
+
<div id="state-connected" class="card-body" hidden>
79
+
<p id="handle-paragraph" hidden>Connected as <strong id="handle-text"></strong>.</p>
80
+
<wa-button id="sign-out-btn" variant="neutral" appearance="outlined" hidden>
81
+
<wa-icon slot="start" library="phosphor/bold" name="plugs-connecte"></wa-icon>
82
+
Disconnect
83
+
</wa-button>
84
+
</div>
85
+
</wa-card>
86
+
87
+
<wa-drawer id="credentials-drawer" label="API Credentials" placement="end">
88
+
<div class="drawer-body">
89
+
<wa-input id="api-key-input" label="API Key" placeholder="Default"></wa-input>
90
+
<wa-input
91
+
id="api-secret-input"
92
+
label="API Secret"
93
+
type="password"
94
+
placeholder="Default"
95
+
></wa-input>
96
+
</div>
97
+
<div slot="footer" class="drawer-footer">
98
+
<wa-button id="save-creds-btn" variant="brand" appearance="filled">Save</wa-button>
99
+
<wa-button id="reset-creds-btn" variant="neutral" appearance="outlined"
100
+
>Reset to defaults</wa-button
101
+
>
102
+
</div>
103
+
</wa-drawer>
104
+
</main>
103
105
104
106
<script type="module" src="facets/misc/scrobble/last.fm/index.inline.js"></script>
105
107
+1
src/facets/misc/scrobble/last.fm/index.inline.js
+1
src/facets/misc/scrobble/last.fm/index.inline.js
+1
-1
src/facets/playback/auto-queue/index.html
+1
-1
src/facets/playback/auto-queue/index.html
+2
-2
src/index.vto
+2
-2
src/index.vto
···
4
4
styles:
5
5
- styles/base.css
6
6
- styles/diffuse/page.css
7
-
- vendor/@phosphor-icons/bold/style.css
8
-
- vendor/@phosphor-icons/fill/style.css
7
+
- vendor/@phosphor-icons/web/bold/style.css
8
+
- vendor/@phosphor-icons/web/fill/style.css
9
9
10
10
scripts:
11
11
- common/pages/version-upgrade.js
+4
-2
src/l/index.vto
+4
-2
src/l/index.vto
+6
-6
src/styles/base.css
+6
-6
src/styles/base.css
···
1
-
@import "./reset.css";
2
-
@import "./variables.css";
3
-
@import "./font-faces.css";
4
-
@import "./animations.css";
1
+
@import "./reset.css" layer(base.reset);
2
+
@import "./variables.css" layer(base.variables);
3
+
@import "./animations.css" layer(base.animations);
5
4
6
-
@import "./diffuse/colors.css";
7
-
@import "./diffuse/fonts.css";
5
+
@import "./diffuse/colors.css" layer(diffuse.colors);
6
+
@import "./diffuse/font-faces.css" layer(diffuse.font-faces);
7
+
@import "./diffuse/fonts.css" layer(diffuse.fonts);
8
8
9
9
:root {
10
10
color-scheme: light dark;
src/styles/font-faces.css
src/styles/diffuse/font-faces.css
src/styles/font-faces.css
src/styles/diffuse/font-faces.css
+2
-2
src/themes/blur/artwork-controller/element.js
+2
-2
src/themes/blur/artwork-controller/element.js
···
427
427
});
428
428
429
429
return html`
430
-
<link rel="stylesheet" href="vendor/@phosphor-icons/bold/style.css" />
431
-
<link rel="stylesheet" href="vendor/@phosphor-icons/fill/style.css" />
430
+
<link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" />
431
+
<link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" />
432
432
<link rel="stylesheet" href="styles/animations.css" />
433
433
<link rel="stylesheet" href="themes/blur/artwork-controller/element.css" />
434
434
+2
-2
src/themes/blur/artwork-controller/facet/index.html
+2
-2
src/themes/blur/artwork-controller/facet/index.html