@flamingo-stack/openframe-frontend-core 0.0.295 → 0.0.296-snapshot.20260621021605

package/src/components/embeds/linkedin-embed-client.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useMemo, useState } from 'react';
+import { LinkedInContainer } from './embed-container';
+import { LinkedinIcon } from '../icons-v2-generated/brand-logos/linkedin-icon';
+import { ExternalLink } from 'lucide-react';
+
+/**
+ * Derive LinkedIn's official embed URL from any post URL or URN.
+ * LinkedIn renders public posts at /embed/feed/update/<urn>. Returns '' when no
+ * URN can be derived, so the component falls back to a link instead of a broken
+ * (X-Frame-blocked) iframe.
+ */
+function toLinkedInEmbedUrl(url: string): string {
+  if (!url) return '';
+  if (url.includes('linkedin.com/embed/')) return url.split('?')[0];
+  let m = url.match(/urn:li:(activity|share|ugcPost):(\d+)/i);
+  if (m) return `https://www.linkedin.com/embed/feed/update/urn:li:${m[1]}:${m[2]}`;
+  m = url.match(/activity[-:](\d{15,25})/i);
+  if (m) return `https://www.linkedin.com/embed/feed/update/urn:li:activity:${m[1]}`;
+  m = url.match(/-(\d{15,25})(?:-[A-Za-z0-9_-]+)?\/?(?:\?.*)?$/);
+  if (m) return `https://www.linkedin.com/embed/feed/update/urn:li:activity:${m[1]}`;
+  return '';
+}
+
+interface LinkedInEmbedProps {
+  url: string;
+  /** Fixed iframe height — LinkedIn embeds don't auto-resize. */
+  height?: number;
+}
+
+export function LinkedInEmbedClient({ url, height = 600 }: LinkedInEmbedProps) {
+  const embedUrl = useMemo(() => toLinkedInEmbedUrl(url), [url]);
+  const [loaded, setLoaded] = useState(false);
+
+  // No derivable URN → graceful fallback card with a link (mirrors reddit's error state)
+  if (!embedUrl) {
+    return (
+      <LinkedInContainer>
+        <div className="p-6">
+          <div className="flex items-center space-x-3 text-ods-text-secondary mb-4">
+            <LinkedinIcon className="w-5 h-5 shrink-0" />
+            <span>LinkedIn post</span>
+          </div>
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center space-x-2 px-4 py-2 bg-ods-card border border-ods-border text-ods-text-primary rounded-md text-sm font-medium hover:bg-ods-bg-secondary transition-colors"
+          >
+            <LinkedinIcon className="w-4 h-4" />
+            <span>View on LinkedIn</span>
+          </a>
+        </div>
+      </LinkedInContainer>
+    );
+  }
+
+  return (
+    <LinkedInContainer>
+      <div className="relative w-full" style={{ height }}>
+        {!loaded && (
+          <div className="absolute inset-0 p-6 animate-pulse">
+            <div className="flex items-center space-x-3 mb-4">
+              <div className="w-12 h-12 bg-ods-border rounded-full" />
+              <div>
+                <div className="h-4 bg-ods-border rounded w-32 mb-2" />
+                <div className="h-3 bg-ods-border rounded w-24" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <div className="h-4 bg-ods-border rounded w-full" />
+              <div className="h-4 bg-ods-border rounded w-3/4" />
+            </div>
+          </div>
+        )}
+        <iframe
+          src={embedUrl}
+          title="Embedded LinkedIn post"
+          className="w-full h-full"
+          style={{ border: 0 }}
+          loading="lazy"
+          allowFullScreen
+          onLoad={() => setLoaded(true)}
+        />
+      </div>
+      <div className="px-4 py-3 bg-ods-bg-secondary border-t border-ods-border">
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center space-x-2 text-ods-accent hover:text-ods-accent/80 transition-colors text-sm font-medium"
+        >
+          <ExternalLink className="w-4 h-4" />
+          <span>View on LinkedIn</span>
+        </a>
+      </div>
+    </LinkedInContainer>
+  );
+}

package/src/components/embeds/markdown-image.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from '../../embed-shims/next-image';
+import { useRichMarkdownRuntime } from './rich-markdown-runtime';
+
+/**
+ * In-article markdown image.
+ *
+ * Markdown images have unknown intrinsic dimensions — which is what broke the old
+ * approach: a fixed width/height made the Supabase loader `resize=cover` CROP tall
+ * screenshots, and `w-full` then blew them up to the column width. This renders
+ * through the lib's `next/image` shim (full Next.js Image Optimization on the hub,
+ * plain `<img>` everywhere else) and fixes both problems at the source:
+ *
+ *   - `object-contain` flips the hub's Supabase loader (injected via
+ *     `transformImageSrc` from the {@link RichMarkdownRuntimeProvider}) to
+ *     `resize=contain` — aspect preserved, never cropped.
+ *   - We learn the real aspect ratio from a tiny probe (the same
+ *     `transformImageSrc` at 48px when available) and pass matching width/height
+ *     so `next/image`'s aspect-ratio box is correct.
+ *   - CSS (`max-w-full` + `max-h` + auto) caps the on-page size so a tall
+ *     screenshot can't dominate the article, while the browser keeps the true
+ *     aspect ratio.
+ *
+ * Embedders that don't pass `transformImageSrc` get an identity fallback — the
+ * raw `src` is used both for the probe and the display copy.
+ */
+const MAX_H_REM = 32; // ~512px on-page cap
+const DISPLAY_W = 768; // logical width hint; the optimizer handles srcset + retina
+
+export function MarkdownImage({ src, alt }: { src: string; alt?: string }) {
+  const { transformImageSrc } = useRichMarkdownRuntime();
+  const [ratio, setRatio] = useState<number | null>(null); // width / height
+
+  useEffect(() => {
+    let cancelled = false;
+    // Reset on src change so a reused instance doesn't briefly size the new image with
+    // the previous image's ratio.
+    setRatio(null);
+    // Probe a tiny aspect-preserving variant so we learn the real ratio without
+    // downloading the full image; the display copy is then fetched once, at the right size.
+    // When no transformer is wired (embedders), fall back to the raw src.
+    const probeSrc = transformImageSrc(src, { width: 48, resize: 'contain', quality: 20 }) ?? src;
+    const probe = new window.Image();
+    probe.onload = () => {
+      if (!cancelled && probe.naturalWidth && probe.naturalHeight) {
+        setRatio(probe.naturalWidth / probe.naturalHeight);
+      }
+    };
+    probe.onerror = () => {
+      if (!cancelled) setRatio(1.5); // neutral fallback so we still render something
+    };
+    probe.src = probeSrc;
+    return () => {
+      cancelled = true;
+    };
+  }, [src, transformImageSrc]);
+
+  // Reserve a neutral box while probing so the layout doesn't jump when the image appears.
+  if (!ratio) {
+    return (
+      <span
+        className="mx-auto my-2 block w-full max-w-full animate-pulse rounded-lg bg-ods-card"
+        style={{ aspectRatio: '3 / 2', maxHeight: `${MAX_H_REM}rem` }}
+        aria-hidden
+      />
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt ?? 'No image available'}
+      width={DISPLAY_W}
+      height={Math.round(DISPLAY_W / ratio)}
+      sizes="(max-width: 768px) 100vw, 768px"
+      loading="lazy"
+      // `object-contain` → SupabaseOptimizedImage uses `resize=contain` (no crop).
+      // `w-full` (not `w-auto`) gives the img a definite width so it lays out + lazy-loads
+      // even before decode. Height follows via the aspect-ratio box; `maxHeight` caps tall
+      // images and `maxWidth = maxHeight × ratio` shrinks the width in lockstep so the box
+      // stays snug to the image (no letterbox bars).
+      className="mx-auto my-2 block h-auto w-full rounded-lg object-contain"
+      style={{ maxWidth: `calc(${MAX_H_REM}rem * ${ratio})`, maxHeight: `${MAX_H_REM}rem` }}
+    />
+  );
+}

package/src/components/embeds/og-link-preview.tsx

@@ -262,34 +262,34 @@ export const OGLinkPreview: React.FC<OGLinkPreviewProps> = ({
   const renderSkeleton = () => isCompact ? (
     <div className="my-4">
       <div className="flex flex-row border border-ods-border rounded-lg overflow-hidden bg-ods-card h-[120px]">
-        <div className="w-[200px] h-full flex-shrink-0 bg-ods-skeleton animate-pulse" />
+        <div className="w-[200px] h-full flex-shrink-0 bg-ods-border animate-pulse" />
         <div className="flex-1 p-3 flex flex-col justify-center">
-          <div className="bg-ods-skeleton rounded animate-pulse h-4 w-3/4 mb-2" />
-          <div className="bg-ods-skeleton rounded animate-pulse h-3 w-full mb-1" />
-          <div className="bg-ods-skeleton rounded animate-pulse h-3 w-2/3 mb-2" />
-          <div className="bg-ods-skeleton rounded animate-pulse h-3 w-1/3" />
+          <div className="bg-ods-border rounded animate-pulse h-4 w-3/4 mb-2" />
+          <div className="bg-ods-border rounded animate-pulse h-3 w-full mb-1" />
+          <div className="bg-ods-border rounded animate-pulse h-3 w-2/3 mb-2" />
+          <div className="bg-ods-border rounded animate-pulse h-3 w-1/3" />
         </div>
       </div>
     </div>
   ) : (
     <div className="my-6">
       <div className="block border border-ods-border rounded-lg overflow-hidden bg-ods-card">
-        <div className="aspect-video w-full bg-ods-skeleton overflow-hidden relative animate-pulse" />
+        <div className="aspect-video w-full bg-ods-border overflow-hidden relative animate-pulse" />
         <div className="p-4">
           <div className="flex items-start gap-3">
-            <div className="w-6 h-6 bg-ods-skeleton rounded flex-shrink-0 mt-0.5 animate-pulse" />
+            <div className="w-6 h-6 bg-ods-border rounded flex-shrink-0 mt-0.5 animate-pulse" />
             <div className="flex-1 min-w-0">
               <div className="h-[2.5rem] leading-[1.25rem] mb-2 overflow-hidden">
-                <div className="bg-ods-skeleton rounded animate-pulse" style={{ height: '1.25rem', marginBottom: '0.25rem' }} />
-                <div className="bg-ods-skeleton rounded animate-pulse w-3/4" style={{ height: '1.25rem' }} />
+                <div className="bg-ods-border rounded animate-pulse" style={{ height: '1.25rem', marginBottom: '0.25rem' }} />
+                <div className="bg-ods-border rounded animate-pulse w-3/4" style={{ height: '1.25rem' }} />
               </div>
               <div className="h-[2.5rem] leading-[1.25rem] mb-2 overflow-hidden">
-                <div className="bg-ods-skeleton rounded animate-pulse" style={{ height: '1.25rem', marginBottom: '0.25rem' }} />
-                <div className="bg-ods-skeleton rounded animate-pulse w-5/6" style={{ height: '1.25rem' }} />
+                <div className="bg-ods-border rounded animate-pulse" style={{ height: '1.25rem', marginBottom: '0.25rem' }} />
+                <div className="bg-ods-border rounded animate-pulse w-5/6" style={{ height: '1.25rem' }} />
               </div>
               <div className="flex items-center gap-2">
-                <div className="bg-ods-skeleton rounded animate-pulse" style={{ height: '0.75rem', width: '6rem' }} />
-                <div className="bg-ods-skeleton rounded animate-pulse" style={{ height: '0.75rem', width: '5rem' }} />
+                <div className="bg-ods-border rounded animate-pulse" style={{ height: '0.75rem', width: '6rem' }} />
+                <div className="bg-ods-border rounded animate-pulse" style={{ height: '0.75rem', width: '5rem' }} />
               </div>
             </div>
           </div>