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