forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: simplify guide
+116
-27
+116
-27
src/guide.vto
+116
-27
src/guide.vto
···
9
9
font-size: var(--fs-lg);
10
10
opacity: 0.6;
11
11
}
12
+
13
+
.getting-started {
14
+
font-size: var(--fs-md);
15
+
font-weight: 200;
16
+
17
+
li {
18
+
display: inline-flex;
19
+
}
20
+
21
+
li a {
22
+
text-decoration: none;
23
+
}
24
+
25
+
.with-icon {
26
+
gap: var(--space-sm);
27
+
}
28
+
}
29
+
30
+
.intro {
31
+
display: flex;
32
+
flex-wrap: wrap;
33
+
font-size: var(--fs-xl);
34
+
font-weight: 100;
35
+
gap: var(--space-sm) var(--space-xl);
36
+
margin: var(--space-xl) 0;
37
+
text-align: center;
38
+
39
+
& > div > span {
40
+
display: block;
41
+
margin: 0 auto;
42
+
max-width: var(--container-md);
43
+
}
44
+
}
12
45
</style>
13
46
14
47
<h1 hidden>Guide</h1>
15
48
16
-
<div class="columns">
17
-
<section class="flex">
18
-
<h2>Concept</h2>
49
+
<section class="intro">
50
+
<div class="flex" style="color: var(--accent-twist-2)">
51
+
<span>Infinite interfaces to interact with your data.</span>
52
+
</div>
53
+
<div class="flex" style="color: var(--accent-twist-4)">
54
+
<span>Countless features to extend your experience.</span>
55
+
</div>
56
+
</section>
19
57
20
-
<p>
21
-
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.
22
-
</p>
58
+
<section class="getting-started">
59
+
<div class="columns">
60
+
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
61
+
<li class="with-icon">
62
+
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
63
+
<i class="ph-fill ph-number-circle-one" style="opacity: 0.4"></i>
64
+
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
65
+
<span>Add some audio</span>
66
+
</a>
67
+
</li>
23
68
24
-
<p>
25
-
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
26
-
</p>
69
+
<li class="with-icon">
70
+
<a class="with-icon" href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">
71
+
<i class="ph-fill ph-number-circle-two" style="opacity: 0.4"></i>
72
+
<i class="ph-fill ph-gear-fine" style="opacity: 0.4"></i>
73
+
<span>Wait until processed</span>
74
+
</a>
75
+
</li>
76
+
77
+
<li class="with-icon">
78
+
<a class="with-icon" href="featured/">
79
+
<i class="ph-fill ph-number-circle-three" style="opacity: 0.4"></i>
80
+
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
81
+
<span>Explore interfaces</span>
82
+
</a>
83
+
</li>
84
+
</ul>
27
85
28
-
<p>
29
-
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.
30
-
</p>
86
+
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
87
+
<li>
88
+
<a class="with-icon" href="featured/">
89
+
<i class="ph-fill ph-number-circle-four" style="opacity: 0.4"></i>
90
+
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
91
+
<span>Enable additional features</span>
92
+
</a>
93
+
</li>
31
94
32
-
<p>
33
-
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>.
34
-
</p>
35
-
</section>
95
+
<li>
96
+
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
97
+
<i class="ph-fill ph-number-circle-five" style="opacity: 0.4"></i>
98
+
<i class="ph-fill ph-person" style="opacity: 0.4"></i>
99
+
<span>Sync or share data</span>
100
+
</a>
101
+
</li>
102
+
</ul>
103
+
</div>
104
+
</section>
36
105
37
-
<section class="flex">
38
-
<h2>Getting started</h2>
106
+
<!--<section style="font-size: var(--fs-base);">
107
+
<h2>Getting started</h2>
39
108
40
-
<ul style="display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-left: 0">
41
-
<!-- 1 -->
109
+
<div class="columns">
110
+
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
42
111
<li class="with-icon" style="gap: var(--space-sm)">
43
112
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
44
113
<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>
45
114
</li>
46
115
47
-
<!-- 2 -->
48
116
<li class="with-icon" style="gap: var(--space-sm)">
49
117
<i class="ph-fill ph-gear-six" style="opacity: 0.4"></i>
50
118
<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>
51
119
</li>
52
120
53
-
<!-- 3 -->
54
121
<li class="with-icon" style="gap: var(--space-sm)">
55
122
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
56
123
<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>
57
124
</li>
125
+
</ul>
58
126
59
-
<!-- 4 -->
127
+
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
60
128
<li class="with-icon" style="gap: var(--space-sm)">
61
129
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
62
130
<span><strong>Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
63
131
</li>
64
132
65
-
<!-- 5 -->
66
133
<li class="with-icon" style="gap: var(--space-sm)">
67
134
<i class="ph-fill ph-person" style="opacity: 0.4"></i>
68
135
<span><strong>Sync your configuration and playlists with your other devices.</strong> Or share it with other people.</span>
69
136
</li>
70
137
</ul>
138
+
</div>
139
+
</section>-->
140
+
141
+
<!--<div>
142
+
<section class="flex">
143
+
<h2>Concept</h2>
144
+
145
+
<p>
146
+
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.
147
+
</p>
148
+
149
+
<p>
150
+
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
151
+
</p>
152
+
153
+
<p>
154
+
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.
155
+
</p>
156
+
157
+
<p>
158
+
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>.
159
+
</p>
71
160
</section>
72
-
</div>
161
+
</div>-->
73
162
74
-
<section id="tutorial">
163
+
<!--<section id="tutorial">
75
164
<h2>Tutorial</h2>
76
165
77
166
<div class="columns">
···
129
218
</p>
130
219
</div>
131
220
</div>
132
-
</section>
221
+
</section>-->