Make callout headings explicit

sites/art/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/art/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/poetry/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/poetry/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/puzzles/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/puzzles/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/reflections/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/reflections/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/research/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/research/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/reviews/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/reviews/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }

sites/vibes/src/remark/callouts.mjs

@@ -1,19 +1,21 @@
-const CALLOUT_LABELS = new Map([
-  ["aside", "Aside"],
-  ["caution", "Caution"],
-  ["note", "Note"],
-  ["tip", "Tip"],
-  ["warning", "Warning"],
+const CALLOUT_TYPES = new Set([
+  "aside",
+  "caution",
+  "note",
+  "tip",
+  "warning",
 ]);
 
 const CALLOUT_MARKERS = new Map([
-  ["📝", "Note"],
-  ["💡", "Tip"],
-  ["⚡", "Tip"],
-  ["⚠️", "Warning"],
-  ["⚠", "Warning"],
+  ["📝", "note"],
+  ["💡", "tip"],
+  ["⚡", "tip"],
+  ["⚠️", "warning"],
+  ["⚠", "warning"],
 ]);
 
+const BRACKET_CALLOUT_PATTERN = /^\s*\[!(aside|caution|note|tip|warning)(?::\s*([^\]\r\n]+)|\|\s*([^\]\r\n]+))?\]\s*/i;
+
 function textFromInline(node) {
   if (!node) return "";
   if (typeof node.value === "string") return node.value;
@@ -21,7 +23,7 @@ function textFromInline(node) {
   return node.children.map(textFromInline).join("");
 }
 
-function normalizeLabel(value) {
+function normalizeType(value) {
   return value
     .trim()
     .replace(/^["“”]+|["“”]+$/g, "")
@@ -29,48 +31,99 @@ function normalizeLabel(value) {
     .toLowerCase();
 }
 
-function paragraphCalloutLabel(paragraph) {
+function calloutType(value) {
+  const type = normalizeType(value);
+  return CALLOUT_TYPES.has(type) ? type : null;
+}
+
+function parseBracketCallout(value) {
+  const match = value.match(BRACKET_CALLOUT_PATTERN);
+  if (!match) return null;
+
+  return {
+    kind: "bracket",
+    type: calloutType(match[1]),
+    title: (match[2] ?? match[3] ?? "").trim(),
+  };
+}
+
+function paragraphCallout(paragraph) {
   if (paragraph?.type !== "paragraph") return null;
 
   const first = paragraph.children?.[0];
   if (first?.type === "text") {
-    const match = first.value.match(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i);
-    if (match) {
-      return CALLOUT_LABELS.get(normalizeLabel(match[1]));
+    const bracket = parseBracketCallout(first.value);
+    if (bracket?.type) {
+      return bracket;
     }
 
     const trimmed = first.value.trimStart();
-    for (const [marker, label] of CALLOUT_MARKERS) {
+    for (const [marker, type] of CALLOUT_MARKERS) {
       if (trimmed.startsWith(marker)) {
-        return label;
+        return { kind: "marker", type, title: "", marker };
       }
     }
   }
 
   if (first?.type !== "strong") return null;
 
-  const label = CALLOUT_LABELS.get(normalizeLabel(textFromInline(first)));
-  if (!label) return null;
+  const type = calloutType(textFromInline(first));
+  if (!type) return null;
 
-  return label;
+  return { kind: "strong", type, title: "" };
 }
 
-function removeLeadingLabel(paragraph, label) {
+function cleanupParagraphStart(paragraph) {
+  while (paragraph.children?.length > 0) {
+    const first = paragraph.children[0];
+    if (first.type === "text") {
+      first.value = first.value.replace(/^\s+/, "");
+      if (first.value) return;
+      paragraph.children.shift();
+      continue;
+    }
+
+    if (first.type === "break") {
+      paragraph.children.shift();
+      continue;
+    }
+
+    return;
+  }
+}
+
+function calloutTitleParagraph(title) {
+  return {
+    type: "paragraph",
+    data: {
+      hName: "p",
+      hProperties: {
+        className: ["callout-title"],
+      },
+    },
+    children: [{ type: "text", value: title }],
+  };
+}
+
+function removeLeadingCallout(paragraph, callout) {
   if (paragraph?.type !== "paragraph") return;
 
   const first = paragraph.children?.[0];
-  if (first?.type === "text") {
-    first.value = first.value.replace(/^\s*\[!(aside|caution|note|tip|warning)\]\s*/i, "");
-    for (const marker of CALLOUT_MARKERS.keys()) {
-      const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
-    }
-    if (!first.value) paragraph.children.shift();
+  if (callout.kind === "bracket" && first?.type === "text") {
+    first.value = first.value.replace(BRACKET_CALLOUT_PATTERN, "");
+    cleanupParagraphStart(paragraph);
     return;
   }
 
-  const firstText = normalizeLabel(textFromInline(first));
-  if (!first || first.type !== "strong" || firstText !== label.toLowerCase()) {
+  if (callout.kind === "marker" && first?.type === "text") {
+    const escapedMarker = callout.marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    first.value = first.value.replace(new RegExp(`^\\s*${escapedMarker}\\s*`, "u"), "");
+    cleanupParagraphStart(paragraph);
+    return;
+  }
+
+  const firstText = calloutType(textFromInline(first));
+  if (callout.kind !== "strong" || !first || first.type !== "strong" || firstText !== callout.type) {
     return;
   }
 
@@ -81,25 +134,30 @@ function removeLeadingLabel(paragraph, label) {
     next.value = next.value.replace(/^:\s*/, "").replace(/^\s+/, "");
     if (!next.value) paragraph.children.shift();
   }
+
+  cleanupParagraphStart(paragraph);
 }
 
 function transformBlockquote(node) {
   if (node.type !== "blockquote") return;
 
   const first = node.children?.[0];
-  const label = paragraphCalloutLabel(first);
-  if (!label) return;
+  const callout = paragraphCallout(first);
+  if (!callout) return;
 
-  removeLeadingLabel(first, label);
+  removeLeadingCallout(first, callout);
   if (first.children?.length === 0) {
     node.children.shift();
   }
 
+  if (callout.title) {
+    node.children.unshift(calloutTitleParagraph(callout.title));
+  }
+
   node.data = {
     hName: "aside",
     hProperties: {
-      className: ["callout", `callout-${label.toLowerCase()}`],
-      dataCalloutLabel: label,
+      className: ["callout", `callout-${callout.type}`],
     },
   };
 }

sites/vibes/src/styles/article.css

@@ -221,6 +221,15 @@
   margin-top: 0.8rem;
 }
 
+.article-content :where(.callout-title) {
+  margin: 0 0 0.45rem;
+  color: color-mix(in srgb, hsl(var(--primary)) 78%, hsl(var(--foreground)));
+  font-family: var(--font-fraunces);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
 .article-content :where(.callout h1) {
   font-size: 1.35rem;
 }