forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: loader cleanup
+56
-31
+19
-3
_config.ts
+19
-3
_config.ts
···
142
142
143
143
// HELPERS
144
144
145
-
site.helper("facetURL", (text) => {
145
+
site.filter("facetOrThemeURI", (text) => {
146
+
if (text.includes("://")) {
147
+
return text;
148
+
} else {
149
+
return `diffuse://${text}`;
150
+
}
151
+
});
152
+
153
+
site.filter("facetLoaderURL", (text) => {
146
154
let key = "path";
147
155
148
156
if (text.includes("://")) {
···
150
158
}
151
159
152
160
return `facets/l/?${key}=${encodeURIComponent(text)}`;
153
-
}, {
154
-
type: "filter",
161
+
});
162
+
163
+
site.filter("themeLoaderURL", (text) => {
164
+
let key = "path";
165
+
166
+
if (text.includes("://")) {
167
+
key = "uri";
168
+
}
169
+
170
+
return `themes/l/?${key}=${encodeURIComponent(text)}`;
155
171
});
156
172
157
173
// PHOSPHOR ICONS
+3
-3
src/_components/facets.vto
+3
-3
src/_components/facets.vto
···
1
1
<ul>
2
2
{{ for index, item of items }}
3
-
<li data-url="{{item.url}}" data-name="{{item.title}}">
3
+
<li data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}">
4
4
<div style="position: relative;">
5
-
<a href="{{ item.url |> facetURL }}">
5
+
<a href="{{ item.url |> facetLoaderURL }}">
6
6
{{item.title}}
7
7
</a>
8
8
<button
···
24
24
style="position-anchor: --facet-anchor-{{id}}-{{index}}"
25
25
popover
26
26
>
27
-
<a href="{{ item.url |> facetURL }}">
27
+
<a href="{{ item.url |> facetLoaderURL }}">
28
28
<span class="with-icon">
29
29
<i class="ph-fill ph-globe"></i> Open
30
30
</span>
+3
-3
src/_components/themes.vto
+3
-3
src/_components/themes.vto
···
1
1
<ul>
2
2
{{ for index, item of items }}
3
-
<li data-url="{{item.url}}" data-name="{{item.title}}">
3
+
<li data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}">
4
4
<div style="position: relative;">
5
-
<a href="themes/l/?url={{encodeURIComponent(item.url)}}">
5
+
<a href="{{ item.url |> themeLoaderURL }}">
6
6
{{item.title}}
7
7
</a>
8
8
<button
···
24
24
style="position-anchor: --theme-anchor-{{id}}-{{index}}"
25
25
popover
26
26
>
27
-
<a href="themes/l/?url={{encodeURIComponent(item.url)}}">
27
+
<a href="{{ item.url |> themeLoaderURL }}">
28
28
<span class="with-icon">
29
29
<i class="ph-fill ph-globe"></i> Open
30
30
</span>
+6
-6
src/common/facets/utils.js
+6
-6
src/common/facets/utils.js
···
1
1
// import { fragments, serializeFragments } from "@fcrozatier/htmlcrunch";
2
2
3
3
import { Temporal } from "@js-temporal/polyfill";
4
+
5
+
import { loadURI } from "../loader.js";
4
6
import * as CID from "../cid.js";
5
7
6
8
/**
···
8
10
*/
9
11
10
12
/**
11
-
* @param {{ name: string; url: string }} _args
13
+
* @param {{ name: string; uri: string }} _args
12
14
* @param {{ fetchHTML: boolean }} options
13
15
*/
14
-
export async function facetFromUrl({ name, url }, { fetchHTML }) {
15
-
const html = fetchHTML
16
-
? await fetch(url).then((res) => res.text())
17
-
: undefined;
16
+
export async function facetFromURI({ name, uri }, { fetchHTML }) {
17
+
const html = fetchHTML ? await loadURI(uri) : undefined;
18
18
const cid = html
19
19
? await CID.create(0x55, new TextEncoder().encode(html))
20
20
: undefined;
···
29
29
html,
30
30
name,
31
31
updatedAt: timestamp,
32
-
url,
32
+
uri,
33
33
};
34
34
35
35
return facet;
+6
-1
src/common/loader.js
+6
-1
src/common/loader.js
···
120
120
*/
121
121
export async function loadURI(uri) {
122
122
const u = URI.parse(uri);
123
-
console.log(u);
124
123
125
124
switch (u.scheme) {
126
125
case "at":
···
144
143
* @returns {Promise<T>}
145
144
*/
146
145
export async function ensureHTML(item) {
146
+
console.log(item.html, item.uri);
147
+
147
148
if (!item.html && item.uri) {
148
149
const html = await loadURI(item.uri);
149
150
const cid = await CID.create(0x55, new TextEncoder().encode(html));
150
151
152
+
console.log(html);
153
+
151
154
item.html = html;
152
155
item.cid = cid;
153
156
}
···
181
184
182
185
/**
183
186
* @param {string} uri
187
+
* @returns {Promise<string>}
184
188
*/
185
189
async function atprotoLoader(uri) {
186
190
const parts = uri.replace(/at:\/\//, "").split("/");
···
218
222
219
223
/**
220
224
* @param {string} url
225
+
* @returns {Promise<string>}
221
226
*/
222
227
async function httpLoader(url) {
223
228
return fetch(url).then((res) => res.text());
+10
-9
src/facets/index.js
+10
-9
src/facets/index.js
···
13
13
import * as CID from "@common/cid.js";
14
14
import foundation from "@common/facets/foundation.js";
15
15
import { effect, signal } from "@common/signal.js";
16
-
import { facetFromUrl } from "@common/facets/utils.js";
16
+
import { facetFromURI } from "@common/facets/utils.js";
17
17
import { nothing } from "@common/element.js";
18
+
import { loadURI } from "@common/loader.js";
18
19
19
20
/**
20
21
* @import {Facet} from "@definitions/types.d.ts"
···
34
35
const rel = target.getAttribute("rel");
35
36
if (!rel) return;
36
37
37
-
const url = target.closest("li")?.getAttribute("data-url");
38
-
if (!url) return;
38
+
const uri = target.closest("li")?.getAttribute("data-uri");
39
+
if (!uri) return;
39
40
40
41
const name = target.closest("li")?.getAttribute("data-name");
41
42
if (!name) return;
42
43
43
44
switch (rel) {
44
45
case "fork": {
45
-
const facet = await facetFromUrl({ name, url }, { fetchHTML: true });
46
+
const facet = await facetFromURI({ name, uri }, { fetchHTML: true });
46
47
editFacet(facet);
47
48
document.querySelector("#build")?.scrollIntoView();
48
49
break;
49
50
}
50
51
case "save": {
51
-
const facet = await facetFromUrl({ name, url }, { fetchHTML: false });
52
+
const facet = await facetFromURI({ name, uri }, { fetchHTML: false });
52
53
const out = foundation.orchestrator.output();
53
54
54
55
out.facets.save([
···
110
111
: nothing}
111
112
</div>
112
113
<div>
113
-
${c.url && !c.html
114
+
${c.uri && !c.html
114
115
? html`
115
116
<span class="with-icon">
116
117
<i class="ph-fill ph-binoculars"></i>
117
118
<span>Tracking the original <a href="${c
118
-
.url}">URL</a></span>
119
+
.uri}">URI</a></span>
119
120
</span>
120
121
`
121
122
: html`
···
309
310
document.querySelector("#build")?.scrollIntoView();
310
311
311
312
// Make sure HTML is loaded
312
-
if (!facet.html && facet.url) {
313
-
const html = await fetch(facet.url).then((res) => res.text());
313
+
if (!facet.html && facet.uri) {
314
+
const html = await loadURI(facet.uri);
314
315
const cid = await CID.create(0x55, new TextEncoder().encode(html));
315
316
316
317
facet.html = html;
+6
-6
src/facets/index.vto
+6
-6
src/facets/index.vto
···
99
99
<li>
100
100
<p>
101
101
<i class="ph-fill ph-plus"></i>
102
-
<strong><a href="{{ ('themes/webamp/configurators/input/facet.html.txt') |> facetURL }}">Add</a></strong> audio from various places on the web and your device.
102
+
<strong><a href="{{ ('themes/webamp/configurators/input/facet.html.txt') |> facetLoaderURL }}">Add</a></strong> audio from various places on the web and your device.
103
103
</p>
104
104
</li>
105
105
<li>
106
106
<p>
107
107
<i class="ph-fill ph-queue"></i>
108
-
<strong><a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetURL }}">Browse</a></strong> your collection to put something into the queue.
108
+
<strong><a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetLoaderURL }}">Browse</a></strong> your collection to put something into the queue.
109
109
</p>
110
110
</li>
111
111
<li>
112
112
<p>
113
113
<i class="ph-fill ph-queue"></i>
114
-
<strong><a href="{{ ('facets/tools/auto-queue.html.txt') |> facetURL }}">Automate</a></strong> adding items to the queue, for infinite playback or listening to a playlist.
114
+
<strong><a href="{{ ('facets/tools/auto-queue.html.txt') |> facetLoaderURL }}">Automate</a></strong> adding items to the queue, for infinite playback or listening to a playlist.
115
115
</p>
116
116
</li>
117
117
<li>
118
118
<p>
119
119
<i class="ph-fill ph-music-note"></i>
120
-
<strong><a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetURL }}">Play</a></strong> queued songs.
120
+
<strong><a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetLoaderURL }}">Play</a></strong> queued songs.
121
121
</p>
122
122
</li>
123
123
<li>
124
124
<p>
125
125
<i class="ph-fill ph-person"></i>
126
-
<strong><a href="{{ ('themes/webamp/configurators/output/facet.html.txt') |> facetURL }}">Manage</a></strong> your user data, sync with your other devices or other people.
126
+
<strong><a href="{{ ('themes/webamp/configurators/output/facet.html.txt') |> facetLoaderURL }}">Manage</a></strong> your user data, sync with your other devices or other people.
127
127
</p>
128
128
</li>
129
129
</ol>
···
135
135
To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing ones here and create one below.
136
136
</p>
137
137
<p>
138
-
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue.html.txt') |> facetURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetURL }}">controller</a> could be used.
138
+
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue.html.txt') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetLoaderURL }}">controller</a> could be used.
139
139
</p>
140
140
<p>
141
141
<em>You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.</em>
+2
src/facets/l/index.js
+2
src/facets/l/index.js