forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: setup webawesome and reorg some vendor stuff
+99
-36
+47
-7
_config.ts
+47
-7
_config.ts
···
24
24
25
25
export default site;
26
26
27
+
////////////////////////////////////////////
27
28
// JS
29
+
////////////////////////////////////////////
28
30
29
31
site.use(esbuild({
30
32
extensions: [".js"],
···
108
110
109
111
site.add([".js"]);
110
112
113
+
////////////////////////////////////////////
111
114
// CSS
115
+
////////////////////////////////////////////
112
116
113
117
site.use(postcss());
114
118
// site.use(purgecss());
115
119
site.add([".css"]);
116
120
117
121
site.remoteFile(
118
-
"styles/vendor/98.css",
122
+
"vendor/98.css",
119
123
import.meta.resolve("./node_modules/98.css/dist/98.css"),
120
124
);
121
125
126
+
////////////////////////////////////////////
122
127
// BINARY ASSETS
128
+
////////////////////////////////////////////
123
129
124
130
site.add("/favicons", "/");
125
131
site.add("/fonts");
···
127
133
site.add([".woff2"]);
128
134
129
135
site.remoteFile(
130
-
"styles/vendor/ms_sans_serif.woff2",
136
+
"vendor/98.css/ms_sans_serif.woff2",
131
137
import.meta.resolve(
132
138
"./node_modules/98.css/fonts/converted/ms_sans_serif.woff2",
133
139
),
134
140
);
135
141
136
142
site.remoteFile(
137
-
"styles/vendor/ms_sans_serif_bold.woff2",
143
+
"vendor/98.css/ms_sans_serif_bold.woff2",
138
144
import.meta.resolve(
139
145
"./node_modules/98.css/fonts/converted/ms_sans_serif_bold.woff2",
140
146
),
141
147
);
142
148
143
149
site.remoteFile(
144
-
"fonts/ms_sans_serif.woff2",
150
+
"fonts/98.css/ms_sans_serif.woff2",
145
151
import.meta.resolve(
146
152
"./node_modules/98.css/fonts/converted/ms_sans_serif.woff2",
147
153
),
148
154
);
149
155
150
156
site.remoteFile(
151
-
"fonts/ms_sans_serif_bold.woff2",
157
+
"fonts/98.css/ms_sans_serif_bold.woff2",
152
158
import.meta.resolve(
153
159
"./node_modules/98.css/fonts/converted/ms_sans_serif_bold.woff2",
154
160
),
155
161
);
156
162
163
+
////////////////////////////////////////////
157
164
// DEFINITIONS
165
+
////////////////////////////////////////////
158
166
159
167
site.add("/definitions");
160
168
···
188
196
return `themes/l/?${key}=${encodeURIComponent(text)}`;
189
197
});
190
198
199
+
////////////////////////////////////////////
191
200
// PHOSPHOR ICONS
201
+
////////////////////////////////////////////
192
202
193
203
function phosphor(path: string) {
194
204
site.remoteFile(
195
-
`styles/vendor/phosphor/${path}`,
205
+
`vendor/@phosphor-icons/${path}`,
196
206
import.meta.resolve(`./node_modules/@phosphor-icons/web/src/${path}`),
197
207
);
198
208
199
-
site.add(`styles/vendor/phosphor/${path}`);
209
+
site.add(`vendor/@phosphor-icons/${path}`);
200
210
}
201
211
202
212
phosphor("fill/style.css");
···
210
220
phosphor("bold/Phosphor-Bold.woff");
211
221
phosphor("bold/Phosphor-Bold.woff2");
212
222
223
+
////////////////////////////////////////////
224
+
// WEB AWESOME
225
+
////////////////////////////////////////////
226
+
227
+
for (
228
+
const f of walkSync("./node_modules/@awesome.me/webawesome/dist-cdn/", {
229
+
includeDirs: false,
230
+
})
231
+
) {
232
+
const relativePath = f.path.replace(
233
+
/^node_modules\/@awesome\.me\/webawesome\/dist-cdn\//,
234
+
"",
235
+
);
236
+
237
+
const destPath = `vendor/@awesome.me/webawesome/${relativePath}`;
238
+
239
+
site.remoteFile(
240
+
destPath,
241
+
import.meta.resolve(
242
+
`./node_modules/@awesome.me/webawesome/dist-cdn/${relativePath}`,
243
+
),
244
+
);
245
+
246
+
site.copy(destPath);
247
+
}
248
+
249
+
////////////////////////////////////////////
213
250
// MISC
251
+
////////////////////////////////////////////
214
252
215
253
site.add([".html"]);
216
254
site.add([".json"]);
···
238
276
// site.run("copy-type-defs");
239
277
});
240
278
279
+
////////////////////////////////////////////
241
280
// MIDDLEWARE
281
+
////////////////////////////////////////////
242
282
243
283
// Facet HTML files are HTML fragments fetched via JS, not full pages.
244
284
// Serving them as text/plain prevents Lume's dev server from injecting
+3
deno.jsonc
+3
deno.jsonc
···
11
11
"@atcute/lexicons": "npm:@atcute/lexicons@^1.2.7",
12
12
"@atcute/oauth-browser-client": "npm:@atcute/oauth-browser-client@^3.0.0",
13
13
"@automerge/automerge": "npm:@automerge/automerge@^3.2.3",
14
+
"@awesome.me/webawesome": "npm:@awesome.me/webawesome@^3.2.1",
14
15
"@bradenmacdonald/s3-lite-client": "jsr:@bradenmacdonald/s3-lite-client@^0.9.5",
15
16
"@char/cbor": "jsr:@char/cbor@^0.1.4",
16
17
"@codemirror/autocomplete": "npm:@codemirror/autocomplete@^6.20.0",
···
59
60
"@definitions/": "./src/definitions/",
60
61
"@styles/": "./src/styles/",
61
62
"@themes/": "./src/themes/",
63
+
"@vendor/": "./src/vendor/",
62
64
63
65
// Diffuse prefix paths
64
66
"@diffuse/foundation": "./src/common/facets/foundation.js",
···
68
70
"@diffuse/definitions/": "./src/definitions/",
69
71
"@diffuse/styles/": "./src/styles/",
70
72
"@diffuse/themes/": "./src/themes/",
73
+
"@diffuse/vendor/": "./src/vendor/",
71
74
72
75
// Build
73
76
"@atcute/lex-cli": "npm:@atcute/lex-cli@^2.5.3",
+2
src/_includes/layouts/diffuse.vto
+2
src/_includes/layouts/diffuse.vto
+2
src/_includes/layouts/facet.vto
+2
src/_includes/layouts/facet.vto
+13
src/common/webawesome/detect-dark.js
+13
src/common/webawesome/detect-dark.js
···
1
+
const systemDark = window.matchMedia("(prefers-color-scheme: dark)");
2
+
3
+
/**
4
+
* @param {MediaQueryListEvent | MediaQueryList} mql
5
+
*/
6
+
function applyDark(mql) {
7
+
const isDark = mql.matches;
8
+
document.documentElement.classList.toggle("wa-dark", isDark);
9
+
}
10
+
11
+
systemDark.addEventListener("change", applyDark);
12
+
13
+
applyDark(systemDark);
+2
-2
src/facets/index.vto
+2
-2
src/facets/index.vto
+5
-2
src/facets/l/index.vto
+5
-2
src/facets/l/index.vto
···
3
3
base: ../../
4
4
5
5
styles:
6
-
- styles/vendor/phosphor/fill/style.css
6
+
- vendor/@phosphor-icons/fill/style.css
7
7
- styles/base.css
8
8
- styles/loader.css
9
9
···
29
29
"@diffuse/definitions/": "./definitions/",
30
30
"@diffuse/styles/": "./styles/",
31
31
"@diffuse/themes/": "./themes/",
32
+
"@diffuse/vendor/": "./vendor/",
32
33
33
-
"@atcute/tid": "./vendor/@atcute/tid/index.js"
34
+
"@atcute/tid": "./vendor/@atcute/tid/index.js",
35
+
"@awesome.me/webawesome/dist/": "./vendor/@awesome.me/webawesome/",
36
+
"@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/"
34
37
}
35
38
}
36
39
</script>
+1
-1
src/facets/tools/auto-queue.html
+1
-1
src/facets/tools/auto-queue.html
+2
-2
src/facets/tools/v3-import.html
+2
-2
src/facets/tools/v3-import.html
···
28
28
29
29
<style>
30
30
@import "./styles/base.css";
31
-
@import "./styles/vendor/phosphor/bold/style.css";
32
-
@import "./styles/vendor/phosphor/fill/style.css";
33
31
@import "./styles/wireframe/ui.css";
32
+
@import "./vendor/@phosphor-icons/bold/style.css";
33
+
@import "./vendor/@phosphor-icons/fill/style.css";
34
34
35
35
body {
36
36
display: flex;
+2
-2
src/index.vto
+2
-2
src/index.vto
+4
src/styles/base.css
+4
src/styles/base.css
+2
-2
src/themes/blur/artwork-controller/element.js
+2
-2
src/themes/blur/artwork-controller/element.js
···
424
424
});
425
425
426
426
return html`
427
-
<link rel="stylesheet" href="styles/vendor/phosphor/bold/style.css" />
428
-
<link rel="stylesheet" href="styles/vendor/phosphor/fill/style.css" />
427
+
<link rel="stylesheet" href="vendor/@phosphor-icons/bold/style.css" />
428
+
<link rel="stylesheet" href="vendor/@phosphor-icons/fill/style.css" />
429
429
<link rel="stylesheet" href="styles/animations.css" />
430
430
<link rel="stylesheet" href="themes/blur/artwork-controller/element.css" />
431
431
+2
-2
src/themes/blur/artwork-controller/facet.html
+2
-2
src/themes/blur/artwork-controller/facet.html
+2
-2
src/themes/index.vto
+2
-2
src/themes/index.vto
+1
-1
src/themes/l/index.vto
+1
-1
src/themes/l/index.vto
+1
-1
src/themes/webamp/browser/element.js
+1
-1
src/themes/webamp/browser/element.js
+1
-1
src/themes/webamp/browser/facet.html
+1
-1
src/themes/webamp/browser/facet.html
+1
-1
src/themes/webamp/configurators/input/element.js
+1
-1
src/themes/webamp/configurators/input/element.js
+1
-1
src/themes/webamp/configurators/input/facet.html
+1
-1
src/themes/webamp/configurators/input/facet.html
···
15
15
16
16
<style>
17
17
@import "./styles/variables.css";
18
-
@import "./styles/vendor/98.css";
19
18
@import "./themes/webamp/fonts.css";
20
19
@import "./themes/webamp/facet.css";
20
+
@import "./vendor/98.css";
21
21
</style>
22
22
23
23
<script type="module" src="./facet.inline.js"></script>
+1
-1
src/themes/webamp/configurators/output/element.js
+1
-1
src/themes/webamp/configurators/output/element.js
+3
-7
src/themes/webamp/configurators/output/facet.html
+3
-7
src/themes/webamp/configurators/output/facet.html
···
1
1
<div class="window">
2
-
<div
3
-
class="title-bar"
4
-
>
2
+
<div class="title-bar">
5
3
<div class="title-bar-icon">
6
4
<img src="images/icons/windows_98/directory_explorer-4.png" height="14" />
7
5
</div>
8
-
<div class="title-bar-text" draggable="false">
9
-
Output configurator
10
-
</div>
6
+
<div class="title-bar-text" draggable="false">Output configurator</div>
11
7
<div class="title-bar-controls">
12
8
<button aria-label="Close" onclick="window.close()"></button>
13
9
</div>
···
19
15
20
16
<style>
21
17
@import "./styles/variables.css";
22
-
@import "./styles/vendor/98.css";
23
18
@import "./themes/webamp/fonts.css";
24
19
@import "./themes/webamp/facet.css";
20
+
@import "./vendor/98.css";
25
21
</style>
26
22
27
23
<script type="module" src="./facet.inline.js"></script>