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/pilot/", title: "Pilot" },
20 { url: "themes/webamp/", title: "Webamp" },
21];
22
23// Abstractions
24// TODO
25
26// Applets
27const configurators = [
28 { url: "configurator/input/", title: "Input" },
29 { url: "configurator/output/", title: "Output" },
30];
31
32const engines = [
33 { url: "engine/audio/", title: "Audio" },
34 { url: "engine/queue/", title: "Queue" },
35];
36
37const input = [
38 { url: "input/native-fs/", title: "Native File System" },
39 { url: "input/s3-compatible/", title: "(TODO) S3-Compatible API" },
40];
41
42const orchestrators = [
43 { url: "orchestrator/input-cache/", title: "Input caching" },
44 { url: "orchestrator/output-management/", title: "Output management" },
45 { url: "orchestrator/single-queue/", title: "Single queue" },
46];
47
48const output = [
49 { url: "output/indexed-db/", title: "IndexedDB" },
50 { url: "output/native-fs/", title: "Native File System" },
51];
52
53const processors = [
54 { url: "processor/artwork/", title: "(TODO) Artwork fetcher" },
55 { url: "processor/metadata-fetcher/", title: "Metadata fetcher" },
56];
57---
58
59<Page title="Diffuse">
60 <header>
61 <h1>
62 <svg viewBox="0 0 902 134" width="160">
63 <title>Diffuse</title>
64 <use
65 xlink:href="/images/diffuse-current.svg#diffuse"
66 href="/images/diffuse-current.svg#diffuse"></use>
67 </svg>
68 </h1>
69 <p>
70 Diffuse is a collection of <a href={WEB_APPLETS_HREF}>web applets</a> that make it possible to
71 listen to audio from various sources on your devices and the web, and to create the ideal digital
72 listening experience for you.
73 </p>
74 <p>
75 These applets can be used in various ways. The main ways so far are: (a) through <a
76 href="#themes">themes</a
77 >, a traditional browser (web application) approach, and (b) <a href="#abstractions"
78 >abstractions</a
79 > for non-browser systems.
80 </p>
81 </header>
82 <main>
83 <!-- THEMES -->
84 <section>
85 <h2 id="themes">Themes</h2>
86
87 <p>
88 Themes are “applet compositions” and provide a traditional browser web application way of
89 using them. Each theme is unique, not just a skin (eg. not like winamp skins).
90 </p>
91
92 <p>
93 For example, most themes here will limit the currently playing audio tracks to one item, but
94 you might as well create a DJ theme that can play multiple items at the same time.
95 </p>
96
97 <List items={themes} />
98 </section>
99
100 <!-- ABSTRACTIONS -->
101 <section>
102 <h2 id="abstractions">Abstractions</h2>
103
104 <p>
105 These are applet configurations that enable certain use cases outside the traditional web
106 app experience. Just like themes, these include various assumptions of how certain parts of
107 the system should interact.
108 </p>
109
110 <p><em>TODO: Enable intelligent user (ai) agent use-case.</em></p>
111
112 <List items={[]} />
113 </section>
114
115 <!-- APPLETS -->
116 <section>
117 <h2 id="applets">Applets</h2>
118
119 <p>
120 Applets are <a href={WEB_APPLETS_HREF}>web applets</a>, the components of the system. These
121 are then recombined into an entire music player experience, or whatever you want to build.
122 </p>
123
124 <div class="columns">
125 <Applet title="Configurators" list={configurators}>
126 Applets that serve as an intermediate in order to make a particular kind of applet
127 configurable. In other words, these allow for an applet to be swapped out with another
128 that takes the same, or a subset of the actions and data output.
129 </Applet>
130
131 <Applet title="Engines" list={engines}>
132 Applets with each a singular purpose and don't have any UI. There are specialised UI
133 applets in themes that control these.
134 </Applet>
135
136 <Applet title="Input" list={input}>
137 Inputs are sources of audio tracks. Each track is an entry in the list of possible items
138 to play. These can be files or streams. Or in other words, static or dynamic.
139 </Applet>
140
141 <Applet title="Orchestrators" list={orchestrators}>
142 These too are applet compositions. However, unlike themes, these are purely logical, and
143 reuse applet instances from the parent context (when available). Mostly exist in order to
144 construct sensible defaults to use across themes and abstractions.
145 </Applet>
146
147 <Applet title="Output" list={output}>
148 Output is application-derived data such as playlists. These applets can receive such data
149 and keep it around.
150 </Applet>
151
152 <Applet title="Processors" list={processors}>
153 These applets interact with the bytes provided by the input applets. This processed data
154 can then be passed on to other applets.
155 </Applet>
156
157 <Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>
158 </div>
159 </section>
160 </main>
161</Page>