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

85 lines
2.8 KiB
TypeScript

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";
}
};
}