···11+<html lang="en">
22+ <head>
33+ <meta charset="UTF-8" />
44+55+ <meta name="color-scheme" />
66+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
77+88+ <meta name="media-controllable" />
99+ <meta name="mobile-web-app-capable" content="yes" />
1010+1111+ <title>Guide | Facets | Diffuse</title>
1212+1313+ <!-- Base -->
1414+ <base href="../../" />
1515+1616+ <!-- Favicons & Mobile -->
1717+ <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
1818+ <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
1919+ <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
2020+ <!-- TODO: <link rel="manifest" href="site.webmanifest" />-->
2121+ <link rel="mask-icon" href="safari-pinned-tab.svg" color="#8a90a9" />
2222+ <meta name="msapplication-TileColor" content="#8a90a9" />
2323+ <meta name="theme-color" content="#8a90a9" />
2424+2525+ <!-- Preload items so they're ready before first paint (prevents flash during view transitions) -->
2626+ <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable.woff2" />
2727+ <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable-Italic.woff2" />
2828+ <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/CommitMonoVariable.woff2" />
2929+ <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/bold/Phosphor-Bold.woff2" />
3030+ <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/fill/Phosphor-Fill.woff2" />
3131+3232+ <!-- Styles -->
3333+ <link rel="stylesheet" href="styles/base.css" />
3434+ <link rel="stylesheet" href="styles/diffuse/page.css" />
3535+ <link rel="stylesheet" href="vendor/@phosphor-icons/bold/style.css" />
3636+ <link rel="stylesheet" href="vendor/@phosphor-icons/fill/style.css" />
3737+ </head>
3838+ <body>
3939+ <style>
4040+ .construct, h2 {
4141+ color: var(--accent-twist-2);
4242+ }
4343+</style>
4444+4545+<header>
4646+ <div style="min-width: var(--container-md)">
4747+ <div>
4848+ <a class="diffuse-logo" href="./" style="display: inline-block;">
4949+ <svg viewBox="0 0 902 134" width="160">
5050+ <title>Diffuse</title>
5151+ <use
5252+ xlink:href="images/diffuse-current.svg#diffuse"
5353+ href="images/diffuse-current.svg#diffuse"></use>
5454+</svg>
5555+5656+ </a>
5757+ </div>
5858+ <p class="construct dither-mask" style="margin-top: 0; max-width: none;">
5959+ Facets
6060+ </p>
6161+ </div>
6262+ <div class="dither-mask filler filler--bg-twist-2"></div>
6363+</header>
6464+6565+<main>
6666+6767+<nav>
6868+ <a href="facets/guide/" class="button button--bg-twist-2 button--border">
6969+ <span class="with-icon">
7070+ <i class="ph-fill ph-book-open-text"></i>
7171+ Guide
7272+ </span>
7373+ </a>
7474+7575+ <a href="facets/you/" class="button button--transparent button--border">
7676+ <span class="with-icon">
7777+ <i class="ph-fill ph-person"></i>
7878+ Your collection
7979+ </span>
8080+ </a>
8181+8282+ <a href="facets/" class="button button--transparent button--border">
8383+ <span class="with-icon">
8484+ <i class="ph-fill ph-sparkle"></i>
8585+ Featured
8686+ </span>
8787+ </a>
8888+8989+ <a href="facets/build/" class="button button--transparent button--border">
9090+ <span class="with-icon">
9191+ <i class="ph-fill ph-hammer"></i>
9292+ Build
9393+ </span>
9494+ </a>
9595+9696+ <div class="divider"></div>
9797+9898+ <a href="facets/data/" class="button button--transparent button--border">
9999+ Data Input & Output
100100+ </a>
101101+102102+ <a href="facets/playback/" class="button button--transparent button--border">
103103+ Playback
104104+ </a>
105105+106106+ <a href="facets/browsing/" class="button button--transparent button--border">
107107+ Browsing
108108+ </a>
109109+110110+ <a href="facets/misc/" class="button button--transparent button--border">
111111+ <span class="with-icon">
112112+ <i class="ph-fill ph-treasure-chest"></i>
113113+ </span>
114114+ </a>
115115+</nav>
116116+117117+118118+ <h1 hidden>Guide</h1>
119119+120120+<div class="columns">
121121+ <section>
122122+ <h3>Getting started</h3>
123123+124124+ <p>
125125+ 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.
126126+ </p>
127127+ <p>
128128+ For example, say you want to play music; two options would be: (1) <a href="facets/l/?path=themes%2Fwebamp%2Fbrowser%2Ffacet%2Findex.html">browse</a> for a specific song and add it to the queue, or (2) <a href="facets/l/?path=facets%2Ftools%2Fauto-queue%2Findex.html">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="facets/l/?path=themes%2Fblur%2Fartwork-controller%2Ffacet%2Findex.html">controller</a> could be used.
129129+ </p>
130130+ <p>
131131+ <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>
132132+ </p>
133133+ <p>
134134+ <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>
135135+ </p>
136136+ </section>
137137+138138+ <section>
139139+ <h3>Concept</h3>
140140+141141+ <p>
142142+ 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.
143143+ </p>
144144+145145+ <p>
146146+ <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:
147147+ </p>
148148+149149+ <p>
150150+ <em>Data → Transformers → Solo components → Configurators → Orchestrators → Facets</em>
151151+ </p>
152152+153153+ <p>
154154+ 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.
155155+ </p>
156156+157157+ <p>
158158+ 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>.
159159+ </p>
160160+ </section>
161161+</div>
162162+163163+</main>
164164+165165+166166+ <!-- Make every touched URL available offline -->
167167+ <do-offline></do-offline>
168168+ <script src="components/orchestrator/offline/element.js" type="module"></script>
169169+170170+ <!-- Scripts -->
171171+ </body>
172172+</html>