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

apps/web/src/components/DiagramPie.tsx

@@ -14,6 +14,7 @@ interface DiagramPieProps {
   caption?: string;
   id?: string;
   showShare?: boolean;
+  fontSize?: string;
 }
 
 export const DiagramPie: React.FC<DiagramPieProps> = ({
@@ -22,17 +23,24 @@ export const DiagramPie: React.FC<DiagramPieProps> = ({
   caption,
   id,
   showShare = true,
+  fontSize = "16px",
 }) => {
   const pieGraph = `pie
-${data.map((slice) => `    "${slice.label}" : ${slice.value}`).join("\n")}`;
+${(data || []).map((slice) => `    "${slice.label}" : ${slice.value}`).join("\n")}`;
 
   return (
     <div className="my-12">
-      <Mermaid graph={pieGraph} id={id} title={title} showShare={showShare} />
+      <Mermaid
+        graph={pieGraph}
+        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>
   );