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

apps/web/package.json

@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "description": "Technical problem solver's blog - practical insights and learning notes",
   "scripts": {
-    "dev": "next dev",
+    "dev": "rm -rf .next .contentlayer/.cache && concurrently -k -p \"[{name}]\" -n \"content,next\" -c \"magenta,cyan\" \"contentlayer2 dev\" \"next dev\"",
     "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint app src scripts video",
@@ -37,7 +37,9 @@
     "@mintel/content-engine": "link:../../../at-mintel/packages/content-engine",
     "@mintel/meme-generator": "link:../../../at-mintel/packages/meme-generator",
     "@mintel/pdf": "^1.8.0",
+    "@mintel/thumbnail-generator": "link:../../../at-mintel/packages/thumbnail-generator",
     "@next/mdx": "^16.1.6",
+    "@next/third-parties": "^16.1.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.1.0",
     "@opentelemetry/core": "^2.1.0",
@@ -62,6 +64,7 @@
     "crawlee": "^3.15.3",
     "esbuild": "^0.27.3",
     "framer-motion": "^12.29.2",
+    "html-to-image": "^1.11.13",
     "ioredis": "^5.9.1",
     "lucide-react": "^0.468.0",
     "mermaid": "^11.12.2",
@@ -75,6 +78,9 @@
     "qrcode": "^1.5.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-social-media-embed": "^2.5.18",
+    "react-tweet": "^3.3.0",
+    "recharts": "^3.7.0",
     "remotion": "^4.0.414",
     "shiki": "^1.24.2",
     "tailwind-merge": "^3.4.0",
@@ -102,6 +108,7 @@
     "@types/qrcode": "^1.5.6",
     "autoprefixer": "^10.4.20",
     "cheerio": "^1.1.2",
+    "concurrently": "^9.2.1",
     "eslint": "10.0.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",