tokono.ma
A music player that connects to your cloud/distributed storage.
feat: facets concept section
+7
-1
src/_includes/layouts/facets.vto
+7
-1
src/_includes/layouts/facets.vto
···
10
10
- vendor/@phosphor-icons/fill/style.css
11
11
---
12
12
13
+
<style>
14
+
.construct, h2 {
15
+
color: var(--accent-twist-2);
16
+
}
17
+
</style>
18
+
13
19
<header>
14
20
<div style="min-width: var(--container-md)">
15
21
<div>
···
17
23
{{ await comp.diffuse.logo() }}
18
24
</a>
19
25
</div>
20
-
<p class="construct dither-mask" style="color: var(--accent-twist-2); margin-top: 0; max-width: none;">
26
+
<p class="construct dither-mask" style="margin-top: 0; max-width: none;">
21
27
Facets
22
28
</p>
23
29
</div>
+44
-15
src/facets/guide.vto
+44
-15
src/facets/guide.vto
···
4
4
title: Guide | Facets | Diffuse
5
5
---
6
6
7
-
<section>
8
-
<h1 hidden>Guide</h1>
9
-
<p>
10
-
To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing facets here and create one too. If you found something you like, you can save it to your list and adjust it if need be.
11
-
</p>
12
-
<p>
13
-
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet/index.html') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue/index.html') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">controller</a> could be used.
14
-
</p>
15
-
<p>
16
-
<em>You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.</em>
17
-
</p>
18
-
<p>
19
-
<small><i class="ph-fill ph-info"></i> Every facet has access to your audio collection and your user data, along with any other shared state.</small>
20
-
</p>
21
-
</section>
7
+
<h1 hidden>Guide</h1>
8
+
9
+
<div class="columns">
10
+
<section>
11
+
<h3>Getting started</h3>
12
+
13
+
<p>
14
+
To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing facets here and create one too. If you found something you like, you can save it to your list and adjust it if need be.
15
+
</p>
16
+
<p>
17
+
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet/index.html') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue/index.html') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">controller</a> could be used.
18
+
</p>
19
+
<p>
20
+
<em>You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.</em>
21
+
</p>
22
+
<p>
23
+
<small><i class="ph-fill ph-info"></i> Every facet has access to your audio collection and your user data, along with any other shared state.</small>
24
+
</p>
25
+
</section>
26
+
27
+
<section>
28
+
<h3>Concept</h3>
29
+
30
+
<p>
31
+
Facets are unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
32
+
</p>
33
+
34
+
<p>
35
+
<strong>It provides every user the ability to choose what features and interface they want to layer on top of their data.</strong> The data flow goes like so:
36
+
</p>
37
+
38
+
<p>
39
+
<em>Data → Transformers → Solo components → Configurators → Orchestrators → Facets</em>
40
+
</p>
41
+
42
+
<p>
43
+
Facets can provide any amount of features and user interface they see fit. The key here is that the user can combine facets because the components that consist of it are connected, they broadcast their state and your data that has been updated.
44
+
</p>
45
+
46
+
<p>
47
+
Finally, facets are just regular web pages so they can live wherever. We save them to the user-data storage that's configured and give the user the option to share it. This means that you can load facets from other people, <strong>building software cooperatively</strong>.
48
+
</p>
49
+
</section>
50
+
</div>