Experiment to rebuild Diffuse using web applets.
1---
2import Applet from "../components/Applet.astro";
3import List from "../components/List.astro";
4import Page from "../layouts/page.astro";
5
6import "../styles/pages/index.css";
7
8// Types
9type Ref = {
10 url: string;
11 title: string;
12};
13
14// Links
15const WEB_APPLETS_HREF = "https://unternet.co/docs/web-applets/introduction";
16
17// Themes
18const themes = [
19 { url: "themes/blur/", title: "(WIP) Blur" },
20 { url: "themes/pilot/", title: "(WIP) Pilot" },
21 { url: "themes/webamp/", title: "Webamp" },
22];
23
24// Abstractions
25// TODO
26
27// Constituents
28const constituents = [
29 { url: "constituents/blur/artwork-controller", title: "(WIP) Blur ⦚ Artwork Controller" },
30];
31
32// Applets
33const configurators = [
34 { url: "configurator/input/", title: "Input" },
35 { url: "configurator/output/", title: "Output" },
36];
37
38const engines = [
39 { url: "engine/audio/", title: "Audio" },
40 { url: "engine/queue/", title: "Queue" },
41];
42
43const input = [
44 { url: "input/native-fs/", title: "Native File System" },
45 { url: "input/s3/", title: "S3-Compatible API" },
46];
47
48const orchestrators = [
49 { url: "orchestrator/input-cache/", title: "Input caching" },
50 { url: "orchestrator/queue-audio-tracks/", title: "Queue ⭤ Audio ⭤ Tracks" },
51];
52
53const output = [
54 { url: "output/indexed-db/", title: "IndexedDB" },
55 { url: "output/native-fs/", title: "Native File System" },
56 { url: "output/storacha-automerge/", title: "(WIP) Storacha Storage + Automerge CRDT" },
57 { url: "output/todo/", title: "(TODO) Keyhive/Beelay" },
58 { url: "output/todo/", title: "(TODO) Dialog DB" },
59];
60
61const processors = [
62 { url: "processor/artwork/", title: "Artwork fetcher" },
63 { url: "processor/metadata/", title: "Metadata fetcher" },
64 { url: "processor/search/", title: "Search" },
65];
66---
67
68<Page title="Diffuse">
69 <header>
70 <h1>
71 <svg viewBox="0 0 902 134" width="160">
72 <title>Diffuse</title>
73 <use
74 xlink:href="/images/diffuse-current.svg#diffuse"
75 href="/images/diffuse-current.svg#diffuse"></use>
76 </svg>
77 </h1>
78 <p>
79 Diffuse is a collection of <a href={WEB_APPLETS_HREF}>web applets</a> that make it possible to
80 listen to audio from various sources on your devices and the web, and to create the ideal digital
81 listening experience for you.
82 </p>
83 <p>
84 These applets can be used in various ways. The main ways so far are: (a) through <a
85 href="#themes">themes</a
86 >, a traditional browser (web application) approach, and (b) <a href="#abstractions"
87 >abstractions</a
88 > for non-browser systems.
89 </p>
90 </header>
91 <main>
92 <div class="columns">
93 <!-- THEMES -->
94 <section>
95 <h2 id="themes">Themes</h2>
96
97 <p>
98 Themes are “applet compositions” and provide a traditional browser web application way of
99 using them. Each theme is unique, not just a skin (eg. not like winamp skins).
100 </p>
101
102 <p>
103 For example, most themes here will limit the currently playing audio tracks to one item,
104 but you might as well create a DJ theme that can play multiple items at the same time.
105 </p>
106
107 <List items={themes} />
108 </section>
109
110 <!-- ABSTRACTIONS -->
111 <section>
112 <h2 id="abstractions">Abstractions</h2>
113
114 <p>
115 These are applet configurations that enable certain use cases outside the traditional web
116 app experience. Just like themes, these include various assumptions of how certain parts
117 of the system should interact.
118 </p>
119
120 <p><em>TODO: Enable intelligent user (ai) agent use-case.</em></p>
121
122 <List items={[]} />
123 </section>
124 </div>
125
126 <!-- CONSTITUENTS -->
127 <section>
128 <h2 id="constituents">Constituents</h2>
129
130 <p>
131 Constituents are UI applets that are used in themes and abstractions. These are organised
132 per theme or abstraction, but that doesn't mean they are restricted to that theme or
133 abstraction, you can mix and match as you like. You can even use them on their own.
134 </p>
135
136 <p>
137 Some themes may be constructed out of various applets that are not listed here. The reason
138 for that is those applets cannot be used solely on their own, they require an external
139 context to coordinate them.
140 </p>
141
142 <p>
143 There's tradeoffs to both approaches. A particular tradeoff to keep in mind for constituents
144 is that they'll have nested dependencies. So when overriding applets dependencies, the
145 overrides need to passed down the tree.
146 </p>
147
148 <List items={constituents} />
149 </section>
150
151 <!-- APPLETS -->
152 <section>
153 <h2 id="applets">Applets</h2>
154
155 <p>
156 Applets are <a href={WEB_APPLETS_HREF}>web applets</a>, the components of the system. These
157 are then recombined into an entire music player experience, or whatever you want to build.
158 </p>
159
160 <div class="columns">
161 <Applet title="Configurators" list={configurators}>
162 Applets that serve as an intermediate in order to make a particular kind of applet
163 configurable. In other words, these allow for an applet to be swapped out with another
164 that takes the same, or a subset of the actions and data output.
165 </Applet>
166
167 <Applet title="Engines" list={engines}>
168 Applets with each a singular purpose and don't have any UI. There are specialised UI
169 applets in themes that control these.
170 </Applet>
171
172 <Applet title="Input" list={input}>
173 Inputs are sources of audio tracks. Each track is an entry in the list of possible items
174 to play. These can be files or streams. Or in other words, static or dynamic.
175 </Applet>
176
177 <Applet title="Orchestrators" list={orchestrators}>
178 These too are applet compositions. However, unlike themes, these are purely logical.
179 Mostly exist in order to construct sensible defaults to use across themes and
180 abstractions.
181 </Applet>
182
183 <Applet title="Output" list={output}>
184 Output is application-derived data such as playlists. These applets can receive such data
185 and keep it around.
186 </Applet>
187
188 <Applet title="Processors" list={processors}>
189 These applets work with the tracks generated by the input applets to add more data to them
190 or produce more data based on the tracks.
191 </Applet>
192
193 <Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>
194 </div>
195 </section>
196 </main>
197</Page>