forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: improve guide
+49
-37
+49
-37
src/guide.vto
+49
-37
src/guide.vto
···
30
30
<section>
31
31
<h3>Getting started</h3>
32
32
33
-
<p>
34
-
<small><i class="ph-fill ph-info"></i> <em>There's a <a href="guide/#tutorial">tutorial</a> below if you prefer a long-form introduction.</em></small>
35
-
</p>
36
-
37
33
<ul style="display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-left: 0">
38
34
<!-- 1 -->
39
35
<li class="with-icon" style="gap: var(--space-sm)">
···
68
64
</section>
69
65
</div>
70
66
71
-
<section>
72
-
<h3 id="tutorial">Tutorial</h3>
67
+
<section id="tutorial">
68
+
<h3>Tutorial</h3>
73
69
74
-
<p>
75
-
<strong>Diffuse is not your typical streaming service, you have to add sources of audio so you have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away.
76
-
</p>
70
+
<div class="columns">
71
+
<div>
72
+
<p>
73
+
<strong>Diffuse is not your typical streaming service, you have to add sources of audio so you have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away. Wait until processing is completed.
74
+
</p>
77
75
78
-
<p>
79
-
<button id="add-sample-content" class="button--bg-accent">
80
-
<span>Add sample content</span>
81
-
</button>
82
-
</p>
76
+
<p>
77
+
<button id="add-sample-content" class="button--bg-accent">
78
+
<span>Add sample content</span>
79
+
</button>
80
+
</p>
83
81
84
-
<p>
85
-
Now we should explore what is possible with our audio. Because Diffuse is cooperative and malleable software, our interface can look like anything, and we can pick the features we like. That might sound overwhelming, so let's keep it simple for now.
86
-
</p>
82
+
<p>
83
+
Now we should explore what is possible with our audio. Because Diffuse is cooperative and malleable software, our interface can look like anything, and we can pick the features we like. That might sound overwhelming, so we'll start with a simple example.
84
+
</p>
87
85
88
-
<p>
89
-
By default a feature is enabled which puts audio in the queue automatically. <strong>Let's pick an interface</strong> to play what got put into the queue for us.
90
-
</p>
86
+
<p>
87
+
By default a feature is enabled which puts audio in the queue automatically. <strong>Let's pick an interface</strong> to play what got put into the queue for us.
88
+
</p>
91
89
92
-
<p>
93
-
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
94
-
Play audio
95
-
</a>
96
-
</p>
90
+
<p>
91
+
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
92
+
Play audio
93
+
</a>
94
+
</p>
97
95
98
-
<p>
99
-
<em>So you said I could pick the features and interfaces that I liked, how does that work?</em>
100
-
</p>
96
+
<p>
97
+
You can disable the "Automatic Queue" feature on <a href="./dashboard/">your dashboard</a> by deleting that item, or toggling it off on the <a href="./playback/">playback category page</a>. Next, reload the interface that plays your audio; now there won't be anything in the queue.
98
+
</p>
99
+
</div>
101
100
102
-
<p>
103
-
To do that, we have to look at the other pages shown in the navigation here, such as the <a href="featured/">featured page</a>. There you'll be able to browse through all the features and interfaces that are provided by Diffuse.
104
-
</p>
101
+
<div>
102
+
<p>
103
+
Interfaces can also be added to your dashboard, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="themes/">themes</a>.
104
+
</p>
105
+
106
+
<p>
107
+
When you're ready to add your own audio, a useful place to start is the "Connect" interface which summarises which inputs you can add. For more, check out the "Input & Output" category.
108
+
</p>
109
+
110
+
<p>
111
+
<a class="button button--bg-accent" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
112
+
Add audio input
113
+
</a>
114
+
</p>
105
115
106
-
<p>
107
-
<strong>To use a feature, you click the toggle to enable it</strong>, this will add it to your software. Interfaces can be added too, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="themes/">themes</a>.
108
-
</p>
116
+
<p>
117
+
The connect interface also shows some options that can be used for syncing your user-data, that's your playlists, configured audio inputs, etc. By default everything is saved in your browser.
118
+
</p>
109
119
110
-
<p>
111
-
TODO: explain adding your own inputs, syncing user data, editing/forking facets, creating your own facet, etc.
112
-
</p>
120
+
<p>
121
+
Lastly, don't forget that you can create, edit and share both features + interfaces. LLMs (AI) can also be used to create or edit them. To edit something, you first add it to your dashboard and then click the edit button, which will load it in the editor on the build page. The build page has some examples and documentation of how that system works.
122
+
</p>
123
+
</div>
124
+
</div>
113
125
</section>