+2 -2

src/_agency.vto

reviewed

··· 17 17 <!-- 1 --> 18 18 <li> 19 19 <p> 20 20 - <i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="themes/">theme</a>. 20 20 + <i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="facets/themes/">theme</a>. 21 21 </p> 22 22 </li> 23 23 <!-- 2 --> ··· 52 52 <i class="ph-fill ph-cooking-pot"></i> <strong>Level 5</strong>: 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. 53 53 </p> 54 54 <p> 55 55 - A similar tool comes into play here, the <a href="themes/#builder">themes builder</a>. Same concept as the facets builder, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>. 55 55 + A similar tool comes into play here, the <a href="facets/themes/#builder">themes builder</a>. Same concept as the facets builder, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>. 56 56 </p> 57 57 </li> 58 58 <!-- 6 -->

+5 -5

src/_data/facets.json

reviewed

··· 14 14 "desc": "Automatically put tracks into the queue when this interface is opened. Also allows for controlling shuffle, repeat, search, sorting and playlist selection." 15 15 }, 16 16 { 17 17 - "url": "themes/blur/facet/index.html", 17 17 + "url": "facets/themes/blur/facet/index.html", 18 18 "title": "Blur", 19 19 "category": "Themes", 20 20 "featured": true, 21 21 "desc": "A combination of the classic Diffuse browser and the Apple Music iOS playback screen." 22 22 }, 23 23 { 24 24 - "url": "themes/blur/artwork-controller/facet/index.html", 24 24 + "url": "facets/themes/blur/artwork-controller/facet/index.html", 25 25 "title": "Blur / Artwork Controller", 26 26 "category": "Playback", 27 27 "featured": true, 28 28 "desc": "Audio playback controller with an artwork display. Play audio from the queue, add tracks to your favourites, control the queue and volume." 29 29 }, 30 30 { 31 31 - "url": "themes/blur/browser/facet/index.html", 31 31 + "url": "facets/themes/blur/browser/facet/index.html", 32 32 "title": "Blur / Browser", 33 33 "category": "Browsing", 34 34 "featured": true, ··· 213 213 "desc": "Import data from Diffuse v3." 214 214 }, 215 215 { 216 216 - "url": "themes/winamp/facet/index.html", 216 216 + "url": "facets/themes/winamp/facet/index.html", 217 217 "title": "Winamp", 218 218 "category": "Themes", 219 219 "featured": true, 220 220 "desc": "Windows 98 inspired theme with a classic Winamp skin for the audio player. The Winamp playlist is a combination of the queue's history, the track that's currently playing and the future queue items." 221 221 }, 222 222 { 223 223 - "url": "themes/winamp/browser/facet/index.html", 223 223 + "url": "facets/themes/winamp/browser/facet/index.html", 224 224 "title": "Winamp / Browser", 225 225 "category": "Browsing", 226 226 "desc": "Collection browser and search."

+1 -1

src/common/facets/constants.js

reviewed

··· 16 16 // INTERACTIVE 17 17 "facets/connect/index.html", 18 18 "facets/data/sources/index.html", 19 19 - "themes/blur/artwork-controller/facet/index.html", 19 19 + "facets/themes/blur/artwork-controller/facet/index.html", 20 20 21 21 // PRELUDES 22 22 "facets/data/metadata-bundle/index.html",

+4 -4

src/facets/data/process-tracks/index.html

reviewed

··· 17 17 18 18 <style> 19 19 @import "./styles/variables.css"; 20 20 - @import "./themes/winamp/fonts.css"; 21 21 - @import "./themes/winamp/facet.css"; 20 20 + @import "./facets/themes/winamp/fonts.css"; 21 21 + @import "./facets/themes/winamp/facet.css"; 22 22 23 23 @import "./vendor/98.css"; 24 24 - @import "./themes/winamp/98-vars.css"; 25 25 - @import "./themes/winamp/98-extra.css"; 24 24 + @import "./facets/themes/winamp/98-vars.css"; 25 25 + @import "./facets/themes/winamp/98-extra.css"; 26 26 27 27 </style> 28 28

+3 -3

src/guide.vto

reviewed

··· 81 81 <i class="ph-fill ph-plus-circle" style="opacity: 0.25"></i> 82 82 <i class="ph-fill ph-tabs"></i> 83 83 <span> 84 84 - Unlike interfaces in <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">separate</a> <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('themes/winamp/browser/facet/index.html') |> facetLoaderURL }}">tabs</a> 84 84 + Unlike interfaces in <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">separate</a> <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/winamp/browser/facet/index.html') |> facetLoaderURL }}">tabs</a> 85 85 </span> 86 86 </span> 87 87 </li> ··· 197 197 </p> 198 198 199 199 <p> 200 200 - <a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank"> 200 200 + <a class="button button--bg-twist-2" href="{{ ('facets/themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank"> 201 201 Play audio 202 202 </a> 203 203 </p> ··· 209 209 210 210 <div class="flex"> 211 211 <p> 212 212 - Interfaces can also be added (pinned) to your dashboard, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="themes/">themes</a>. 212 212 + Interfaces can also be added (pinned) to your dashboard, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="./catalogue/?category=Themes">themes</a>. 213 213 </p> 214 214 215 215 <p>

src/themes/blur/artwork-controller/element.css src/facets/themes/blur/artwork-controller/element.css

reviewed

+2 -2

src/themes/blur/artwork-controller/element.js src/facets/themes/blur/artwork-controller/element.js

reviewed

··· 414 414 <link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" /> 415 415 <link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" /> 416 416 <link rel="stylesheet" href="styles/animations.css" /> 417 417 - <link rel="stylesheet" href="themes/blur/artwork-controller/element.css" /> 417 417 + <link rel="stylesheet" href="facets/themes/blur/artwork-controller/element.css" /> 418 418 419 419 <main style="background-color: ${this.#artworkColor.value ?? 420 420 `var(--color-3)`}; opacity: 0;"> ··· 426 426 @click="${() => { 427 427 const base = document.baseURI; 428 428 const facetUrl = new URL( 429 429 - "themes/blur/artwork-controller/facet/index.html", 429 429 + "facets/themes/blur/artwork-controller/facet/index.html", 430 430 base, 431 431 ); 432 432 facetUrl.searchParams.set("group", this.group);

+2 -2

src/themes/blur/artwork-controller/facet/index.html src/facets/themes/blur/artwork-controller/facet/index.html

reviewed

··· 2 2 @import "./vendor/@phosphor-icons/web/bold/style.css"; 3 3 @import "./vendor/@phosphor-icons/web/fill/style.css"; 4 4 @import "./styles/base.css"; 5 5 - @import "./themes/blur/font-faces.css"; 5 5 + @import "./facets/themes/blur/font-faces.css"; 6 6 7 7 db-artwork-controller { 8 8 font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; ··· 17 17 } 18 18 </style> 19 19 20 20 - <script type="module" src="themes/blur/artwork-controller/facet/index.inline.js"></script> 20 20 + <script type="module" src="facets/themes/blur/artwork-controller/facet/index.inline.js"></script>

+1 -1

src/themes/blur/artwork-controller/facet/index.inline.js src/facets/themes/blur/artwork-controller/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import ArtworkController from "~/themes/blur/artwork-controller/element.js"; 2 2 + import ArtworkController from "~/facets/themes/blur/artwork-controller/element.js"; 3 3 4 4 // Set doc title 5 5 foundation.setup({ title: "Artwork controller | Blur | Diffuse" });

src/themes/blur/browser/element.css src/facets/themes/blur/browser/element.css

reviewed

+2 -2

src/themes/blur/browser/element.js src/facets/themes/blur/browser/element.js

reviewed

··· 1153 1153 <link rel="stylesheet" href="styles/diffuse/facet.css" /> 1154 1154 <link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" /> 1155 1155 <link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" /> 1156 1156 - <link rel="stylesheet" href="themes/blur/variables.css" /> 1157 1157 - <link rel="stylesheet" href="themes/blur/browser/element.css" /> 1156 1156 + <link rel="stylesheet" href="facets/themes/blur/variables.css" /> 1157 1157 + <link rel="stylesheet" href="facets/themes/blur/browser/element.css" /> 1158 1158 1159 1159 <div class="toolbar"> 1160 1160 <label class="search-field">

+3 -3

src/themes/blur/browser/facet/index.html src/facets/themes/blur/browser/facet/index.html

reviewed

··· 3 3 @import "./vendor/@phosphor-icons/web/fill/style.css"; 4 4 @import "./styles/base.css"; 5 5 @import "./styles/diffuse/facet.css"; 6 6 - @import "./themes/blur/variables.css"; 7 7 - @import "./themes/blur/font-faces.css"; 6 6 + @import "./facets/themes/blur/variables.css"; 7 7 + @import "./facets/themes/blur/font-faces.css"; 8 8 9 9 db-browser { 10 10 font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; ··· 14 14 } 15 15 </style> 16 16 17 17 - <script type="module" src="themes/blur/browser/facet/index.inline.js"></script> 17 17 + <script type="module" src="facets/themes/blur/browser/facet/index.inline.js"></script>

+1 -1

src/themes/blur/browser/facet/index.inline.js src/facets/themes/blur/browser/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import BrowserElement from "~/themes/blur/browser/element.js"; 2 2 + import BrowserElement from "~/facets/themes/blur/browser/element.js"; 3 3 4 4 // Set doc title 5 5 foundation.setup({ title: "Browser | Blur | Diffuse" });

src/themes/blur/facet/index.css src/facets/themes/blur/facet/index.css

reviewed

+4 -4

src/themes/blur/facet/index.html src/facets/themes/blur/facet/index.html

reviewed

··· 1 1 <link rel="stylesheet" href="styles/base.css" /> 2 2 - <link rel="stylesheet" href="themes/blur/font-faces.css" /> 3 3 - <link rel="stylesheet" href="themes/blur/variables.css" /> 4 4 - <link rel="stylesheet" href="themes/blur/facet/index.css" /> 2 2 + <link rel="stylesheet" href="facets/themes/blur/font-faces.css" /> 3 3 + <link rel="stylesheet" href="facets/themes/blur/variables.css" /> 4 4 + <link rel="stylesheet" href="facets/themes/blur/facet/index.css" /> 5 5 <link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" /> 6 6 <link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" /> 7 7 ··· 103 103 </div> 104 104 </main> 105 105 106 106 - <script type="module" src="themes/blur/facet/index.inline.js"></script> 106 106 + <script type="module" src="facets/themes/blur/facet/index.inline.js"></script>

+2 -2

src/themes/blur/facet/index.inline.js src/facets/themes/blur/facet/index.inline.js

reviewed

··· 29 29 await foundation.orchestrator.coverGroups(); 30 30 await foundation.orchestrator.favourites(); 31 31 32 32 - await import("~/themes/blur/artwork-controller/element.js"); 33 33 - await import("~/themes/blur/browser/element.js"); 32 32 + await import("~/facets/themes/blur/artwork-controller/element.js"); 33 33 + await import("~/facets/themes/blur/browser/element.js"); 34 34 35 35 const groupLabel = foundation.GROUP === "facets" ? "Deck A" : foundation.GROUP; 36 36 const controller = document.querySelector("db-artwork-controller");

src/themes/blur/font-faces.css src/facets/themes/blur/font-faces.css

reviewed

src/themes/blur/variables.css src/facets/themes/blur/variables.css

reviewed

src/themes/winamp/98-extra.css src/facets/themes/winamp/98-extra.css

reviewed

src/themes/winamp/98-vars.css src/facets/themes/winamp/98-vars.css

reviewed

+1 -1

src/themes/winamp/browser/element.js src/facets/themes/winamp/browser/element.js

reviewed

··· 291 291 <link rel="stylesheet" href="vendor/98.css" /> 292 292 293 293 <style> 294 294 - @import "./themes/winamp/98-vars.css"; 294 294 + @import "./facets/themes/winamp/98-vars.css"; 295 295 296 296 :host { 297 297 display: flex;

+3 -3

src/themes/winamp/browser/facet/index.html src/facets/themes/winamp/browser/facet/index.html

reviewed

··· 14 14 </div> 15 15 16 16 <style> 17 17 - @import "./themes/winamp/fonts.css"; 18 18 - @import "./themes/winamp/facet.css"; 17 17 + @import "./facets/themes/winamp/fonts.css"; 18 18 + @import "./facets/themes/winamp/facet.css"; 19 19 @import "./vendor/98.css"; 20 20 21 21 </style> 22 22 23 23 - <script type="module" src="themes/winamp/browser/facet/index.inline.js"></script> 23 23 + <script type="module" src="facets/themes/winamp/browser/facet/index.inline.js"></script>

+1 -1

src/themes/winamp/browser/facet/index.inline.js src/facets/themes/winamp/browser/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import BrowserElement from "~/themes/winamp/browser/element.js"; 2 2 + import BrowserElement from "~/facets/themes/winamp/browser/element.js"; 3 3 4 4 // Set doc title 5 5 foundation.setup({ title: "Browser | Winamp | Diffuse" });

src/themes/winamp/common/ui.js src/facets/themes/winamp/common/ui.js

reviewed

src/themes/winamp/facet.css src/facets/themes/winamp/facet.css

reviewed

+3 -3

src/themes/winamp/facet/index.html src/facets/themes/winamp/facet/index.html

reviewed

··· 1 1 - <link rel="stylesheet" href="themes/winamp/fonts.css" /> 2 2 - <link rel="stylesheet" href="themes/winamp/index.css" /> 1 1 + <link rel="stylesheet" href="facets/themes/winamp/fonts.css" /> 2 2 + <link rel="stylesheet" href="facets/themes/winamp/index.css" /> 3 3 4 4 <style> 5 5 /*body { ··· 124 124 </section> 125 125 </main> 126 126 127 127 - <script type="module" src="themes/winamp/facet/index.inline.js"></script> 127 127 + <script type="module" src="facets/themes/winamp/facet/index.inline.js"></script>

+4 -4

src/themes/winamp/facet/index.inline.js src/facets/themes/winamp/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 import { effect } from "~/common/signal.js"; 3 3 4 4 - import WindowManager from "~/themes/winamp/window-manager/element.js"; 4 4 + import WindowManager from "~/facets/themes/winamp/window-manager/element.js"; 5 5 6 6 // Set doc title 7 7 foundation.setup({ title: "Winamp | Diffuse" }); ··· 19 19 await foundation.orchestrator.queueAudio(); 20 20 await foundation.orchestrator.controller(); 21 21 22 22 - await import("~/themes/winamp/browser/element.js"); 23 23 - await import("~/themes/winamp/window/element.js"); 22 22 + await import("~/facets/themes/winamp/browser/element.js"); 23 23 + await import("~/facets/themes/winamp/window/element.js"); 24 24 25 25 const { default: WinampElement } = await import( 26 26 - "~/themes/winamp/winamp/element.js" 26 26 + "~/facets/themes/winamp/winamp/element.js" 27 27 ); 28 28 29 29 /** @type {OutputElement | null} */

src/themes/winamp/fonts.css src/facets/themes/winamp/fonts.css

reviewed

src/themes/winamp/index.css src/facets/themes/winamp/index.css

reviewed

src/themes/winamp/vendor/README.md src/facets/themes/winamp/vendor/README.md

reviewed

src/themes/winamp/vendor/base-skin.css src/facets/themes/winamp/vendor/base-skin.css

reviewed

src/themes/winamp/vendor/context-menu.css src/facets/themes/winamp/vendor/context-menu.css

reviewed

src/themes/winamp/vendor/equalizer-window.css src/facets/themes/winamp/vendor/equalizer-window.css

reviewed

src/themes/winamp/vendor/gen-window.css src/facets/themes/winamp/vendor/gen-window.css

reviewed

src/themes/winamp/vendor/main-window.css src/facets/themes/winamp/vendor/main-window.css

reviewed

src/themes/winamp/vendor/milkdrop-window.css src/facets/themes/winamp/vendor/milkdrop-window.css

reviewed

src/themes/winamp/vendor/mini-time.css src/facets/themes/winamp/vendor/mini-time.css

reviewed

src/themes/winamp/vendor/playlist-window.css src/facets/themes/winamp/vendor/playlist-window.css

reviewed

src/themes/winamp/vendor/webamp.css src/facets/themes/winamp/vendor/webamp.css

reviewed

+3 -3

src/themes/winamp/winamp/element.js src/facets/themes/winamp/winamp/element.js

reviewed

··· 20 20 // UI STATE 21 21 //////////////////////////////////////////// 22 22 23 23 - const UI_STATE_KEY = "themes/winamp/winamp/ui"; 23 23 + const UI_STATE_KEY = "facets/themes/winamp/winamp/ui"; 24 24 25 25 /** @returns {{ eqOpen: boolean, playlistOpen: boolean, milkdropOpen: boolean, eqOn: boolean, eqSliders: Record<string, number> | null, mainShade: boolean, eqShade: boolean, playlistShade: boolean, positions: Record<string, {x:number,y:number}> | null, sizes: Record<string, {width:number,height:number}> | null }} */ 26 26 function loadUiState() { ··· 1895 1895 1896 1896 return html` 1897 1897 <style> 1898 1898 - @import "./themes/winamp/vendor/webamp.css"; 1899 1899 - @import "./themes/winamp/vendor/gen-window.css"; 1898 1898 + @import "./facets/themes/winamp/vendor/webamp.css"; 1899 1899 + @import "./facets/themes/winamp/vendor/gen-window.css"; 1900 1900 1901 1901 #webamp .playlist-track-titles > div { 1902 1902 padding-left: 3px;

src/themes/winamp/window-manager/element.js src/facets/themes/winamp/window-manager/element.js

reviewed

src/themes/winamp/window/element.js src/facets/themes/winamp/window/element.js

reviewed