forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: facet description
+48
-15
+1
deno.jsonc
+1
deno.jsonc
···
35
35
"idb-keyval": "npm:idb-keyval@^6.2.2",
36
36
"iso-base": "npm:iso-base@^4.3.0",
37
37
"lit-html": "npm:lit-html@^3.3.1",
38
+
"marked": "npm:marked@^17.0.3",
38
39
"multiformats": "npm:multiformats@^13.4.2",
39
40
"query-string": "npm:query-string@^9.3.1",
40
41
"subsonic-api": "npm:subsonic-api@^3.2.0",
+41
-14
src/facets/index.js
+41
-14
src/facets/index.js
···
1
1
import { Temporal } from "@js-temporal/polyfill";
2
2
import { html, render } from "lit-html";
3
3
import { keyed } from "lit-html/directives/keyed.js";
4
+
import { marked } from "marked";
5
+
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
4
6
5
7
import { basicSetup, EditorView } from "codemirror";
6
8
import { css as langCss } from "@codemirror/lang-css";
···
12
14
import foundation from "@common/facets/foundation.js";
13
15
import { effect, signal } from "@common/signal.js";
14
16
import { facetFromUrl } from "@common/facets/utils.js";
17
+
import { nothing } from "@common/element.js";
15
18
16
19
/**
17
20
* @import {Facet} from "@definitions/types.d.ts"
···
99
102
</button>
100
103
</div>
101
104
<div class="list-description">
102
-
${c.url && !c.html
103
-
? html`
104
-
<span class="with-icon">
105
-
<i class="ph-fill ph-binoculars"></i>
106
-
<span>Tracking the original <a href="${c
107
-
.url}">URL</a></span>
108
-
</span>
109
-
`
110
-
: html`
111
-
<span class="with-icon">
112
-
<i class="ph-fill ph-code"></i>
113
-
<span>Custom code</span>
114
-
</span>
115
-
`}
105
+
<div>
106
+
${c.description?.trim().length
107
+
? unsafeHTML(
108
+
marked.parse(c.description, { async: false }),
109
+
)
110
+
: nothing}
111
+
</div>
112
+
<div>
113
+
${c.url && !c.html
114
+
? html`
115
+
<span class="with-icon">
116
+
<i class="ph-fill ph-binoculars"></i>
117
+
<span>Tracking the original <a href="${c
118
+
.url}">URL</a></span>
119
+
</span>
120
+
`
121
+
: html`
122
+
<span class="with-icon">
123
+
<i class="ph-fill ph-code"></i>
124
+
<span>Custom code</span>
125
+
</span>
126
+
`}
127
+
</div>
116
128
</div>
117
129
118
130
<!-- Dropdown Menu -->
···
240
252
"#name-input",
241
253
));
242
254
255
+
const descriptionEl = /** @type {HTMLTextAreaElement | null} */ (
256
+
document.querySelector("#description-input")
257
+
);
258
+
243
259
const html = editor.state.doc.toString();
244
260
const cid = await CID.create(0x55, new TextEncoder().encode(html));
245
261
const name = nameEl?.value ?? "nameless";
262
+
const description = descriptionEl?.value ?? "";
246
263
247
264
/** @type {Facet} */
248
265
const facet = $editingFacet.value
249
266
? {
250
267
...$editingFacet.value,
251
268
cid,
269
+
description,
252
270
html,
253
271
name,
254
272
}
···
256
274
$type: "sh.diffuse.output.facet",
257
275
id: crypto.randomUUID(),
258
276
cid,
277
+
description,
259
278
html,
260
279
name,
261
280
};
···
280
299
"#name-input",
281
300
));
282
301
302
+
const descriptionEl = /** @type {HTMLTextAreaElement | null} */ (
303
+
document.querySelector("#description-input")
304
+
);
305
+
283
306
if (!nameEl) return;
284
307
285
308
// Scroll to builder
···
296
319
297
320
$editingFacet.value = facet;
298
321
nameEl.value = facet.name;
322
+
323
+
if (descriptionEl) {
324
+
descriptionEl.value = facet.description ?? "";
325
+
}
299
326
300
327
editor.dispatch({
301
328
changes: { from: 0, to: editor.state.doc.length, insert: facet.html },
+6
-1
src/facets/index.vto
+6
-1
src/facets/index.vto
···
188
188
<p style="margin-top: 0">
189
189
Your code here builds on the <a href="facets/#foundation">foundation</a> listed below, it'll be injected into a <code><div id="container"></code> element in the body.
190
190
</p>
191
-
<input id="name-input" type="text" placeholder="Name" name="name" required />
191
+
<p>
192
+
<input id="name-input" type="text" placeholder="Name" name="name" required />
193
+
</p>
194
+
<p>
195
+
<textarea id="description-input" placeholder="Description" name="description" rows="2"></textarea>
196
+
</p>
192
197
<p>
193
198
<span class="button-row">
194
199
<button name="save">Save</button>