A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: various css architecture improvements, phosphor icons, webawesome setup, connect s3 prep, etc.

+246 -82
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 6 6 styles: 7 7 - styles/base.css 8 8 - styles/diffuse/page.css 9 - - vendor/@phosphor-icons/bold/style.css 10 - - vendor/@phosphor-icons/fill/style.css 9 + - vendor/@phosphor-icons/web/bold/style.css 10 + - vendor/@phosphor-icons/web/fill/style.css 11 11 12 12 scripts: 13 13 - index.js
+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
··· 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
··· 40 40 <style> 41 41 @import "./styles/base.css"; 42 42 @import "./styles/wireframe/ui.css"; 43 - @import "./vendor/@phosphor-icons/bold/style.css"; 43 + @import "./vendor/@phosphor-icons/web/bold/style.css"; 44 44 45 45 body { 46 46 display: flex;
+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
··· 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
··· 5 5 import "@awesome.me/webawesome/dist/components/icon/icon.js"; 6 6 7 7 import "~/common/webawesome/detect-dark.js"; 8 + import "~/common/webawesome/phosphor/bold.js"; 8 9 9 10 import foundation from "~/common/foundation.js"; 10 11 import { effect } from "~/common/signal.js";
+1 -1
src/facets/playback/auto-queue/index.html
··· 46 46 <style> 47 47 @import "./styles/base.css"; 48 48 @import "./styles/wireframe/ui.css"; 49 - @import "./vendor/@phosphor-icons/bold/style.css"; 49 + @import "./vendor/@phosphor-icons/web/bold/style.css"; 50 50 51 51 body { 52 52 display: flex;
+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
··· 3 3 base: ../ 4 4 5 5 styles: 6 - - vendor/@phosphor-icons/fill/style.css 7 - - styles/base.css 6 + - vendor/@phosphor-icons/web/fill/style.css 7 + - styles/diffuse/colors.css 8 + - styles/variables.css 9 + - styles/animations.css 8 10 - styles/loader.css 9 11 10 12 scripts:
+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
+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
··· 1 1 <style> 2 - @import "./vendor/@phosphor-icons/bold/style.css"; 3 - @import "./vendor/@phosphor-icons/fill/style.css"; 2 + @import "./vendor/@phosphor-icons/web/bold/style.css"; 3 + @import "./vendor/@phosphor-icons/web/fill/style.css"; 4 4 @import "./styles/base.css"; 5 5 </style> 6 6