burrito.space / diffuse
forked from tokono.ma/diffuse
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: index page content & style updates

Steven Vandevelde 8c2b8f19 d113f21a

+88 -7
+40 -3
src/index.vto
··· 71 71 input: 72 72 - url: "components/input/opensubsonic/element.js" 73 73 title: "Opensubsonic" 74 - desc: "Add any (open)subsonic server." 74 + desc: > 75 + Add any (open)subsonic server. 76 + - title: "HTTPS (Raw)" 77 + desc: > 78 + Enables usage of tracks with a HTTPS URI. 79 + todo: true 80 + - title: "HTTPS (JSON)" 81 + desc: > 82 + Generate tracks based on HTTPS servers that provide JSON (directory) listings. 83 + todo: true 75 84 - url: "components/input/s3/element.js" 76 85 title: "S3" 77 - desc: "AWS S3 and services that provide the same surface API such as Cloudflare R2." 86 + desc: > 87 + AWS S3 and services that provide the same surface API such as Cloudflare R2. 88 + - title: "Soundcloud" 89 + desc: > 90 + Add items from your Soundcloud feed. 91 + todo: true 92 + - title: "WebDAV" 93 + desc: > 94 + Add any WebDAV server. 95 + todo: true 78 96 79 97 orchestrators: 80 98 - url: "components/orchestrator/input/element.js" ··· 103 121 desc: "Supplies tracks to the given search processor whenever the tracks collection changes." 104 122 105 123 output: 124 + - title: "Bytes / Automerge Repo" 125 + desc: "Sync with an Automerge repo [sync server](https://github.com/automerge/automerge-repo-sync-server/tree/main)." 126 + todo: true 106 127 - url: "components/output/polymorphic/indexed-db/element.js" 107 128 title: "Polymorphic / IndexedDB" 108 129 desc: "Stores output into the local indexedDB. Supports any type of data that indexedDB supports." 130 + - title: "Raw / AT Protocol" 131 + desc: > 132 + Store your user data on the storage associated with your ATProtocol identity. Data is lexicon shaped by default so this element takes in that data directly without any transformations. 133 + todo: true 109 134 110 135 processors: 111 136 - url: "components/processor/artwork/element.js" ··· 129 154 todo: true 130 155 131 156 transformers: 157 + - title: "Output / Bytes / Automerge" 158 + desc: "Translate data to and from an Automerge CRDT." 159 + todo: true 132 160 - title: "Output / Bytes / Cambria lenses" 133 161 desc: "Uses the Cambria library to seamlessly translate between data schemas so that no data migration is needed." 134 162 todo: true ··· 173 201 </p> 174 202 <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;"> 175 203 <i class="ph-fill ph-crane"></i> 176 - <strong style="font-weight: 800;">WORK IN PROGRESS</strong> 204 + <strong style="font-weight: 700;">WORK IN PROGRESS</strong> 177 205 </p> 206 + <ul class="table-of-contents"> 207 + <li><a href="#usage">Usage</a></li> 208 + <li><a href="#demo">Demo</a></li> 209 + <li><a href="#themes">Themes</a></li> 210 + <li><a href="#constituents">Constituents</a></li> 211 + <li><a href="#take-control">Take control</a></li> 212 + <li><a href="#elements">Elements</a></li> 213 + <li><a href="#definitions">Definitions</a></li> 214 + </ul> 178 215 <p> 179 216 <small>Built by <a href="https://tokono.ma">tokono.ma</a></small> 180 217 </p>
+48 -4
src/styles/diffuse/page.css
··· 3 3 color: var(--text-color); 4 4 } 5 5 6 + [id] { 7 + scroll-margin-top: var(--space-md); 8 + } 9 + 6 10 header, 7 11 main { 8 12 margin: var(--space-md) var(--space-lg); ··· 96 100 font-size: var(--fs-xs); 97 101 } 98 102 103 + ul li::marker { 104 + color: oklch(from currentColor l c h / 0.4); 105 + content: "◦ "; 106 + } 107 + 99 108 .columns { 100 109 display: flex; 101 110 flex-wrap: wrap; ··· 110 119 li { 111 120 margin-bottom: var(--space-xl); 112 121 } 122 + 123 + li::marker { 124 + content: none; 125 + } 113 126 } 114 127 115 128 .construct { 116 - color: oklch(from currentColor l c h / 0.3); 129 + /*color: oklch(from currentColor l c h / 0.3);*/ 130 + color: var(--accent); 117 131 font-size: var(--fs-3xl); 118 132 font-weight: 900; 133 + image-rendering: pixelated; 119 134 letter-spacing: -0.0125em; 120 135 line-height: 0.775em; 121 - line-height: 0.9cap; 136 + line-height: 1.05cap; 122 137 margin-bottom: var(--space-md); 138 + mask: 139 + url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII="), 140 + radial-gradient(circle at 50% 0, transparent 45%, oklab(0 0 0 / 0.65) 85%) 0 0/50% 100%; 123 141 max-width: var(--container-xl); 124 142 text-transform: uppercase; 125 143 126 - @media (prefers-color-scheme: dark) { 144 + /*@media (prefers-color-scheme: dark) { 127 145 & { 128 146 color: oklch(from var(--color-2) l c h / 0.75); 129 147 } 130 - } 148 + }*/ 131 149 } 132 150 133 151 .element { ··· 140 158 margin-bottom: var(--space-xs); 141 159 margin-top: var(--space-2xs); 142 160 opacity: 0.6; 161 + } 162 + 163 + .table-of-contents { 164 + font-weight: 300; 165 + list-style: none; 166 + padding: 0; 167 + 168 + & li { 169 + display: flex; 170 + gap: var(--space-3xs); 171 + white-space: nowrap; 172 + } 173 + 174 + & li:after { 175 + content: " ............................................................................................................................................................................"; 176 + direction: rtl; 177 + flex: 1; 178 + opacity: 0.4; 179 + overflow: hidden; 180 + text-align: right; 181 + text-overflow: ellipsis; 182 + } 183 + 184 + & a { 185 + text-decoration: none; 186 + } 143 187 } 144 188 145 189 .todo {