import { AffiliateLink } from '@/components/mdx/AffiliateLink' # Affiliate Link Component Demo This article demonstrates the new AffiliateLink component that automatically fetches and displays Open Graph metadata from product links. ## How It Works The component: 1. Fetches Open Graph metadata from the URL 2. Displays a rich preview with product image and title 3. Shows platform badge (Amazon, Newegg, etc.) 4. Falls back to a simple link if data can't be fetched ## Example Usage ### Amazon Product (Auto-generated Placeholder) View on Amazon ### With Manual Fallback Image View WD Black SN8100 ### Newegg Product (Auto-generated Placeholder) View on Newegg ### Short Amazon Link (Auto-detect Platform) The component automatically detects the platform from the URL and follows redirects: View Product ## MDX Usage ```mdx import { AffiliateLink } from '@/components/mdx/AffiliateLink' // Basic usage (auto-fetches OG data) Optional custom text // With manual fallback image (recommended for Amazon/Newegg) View Product // Auto-detect platform // Specify platform manually View Product ``` ## Features - **Rich Previews**: Displays product image, title, and description - **Manual Fallbacks**: Provide custom images/titles when auto-fetch fails - **Smart Image Detection**: Filters out incorrect images (like navigation sprites) - **Platform Detection**: Automatically detects Amazon, Newegg, etc. - **Responsive Design**: Works on mobile and desktop - **Loading States**: Shows skeleton while fetching data - **Error Handling**: Falls back to simple link or manual data if fetch fails - **SEO Friendly**: Uses `rel="nofollow noopener"` for affiliate links - **Caching**: API responses cached for 24 hours ## Styling The component uses Tailwind CSS and adapts to your site's theme: - Hover effects with border and shadow - Image zoom on hover - Platform badges with color coding - Dark mode support

tutorial

All Articles