A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(facets): featured page

+31 -13
+10 -8
src/_components/facets/grid.vto
··· 1 1 <ul class="grid" style="margin-top: var(--space-lg);"> 2 2 {{ for index, item of items }} 3 - <li data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}"> 4 - <div style="display: flex; align-items: center; gap: var(--space-xs); justify-content: space-between;"> 5 - <a href="{{ item.url |> facetLoaderURL }}" style="padding: var(--space-3xs) 0"> 6 - {{item.title}} 7 - </a> 8 - </div> 9 - <div class="list-description"> 10 - {{ item.desc |> md(true) }} 3 + <li class="grid-item" data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}"> 4 + <div class="grid-item__contents"> 5 + <div class="grid-item__title"> 6 + <a href="{{ item.url |> facetLoaderURL }}" style="padding: var(--space-3xs) 0"> 7 + {{item.title}} 8 + </a> 9 + </div> 10 + <div class="list-description"> 11 + {{ item.desc |> md(true) }} 12 + </div> 11 13 </div> 12 14 </li> 13 15 {{ /for }}
+8 -3
src/_data/facets.yaml
··· 1 1 - url: "themes/blur/artwork-controller/facet/index.html" 2 2 title: "Blur / Artwork controller" 3 3 category: Playback 4 + featured: true 4 5 desc: > 5 6 Audio playback controller with an artwork display. 6 7 - url: "facets/tools/auto-queue/index.html" 7 8 title: "Tools / Automatic Queue" 8 9 category: Playback 10 + featured: true 9 11 desc: > 10 12 Automatically put tracks into the queue. 11 13 - url: "facets/tools/export-import/index.html" ··· 26 28 - url: "themes/webamp/browser/facet/index.html" 27 29 title: "Webamp / Browser" 28 30 category: Browsing 31 + featured: true 29 32 desc: > 30 - Collection browser + search in a retro, win98, look. 33 + Collection browser and search. 31 34 - url: "themes/webamp/configurators/input/facet/index.html" 32 35 title: "Webamp / Input Configurator" 33 36 category: Data 37 + featured: true 34 38 desc: > 35 - Windows 98 styled input configurator where you can add music sources. 39 + Add your audio sources. 36 40 - url: "themes/webamp/configurators/output/facet/index.html" 37 41 title: "Webamp / Output Configurator" 38 42 category: Data 43 + featured: true 39 44 desc: > 40 - Windows 98 styled output configurator where you can manage your data storage. 45 + Manage your data storage.
+5 -1
src/facets/index.vto
··· 4 4 title: Featured | Facets | Diffuse 5 5 --- 6 6 7 + <h1 hidden>Featured</h1> 8 + 7 9 <section> 8 - <h1 hidden>Featured</h1> 10 + {{ await comp.facets.grid({ id: "featured", items: facets.filter(f => f.featured) }) }} 9 11 </section> 12 + 13 + <script src="facets/pages/grid-toggle.js" type="module"></script>
+1 -1
src/facets/pages/grid-toggle.js
··· 12 12 ); 13 13 14 14 for (const li of gridItems) { 15 - const container = li.querySelector("div[style]"); 15 + const container = li.querySelector(".grid-item__title"); 16 16 if (!container) continue; 17 17 18 18 const button = document.createElement("button");
+7
src/styles/diffuse/page.css
··· 258 258 flex: 1; 259 259 justify-content: center; 260 260 } 261 + 262 + .grid-item__title { 263 + align-items: center; 264 + display: flex; 265 + gap: var(--space-xs); 266 + justify-content: space-between; 267 + } 261 268 } 262 269 263 270 /**