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/desktop/", title: "(WIP) Desktop" },
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/desktop/artwork-controller", title: "(WIP) Desktop ⦚ 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/single-queue/", title: "Single queue" },
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: "(TODO) Artwork fetcher" },
63 { url: "processor/metadata/", title: "Metadata fetcher" },
64];
65---
66
67<Page title="Diffuse">
68 <header>
69 <h1>
70 <svg viewBox="0 0 902 134" width="160">
71 <title>Diffuse</title>
72 <use
73 xlink:href="/images/diffuse-current.svg#diffuse"
74 href="/images/diffuse-current.svg#diffuse"></use>
75 </svg>
76 </h1>
77 <p>
78 Diffuse is a collection of <a href={WEB_APPLETS_HREF}>web applets</a> that make it possible to
79 listen to audio from various sources on your devices and the web, and to create the ideal digital
80 listening experience for you.
81 </p>
82 <p>
83 These applets can be used in various ways. The main ways so far are: (a) through <a
84 href="#themes">themes</a
85 >, a traditional browser (web application) approach, and (b) <a href="#abstractions"
86 >abstractions</a
87 > for non-browser systems.
88 </p>
89 </header>
90 <main>
91 <div class="columns">
92 <!-- THEMES -->
93 <section>
94 <h2 id="themes">Themes</h2>
95
96 <p>
97 Themes are “applet compositions” and provide a traditional browser web application way of
98 using them. Each theme is unique, not just a skin (eg. not like winamp skins).
99 </p>
100
101 <p>
102 For example, most themes here will limit the currently playing audio tracks to one item,
103 but you might as well create a DJ theme that can play multiple items at the same time.
104 </p>
105
106 <List items={themes} />
107 </section>
108
109 <!-- ABSTRACTIONS -->
110 <section>
111 <h2 id="abstractions">Abstractions</h2>
112
113 <p>
114 These are applet configurations that enable certain use cases outside the traditional web
115 app experience. Just like themes, these include various assumptions of how certain parts
116 of the system should interact.
117 </p>
118
119 <p><em>TODO: Enable intelligent user (ai) agent use-case.</em></p>
120
121 <List items={[]} />
122 </section>
123 </div>
124
125 <!-- CONSTITUENTS -->
126 <section>
127 <h2 id="constituents">Constituents</h2>
128
129 <p>
130 Constituents are UI applets that are used in themes and abstractions. These are organised
131 per theme or abstraction, but that doesn't mean they are restricted to that theme or
132 abstraction, you can mix and match as you like.
133 </p>
134
135 <List items={constituents} />
136 </section>
137
138 <!-- APPLETS -->
139 <section>
140 <h2 id="applets">Applets</h2>
141
142 <p>
143 Applets are <a href={WEB_APPLETS_HREF}>web applets</a>, the components of the system. These
144 are then recombined into an entire music player experience, or whatever you want to build.
145 </p>
146
147 <div class="columns">
148 <Applet title="Configurators" list={configurators}>
149 Applets that serve as an intermediate in order to make a particular kind of applet
150 configurable. In other words, these allow for an applet to be swapped out with another
151 that takes the same, or a subset of the actions and data output.
152 </Applet>
153
154 <Applet title="Engines" list={engines}>
155 Applets with each a singular purpose and don't have any UI. There are specialised UI
156 applets in themes that control these.
157 </Applet>
158
159 <Applet title="Input" list={input}>
160 Inputs are sources of audio tracks. Each track is an entry in the list of possible items
161 to play. These can be files or streams. Or in other words, static or dynamic.
162 </Applet>
163
164 <Applet title="Orchestrators" list={orchestrators}>
165 These too are applet compositions. However, unlike themes, these are purely logical.
166 Mostly exist in order to construct sensible defaults to use across themes and
167 abstractions.
168 </Applet>
169
170 <Applet title="Output" list={output}>
171 Output is application-derived data such as playlists. These applets can receive such data
172 and keep it around.
173 </Applet>
174
175 <Applet title="Processors" list={processors}>
176 These applets interact with the bytes provided by the input applets. This processed data
177 can then be passed on to other applets.
178 </Applet>
179
180 <Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>
181 </div>
182 </section>
183 </main>
184</Page>