Over the past few months, I've built a comprehensive component library for this blog platform. What started as a simple need to embed a YouTube video has evolved into a powerful toolkit with over 25+ components covering everything from media previews to interactive code displays. This guide showcases every component with implementation details and real examples. --- ## Part 1: Media Preview Components ### LinkPreview - Universal Website Previews The foundation of our media system. It automatically extracts Open Graph metadata from any URL and displays a beautiful preview card. **Implementation Highlights:** - Server-side metadata extraction via Next.js API route - HTML entity decoding for proper text display - Graceful fallback to simple links on errors - Optimized image loading with error recovery - Responsive design that adapts to all screen sizes **Technical Stack:** ```typescript // API Route: /api/og-metadata/route.ts export async function GET(request: Request) { const { searchParams } = new URL(request.url); const url = searchParams.get('url'); const response = await fetch(url); const html = await response.text(); // Extract Open Graph tags const metadata = extractOGTags(html); return Response.json(metadata); } ``` **Usage:** ```jsx ``` --- ### YouTubePreview - Smart Video Embedding YouTube videos with custom thumbnails, automatic title fetching, and click-to-play functionality. **Auto-fetched title (latest enhancement):** **Key Features:** - Custom thumbnail with authentic YouTube play button overlay - Automatic video title fetching using YouTube oEmbed API - Multiple URL format support (youtube.com, youtu.be, embed URLs) - Lazy loading to improve page load performance - Responsive 16:9 aspect ratio maintained across all devices **Implementation Details:** The component extracts the video ID from various YouTube URL formats and fetches metadata using the oEmbed API: ```typescript const extractVideoId = (url: string): string | null => { const patterns = [ /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/, /youtube\.com\/embed\/([^&\n?#]+)/, ]; for (const pattern of patterns) { const match = url.match(pattern); if (match) return match[1]; } return null; }; // Fetch title using oEmbed const response = await fetch( `https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json` ); const data = await response.json(); const title = data.title; ``` **Usage:** ```jsx ``` --- ### SpotifyPreview - Music Integration Embed Spotify tracks, albums, playlists, and podcasts with official player integration. **Smart Features:** - Supports all Spotify content types: tracks, albums, playlists, podcasts, shows - Intelligent height adjustment based on content type - Support for both URLs and Spotify URI format - Direct integration with Spotify's official embed player **Smart Defaults:** - Tracks and episodes: 152px height - Albums and playlists: 352px height - Shows: 232px height - Custom height override available **Implementation:** ```typescript const extractSpotifyId = (url: string) => { // Handle both URLs and URIs if (url.startsWith('spotify:')) { const [, type, id] = url.split(':'); return { type, id }; } const match = url.match(/\/([a-z]+)\/([a-zA-Z0-9]+)/); if (match) return { type: match[1], id: match[2] }; return null; }; const getHeight = (type: string) => { switch (type) { case 'track': case 'episode': return 152; case 'album': case 'playlist': return 352; case 'show': return 232; default: return 380; } }; ``` **Usage:** ```jsx ``` --- ### GitHubRepoCard - Repository Showcase Beautiful cards displaying real-time GitHub repository information with live statistics. **Live Data Integration:** - Real-time repository statistics (stars, forks, watchers) - Primary programming language with color coding - Owner avatar and repository description - Topic tags display (up to 5 most relevant) - Direct linking to the repository **Technical Implementation:** ```typescript // Using GitHub API v3 const fetchRepoData = async (owner: string, repo: string) => { const response = await fetch( `https://api.github.com/repos/${owner}/${repo}`, { headers: { Accept: 'application/vnd.github.v3+json', // Optional: Add GitHub token for higher rate limits // 'Authorization': `token ${process.env.GITHUB_TOKEN}` }, next: { revalidate: 3600 }, // Cache for 1 hour } ); if (!response.ok) throw new Error('Repository not found'); return response.json(); }; ``` **Features:** - Elegant skeleton loading states - Error handling for private/non-existent repositories - Rate limiting awareness with graceful degradation - Cached responses to minimize API calls **Usage:** ```jsx ``` --- ### TwitterPreview - Social Conversations Embed Twitter/X posts with official widget integration. **Engineering Solutions:** - **Multiple display prevention**: Fixed script loading conflicts that caused duplicate tweets - **Left alignment**: Improved visual flow with left-aligned posts - **Official embed integration**: Uses Twitter's official widget.js - **Theme support**: Light and dark theme options **Technical Innovations:** ```typescript useEffect(() => { // Prevent duplicate script loading if (window.twttr) { window.twttr.widgets.load(); return; } const script = document.createElement('script'); script.src = 'https://platform.twitter.com/widgets.js'; script.async = true; document.body.appendChild(script); return () => { // Cleanup to prevent memory leaks if (isMounted.current) { isMounted.current = false; } }; }, []); ``` **Usage:** ```jsx ``` --- ### InstagramPreview - Visual Stories Embed Instagram posts, reels, and IGTV content. **Content Type Support:** - Regular posts (`/p/`) - Reels (`/reel/`) - IGTV content (`/tv/`) **Implementation:** ```typescript useEffect(() => { // Load Instagram embed script const script = document.createElement('script'); script.src = '//www.instagram.com/embed.js'; script.async = true; document.body.appendChild(script); if (window.instgrm) { window.instgrm.Embeds.process(); } }, []); ``` **Usage:** ```jsx ``` --- ### LinkedInPreview - Professional Networks LinkedIn profile cards and post embeds with official integration. **Dual Functionality:** - **Profile previews**: Custom-designed cards with LinkedIn branding - **Post embeds**: Official LinkedIn embed integration **Profile Card Features:** - Automatic username extraction and formatting - LinkedIn brand colors (#0077B5) and official logo - Clean, professional layout with smooth transitions - Direct link to LinkedIn profile **Implementation:** ```typescript const LinkedInProfileCard = ({ username }: { username: string }) => { return (

{username}

View LinkedIn Profile

); }; ``` **Usage:** ```jsx ``` --- ### PDFViewer - Document Integration Embed PDF documents with multiple viewer fallback options. **Feature-Rich Implementation:** - Inline PDF viewing with full toolbar - Download functionality - Multiple viewer fallbacks: 1. Browser native PDF viewer 2. Google Docs Viewer 3. Mozilla PDF.js - Custom height support - Loading states and comprehensive error handling **Implementation:** ```typescript const PDFViewer = ({ url, title, height = 600, showDownload = false }) => { const [viewerError, setViewerError] = useState(false); const embedUrl = viewerError ? `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true` : url; return (

{showDownload && (

{title}

Download PDF

)}

Comments

Leave a Comment