Usage
- -- The easiest way to start is by exploring the software. If you prefer a traditional prepackaged web application approach, you can check out themes. -
- -- Alternatively, there's constituents which allows you to use any component from any theme interchangeably, each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another. -
- -- The goal is for every user, no matter their experience with web software, to have agency over their software. One can start with making small changes and gradually progress to making big changes. -
-Usage
- -Demo
++ The easiest way to start is by exploring the software. If you prefer a traditional prepackaged application approach, you can check out themes. Themes can look and function entirely different from each other, so make sure to explore! +
-Diffuse is not your typical streaming service, you have to add sources of audio. This button here adds a few sample audio files.
++ Alternatively, there's constituents which allows you to use any component from any theme interchangeably, among pieces that are not in themes; each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another. +
+- -
++ Diffuse is not your typical streaming service though, you have to add sources of audio. To start you can try out the demo by clicking the button below, or, go to a theme or constituent that lets you add your audio input. +
+ ++ +
+- Next, select any theme from below to play the audio. Or any of the other options suggested in the usage section. -
-Themes
@@ -292,16 +284,10 @@ definitions:- - - Each theme is unique, not just a skin; each one might have a totally different feature set. - + Explore
- - {{ await comp.list({ items: themes }) }}Constituents
@@ -310,36 +296,33 @@ definitions:- - - It also allows non-browser web environments, such as WebViews, to display UI components separately. For example, to enable moveable web views on the desktop. - + Explore
- - {{ await comp.list({ items: constituents }) }}Take control
+Agency
- Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home” + The goal is for every user, no matter their experience, to have agency over their data and their software. One can start with making small changes and gradually progress to making big changes.
+Take control
+-
- Level 1: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse theme. + Level 1: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse theme.
-
- Level 2: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's constituents. + Level 2: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's constituents.
@@ -348,7 +331,7 @@ definitions:
Level 3: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own (eg. add some spice). However, you're not quite confident enough which spice to pick, so you hire some help.
- This can be done using the constituents loader which allows you to build on top of a familiar preconfigured foundation and load custom constituents. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery). + This can be done using the constituents builder which allows you to build on top of a familiar preconfigured foundation and load custom constituents. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery).
@@ -357,7 +340,7 @@ definitions: Level 4: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands.- You continue to use the constituents loader but learn a bit of HTML, Javascript and CSS; so you're able to write your own constituent. + You continue to use the constituents builder but learn a bit of HTML, Javascript and CSS; so you're able to write your own constituent.
- A similar tool comes into play here, the themes loader. Same concept as the constituents loader, but now you need to specify the foundation yourself. You can use the elements listed below to do so. The code for these is available from this website or through the Javascript package. + A similar tool comes into play here, the themes builder. Same concept as the constituents builder, but now you need to specify the foundation yourself. You can use the elements listed below to do so. The code for these is available from this website or through the Javascript package.
@@ -377,7 +360,7 @@ definitions: Level 6: You open your own restaurant.- You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme loader. + You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme builder.
@@ -401,6 +384,10 @@ definitions: The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build. ++ Consume these using the constituents builder, the Javascript package, or the linked Javascript files down below. +
+