A music player that connects to your cloud/distributed storage.
chore: demo page prep
+54
-11
+7
-1
src/common/foundation.js
+7
-1
src/common/foundation.js
···
384
384
return findExistingOrAdd(mso, signals.orchestrator.mediaSession);
385
385
}
386
386
387
-
async function output() {
387
+
/**
388
+
* @param {Object} [options] - Options
389
+
* @param {string} [options.namespace] - The namespace to use for the output.
390
+
*/
391
+
async function output(options) {
388
392
const { default: OutputOrchestrator } = await import(
389
393
"~/components/orchestrator/output/element.js"
390
394
);
···
392
396
const o = new OutputOrchestrator();
393
397
o.setAttribute("group", GROUP);
394
398
o.setAttribute("id", "output");
399
+
400
+
if (options?.namespace) o.setAttribute("namespace", options.namespace);
395
401
396
402
return findExistingOrAdd(o, signals.orchestrator.output);
397
403
}
+6
-2
src/components/orchestrator/output/element.js
+6
-2
src/components/orchestrator/output/element.js
···
1
1
import { ifDefined } from "lit-html/directives/if-defined.js";
2
-
import { DEFAULT_GROUP, defineElement, DiffuseElement } from "~/common/element.js";
2
+
import {
3
+
DEFAULT_GROUP,
4
+
defineElement,
5
+
DiffuseElement,
6
+
} from "~/common/element.js";
3
7
4
8
import "~/components/configurator/output/element.js";
5
9
import "~/components/transformer/output/refiner/default/element.js";
···
126
130
return html`
127
131
<dop-indexed-db
128
132
id="do-output__dop-indexed-db__json"
129
-
namespace="json"
133
+
namespace="${this.namespace ? this.namespace + "/" : ""}json"
130
134
group="${ifDefined(group)}"
131
135
></dop-indexed-db>
132
136
+24
src/demo.vto
+24
src/demo.vto
···
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
4
+
styles:
5
+
- styles/base.css
6
+
- styles/diffuse/page.css
7
+
- vendor/@phosphor-icons/web/bold/style.css
8
+
- vendor/@phosphor-icons/web/fill/style.css
9
+
---
10
+
11
+
<style>
12
+
main {}
13
+
</style>
14
+
15
+
<main>
16
+
<aside>
17
+
<h1 hidden>Diffuse</h1>
18
+
<div class="diffuse-logo-container">
19
+
{{ await comp.diffuse.logo() }}
20
+
</div>
21
+
</aside>
22
+
<div id="container">
23
+
</div>
24
+
</main>
+10
-7
src/index.vto
+10
-7
src/index.vto
···
28
28
<i class="ph-fill ph-crane"></i>
29
29
<strong style="font-weight: 700;">WORK IN PROGRESS</strong>
30
30
</p>
31
-
<ul class="table-of-contents">
32
-
<li><a href="guide/">Guide</a></li>
33
-
<li><a href="featured/">Featured</a></li>
34
-
</ul>
35
-
<p style="margin: var(--space-lg) 0">
36
-
<a class="button button--bg-accent" href="dashboard/">Open Diffuse</a>
31
+
<p style="margin-top: var(--space-lg)">
32
+
<a class="button button--bg-accent" href="dashboard/">
33
+
Open Diffuse
34
+
</a>
37
35
</p>
38
-
<p>
36
+
<!--<p>
37
+
<a class="button button--subtle" href="dashboard/">
38
+
Roll the demo tape
39
+
</a>
40
+
</p>-->
41
+
<p style="margin-top: var(--space-lg)">
39
42
<small style="line-height: var(--leading-relaxed)">
40
43
Like using Diffuse? <a href="https://ko-fi.com/toko">Support with a donation!</a><br />
41
44
Built with <a href="elements/">Diffuse elements</a><br />
+7
-1
src/styles/diffuse/page.css
+7
-1
src/styles/diffuse/page.css
···
613
613
}
614
614
615
615
&.button--subtle {
616
-
--button-bg-opacity: 0.3;
616
+
--button-bg-opacity: 0.35;
617
617
}
618
618
619
619
&.button--tag {
···
728
728
align-items: center;
729
729
display: inline-flex;
730
730
gap: var(--space-3xs);
731
+
}
732
+
733
+
.with-icon--bigger-gap,
734
+
button .with-icon--bigger-gap,
735
+
.button .with-icon--bigger-gap {
736
+
gap: var(--space-2xs);
731
737
}
732
738
733
739
/**