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

apps/web/src/components/DiagramState.tsx

@@ -18,6 +18,7 @@ interface DiagramStateProps {
   caption?: string;
   id?: string;
   showShare?: boolean;
+  fontSize?: string;
 }
 
 export const DiagramState: React.FC<DiagramStateProps> = ({
@@ -29,24 +30,31 @@ export const DiagramState: React.FC<DiagramStateProps> = ({
   caption,
   id,
   showShare = true,
+  fontSize = "16px",
 }) => {
   const stateGraph = `stateDiagram-v2
 ${initialState ? `    [*] --> ${initialState}` : ""}
-${transitions
-  .map((t) => {
-    const label = t.label ? ` : ${t.label}` : "";
-    return `    ${t.from} --> ${t.to}${label}`;
-  })
-  .join("\n")}
-${finalStates.map((s) => `    ${s} --> [*]`).join("\n")}`;
+${(transitions || [])
+      .map((t) => {
+        const label = t.label ? ` : ${t.label}` : "";
+        return `    ${t.from} --> ${t.to}${label}`;
+      })
+      .join("\n")}
+${(finalStates || []).map((s) => `    ${s} --> [*]`).join("\n")}`;
 
   return (
     <div className="my-12">
-      <Mermaid graph={stateGraph} id={id} title={title} showShare={showShare} />
+      <Mermaid
+        graph={stateGraph}
+        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>
   );