From bc1919f4b4cfc2c9c2585fb5fc1752ed7727be98 Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Thu, 19 Mar 2026 23:38:50 +0100 Subject: [PATCH] chore: various css architecture improvements, phosphor icons, webawesome setup, connect s3 prep, etc. --- _config.ts | 25 +++-- deno.jsonc | 1 + src/_data/facets.json | 7 ++ src/_includes/layouts/diffuse.vto | 4 +- src/_includes/layouts/kitchen.vto | 4 +- src/common/webawesome/phosphor/_lib.js | 32 +++++++ src/common/webawesome/phosphor/bold.js | 15 +++ src/common/webawesome/phosphor/duotone.js | 15 +++ src/common/webawesome/phosphor/fill.js | 15 +++ src/common/webawesome/phosphor/light.js | 15 +++ src/common/webawesome/phosphor/regular.js | 15 +++ src/common/webawesome/phosphor/thin.js | 15 +++ src/elements.vto | 4 +- src/facets/connect/s3/index.html | 21 +++++ src/facets/connect/s3/index.inline.js | 7 ++ src/facets/data/export-import/index.html | 2 +- src/facets/data/v3-import/index.html | 4 +- src/facets/misc/scrobble/last.fm/index.html | 94 ++++++++++--------- .../misc/scrobble/last.fm/index.inline.js | 1 + src/facets/playback/auto-queue/index.html | 2 +- src/index.vto | 4 +- src/l/index.vto | 6 +- src/styles/base.css | 12 +-- src/styles/{ => diffuse}/font-faces.css | 0 src/themes/blur/artwork-controller/element.js | 4 +- .../blur/artwork-controller/facet/index.html | 4 +- 26 files changed, 246 insertions(+), 82 deletions(-) create mode 100644 src/common/webawesome/phosphor/_lib.js create mode 100644 src/common/webawesome/phosphor/bold.js create mode 100644 src/common/webawesome/phosphor/duotone.js create mode 100644 src/common/webawesome/phosphor/fill.js create mode 100644 src/common/webawesome/phosphor/light.js create mode 100644 src/common/webawesome/phosphor/regular.js create mode 100644 src/common/webawesome/phosphor/thin.js create mode 100644 src/facets/connect/s3/index.html create mode 100644 src/facets/connect/s3/index.inline.js rename src/styles/{ => diffuse}/font-faces.css (100%) diff --git a/_config.ts b/_config.ts index ffcf62bd..154f2908 100644 --- a/_config.ts +++ b/_config.ts @@ -42,7 +42,7 @@ site.use(esbuild({ bundle: true, format: "esm", minify: true, - external: ["./file-tree.json"], + external: ["./file-tree.json", "@awesome.me/webawesome/*"], platform: "browser", plugins: [ // @ts-ignore @@ -221,23 +221,22 @@ site.filter("facetLoaderURL", (text) => { function phosphor(path: string) { site.remoteFile( - `vendor/@phosphor-icons/${path}`, + `vendor/@phosphor-icons/web/${path}`, import.meta.resolve(`./node_modules/@phosphor-icons/web/src/${path}`), ); - site.add(`vendor/@phosphor-icons/${path}`); + site.add(`vendor/@phosphor-icons/web/${path}`); } -phosphor("fill/style.css"); -phosphor("fill/Phosphor-Fill.svg"); -phosphor("fill/Phosphor-Fill.ttf"); -phosphor("fill/Phosphor-Fill.woff"); -phosphor("fill/Phosphor-Fill.woff2"); -phosphor("bold/style.css"); -phosphor("bold/Phosphor-Bold.svg"); -phosphor("bold/Phosphor-Bold.ttf"); -phosphor("bold/Phosphor-Bold.woff"); -phosphor("bold/Phosphor-Bold.woff2"); +["bold", "duotone", "fill", "light", "regular", "light"].forEach((v) => { + const f = v === "regular" ? "" : `-${v[0].toUpperCase()}${v.slice(1)}`; + phosphor(`${v}/selection.json`); + phosphor(`${v}/style.css`); + phosphor(`${v}/Phosphor${f}.svg`); + phosphor(`${v}/Phosphor${f}.ttf`); + phosphor(`${v}/Phosphor${f}.woff`); + phosphor(`${v}/Phosphor${f}.woff2`); +}); //////////////////////////////////////////// // WEB AWESOME diff --git a/deno.jsonc b/deno.jsonc index 3418b19c..8ceb4344 100644 --- a/deno.jsonc +++ b/deno.jsonc @@ -26,6 +26,7 @@ "@codemirror/lang-html": "npm:@codemirror/lang-html@^6.4.11", "@codemirror/lang-javascript": "npm:@codemirror/lang-javascript@^6.2.5", "@fcrozatier/htmlcrunch": "jsr:@fcrozatier/htmlcrunch@^1.5.1", + "@fortawesome/free-regular-svg-icons": "npm:@fortawesome/free-regular-svg-icons@^7.2.0", "@fry69/deep-diff": "jsr:@fry69/deep-diff@^0.1.10", "@mary/ds-queue": "jsr:@mary/ds-queue@^0.1.3", "@noble/ciphers": "npm:@noble/ciphers@^2.1.1", diff --git a/src/_data/facets.json b/src/_data/facets.json index 6673b2ff..39fc852a 100644 --- a/src/_data/facets.json +++ b/src/_data/facets.json @@ -29,6 +29,13 @@ "featured": true, "desc": "Store tracks locally for offline usage automatically after they've been playing for a while." }, + { + "url": "facets/connect/s3/index.html", + "title": "Connect to S3", + "category": "Data", + "featured": true, + "desc": "Connect to an S3-compatible storage for audio input or user-data storage." + }, { "url": "facets/data/export-import/index.html", "title": "Export & Import", diff --git a/src/_includes/layouts/diffuse.vto b/src/_includes/layouts/diffuse.vto index 517b7e89..102be7a3 100644 --- a/src/_includes/layouts/diffuse.vto +++ b/src/_includes/layouts/diffuse.vto @@ -43,8 +43,10 @@ base: "./" "~/": "./", "@atcute/tid": "./vendor/@atcute/tid/index.js", + "@awesome.me/webawesome/dist/": "./vendor/@awesome.me/webawesome/", - "@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/" + "@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/", + "@phosphor-icons/web/": "./vendor/@phosphor-icons/web/" } } diff --git a/src/_includes/layouts/kitchen.vto b/src/_includes/layouts/kitchen.vto index 2fb3f4e6..76d9a480 100644 --- a/src/_includes/layouts/kitchen.vto +++ b/src/_includes/layouts/kitchen.vto @@ -7,8 +7,8 @@ styles: - styles/base.css - styles/diffuse/page.css - styles/diffuse/code-editor.css - - vendor/@phosphor-icons/bold/style.css - - vendor/@phosphor-icons/fill/style.css + - vendor/@phosphor-icons/web/bold/style.css + - vendor/@phosphor-icons/web/fill/style.css scripts: - common/pages/ppr.js diff --git a/src/common/webawesome/phosphor/_lib.js b/src/common/webawesome/phosphor/_lib.js new file mode 100644 index 00000000..bf33e442 --- /dev/null +++ b/src/common/webawesome/phosphor/_lib.js @@ -0,0 +1,32 @@ +/** + * @param {{ icons: Array<{ icon: { paths: string[], attrs: object[] }, properties: { name: string } }> }} selection + * @returns {Map} + */ +export function buildIconMap(selection) { + const map = new Map(); + for (const icon of selection.icons) { + const { name } = icon.properties; + // Strip weight suffix to get base name (e.g. "gear-bold" → "gear") + const baseName = name.replace(/-(?:bold|fill|light|thin|regular|duotone)$/, ""); + map.set(baseName, { paths: icon.icon.paths, attrs: icon.icon.attrs }); + } + return map; +} + +/** + * @param {string[]} paths + * @param {object[]} attrs + * @returns {string} + */ +export function makeSvgDataUrl(paths, attrs) { + const pathEls = paths + .map((d, i) => { + const a = attrs[i] ?? {}; + const attrStr = Object.entries(a) + .map(([k, v]) => `${k}="${v}"`) + .join(" "); + return attrStr ? `` : ``; + }) + .join(""); + return `data:image/svg+xml,${encodeURIComponent(`${pathEls}`)}`; +} diff --git a/src/common/webawesome/phosphor/bold.js b/src/common/webawesome/phosphor/bold.js new file mode 100644 index 00000000..d2b1118a --- /dev/null +++ b/src/common/webawesome/phosphor/bold.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/bold/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/bold", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/common/webawesome/phosphor/duotone.js b/src/common/webawesome/phosphor/duotone.js new file mode 100644 index 00000000..448b83d6 --- /dev/null +++ b/src/common/webawesome/phosphor/duotone.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/duotone/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/duotone", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/common/webawesome/phosphor/fill.js b/src/common/webawesome/phosphor/fill.js new file mode 100644 index 00000000..97965f52 --- /dev/null +++ b/src/common/webawesome/phosphor/fill.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/fill/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/fill", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/common/webawesome/phosphor/light.js b/src/common/webawesome/phosphor/light.js new file mode 100644 index 00000000..d19c52f2 --- /dev/null +++ b/src/common/webawesome/phosphor/light.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/light/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/light", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/common/webawesome/phosphor/regular.js b/src/common/webawesome/phosphor/regular.js new file mode 100644 index 00000000..f4d6eae5 --- /dev/null +++ b/src/common/webawesome/phosphor/regular.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/regular/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/regular", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/common/webawesome/phosphor/thin.js b/src/common/webawesome/phosphor/thin.js new file mode 100644 index 00000000..cee27346 --- /dev/null +++ b/src/common/webawesome/phosphor/thin.js @@ -0,0 +1,15 @@ +import { registerIconLibrary } from "@awesome.me/webawesome/dist/components/icon/library.js"; +import data from "@phosphor-icons/web/thin/selection.json" with { + type: "json", +}; + +import { buildIconMap, makeSvgDataUrl } from "./_lib.js"; + +const map = buildIconMap(data); + +registerIconLibrary("phosphor/thin", { + resolver: (name) => { + const icon = map.get(name); + return icon ? makeSvgDataUrl(icon.paths, icon.attrs) : ""; + }, +}); diff --git a/src/elements.vto b/src/elements.vto index 942022db..f5e4b444 100644 --- a/src/elements.vto +++ b/src/elements.vto @@ -6,8 +6,8 @@ title: Elements | Diffuse styles: - styles/base.css - styles/diffuse/page.css - - vendor/@phosphor-icons/bold/style.css - - vendor/@phosphor-icons/fill/style.css + - vendor/@phosphor-icons/web/bold/style.css + - vendor/@phosphor-icons/web/fill/style.css scripts: - index.js diff --git a/src/facets/connect/s3/index.html b/src/facets/connect/s3/index.html new file mode 100644 index 00000000..7a4f0b2e --- /dev/null +++ b/src/facets/connect/s3/index.html @@ -0,0 +1,21 @@ + + + + +
+ +
+ + diff --git a/src/facets/connect/s3/index.inline.js b/src/facets/connect/s3/index.inline.js new file mode 100644 index 00000000..9c4c98b1 --- /dev/null +++ b/src/facets/connect/s3/index.inline.js @@ -0,0 +1,7 @@ +import "@awesome.me/webawesome/dist/components/card/card.js"; +import "@awesome.me/webawesome/dist/components/button/button.js"; +import "@awesome.me/webawesome/dist/components/drawer/drawer.js"; +import "@awesome.me/webawesome/dist/components/input/input.js"; +import "@awesome.me/webawesome/dist/components/icon/icon.js"; + +import "~/common/webawesome/detect-dark.js"; diff --git a/src/facets/data/export-import/index.html b/src/facets/data/export-import/index.html index ffee0529..630e387c 100644 --- a/src/facets/data/export-import/index.html +++ b/src/facets/data/export-import/index.html @@ -40,7 +40,7 @@ +
+ +
+ Last.fm + +
+ +
+

Connect your Last.fm account to start scrobbling.

+ + + Connect + +
+ + + + + +
+ + +
+
+ Save + Reset to defaults +
+ +
+