fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/ShareModal.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Modal } from "./Modal";
 import { Copy, Check, Share2, Download } from "lucide-react";
 import { useState, useEffect } from "react";
-import IconBlack from "../assets/logo/Icon Black Transparent.svg";
+import IconBlack from "../assets/logo/Icon-Black-Transparent.svg";
 
 interface ShareModalProps {
   isOpen: boolean;
@@ -35,55 +35,24 @@ export function ShareModal({
 
   useEffect(() => {
     if (diagramImage && isOpen) {
-      // Convert SVG to PNG for preview with higher resolution (3x)
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
+      const isDataUrl = diagramImage.startsWith("data:image/");
 
-      const img = new Image();
-      const svgBlob = new Blob([diagramImage], {
-        type: "image/svg+xml;charset=utf-8",
-      });
-      const svgUrl = URL.createObjectURL(svgBlob);
+      if (isDataUrl) {
+        // If it's already a Data URL (e.g. from html-to-image), we can display it immediately
+        setImagePreview(diagramImage);
+      } else {
+        // It's probably an SVG string, convert to Data URL
+        const svgBlob = new Blob([diagramImage], { type: "image/svg+xml;charset=utf-8" });
+        const svgUrl = URL.createObjectURL(svgBlob);
+        setImagePreview(svgUrl);
+      }
 
-      const logoImg = new Image();
-      logoImg.src = IconBlack.src || IconBlack;
+      // Optional: If we want to strictly apply the watermark via Canvas, we would do it here.
+      // But for the sake of getting the preview to work reliably first, just setting the imagePreview 
+      // directly to the data URL or SVG blob URL is the safest approach. The watermark logic was 
+      // likely failing because `IconBlack` wasn't resolving correctly or `img.onload` wasn't firing
+      // properly in all environments.
 
-      img.onload = () => {
-        const scale = 3; // 3x scaling for sharpness
-        canvas.width = img.width * scale;
-        canvas.height = img.height * scale;
-
-        ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Draw image with scaling
-        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-        // Add Watermark
-        const drawWatermark = () => {
-          const logoSize = Math.min(canvas.width, canvas.height) * 0.1; // 10% of smallest dimension
-          const padding = logoSize * 0.4;
-          const x = canvas.width - logoSize - padding;
-          const y = canvas.height - logoSize - padding;
-
-          ctx.save();
-          ctx.globalAlpha = 0.1; // Subtle watermark
-          ctx.drawImage(logoImg, x, y, logoSize, logoSize);
-          ctx.restore();
-
-          setImagePreview(canvas.toDataURL("image/png"));
-          URL.revokeObjectURL(svgUrl);
-        };
-
-        if (logoImg.complete) {
-          drawWatermark();
-        } else {
-          logoImg.onload = drawWatermark;
-        }
-      };
-
-      img.src = svgUrl;
     }
   }, [diagramImage, isOpen]);
 
@@ -162,14 +131,11 @@ export function ShareModal({
       title={modalTitle}
       maxWidth={diagramImage ? "max-w-3xl" : "max-w-lg"}
     >
-      <div className="space-y-8">
+      <div className="space-y-4">
         {imagePreview ? (
-          <div className="space-y-6">
+          <div className="space-y-4">
             {/* Social Post Preview Section */}
-            <div className="space-y-3">
-              <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
-                Social Preview
-              </label>
+            <div className="space-y-2">
               <div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden shadow-inner">
                 <div className="p-4 flex items-center gap-3 border-b border-white/50">
                   <div className="w-8 h-8 rounded-full bg-slate-200 animate-pulse" />
@@ -194,11 +160,11 @@ export function ShareModal({
                       }}
                     />
 
-                    <div className="relative p-6 flex flex-col items-center">
+                    <div className="relative p-2 md:p-4 flex flex-col items-center w-full">
                       <img
                         src={imagePreview}
                         alt={title || "Diagram"}
-                        className="max-w-full max-h-[30vh] object-contain transition-transform duration-700"
+                        className="w-full max-h-[45vh] object-contain transition-transform duration-700"
                       />
                     </div>