forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
wip: new facets pages
+148
-72
-13
src/_components/facets/header.vto
-13
src/_components/facets/header.vto
···
1
-
<header>
2
-
<div>
3
-
<div>
4
-
<a class="diffuse-logo" href="./" style="display: inline-block;">
5
-
{{ await comp.diffuse.logo() }}
6
-
</a>
7
-
</div>
8
-
<p class="construct dither-mask" style="margin-top: 0; max-width: none;">
9
-
Facets
10
-
</p>
11
-
</div>
12
-
<div class="dither-mask filler"></div>
13
-
</header>
+9
-1
src/_data/facets.yaml
+9
-1
src/_data/facets.yaml
···
1
1
- url: "themes/blur/artwork-controller/facet/index.html"
2
2
title: "Blur / Artwork controller"
3
+
category: Playback
3
4
desc: >
4
5
Audio playback controller with an artwork display.
5
6
- url: "facets/tools/auto-queue/index.html"
6
7
title: "Tools / Automatic Queue"
8
+
category: Playback
7
9
desc: >
8
-
Everything you need to automatically put tracks into the queue.
10
+
Automatically put tracks into the queue.
9
11
- url: "facets/tools/export-import/index.html"
10
12
title: "Tools / Export & Import"
13
+
category: User data
11
14
desc: >
12
15
Export all data as a JSON snapshot, or restore from a previously exported file.
13
16
- url: "facets/tools/split-view/index.html"
14
17
title: "Tools / Split View"
18
+
category: Miscellaneous
15
19
desc: >
16
20
Arrange multiple facets side-by-side in a resizable split-panel layout.
17
21
- url: "facets/tools/v3-import/index.html"
18
22
title: "Tools / V3.x Import"
23
+
category: User data
19
24
desc: >
20
25
Import data from Diffuse v3.
21
26
- url: "themes/webamp/browser/facet/index.html"
22
27
title: "Webamp / Browser"
28
+
category: Browsing
23
29
desc: >
24
30
Collection browser + search in a retro, win98, look.
25
31
- url: "themes/webamp/configurators/input/facet/index.html"
26
32
title: "Webamp / Input Configurator"
33
+
category: Audio input
27
34
desc: >
28
35
Windows 98 styled input configurator where you can add music sources.
29
36
- url: "themes/webamp/configurators/output/facet/index.html"
30
37
title: "Webamp / Output Configurator"
38
+
category: User data
31
39
desc: >
32
40
Windows 98 styled output configurator where you can manage your data storage.
+7
src/_includes/layouts/facets-category.vto
+7
src/_includes/layouts/facets-category.vto
+31
src/_includes/layouts/facets.vto
+31
src/_includes/layouts/facets.vto
···
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
base: ../../
4
+
title: Facets | Diffuse
5
+
6
+
styles:
7
+
- styles/base.css
8
+
- styles/diffuse/page.css
9
+
- vendor/@phosphor-icons/bold/style.css
10
+
- vendor/@phosphor-icons/fill/style.css
11
+
---
12
+
13
+
<header>
14
+
<div style="min-width: var(--container-md)">
15
+
<div>
16
+
<a class="diffuse-logo" href="./" style="display: inline-block;">
17
+
{{ await comp.diffuse.logo() }}
18
+
</a>
19
+
</div>
20
+
<p class="construct dither-mask" style="color: var(--accent-twist-2); margin-top: 0; max-width: none;">
21
+
Facets
22
+
</p>
23
+
</div>
24
+
<div class="dither-mask filler filler--bg-twist-2"></div>
25
+
</header>
26
+
27
+
<main>
28
+
{{ await comp.facets.nav({ url, facets }) }}
29
+
30
+
{{ content }}
31
+
</main>
+9
src/facets/build.vto
+9
src/facets/build.vto
+23
src/facets/category.page.ts
+23
src/facets/category.page.ts
···
1
+
interface Facet {
2
+
url: string;
3
+
title: string;
4
+
category: string;
5
+
desc: string;
6
+
}
7
+
8
+
export const layout = "layouts/facets-category.vto";
9
+
10
+
export default function* ({ facets }: { facets: Facet[] }) {
11
+
const categories = [...new Set(facets.map((f) => f.category))].sort() as string[];
12
+
13
+
for (const category of categories) {
14
+
const slug = category.toLowerCase().replace(/\s+/g, "-");
15
+
yield {
16
+
url: `/facets/${slug}/`,
17
+
title: `${category} | Facets | Diffuse`,
18
+
category,
19
+
slug,
20
+
categoryFacets: facets.filter((f) => f.category === category),
21
+
};
22
+
}
23
+
}
+21
src/facets/guide.vto
+21
src/facets/guide.vto
···
1
+
---
2
+
layout: layouts/facets.vto
3
+
base: ../../
4
+
title: Guide | Facets | Diffuse
5
+
---
6
+
7
+
<section>
8
+
<h1 hidden>Guide</h1>
9
+
<p>
10
+
To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing facets here and create one too. If you found something you like, you can save it to your list and adjust it if need be.
11
+
</p>
12
+
<p>
13
+
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet/index.html') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue/index.html') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">controller</a> could be used.
14
+
</p>
15
+
<p>
16
+
<em>You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.</em>
17
+
</p>
18
+
<p>
19
+
<small><i class="ph-fill ph-info"></i> Every facet has access to your audio collection and your user data, along with any other shared state.</small>
20
+
</p>
21
+
</section>
+6
-30
src/facets/index.vto
+6
-30
src/facets/index.vto
···
1
1
---
2
-
layout: layouts/diffuse.vto
3
-
base: ../../
4
-
title: Guide | Facets | Diffuse
5
-
6
-
styles:
7
-
- styles/base.css
8
-
- styles/diffuse/page.css
9
-
- vendor/@phosphor-icons/bold/style.css
10
-
- vendor/@phosphor-icons/fill/style.css
2
+
layout: layouts/facets.vto
3
+
base: ../
4
+
title: Featured | Facets | Diffuse
11
5
---
12
6
13
-
{{ await comp.facets.header() }}
14
-
15
-
<main>
16
-
{{ await comp.facets.nav({ url }) }}
17
-
18
-
<section>
19
-
<h1 hidden>Guide</h1>
20
-
<p>
21
-
To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing ones here and create one below.
22
-
</p>
23
-
<p>
24
-
For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet/index.html') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue/index.html') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">controller</a> could be used.
25
-
</p>
26
-
<p>
27
-
<em>You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.</em>
28
-
</p>
29
-
<p>
30
-
<small><i class="ph-fill ph-info"></i> Every facet has access to your audio collection and your user data, along with any other shared state.</small>
31
-
</p>
32
-
</section>
33
-
</main>
7
+
<section>
8
+
<h1 hidden>Featured</h1>
9
+
</section>
+9
src/facets/you.vto
+9
src/facets/you.vto
+20
src/styles/diffuse/page.css
+20
src/styles/diffuse/page.css
···
99
99
.filler {
100
100
background: oklch(from var(--accent) l c h / 0.2);
101
101
flex: 1;
102
+
103
+
&.filler--bg-twist-1 {
104
+
background-color: oklch(from var(--accent-twist-1) l c h / 0.2);
105
+
}
106
+
107
+
&.filler--bg-twist-2 {
108
+
background-color: oklch(from var(--accent-twist-2) l c h / 0.2);
109
+
}
110
+
111
+
&.filler--bg-twist-3 {
112
+
background-color: oklch(from var(--accent-twist-3) l c h / 0.2);
113
+
}
114
+
115
+
&.filler--bg-twist-4 {
116
+
background-color: oklch(from var(--accent-twist-4) l c h / 0.2);
117
+
}
118
+
119
+
&.filler--bg-twist-5 {
120
+
background-color: oklch(from var(--accent-twist-5) l c h / 0.2);
121
+
}
102
122
}
103
123
104
124
.flex {