forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: take control section on index page
+70
-21
+64
-21
src/index.vto
+64
-21
src/index.vto
···
13
13
title: "Blur"
14
14
todo: true
15
15
desc: >
16
-
**A DJ theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
16
+
**A theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
17
17
- title: "Loader"
18
18
todo: true
19
19
desc: >
···
184
184
</p>
185
185
186
186
<p>
187
-
If you're a programmer, you can compose the <a href="#elements">elements</a> listed below to make your own theme. Easily build software by connecting various elements.
188
-
</p>
189
-
190
-
<p>
191
-
<small>
192
-
<strong><i class="ph-fill ph-check-square"></i></strong>
193
-
I'd like there to be a way to compose your own theme without having to write code. Hopefully sometime in the future.
194
-
</small>
187
+
The goal is for every user, no matter their experience with web software, to have agency over their software. One can start with making small changes and gradually progress to making big changes.
195
188
</p>
196
189
</section>
197
190
···
258
251
</section>
259
252
</div>
260
253
254
+
<!-- CODE -->
255
+
<div class="columns">
256
+
<section>
257
+
<h2 id="code">Take control</h2>
258
+
259
+
<p>
260
+
Diffuse ranges from “eating out at a great restaurant”, all the way to “making your favourite meal at home”.
261
+
</p>
262
+
263
+
<ul>
264
+
<li>
265
+
<p>
266
+
<i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="#themes">theme</a>.
267
+
</p>
268
+
</li>
269
+
<li>
270
+
<p>
271
+
<i class="ph-fill ph-basket"></i> <strong>Level 2</strong>: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's <a href="#constituents">constituents</a>.
272
+
</p>
273
+
</li>
274
+
<li>
275
+
<p>
276
+
<i class="ph-fill ph-pepper"></i> <strong>Level 3</strong>: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own. For example, add some spice. However, you're not quite confident enough which spice to pick, so you hire some help.
277
+
</p>
278
+
<p>
279
+
This can be done using the <a href="#constituents-loader">constituents loader</a> which allows you to build on top of a familiar foundation. You can load custom constituents using this. You can use snippets from other people or use an LLM to generate something for you (eg. an album art gallery)
280
+
</p>
281
+
</li>
282
+
</ul>
283
+
</section>
284
+
<section>
285
+
<h2 id="code"> </h2>
286
+
287
+
<ul>
288
+
<li>
289
+
<p>
290
+
<i class="ph-fill ph-knife"></i> <strong>Level 4</strong>: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands.
291
+
</p>
292
+
<p>
293
+
You continue to use the <a href="#constituents-loader">constituents loader</a> but learn a bit of HTML, Javascript and CSS; so you can write your own constituent.
294
+
</p>
295
+
</li>
296
+
<li>
297
+
<p>
298
+
<i class="ph-fill ph-cooking-pot"></i> <strong>Level 5</strong>: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there. You use a friend's kitchen with all the necessary tools.
299
+
</p>
300
+
<p>
301
+
A similar tool comes into play here, the <a href="#themes-loader">themes loader</a>. Same concept as the constituents loader, but now you need to specify the foundation yourself, the connecting tissue.
302
+
</p>
303
+
</li>
304
+
<li>
305
+
<p>
306
+
<i class="ph-fill ph-oven"></i> <strong>Level 6</strong>: You were inspired by your friend's kitchen and get yourself a fully equiped kitchen.
307
+
</p>
308
+
<p>
309
+
You can self-host Diffuse, it's <a href="https://tangled.org/tokono.ma/diffuse/blob/v4/">open-source</a>!
310
+
</p>
311
+
</li>
312
+
</ul>
313
+
</section>
314
+
</div>
315
+
261
316
<!-- ELEMENTS -->
262
317
<section>
263
318
<h2 id="elements">Elements</h2>
···
340
395
<p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
341
396
342
397
{{ await comp.list({ items: definitions }) }}
343
-
</section>
344
-
345
-
<!-- CODE -->
346
-
<section>
347
-
<h2 id="code">Code your own</h2>
348
-
349
-
<p>
350
-
<small>
351
-
<strong>TODO:</strong>
352
-
Explain how to connect the various elements.
353
-
</small>
354
-
</p>
355
398
</section>
356
399
</main>
357
400