feat: complete MDX migration for blog, fix diagram fidelity and refactor styling architecture

apps/web/src/components/DiagramSequence.tsx

@@ -17,6 +17,7 @@ interface DiagramSequenceProps {
   caption?: string;
   id?: string;
   showShare?: boolean;
+  fontSize?: string;
 }
 
 export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
@@ -26,6 +27,7 @@ export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
   caption,
   id,
   showShare = true,
+  fontSize = "16px",
 }) => {
   const getArrow = (type?: string) => {
     switch (type) {
@@ -39,8 +41,8 @@ export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
   };
 
   const sequenceGraph = `sequenceDiagram
-${participants.map((p) => `    participant ${p}`).join("\n")}
-${messages.map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;
+${(participants || []).map((p) => `    participant ${p}`).join("\n")}
+${(messages || []).map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;
 
   return (
     <div className="my-12">
@@ -49,11 +51,12 @@ ${messages.map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).j
         id={id}
         title={title}
         showShare={showShare}
+        fontSize={fontSize}
       />
       {caption && (
-        <p className="text-center text-xs text-slate-400 mt-4 italic">
+        <div className="text-center text-xs text-slate-400 mt-4 italic">
           {caption}
-        </p>
+        </div>
       )}
     </div>
   );