feat(blog): extract and display Open Graph link previews in global ShareModal

apps/web/src/components/ShareModal.tsx

@@ -25,6 +25,10 @@ export function ShareModal({
 }: ShareModalProps) {
   const [copied, setCopied] = useState(false);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
+
+  // Open Graph data for global article sharing
+  const [ogData, setOgData] = useState<{ image?: string, title?: string, description?: string } | null>(null);
+
   const [timestamp] = useState(
     new Date().toLocaleTimeString("de-DE", {
       hour: "2-digit",
@@ -33,6 +37,19 @@ export function ShareModal({
     }),
   );
 
+  useEffect(() => {
+    // Only extract OG data if we are sharing the global page (no specific diagram or QR)
+    if (isOpen && !diagramImage && !qrCodeData && typeof document !== "undefined") {
+      const ogImage = document.querySelector('meta[property="og:image"]')?.getAttribute("content") || undefined;
+      const ogTitle = document.querySelector('meta[property="og:title"]')?.getAttribute("content") || title;
+      const ogDesc = document.querySelector('meta[property="og:description"]')?.getAttribute("content") || undefined;
+
+      if (ogImage || ogTitle || ogDesc) {
+        setOgData({ image: ogImage, title: ogTitle, description: ogDesc });
+      }
+    }
+  }, [isOpen, diagramImage, qrCodeData, title]);
+
   useEffect(() => {
     if (diagramImage && isOpen) {
       const isDataUrl = diagramImage.startsWith("data:image/");
@@ -194,7 +211,7 @@ export function ShareModal({
             </p>
           </div>
         ) : (
-          title && (
+          title && !ogData ? (
             <div className="space-y-3">
               <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
                 Artikel Titel
@@ -203,6 +220,36 @@ export function ShareModal({
                 "{title}"
               </p>
             </div>
+          ) : ogData && (
+            <div className="space-y-3">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
+                Link Vorschau
+              </label>
+              <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
+                {ogData.image && (
+                  <div className="w-full aspect-video bg-slate-100 overflow-hidden relative">
+                    <img
+                      src={ogData.image}
+                      alt={ogData.title || title || "Vorschau"}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                    />
+                  </div>
+                )}
+                <div className="p-5 flex flex-col gap-2">
+                  <h3 className="font-bold text-slate-900 leading-snug line-clamp-2 text-[15px]">
+                    {ogData.title || title}
+                  </h3>
+                  {ogData.description && (
+                    <p className="text-slate-500 text-xs leading-relaxed line-clamp-2">
+                      {ogData.description}
+                    </p>
+                  )}
+                  <div className="mt-2 text-[10px] font-mono uppercase tracking-widest text-slate-400">
+                    MINTEL.ME
+                  </div>
+                </div>
+              </div>
+            </div>
           )
         )}