A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101import { html, render as litRender } from "lit-html";
import { data as facetsData } from "~/facets/index.js";import foundation from "~/common/foundation.js";
foundation.setup({ title: "Connect" });
/** @param {string} path */const loaderHref = (path) => `l/?path=${encodeURIComponent(path)}`;
/** @type {Record<string, string>} */const icons = { "facets/connect/atproto-passkey/index.tile": "at", "facets/connect/atproto-space/index.tile": "at", "facets/connect/dropbox/index.tile": "cloud", "facets/connect/https/index.tile": "globe", "facets/connect/https-json/index.tile": "list-bullets", "facets/connect/icecast/index.tile": "radio", "facets/connect/local/index.tile": "folder-open", "facets/connect/opensubsonic/index.tile": "broadcast", "facets/connect/s3/index.tile": "hard-drives", "facets/connect/webdav/index.tile": "hard-drive",};
const recommended = new Set([ "facets/connect/dropbox/index.tile", "facets/connect/local/index.tile", "facets/connect/s3/index.tile",]);
const facets = facetsData .filter( (f) => f.url.startsWith("facets/connect/") && f.url !== "facets/connect/index.tile" && !f.incomplete, ) .map((f) => ({ name: f.title.replace(/^Connect \/ /, ""), description: f.desc, icon: icons[f.url] ?? "plug", href: loaderHref(f.url), isRecommended: recommended.has(f.url), })) .sort((a, b) => (b.isRecommended ? 1 : 0) - (a.isRecommended ? 1 : 0));
const main = document.querySelector("main");if (!main) throw new Error("No <main> element");
litRender( html` <div class="connect-index__left"> <div> <a href="./dashboard/" class="diffuse-logo-container"> <svg viewBox="0 0 902 134" width="160"> <title>Diffuse</title> <use xlink:href="images/diffuse-current.svg#diffuse" href="images/diffuse-current.svg#diffuse" > </use> </svg> </a> </div> <h1>Connect</h1> <p> These are some of the options available to add as an audio source, or to use as user-data storage. Some offer both. </p> </div> <div class="connect-index__right"> <ul class="connect-list"> ${facets.map(({ name, description, icon, href, isRecommended }) => html` <li> <a class="connect-item" href="${href}"> <i class="ph-fill ph-${icon} connect-item__icon"></i> <div class="connect-item__info"> <span class="connect-item__name"> ${name} ${isRecommended ? html`<span class="connect-item__badge">Recommended</span>` : ""} </span> <span class="connect-item__detail">${description}</span> </div> </a> </li> ` )} </ul> </div> `, main,);
////////////////////////////////////////////// 🚀////////////////////////////////////////////
foundation.ready();