Improve link block preview

apps/frontpage/app/blog/[slug]/page.tsx

@@ -36,13 +36,18 @@ export default async function Page({ params: { slug } }: PageProps) {
       ...,
       authors[]->,
       tags[]->,
-      body[]{..., post-> {
-        mainImage,
-        title,
-        slug,
-        subtitle,
-        authors[]->
-      }},
+      body[]{
+        ...,
+        _type == 'post-block' => {
+          post-> {
+            mainImage,
+            title,
+            slug,
+            subtitle,
+            authors[]->
+          }
+        }
+      },
       'prev': *[_type == 'post' && !(_id in path('drafts.**')) && _createdAt < ^._createdAt]{..., authors[]->} | order(_createdAt desc)[0..2],
       'next': *[_type == 'post' && !(_id in path('drafts.**')) && _createdAt > ^._createdAt]{..., authors[]->} | order(_createdAt desc)[0..2]
     }`,

apps/frontpage/components/blog/body.tsx

@@ -19,6 +19,7 @@ import { YoutubePlayer } from './youtube-player';
 import Link from 'next/link';
 import Image from 'next/image';
 import { ArrowRightIcon } from '@storybook/icons';
+import urlMetadata from 'url-metadata';
 
 const builder = imageUrlBuilder(client);
 
@@ -179,6 +180,36 @@ ${props.value.code}
         </Link>
       );
     },
+    'link-block': async ({ value }) => {
+      const url = value.url;
+      const metadata = await urlMetadata(url);
+
+      return (
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer noopener"
+          className="flex items-stretch w-full gap-8 p-4 my-8 transition-colors border rounded border-zinc-300 hover:border-blue-500 dark:border-slate-700"
+        >
+          <div className="w-full">
+            <Link href={url} className="block mb-4 font-bold text-md">
+              {metadata?.title}
+            </Link>
+            <div className="flex items-center gap-2 text-blue-500">
+              Read more <ArrowRightIcon className="text-blue-500" />
+            </div>
+          </div>
+          <div className="relative flex-grow flex-shrink-0 min-h-full w-52 bg-slate-100">
+            {metadata?.['og:image'] && (
+              <img
+                src={metadata['og:image']}
+                className="object-cover w-full h-full rounded"
+              />
+            )}
+          </div>
+        </a>
+      );
+    },
   },
 };
 

apps/frontpage/package.json

@@ -79,6 +79,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tar": "^6.2.0",
     "unified": "^11.0.4",
+    "url-metadata": "^4.1.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {