forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1---
2layout: layouts/diffuse.vto
3base: ../
4title: Elements | Diffuse
5
6styles:
7 - styles/base.css
8 - styles/diffuse/page.css
9 - vendor/@phosphor-icons/web/bold/style.css
10 - vendor/@phosphor-icons/web/fill/style.css
11---
12
13<header>
14 <div>
15 <div class="diffuse-logo-container">
16 <a href="./" style="display: inline-block;">
17 {{ await comp.diffuse.logo() }}
18 </a>
19 {{ await comp.diffuse.status() }}
20 </div>
21 <p class="construct dither-mask">
22 Elements
23 </p>
24 <p>
25 Diffuse was built using these web components, consume these using the <a href="../code/">code tool</a>, the Javascript <a href="https://jsr.io/@toko/diffuse">package</a>, or the linked Javascript files down below.
26 </p>
27 <ul class="table-of-contents">
28 <li><a href="elements/#artwork">Artwork</a></li>
29 <li><a href="elements/#configurators">Configurators</a></li>
30 <li><a href="elements/#engines">Engines</a></li>
31 <li><a href="elements/#input">Input</a></li>
32 <li><a href="elements/#metadata">Metadata</a></li>
33 <li><a href="elements/#orchestrators">Orchestrators</a></li>
34 <li><a href="elements/#output">Output</a></li>
35 <li><a href="elements/#supplements">Supplements</a></li>
36 <li><a href="elements/#transformers">Transformers</a></li>
37 <!---->
38 <li style="margin-top: var(--space-xs);"><a href="#definitions">Definitions</a></li>
39 </ul>
40 </div>
41 <div class="dither-mask filler"></div>
42</header>
43<main>
44 <!-- ELEMENTS -->
45 <section>
46 <div class="columns">
47 {{ await comp.element({
48 title: "Artwork",
49 items: elements.artwork,
50 content: `
51 Elements that provide artwork for tracks.
52 `
53 }) }}
54
55 {{ await comp.element({
56 title: "Configurators",
57 items: elements.configurators,
58 content: `
59 Intermediates in order to make a particular kind of element configurable. In other words, these allow for an element to be swapped out with another that takes the same set of the actions and data output.
60 `
61 }) }}
62
63 {{ await comp.element({
64 title: "Engines",
65 items: elements.engines,
66 content: `
67 Elements with each a singular purpose. There are orchestrator elements that control these.
68 `
69 }) }}
70
71 {{ await comp.element({
72 title: "Input",
73 items: elements.input,
74 content: `
75 Inputs are sources of audio tracks. Each track is an entry in the list of possible items to play. These can be files or streams, static or dynamic.
76 `
77 }) }}
78
79 {{ await comp.element({
80 title: "Metadata",
81 items: elements.metadata,
82 content: `
83 Elements that provide metadata for tracks.
84 `
85 }) }}
86
87 {{ await comp.element({
88 title: "Orchestrators",
89 items: elements.orchestrators,
90 content: `
91 These are element compositions, logic only. Mostly exist in order to construct sensible defaults.
92 `
93 }) }}
94
95 {{ await comp.element({
96 title: "Output",
97 items: elements.output,
98 content: `
99 Output is application-derived data such as playlists. These elements can receive such data and keep it around. These are categorised by the type of data they ingest, or many types in the case of polymorphic. Optionally use transformers to convert output into the expected format.
100 `
101 }) }}
102
103 {{ await comp.element({
104 title: "Supplements",
105 items: elements.supplements,
106 content: `
107 Additional elements, such as scrobblers.
108 `
109 }) }}
110
111 {{ await comp.element({
112 title: "Transformers",
113 items: elements.transformers,
114 content: `
115 Transform data from one format or schema into another. See the definitions section below for more information. Just as configurators, these are intermediates and require to have the same set of actions as the element it targets.
116 `
117 }) }}
118 </div>
119 </section>
120
121 <!-- DEFINITIONS -->
122 <section>
123 <h2 id="definitions" style="color: var(--accent)">Definitions</h2>
124
125 <p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
126
127 {{ await comp.list({ items: elements.definitions }) }}
128 </section>
129</main>
130
131<script type="module">
132 import { versionUpgrade } from "./common/pages/version-upgrade.js";
133 versionUpgrade();
134</script>