feat: theme loader

src/common/themes/utils.js

···
+import { Temporal } from "@js-temporal/polyfill";
+import * as CID from "../cid.js";
+
+/**
+ * @import {Theme} from "@definitions/types.d.ts"
+ */
+
+/**
+ * @param {{ name: string; url: string }} _args
+ * @param {{ fetchHTML: boolean }} options
+ */
+export async function themeFromUrl({ name, url }, { fetchHTML }) {
+  const html = fetchHTML
+    ? await fetch(url).then((res) => res.text())
+    : undefined;
+  const cid = html
+    ? await CID.create(0x55, new TextEncoder().encode(html))
+    : undefined;
+  const timestamp = Temporal.Now.zonedDateTimeISO().toString();
+
+  /** @type {Theme} */
+  const theme = {
+    $type: "sh.diffuse.output.theme",
+    createdAt: timestamp,
+    id: crypto.randomUUID(),
+    cid,
+    html,
+    name,
+    updatedAt: timestamp,
+    url,
+  };
+
+  return theme;
+}

src/facets/index.vto

···
     <ul class="table-of-contents">
       <li><a href="facets/#built-in">Built-in</a></li>
       <li><a href="facets/#community">Community</a></li>
-      <li><a href="facets/#saved">Your collection</a></li>
+      <li><a href="facets/#collection">Your collection</a></li>
       <li><a href="facets/#examples">Examples</a></li>
       <li><a href="facets/#build">Build</a></li>
       <li><a href="facets/#foundation">Foundation</a></li>
···
   <!-- LIST + EXAMPLES -->
   <div class="columns">
     <section class="flex">
-      <h2 id="saved">Your collection</h2>
+      <h2 id="collection">Your collection</h2>
       <div id="list"></div>
     </section>
 

src/facets/l/index.js

···
   if (!facet) return;
 
   // Make sure HTML is loaded
+  // TODO: Handle URL loading error
   if (!facet.html && facet.url) {
     const html = await fetch(facet.url).then((res) => res.text());
     const cid = await CID.create(0x55, new TextEncoder().encode(html));
 
     facet.html = html;
-    facet.cid = cid
+    facet.cid = cid;
   }
 
   loadIntoContainer(facet);

src/themes/index.js

···
+import { Temporal } from "@js-temporal/polyfill";
+import { html, render } from "lit-html";
+
+import { basicSetup, EditorView } from "codemirror";
+import { css as langCss } from "@codemirror/lang-css";
+import { html as langHtml } from "@codemirror/lang-html";
+import { javascript as langJs } from "@codemirror/lang-javascript";
+import { autocompletion } from "@codemirror/autocomplete";
+
+import * as CID from "@common/cid.js";
+import foundation from "@common/facets/foundation.js";
+import { effect, signal } from "@common/signal.js";
+import { themeFromUrl } from "@common/themes/utils.js";
+
+/**
+ * @import {Theme} from "@definitions/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// SAVE & FORK
+////////////////////////////////////////////
+
+document.body.addEventListener(
+  "click",
+  /**
+   * @param {MouseEvent} event
+   */
+  async (event) => {
+    const target = /** @type {HTMLElement} */ (event.target);
+    const rel = target.getAttribute("rel");
+    if (!rel) return;
+
+    const url = target.closest("li")?.getAttribute("data-url");
+    if (!url) return;
+
+    const name = target.closest("li")?.getAttribute("data-name");
+    if (!name) return;
+
+    switch (rel) {
+      case "fork": {
+        const theme = await themeFromUrl({ name, url }, { fetchHTML: true });
+        editTheme(theme);
+        document.querySelector("#build")?.scrollIntoView();
+        break;
+      }
+      case "save": {
+        const theme = await themeFromUrl({ name, url }, { fetchHTML: false });
+        const out = foundation.orchestrator.output();
+
+        out.themes.save([
+          ...out.themes.collection(),
+          theme,
+        ]);
+        break;
+      }
+    }
+  },
+);
+
+////////////////////////////////////////////
+// YOUR COLLECTION
+////////////////////////////////////////////
+
+/** @type {HTMLElement | null} */
+const listEl = document.querySelector("#list");
+if (!listEl) throw new Error("List element not found");
+
+const output = foundation.orchestrator.output();
+
+effect(() => {
+  const col = output.themes.collection().sort((a, b) => {
+    return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase());
+  });
+
+  const h = col.length
+    ? html`
+      <ul>
+        ${col.map((c) =>
+          html`
+            <li style="margin-bottom: var(--space-2xs)">
+              <span>${c.name}</span>
+              <div class="list-description">
+                <div style="margin-bottom: var(--space-2xs)">
+                  ${c.url && !c.html
+                    ? html`
+                      <span class="with-icon">
+                        <i class="ph-fill ph-binoculars"></i>
+                        <span>Tracking the original <a href="${c
+                          .url}">URL</a></span>
+                      </span>
+                    `
+                    : html`
+                      <span class="with-icon">
+                        <i class="ph-fill ph-code"></i>
+                        <span>Custom code</span>
+                      </span>
+                    `}
+                </div>
+                <div class="button-row">
+                  <a href="themes/l/?id=${c.id}" class="button">Open</a>
+                  <button
+                    class="button--bg-twist-4"
+                    @click="${() => editTheme(c)}"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="button--bg-twist-2"
+                    @click="${deleteTheme({
+                      id: c.id,
+                    })}"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </li>
+          `
+        )}
+      </ul>
+    `
+    : output.themes.state() === "loaded"
+    ? emptyThemesList
+    : html`
+      <i class="ph-bold ph-spinner-gap"></i>
+    `;
+
+  render(h, listEl);
+});
+
+const emptyThemesList = html`
+  <p style="margin-bottom: 0;">
+    <i class="ph-fill ph-info"></i> You have not saved any themes yet.
+  </p>
+`;
+
+/**
+ * @param {{ id: string }} _
+ */
+function deleteTheme({ id }) {
+  return () => {
+    const c = confirm("Are you sure you want to delete this theme?");
+    if (!c) return;
+
+    output.themes.save(
+      output.themes.collection().filter((c) => !(c.id === id)),
+    );
+  };
+}
+
+////////////////////////////////////////////
+// BUILD
+////////////////////////////////////////////
+
+const $editingTheme = signal(/** @type {Theme | null} */ (null));
+
+// Code editor
+const editorContainer = document.body.querySelector("#html-input-container");
+if (!editorContainer) throw new Error("Editor container not found");
+
+const editor = new EditorView({
+  parent: editorContainer,
+  doc: ``.trim(),
+  extensions: [
+    basicSetup,
+    langHtml(),
+    langCss(),
+    langJs(),
+    autocompletion(),
+  ],
+});
+
+// Form submit
+document.querySelector("#build-form")?.addEventListener(
+  "submit",
+  onBuildSubmit,
+);
+
+/**
+ * @param {Event} event
+ */
+async function onBuildSubmit(event) {
+  event.preventDefault();
+
+  const nameEl = /** @type {HTMLInputElement | null} */ (document.querySelector(
+    "#name-input",
+  ));
+
+  const html = editor.state.doc.toString();
+  const cid = await CID.create(0x55, new TextEncoder().encode(html));
+  const name = nameEl?.value ?? "nameless";
+
+  /** @type {Theme} */
+  const theme = $editingTheme.value
+    ? {
+      ...$editingTheme.value,
+      cid,
+      html,
+      name,
+    }
+    : {
+      $type: "sh.diffuse.output.theme",
+      id: crypto.randomUUID(),
+      cid,
+      html,
+      name,
+    };
+
+  switch (/** @type {any} */ (event).submitter.name) {
+    case "save":
+      await saveTheme(theme);
+      break;
+    case "save+open":
+      await saveTheme(theme);
+      globalThis.open(`./themes/l/?cid=${theme.cid}`, "blank");
+      break;
+  }
+}
+
+/**
+ * @param {Theme} ogTheme
+ */
+async function editTheme(ogTheme) {
+  const theme = { ...ogTheme };
+  const nameEl = /** @type {HTMLInputElement | null} */ (document.querySelector(
+    "#name-input",
+  ));
+
+  if (!nameEl) return;
+
+  // Make sure HTML is loaded
+  if (!theme.html && theme.url) {
+    const html = await fetch(theme.url).then((res) => res.text());
+    const cid = await CID.create(0x55, new TextEncoder().encode(html));
+
+    theme.html = html;
+    theme.cid = cid;
+  }
+
+  $editingTheme.value = theme;
+  nameEl.value = theme.name;
+
+  editor.dispatch({
+    changes: { from: 0, to: editor.state.doc.length, insert: theme.html },
+  });
+}
+
+/**
+ * @param {Theme} theme
+ */
+async function saveTheme(theme) {
+  const col = output.themes.collection();
+  const colWithoutId = col.filter((c) => c.id !== theme.id);
+  const timestamp = Temporal.Now.zonedDateTimeISO().toString();
+
+  await output.themes.save([...colWithoutId, {
+    ...theme,
+    updatedAt: timestamp,
+  }]);
+}

src/themes/index.vto

···
 
     <ul class="table-of-contents">
       <li><a href="themes/#built-in">Built-in</a></li>
+      <li><a href="themes/#community">Community</a></li>
+      <li><a href="themes/#collection">Your collection</a></li>
+      <li><a href="themes/#build">Build</a></li>
     </ul>
   </div>
   <div class="dither-mask filler"></div>
···
       {{ await comp.list({ items: builtIn }) }}
     </section>
 
+    <section class="flex">
+      <h2 id="community">Community</h2>
+      <p>
+        Check out some themes from the community and load them here.
+      </p>
+      <p>
+        <small><i class="ph-fill ph-info"></i> Nothing here yet, too early.</small>
+      </p>
+    </section>
+  </div>
+
+  <!-- YOUR COLLECTION -->
+  <div class="columns">
+    <section class="flex">
+      <h2 id="collection">Your collection</h2>
+      <div id="list"></div>
+    </section>
+
     <section class="flex"></section>
   </div>
+
+  <!-- / -->
+  <div class="dither-mask filler" style="height: var(--space-2xl); margin-top: var(--space-2xl);"></div>
+
+  <!-- BUILD -->
+  <section>
+    <h2 id="build">Build</h2>
+
+    <form id="build-form" class="columns">
+      <div class="flex">
+        <p style="margin-top: 0">
+          If you know a bit of HTML & Javascript, you can write your own or plug in some code you found elsewhere:
+        </p>
+
+        <div id="html-input-container" class="code-editor monospace-font">
+        </div>
+      </div>
+
+      <div class="flex">
+        <p style="margin-top: 0">
+          Your code here will be loaded in a dedicated page, it'll be injected into a <code>&lt;iframe&gt;</code> element in the body. You have access to the elements listed on the <a href="./#elements">index page</a> and the facets <a href="facets/#foundation">foundation</a>.
+        </p>
+        <input id="name-input" type="text" placeholder="Name" name="name" required />
+        <p>
+          <span class="button-row">
+            <button name="save">Save</button>
+            <button name="save+open">Save &amp; Open</button>
+          </span>
+        </p>
+      </div>
+    </form>
+  </section>
+
 </main>

src/themes/l/index.css

···
+body {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+iframe {
+  border: 0;
+  display: block;
+  height: 100dvh;
+  width: 100%;
+}

src/themes/l/index.js

···
+import * as CID from "@common/cid.js";
+import foundation from "@common/facets/foundation.js";
+import { effect } from "@common/signal.js";
+
+/**
+ * @import {Theme} from "@definitions/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// OUTPUT
+////////////////////////////////////////////
+
+const output = foundation.orchestrator.output();
+
+////////////////////////////////////////////
+// URL PARAMS
+////////////////////////////////////////////
+
+const docUrl = new URL(document.location.href);
+
+const id = docUrl.searchParams.get("id");
+const cid = docUrl.searchParams.get("cid");
+const name = docUrl.searchParams.get("name");
+const url = docUrl.searchParams.get("url");
+
+////////////////////////////////////////////
+// LOAD
+////////////////////////////////////////////
+
+effect(async () => {
+  const collection = output.themes.collection();
+  if (output.themes.state() !== "loaded") return;
+
+  let theme;
+
+  if (id) {
+    theme = collection.find((t) => t.id === id);
+  } else if (cid) {
+    theme = collection.find((t) => t.cid === cid);
+  } else if (name) {
+    theme = collection.find((t) => t.name === name);
+  } else if (url) {
+    /** @type {Theme} */
+    const t = {
+      $type: "sh.diffuse.output.theme",
+      id: crypto.randomUUID(),
+      name: "tryout",
+      url,
+    };
+
+    theme = t;
+  }
+
+  // TODO: Message that theme was not found
+  if (!theme) return;
+
+  // Make sure HTML is loaded
+  // TODO: Handle URL loading error
+  if (!theme.html && theme.url) {
+    const html = await fetch(theme.url).then((res) => res.text());
+    const cid = await CID.create(0x55, new TextEncoder().encode(html));
+
+    theme.html = html;
+    theme.cid = cid;
+  }
+
+  loadIntoContainer(theme);
+});
+
+/**
+ * @param {Theme} theme
+ */
+function loadIntoContainer(theme) {
+  // TODO: Validate if CID matches HTML
+
+  const iframe = document.createElement("iframe")
+  iframe.srcdoc = theme.html ?? ""
+
+  document.body.innerHTML = ""
+  document.body.append(iframe)
+}

src/themes/l/index.vto

···
+---
+layout: layouts/facet.vto
+base: ../../
+
+scripts:
+  - themes/l/index.js
+
+styles:
+  - themes/l/index.css
+---