;
websites?: Array<{ site?: string; link?: { href?: string } }>;
episodes: EpisodeRef[];
@@ -42,6 +47,8 @@ if (isValid && verification.payload) {
title,
"slug": slug.current,
"avatarUrl": coverImage.asset->url,
+ excerpt,
+ content,
socials,
websites,
"episodes": *[_type == "podcast" && references(^._id) && !(_id in path("drafts.**"))] | order(season desc, episode desc) {
@@ -60,6 +67,11 @@ if (isValid && verification.payload) {
const socials = guestDoc?.socials || {};
const primaryWebsite =
guestDoc?.websites?.[0]?.link?.href || guestDoc?.websites?.[0]?.site || "";
+const initialExcerpt =
+ guestDoc?.excerpt && guestDoc.excerpt.trim().toLowerCase() !== "fix me"
+ ? guestDoc.excerpt.trim()
+ : "";
+const initialAboutHtml = portableTextToHtml(guestDoc?.content);
const socialFields = [
{
@@ -289,6 +301,176 @@ const socialFields = [
+
+
+
+ About Section (Sanity Portable Text)
+
+
+ Edit your speaker bio with headings, links, bold/italic text, code, and lists — saved directly as Sanity Portable Text blocks on your public profile.
+
+
+
+ Portable Text Ready
+
+
+
+
+
+ One-Line Summary / SEO Bio (optional)
+
+
+
+
+
+
+ Paragraph
+
+
+ H2
+
+
+ H3
+
+
+ Quote
+
+
+
+ B
+
+
+ I
+
+
+ U
+
+
+ </>
+
+
+
+ • List
+
+
+ 1. List
+
+
+
+ Link
+
+
+ Unlink
+
+
+
+
+
+
+
+
+ Inspect Generated Sanity Portable Text Blocks JSON
+
+
+
Social Handles for Episode Tagging
@@ -352,6 +534,294 @@ const socialFields = [
const form = document.getElementById("guest-profile-form") as HTMLFormElement | null;
const statusEl = document.getElementById("save-status");
const saveBtn = document.getElementById("save-btn") as HTMLButtonElement | null;
+ const editorEl = document.getElementById("pt-editor") as HTMLElement | null;
+ const toolbarEl = document.getElementById("pt-toolbar") as HTMLElement | null;
+ const jsonPreviewEl = document.getElementById("pt-json-preview") as HTMLElement | null;
+ const badgeEl = document.getElementById("pt-block-badge") as HTMLElement | null;
+
+ interface PtSpan {
+ _type: "span";
+ _key: string;
+ text: string;
+ marks: string[];
+ }
+
+ interface PtMarkDef {
+ _type: "link";
+ _key: string;
+ href: string;
+ blank: boolean;
+ }
+
+ interface PtBlock {
+ _type: "block";
+ _key: string;
+ style: "normal" | "h1" | "h2" | "h3" | "h4" | "blockquote";
+ listItem?: "bullet" | "number";
+ level?: number;
+ markDefs: PtMarkDef[];
+ children: PtSpan[];
+ }
+
+ function genKey(): string {
+ const bytes = new Uint8Array(6);
+ crypto.getRandomValues(bytes);
+ return Array.from(bytes)
+ .map((b) => b.toString(16).padStart(2, "0"))
+ .join("");
+ }
+
+ function extractInlineSpans(
+ rootNode: Node,
+ activeMarks: string[],
+ markDefs: PtMarkDef[],
+ spans: PtSpan[],
+ ): void {
+ if (rootNode.nodeType === Node.TEXT_NODE) {
+ const text = rootNode.textContent ?? "";
+ if (!text) return;
+ const prev = spans[spans.length - 1];
+ const sameMarks =
+ prev &&
+ prev.marks.length === activeMarks.length &&
+ prev.marks.every((m, idx) => m === activeMarks[idx]);
+ if (sameMarks) {
+ prev.text += text;
+ } else {
+ spans.push({
+ _type: "span",
+ _key: genKey(),
+ text,
+ marks: [...activeMarks],
+ });
+ }
+ return;
+ }
+
+ if (rootNode.nodeType !== Node.ELEMENT_NODE) return;
+ const el = rootNode as HTMLElement;
+ const tag = el.tagName.toLowerCase();
+
+ if (tag === "br") {
+ spans.push({
+ _type: "span",
+ _key: genKey(),
+ text: "\n",
+ marks: [...activeMarks],
+ });
+ return;
+ }
+
+ const nextMarks = [...activeMarks];
+ const addMark = (m: string) => {
+ if (!nextMarks.includes(m)) nextMarks.push(m);
+ };
+
+ if (tag === "strong" || tag === "b") addMark("strong");
+ if (tag === "em" || tag === "i") addMark("em");
+ if (tag === "u") addMark("underline");
+ if (tag === "s" || tag === "strike" || tag === "del") addMark("strike-through");
+ if (tag === "code") addMark("code");
+
+ if (tag === "a") {
+ const rawHref = el.getAttribute("href")?.trim() || "";
+ if (rawHref) {
+ const safeHref = /^(https?:\/\/|mailto:|\/)/i.test(rawHref)
+ ? rawHref
+ : `https://${rawHref}`;
+ let existing = markDefs.find((md) => md.href === safeHref);
+ if (!existing) {
+ existing = {
+ _type: "link",
+ _key: genKey(),
+ href: safeHref,
+ blank: true,
+ };
+ markDefs.push(existing);
+ }
+ addMark(existing._key);
+ }
+ }
+
+ for (const child of Array.from(el.childNodes)) {
+ extractInlineSpans(child, nextMarks, markDefs, spans);
+ }
+ }
+
+ function buildBlockFromNode(
+ node: Node,
+ style: PtBlock["style"],
+ listItem?: "bullet" | "number",
+ ): PtBlock {
+ const markDefs: PtMarkDef[] = [];
+ const spans: PtSpan[] = [];
+ for (const child of Array.from(node.childNodes)) {
+ extractInlineSpans(child, [], markDefs, spans);
+ }
+ // Strip trailing solitary newline from contenteditable ${text}`);
+ }
+ } else if (action === "link") {
+ const url = window.prompt("Enter link URL:", "https://");
+ if (url && url.trim() && url.trim() !== "https://") {
+ document.execCommand("createLink", false, url.trim());
+ }
+ }
+
+ refreshPreview();
+ });
+
+ editorEl?.addEventListener("input", () => {
+ refreshPreview();
+ });
+
+ refreshPreview();
form?.addEventListener("submit", async (e) => {
e.preventDefault();
@@ -360,6 +830,7 @@ const socialFields = [
const token = form.dataset.token;
const titleInput = document.getElementById("field-title") as HTMLInputElement | null;
const websiteInput = document.getElementById("field-website") as HTMLInputElement | null;
+ const excerptInput = document.getElementById("field-excerpt") as HTMLInputElement | null;
const socialInputs = form.querySelectorAll("input[data-social-key]");
const socials: Record = {};
@@ -368,6 +839,8 @@ const socialFields = [
if (k) socials[k] = input.value.trim();
});
+ const content = editorEl ? serializeEditorToPortableText(editorEl) : undefined;
+
saveBtn.disabled = true;
saveBtn.textContent = "Saving to Sanity...";
statusEl.textContent = "";
@@ -380,6 +853,8 @@ const socialFields = [
token,
title: titleInput?.value.trim(),
websiteUrl: websiteInput?.value.trim(),
+ excerpt: excerptInput?.value.trim(),
+ content,
socials,
}),
});
@@ -388,7 +863,7 @@ const socialFields = [
throw new Error(data.error || "Failed to update profile");
}
statusEl.className = "text-sm font-medium text-emerald-400";
- statusEl.textContent = "Saved! Your CodingCat.dev speaker profile has been updated.";
+ statusEl.textContent = "Saved! Your CodingCat.dev speaker profile and About section have been updated.";
} catch (err) {
statusEl.className = "text-sm font-medium text-red-400";
statusEl.textContent = err instanceof Error ? err.message : "Error saving profile";