forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: guide page work
+42
-64
+42
-64
src/guide.vto
+42
-64
src/guide.vto
···
11
11
}
12
12
13
13
.getting-started {
14
+
color: var(--accent-twist-2);
14
15
font-size: var(--fs-md);
15
-
font-weight: 200;
16
+
font-weight: 500;
16
17
17
18
li {
18
19
display: inline-block;
···
35
36
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
36
37
<li>
37
38
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
38
-
<i class="ph-fill ph-number-circle-one" style="opacity: 0.4"></i>
39
-
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
39
+
<i class="ph-fill ph-number-circle-one" style="opacity: 0.25"></i>
40
+
<i class="ph-fill ph-file-audio" style="opacity: 1"></i>
40
41
<span>Add some audio</span>
41
42
</a>
42
43
</li>
43
44
44
45
<li>
45
46
<a class="with-icon" href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">
46
-
<i class="ph-fill ph-number-circle-two" style="opacity: 0.4"></i>
47
-
<i class="ph-fill ph-gear-fine" style="opacity: 0.4"></i>
47
+
<i class="ph-fill ph-number-circle-two" style="opacity: 0.25"></i>
48
+
<i class="ph-fill ph-gear-fine" style="opacity: 1"></i>
48
49
<span>Wait until processed</span>
49
50
</a>
50
51
</li>
51
52
52
53
<li>
53
54
<a class="with-icon" href="featured/">
54
-
<i class="ph-fill ph-number-circle-three" style="opacity: 0.4"></i>
55
-
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
56
-
<span>Explore interfaces</span>
55
+
<i class="ph-fill ph-number-circle-three" style="opacity: 0.25"></i>
56
+
<i class="ph-fill ph-swatches" style="opacity: 1"></i>
57
+
<span>Try out interfaces</span>
57
58
</a>
58
59
</li>
59
60
</ul>
···
61
62
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
62
63
<li>
63
64
<a class="with-icon" href="featured/">
64
-
<i class="ph-fill ph-number-circle-four" style="opacity: 0.4"></i>
65
-
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
65
+
<i class="ph-fill ph-number-circle-four" style="opacity: 0.25"></i>
66
+
<i class="ph-fill ph-sparkle" style="opacity: 1"></i>
66
67
<span>Enable additional features</span>
67
68
</a>
68
69
</li>
69
70
70
71
<li>
71
72
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
72
-
<i class="ph-fill ph-number-circle-five" style="opacity: 0.4"></i>
73
-
<i class="ph-fill ph-person" style="opacity: 0.4"></i>
73
+
<i class="ph-fill ph-number-circle-five" style="opacity: 0.25"></i>
74
+
<i class="ph-fill ph-person" style="opacity: 1"></i>
74
75
<span>Sync or share data</span>
75
76
</a>
76
77
</li>
···
78
79
</div>
79
80
</section>
80
81
81
-
<!--<section style="font-size: var(--fs-base);">
82
-
<h2>Getting started</h2>
82
+
<section id="concept">
83
+
<h2>Concept</h2>
83
84
84
85
<div class="columns">
85
-
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
86
-
<li class="with-icon" style="gap: var(--space-sm)">
87
-
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
88
-
<span><strong>Add some audio files or streams.</strong> The wide range of <a href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">connect interfaces</a> can be used for this, or use the demo from the tutorial below.</span>
89
-
</li>
90
-
91
-
<li class="with-icon" style="gap: var(--space-sm)">
92
-
<i class="ph-fill ph-gear-six" style="opacity: 0.4"></i>
93
-
<span><strong>Wait until the processing of audio sources into tracks is completed.</strong> You can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>. The tutorial demo will show it directly.</span>
94
-
</li>
86
+
<div class="flex">
87
+
<p>
88
+
Diffuse is 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.
89
+
</p>
95
90
96
-
<li class="with-icon" style="gap: var(--space-sm)">
97
-
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
98
-
<span><strong style="color: var(--accent-twist-2)">Explore the interfaces that can be used to play and manage your audio.</strong> Check out the <a href="featured/">featured interfaces</a>.</span>
99
-
</li>
100
-
</ul>
91
+
<p>
92
+
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
93
+
</p>
101
94
102
-
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
103
-
<li class="with-icon" style="gap: var(--space-sm)">
104
-
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
105
-
<span><strong>Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
106
-
</li>
95
+
<p>
96
+
These features and interfaces are housed into units that we call "facets". They consist of <a href="elements/">Diffuse elements</a> that are connected, they broadcast their state and the parts of your data that have been updated.
97
+
</p>
107
98
108
-
<li class="with-icon" style="gap: var(--space-sm)">
109
-
<i class="ph-fill ph-person" style="opacity: 0.4"></i>
110
-
<span><strong>Sync your configuration and playlists with your other devices.</strong> Or share it with other people.</span>
111
-
</li>
112
-
</ul>
99
+
<p>
100
+
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 features and interfaces from other people, <strong>building software cooperatively</strong>.
101
+
</p>
102
+
</div>
103
+
<div class="flex">
104
+
<p>
105
+
<em>A few things to keep in mind:</em>
106
+
</p>
107
+
<ul style="display: flex; flex-direction: column; gap: var(--space-xs);">
108
+
<li>You can open as many interfaces as you'd like.</li>
109
+
<li>Interfaces are connected to each other.</li>
110
+
<li>Interfaces don't have to be pinned in order to be used, unlike features which do have to be added in order to be activated.</li>
111
+
</ul>
112
+
</div>
113
113
</div>
114
-
</section>-->
114
+
</section>
115
115
116
-
<!--<div>
117
-
<section class="flex">
118
-
<h2>Concept</h2>
119
-
120
-
<p>
121
-
Diffuse is 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.
122
-
</p>
123
-
124
-
<p>
125
-
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
126
-
</p>
127
-
128
-
<p>
129
-
These features and interfaces are housed into units that we call "facets". They consist of <a href="elements/">Diffuse elements</a> that are connected, they broadcast their state and the parts of your data that have been updated.
130
-
</p>
131
-
132
-
<p>
133
-
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 features and interfaces from other people, <strong>building software cooperatively</strong>.
134
-
</p>
135
-
</section>
136
-
</div>-->
137
-
138
-
<!--<section id="tutorial">
116
+
<section id="tutorial">
139
117
<h2>Tutorial</h2>
140
118
141
119
<div class="columns">
···
193
171
</p>
194
172
</div>
195
173
</div>
196
-
</section>-->
174
+
</section>