A music player that connects to your cloud/distributed storage.
1<div class="grid-filter">
2 <span class="grid-filter--label">Filter by</span>
3
4 <button class="button--border button--tiny button--transparent" data-filter="all">All</button>
5 <button class="button--border button--tiny button--bg-twist-4 button--tr-twist-4 button--transparent" data-filter="prelude">Features</button>
6 <button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
7
8 <button class="button--border button--tiny button--transparent" title="Show the hidden essential features" data-filter="base">Base</button>
9
10 <div style="flex: 1"></div>
11
12 <span class="grid-filter--label">Category</span>
13 <div class="grid-filter--categories"></div>
14</div>
15
16<ul class="grid" style="margin-top: var(--space-xs);">
17 {{ for index, item of items }}
18 {{ set color = (() => {
19 switch (item.kind) {
20 case "prelude": return "var(--accent-twist-4)";
21 default: return "var(--accent-twist-2)";
22 }
23 })() }}
24
25 {{ set kind = (() => {
26 // return item.kind ?? "interactive"
27 switch (item.kind) {
28 case "prelude": return "feature";
29 default: return "interface";
30 }
31 })() }}
32
33 {{ set facetUri = item.url |> facetURI }}
34
35 <li
36 class="grid-item"
37 style="--grid-item-color: {{color}}"
38 data-active-color="{{color}}"
39 data-description="{{item.desc.trim()}}"
40 data-name="{{item.title}}"
41 data-category="{{ item.category ?? `` }}"
42 data-kind="{{item.kind ?? `interface`}}"
43 data-tags="{{ item.tags?.join(',') ?? `` }}"
44 data-uri="{{ facetUri }}"
45 >
46 <div class="grid-item__contents">
47 <div class="grid-item__title">
48 {{ if item.kind === "prelude" }}
49 <span style="color: {{ color }}; padding: var(--space-3xs) 0">
50 {{item.title}}
51 </span>
52 {{ else }}
53 <a href="{{ item.url |> facetLoaderURL }}" style="color: {{ color }}; padding: var(--space-3xs) 0">
54 {{item.title}}
55 </a>
56 {{ /if }}
57 <span style="flex: 1"></span>
58 </div>
59 <div class="list-description">
60 {{ item.desc |> md(true) }}
61 </div>
62 </div>
63 <div class="grid-item__menu">
64 <button
65 class="button--transparent"
66 data-action="toggle"
67 style="opacity: 0"
68 title="{{ item.kind === `prelude` ? `Add` : `Bookmark` }}"
69 >
70 <i class="ph-bold {{ item.kind === `prelude` ? `ph-plus` : `ph-bookmark` }}"></i>
71 </button>
72 <hr />
73 <button
74 class="button--transparent"
75 title="More actions"
76 popovertarget="grid-item-menu-{{ index }}"
77 >
78 <i class="ph-bold ph-dots-three-vertical"></i>
79 </button>
80 <div id="grid-item-menu-{{ index }}" class="dropdown" popover>
81 <a class="with-icon" href="code/?uri={{ encodeURIComponent(facetUri) }}&name={{ encodeURIComponent(item.title) }}&kind={{ item.kind ?? `interface` }}&description={{ encodeURIComponent(item.desc.trim()) }}">
82 <i class="ph-fill ph-code-block"></i>
83 Open code in editor
84 </a>
85 </div>
86 </div>
87 </li>
88 {{ /for }}
89</ul>