Yours
- -Generate
-- On the todo list, the idea is to have AI generate a piece of UI for you; building on the logical blocks provided by Diffuse. -
+Built-in
+ +Community
- +Nothing here yet, too early.
Your collection
+ +Examples
+Build
@@ -75,7 +106,7 @@ scripts:
- Your code here builds on the foundation listed below, it'll be injected into a <div id="container"> element in the body.
+ Your code here builds on the foundation listed below, it'll be injected into a <div id="container"> element in the body.
@@ -93,8 +124,8 @@ scripts:
diff --git a/src/themes/loader/constituent/s/index.js b/src/constituents/l/index.js similarity index 71% rename from src/themes/loader/constituent/s/index.js rename to src/constituents/l/index.js index 7f2b2a25..8f3efc18 100644 --- a/src/themes/loader/constituent/s/index.js +++ b/src/constituents/l/index.js @@ -1,3 +1,5 @@ +import * as CID from "@atcute/cid"; + import foundation from "@common/constituents/foundation.js"; import { effect } from "@common/signal.js"; @@ -15,10 +17,11 @@ const output = foundation.orchestrator.output(); // URL PARAMS //////////////////////////////////////////// -const url = new URL(document.location.href); +const docUrl = new URL(document.location.href); -const cid = url.searchParams.get("cid"); -const name = url.searchParams.get("name"); +const cid = docUrl.searchParams.get("cid"); +const name = docUrl.searchParams.get("name"); +const url = docUrl.searchParams.get("url"); //////////////////////////////////////////// // LOAD @@ -29,7 +32,7 @@ if (!containerNull) throw new Error("Container not found"); const container = /** @type {HTMLDivElement} */ (containerNull); -effect(() => { +effect(async () => { const collection = output.constituents.collection(); if (output.constituents.state() !== "loaded") return; @@ -39,6 +42,20 @@ effect(() => { constituent = collection.find((c) => c.cid === cid); } else if (name) { constituent = collection.find((c) => c.name === name); + } else if (url) { + const html = await fetch(url).then((res) => res.text()); + const cid = await CID.create(0x55, new TextEncoder().encode(html)); + const name = "tryout"; + + /** @type {Constituent} */ + const c = { + $type: "sh.diffuse.output.constituent", + cid: CID.toString(cid), + html, + name, + }; + + constituent = c; } // TODO: Message that constituent was not found diff --git a/src/themes/loader/constituent/s/index.vto b/src/constituents/l/index.vto similarity index 56% rename from src/themes/loader/constituent/s/index.vto rename to src/constituents/l/index.vto index ed2de573..c8f9cf46 100644 --- a/src/themes/loader/constituent/s/index.vto +++ b/src/constituents/l/index.vto @@ -1,9 +1,9 @@ --- layout: layouts/constituent.vto -base: ../../../../ +base: ../../ scripts: - - themes/loader/constituent/s/index.js + - constituents/l/index.js ---
diff --git a/src/index.vto b/src/index.vto index fadf7079..b1c32a98 100644 --- a/src/index.vto +++ b/src/index.vto @@ -27,26 +27,6 @@ themes: desc: > **Winamp 2 + Windows 98**. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements. -# CONSTITUENTS - -constituents: - - url: "themes/blur/artwork-controller/" - title: "Blur / Artwork controller" - desc: > - Audio playback controller with artwork display. - - url: "themes/loader/constituent/" - title: "Loader" - desc: > - **Bring in other constituents!** Load a constituent from a code snippet, store it in your user data output, explore community creations, or generate one. - - url: "themes/webamp/browser/" - title: "Webamp / Browser" - desc: > - Collection browser + search in a retro, win98, look. - - url: "themes/webamp/configurators/input/" - title: "Webamp / Input Configurator" - desc: > - Windows 98 styled input configurator where you can add music sources. - # ELEMENTS configurators: diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css index 7569c85a..e7ad9830 100644 --- a/src/styles/diffuse/page.css +++ b/src/styles/diffuse/page.css @@ -344,18 +344,30 @@ ul li::marker { } .list-description { + color: oklch(from currentColor l c h / 0.6); font-size: var(--fs-xs); margin-bottom: var(--space-xs); margin-top: var(--space-2xs); - opacity: 0.6; a { text-underline-offset: 3px; } + button, + .button { + line-height: 1; + padding: var(--space-3xs); + border-radius: var(--radius-xs); + } + code { font-size: var(--fs-xs); } + + .button-row { + gap: var(--space-3xs); + margin: 0 0 var(--space-2xs); + } } .table-of-contents { diff --git a/src/themes/blur/artwork-controller/constituent.html.txt b/src/themes/blur/artwork-controller/constituent.html.txt new file mode 100644 index 00000000..dcb417d5 --- /dev/null +++ b/src/themes/blur/artwork-controller/constituent.html.txt @@ -0,0 +1,7 @@ + + + diff --git a/src/themes/blur/artwork-controller/constituent.js b/src/themes/blur/artwork-controller/constituent.js new file mode 100644 index 00000000..30bd84d6 --- /dev/null +++ b/src/themes/blur/artwork-controller/constituent.js @@ -0,0 +1,24 @@ +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/index.js b/src/themes/index.js new file mode 100644 index 00000000..e69de29b diff --git a/src/themes/index.vto b/src/themes/index.vto new file mode 100644 index 00000000..25132695 --- /dev/null +++ b/src/themes/index.vto @@ -0,0 +1,43 @@ +--- +layout: layouts/constituent.vto +base: ../ + +styles: + - styles/base.css + - styles/diffuse/page.css + - styles/vendor/phosphor/bold/style.css + - styles/vendor/phosphor/fill/style.css + +scripts: + - themes/index.js +--- + ++ Themes +
++ Themes are element compositions and provide a traditional browser web application way of + using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab. +
+ ++ + + Each theme is unique, not just a skin; each one might have a totally different feature set. + +
++ TODO +
+