···11-# Agent guide
22-33-Before you write any code, read:
44-55-- The **why** document: `src/index.vto`
66- (there might be a compiled version `dist/index.html`, if so prefer that)
77-- The **how** document: `docs/ARCHITECTURE.md`
88-99-1010-## Your responsibilities
1111-1212-As an agent, your job is to:
1313-- Keep the architecture described in `docs/ARCHITECTURE.md` intact.
1414-- Preserve the overall goals and constraints described in the 'why' document.
1515-1616-If you are unsure how to implement something:
1717-- Prefer a small, clean, testable implementation that matches the intent.
1818-- Do **not** invent new architecture without clear justification in comments.
+7
CONTRIBUTING.md
···11+# Welcome 👋
22+33+Thanks for considering to contribute! To get started, take a look at the following items:
44+55+- **`README.md`**: Also in the root of this project, along side this file, for some general context and build instructions.
66+- **Explainer web page**: Important context, explains all non-technical aspects. You can either check out the [last deployed version](https://elements.diffuse.sh/latest/), or build the version located in this repo (`deno run build` → `dist/index.html`, or alternatively: `deno run serve` and open `http://localhost:3000`)
77+- **Architecture docs**: Another important piece, talks about code and file/directory organisation. Located in `docs/`.
+35-4
README.md
···11<img src="https://diffuse.sh/images/diffuse-light.svg" alt="Diffuse" width="158" />
2233-**Construct your audio player**, make a music player by composing web components.
33+**Construct your audio player**, make a music player and browser by composing web components.
4455Diffuse provides a range of custom elements: audio input, data output, metadata & artwork processing, audio playback, a queue system, and much more.
6677-It also features themes which are prebuilt compositions of those elements.
77+It is also aimed at consumers, providing themes and constituents, preconfigured component compositions; while simultaneously trying to be [malleable software](https://www.inkandswitch.com/essay/malleable-software/).
88+99+More information on the [website](https://elements.diffuse.sh/latest/).
1010+1111+1212+## Developer usage
1313+1414+You can either consume the Diffuse library via the [deployed instance](https://elements.diffuse.sh/latest/) (the listed elements link to Javascript files) or the [Javascript package](https://jsr.io/@toko/diffuse).
1515+1616+From there you can use the custom elements as with any other custom DOM element, by writing HTML or creating a `Class` instance.
1717+1818+```html
1919+<script src="https://elements.diffuse.sh/bafybeiezh4rgv7gk73o5dalfyilv5nfopezyvshtj5j7hrn23r4n27k7da/components/engine/queue/element.js"></script>
2020+2121+<de-queue></de-queue>
2222+```
2323+2424+```js
2525+import QueueEngine from "@toko/diffuse/components/engine/queue/element.js"
82699-More information on the [website](https://elements.diffuse.sh).
2727+const queue = new QueueEngine()
2828+queue.setAttribute("group", "constituents")
2929+3030+document.body.append(queue)
3131+````
103211331234## Build it yourself
···15371638```shell
1739deno run gen:defs:types
1818-deno run build
4040+deno run build # or deno run build
1941```
4242+4343+Diffuse is built with:
4444+- [Deno](https://deno.com)
4545+- Web components (custom elements)
4646+- Web workers (also: shared + service workers)
4747+- Signals (currently alien-signals, but hopefully [TC39](https://github.com/tc39/proposal-signals) in the future)
4848+- [`lit-html`](https://lit.dev/docs/libraries/standalone-templates/)
4949+- [`music-metadata`](https://github.com/Borewit/music-metadata)
5050+- Lume & ESBuild