Experiment to rebuild Diffuse using web applets.
1---
2import Page from "../layouts/page.astro";
3
4// import "@picocss/pico/css/pico.colors.css";
5import "../styles/pages/index.css";
6
7const engines = [
8 { url: "engine/audio/", title: "Audio" },
9 { url: "engine/queue/", title: "Queue" },
10];
11
12const themes = [{ url: "themes/pilot/", title: "Pilot" }];
13---
14
15<Page title="Index">
16 <header>
17 <h1>
18 <svg viewBox="0 0 902 134" width="160">
19 <title>Diffuse</title>
20 <use
21 xlink:href="/images/diffuse-current.svg#diffuse"
22 href="/images/diffuse-current.svg#diffuse"></use>
23 </svg>
24 </h1>
25 </header>
26 <main>
27 <section>
28 <h2>Themes</h2>
29
30 <p>
31 <em
32 >Themes are “applet compositions” and opt for a traditional way of interacting with them,
33 like a regular (web) app:</em
34 >
35 </p>
36
37 <ul>
38 {
39 themes.map((item: any) => (
40 <li>
41 <a href={item.url}>{item.title}</a>
42 </li>
43 ))
44 }
45 </ul>
46 </section>
47
48 <section>
49 <h2>Applets</h2>
50
51 <h3>Engines</h3>
52
53 <p>
54 <em
55 >These logic applets don't have any UI. There are specialised UI applets in themes that
56 control these.</em
57 >
58 </p>
59
60 <ul>
61 {
62 engines.map((item: any) => (
63 <li>
64 <a href={item.url}>{item.title}</a>
65 </li>
66 ))
67 }
68 </ul>
69
70 <h3>Data storage</h3>
71
72 <p>
73 <em
74 >Applets that manage input and output of the system. Where input is audio files or
75 streams, and output is derived data such as a music playlist.</em
76 >
77 </p>
78
79 <h3>Data processing</h3>
80
81 <p>
82 <em
83 >These applets interact with the bytes provided by the data storage, or provide to. This
84 processed data can then be passed to the UI layer and engine applets.</em
85 >
86 </p>
87
88 <h3>Additional</h3>
89
90 <p>
91 <em>Supplemental applets, such as scrobblers.</em>
92 </p>
93 </section>
94 </main>
95</Page>