initial version (alpha)

src/pages/docs/arxlets/highlight/nostr-publisher.ts

@@ -0,0 +1,85 @@
+import type { NostrEvent } from "./type-definitions.ts";
+
+export async function render(container: HTMLElement): Promise<void> {
+  container.innerHTML = `
+    <div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
+      <div class="card-body">
+        <h2 class="card-title">📝 Publish a Note</h2>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">What's on your mind?</span>
+            <span class="label-text-alt" id="charCount">0/280</span>
+          </label>
+          <textarea 
+            class="textarea textarea-bordered h-32" 
+            id="noteContent" 
+            placeholder="Share your thoughts with your CCN..."
+            maxlength="280">
+          </textarea>
+        </div>
+
+        <div class="card-actions justify-between items-center">
+          <div id="status" class="flex-1"></div>
+          <button class="btn btn-primary" id="publishBtn" disabled>
+            Publish Note
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const textarea = container.querySelector<HTMLTextAreaElement>("#noteContent")!;
+  const publishBtn = container.querySelector<HTMLButtonElement>("#publishBtn")!;
+  const status = container.querySelector<HTMLDivElement>("#status")!;
+  const charCount = container.querySelector<HTMLSpanElement>("#charCount")!;
+
+  textarea.oninput = (): void => {
+    const length: number = textarea.value.length;
+    charCount.textContent = `${length}/280`;
+    publishBtn.disabled = length === 0 || length > 280;
+  };
+
+  publishBtn.onclick = async (e): Promise<void> => {
+    const content: string = textarea.value.trim();
+    if (!content) return;
+
+    publishBtn.disabled = true;
+    publishBtn.textContent = "Publishing...";
+    status.innerHTML = '<span class="loading loading-spinner loading-sm"></span>';
+
+    try {
+      const unsignedEvent: NostrEvent = {
+        kind: 1, // Text note
+        content: content,
+        tags: [["client", "arxlet-publisher"]],
+        created_at: Math.floor(Date.now() / 1000),
+        pubkey: await window.eve.publicKey,
+      };
+
+      const signedEvent: NostrEvent = await window.eve.signEvent(unsignedEvent);
+
+      await window.eve.publish(signedEvent);
+
+      status.innerHTML = `
+        <div class="alert alert-success">
+          <span>✅ Note published successfully!</span>
+        </div>
+      `;
+
+      textarea.value = "";
+      textarea.oninput?.(e);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      console.error("Publishing failed:", error);
+      status.innerHTML = `
+        <div class="alert alert-error">
+          <span>❌ Failed to publish: ${errorMessage}</span>
+        </div>
+      `;
+    } finally {
+      publishBtn.disabled = false;
+      publishBtn.textContent = "Publish Note";
+    }
+  };
+}