From 45d5b9247cc8a1c5ca7e19ba2bf86ac5eb259bae Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Tue, 10 Feb 2026 18:44:39 +0100 Subject: [PATCH] chore: improve index page --- src/index.vto | 105 ++++++++----------- src/styles/diffuse/page.css | 13 +-- src/themes/blur/artwork-controller/index.js | 24 ----- src/themes/blur/artwork-controller/index.vto | 12 --- 4 files changed, 53 insertions(+), 101 deletions(-) delete mode 100644 src/themes/blur/artwork-controller/index.js delete mode 100644 src/themes/blur/artwork-controller/index.vto diff --git a/src/index.vto b/src/index.vto index 1f98a4c5..fadf7079 100644 --- a/src/index.vto +++ b/src/index.vto @@ -220,11 +220,10 @@ definitions:

- Construct your audio player. + Your audio
your data
your rules

- Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital - audio listening experience for you. + Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital audio listening experience for you.

@@ -232,10 +231,9 @@ definitions:

@@ -246,43 +244,37 @@ definitions:
-
- -
-

Usage

- -

- The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged web application approach, you can check out themes. -

- -

- Alternatively, there's constituents which allows you to use any component from any theme interchange­ably, 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 pre­packaged 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 interchange­ably, 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.

    @@ -368,7 +351,7 @@ definitions: Level 5: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there.

    - 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. +

    +
    {{ await comp.element({ title: "Configurators", diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css index 1392dd19..7569c85a 100644 --- a/src/styles/diffuse/page.css +++ b/src/styles/diffuse/page.css @@ -205,11 +205,6 @@ ul.columns { * Forms */ -/*select, -::picker(select) { - appearance: base-select; -}*/ - input, textarea { background: transparent; @@ -274,14 +269,20 @@ h2 + h3 { a { color: inherit; text-underline-offset: 6px; + + &.button { + text-decoration: none; + } } -button { +button, +a.button { background: var(--accent); border: 0; border-radius: var(--radius-md); color: var(--bg-color); cursor: pointer; + display: inline-block; font-family: inherit; font-weight: 500; line-height: var(--leading-tight); diff --git a/src/themes/blur/artwork-controller/index.js b/src/themes/blur/artwork-controller/index.js deleted file mode 100644 index 30bd84d6..00000000 --- a/src/themes/blur/artwork-controller/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import foundation from "@common/constituents/foundation.js"; -import ArtworkController from "@themes/blur/artwork-controller/element.js"; - -// Setup the prerequisite elements -foundation.features.fillQueueAutomatically(); -foundation.features.playAudioFromQueue(); -foundation.features.processInputs(); - -const aud = foundation.engine.audio(); -const art = foundation.processor.artwork(); -const inp = foundation.orchestrator.input(); -const que = foundation.engine.queue(); -const rse = foundation.engine.repeatShuffle(); - -// Controller -const dac = new ArtworkController(); -dac.setAttribute("artwork-processor-selector", art.selector); -dac.setAttribute("audio-engine-selector", aud.selector); -dac.setAttribute("input-selector", inp.selector); -dac.setAttribute("queue-engine-selector", que.selector); -dac.setAttribute("repeat-shuffle-engine-selector", rse.selector); - -// Add to DOM -document.body.append(dac); diff --git a/src/themes/blur/artwork-controller/index.vto b/src/themes/blur/artwork-controller/index.vto deleted file mode 100644 index 8cf07026..00000000 --- a/src/themes/blur/artwork-controller/index.vto +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: layouts/constituent.vto -base: ../../../ - -styles: - - styles/vendor/phosphor/bold/style.css - - styles/vendor/phosphor/fill/style.css - - styles/base.css - -scripts: - - themes/blur/artwork-controller/index.js ---- -- 2.54.0