draft: true

URL Preview Cards Test

This page tests our URL preview card functionality with automatic metadata extraction.

Sites with Open Graph Images

These sites have proper og:image meta tags and should display images automatically:

:::link-preview url="https://github.com/microsoft/TypeScript" title="GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output." description="TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - microsoft/TypeScript" thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/7c872867bf9bed88cbe36d92bda1b58f20842d4bf647dc31b355767738381026.png" :::

:::link-preview url="https://rd.me/books/anything-you-want" title="Summary of “Anything You Want”" description="Book summary of Anything You Want" thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/73bd1591f9465dc1e4ca6ff17b4f11feff7ef105d003fc2c662816880a771d10.jpeg" :::

:::link-preview url="https://waitbutwhy.com/2014/05/life-weeks.html" title="Your Life in Weeks — Wait But Why" description="All the weeks in a human life shown on one chart." thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/01937169a3a3ae79e865f6199548a1e83c95a4e4f674286c9dee3d246f6dad58.png" :::

:::link-preview url="https://nextjs.org/" title="Next.js by Vercel - The React Framework" description="Next.js by Vercel is the full-stack React framework for the web." thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/717caeead287123ffce00f654befa210dbd466dcbbe0efe835119c0e81235e27.png" :::

Sites without Open Graph Images

These sites require our advanced content image extraction logic:

:::link-preview url="https://www.ourescapeclause.com/2-weeks-in-italy-itinerary/" title="How to Spend 2 Weeks in Italy (Itinerary for 14 Perfect Days!) - Our Escape Clause" description="Planning a 14 day Italy trip? This tried-and-tested itinerary for 2 weeks in Italy will help you make the most of your Italian vacation!" thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/774bb0a31484f84c40328213e88ba71cb29b1880495c89b8704f577e299b60c3.webp" :::

:::link-preview url="https://www.earthtrekkers.com/two-weeks-in-italy-14-day-italy-itinerary/" title="14 Day Italy Itinerary: Best Way to Spend Two Weeks in Italy" description="Plan the ultimate trip to Italy with this 14 day itinerary." thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/ae46f6e4264c4b215f1127ca7d8518d36d0cdff1ffae2e3ed44877f6305e3447.jpeg" :::

Custom Override Examples

These demonstrate overriding auto-fetched metadata:

:::link-preview url="https://rd.me/books/anything-you-want" title="Summary of “Anything You Want”" description="Book summary of Anything You Want" thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/73bd1591f9465dc1e4ca6ff17b4f11feff7ef105d003fc2c662816880a771d10.jpeg" :::

:::link-preview url="https://example.com" title="Example Domain" description="" thumbnail="null" :::

Error Cases

Invalid URL (Should handle gracefully)

:::link-preview
url="not-a-valid-url"
:::

Regular Links (No Preview Cards)

To display URLs as regular links instead of preview cards, use explicit markdown link syntax:

https://github.com/microsoft/TypeScript

https://rd.me/books/anything-you-want

You can also include URLs in regular text: Check out https://nextjs.org/ for more information.

Or use custom link text: TypeScript Repository

Notes for Testing

1. Regular HTML validation: Link previews should not create nested <a> tags
2. Accessibility: Each preview should have proper ARIA labels
3. Responsive design: Previews should work on mobile devices
4. Loading states: Should handle missing images and icons gracefully
5. Click behavior: Clicking should open the link in a new tab
6. Mixed content: Should work alongside regular markdown content

Regular Links vs Preview Cards

Regular link: Visit GitHub

Preview card: :::link-preview url="https://github.com" title="GitHub" description="Where the world builds software" thumbnail="https://vnqodzputugappaozvrg.supabase.co/storage/v1/object/public/link-preview-images/87ca2021137b9cce2178257d22e486ac6c40bcf3b153ee314fd0c4d5de9782a1.png" :::