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

apps/web/src/components/DiagramTimeline.tsx

@@ -14,6 +14,7 @@ interface DiagramTimelineProps {
   caption?: string;
   id?: string;
   showShare?: boolean;
+  fontSize?: string;
 }
 
 export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
@@ -22,10 +23,11 @@ export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
   caption,
   id,
   showShare = true,
+  fontSize = "16px",
 }) => {
   const timelineGraph = `timeline
     title ${title || "Timeline"}
-${events.map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;
+${(events || []).map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;
 
   return (
     <div className="my-12">
@@ -34,11 +36,12 @@ ${events.map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;
         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>
   );