Og cards #830
Og cards #830
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a comprehensive URL Preview Card feature that automatically fetches and displays rich previews for shared URLs. The implementation includes metadata extraction, fallback image generation, and a reusable React component with proper error handling.
Key Changes:
- Added URL Preview Card React component with loading/error states and fallback image support
- Created server-side API routes for metadata extraction and dynamic OG image generation
- Added TypeScript interfaces for URL metadata and API responses
Reviewed changes
Copilot reviewed 7 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/url-metadata.ts | Defines TypeScript interfaces for URL metadata and API responses |
| src/pages/url-preview-demo.tsx | Demo page showcasing the URL preview functionality with example URLs |
| src/pages/api/og/generate.tsx | Edge API route for generating fallback Open Graph images dynamically |
| src/pages/api/og/fetch.ts | API route for fetching and parsing HTML metadata from URLs |
| src/components/url-preview-card/index.tsx | Reusable React component that displays URL preview cards |
| package.json | Adds dependencies for OG image generation and HTML parsing |
| URL_PREVIEW_CARD_README.md | Comprehensive documentation for the URL Preview Card feature |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
URL_PREVIEW_CARD_README.md
Outdated
|
|
||
| 1. **User provides a URL**: The URL is passed to the `URLPreviewCard` component | ||
| 2. **Fetch metadata**: The component calls `/api/og/fetch` with the URL | ||
| 3. **Parse HTML**: The API route fetches the URL and parses the HTML with Cheerio |
There was a problem hiding this comment.
Documentation incorrectly states that HTML parsing uses Cheerio, but the implementation actually uses node-html-parser (as shown in the code and dependencies).
| 3. **Parse HTML**: The API route fetches the URL and parses the HTML with Cheerio | |
| 3. **Parse HTML**: The API route fetches the URL and parses the HTML with node-html-parser |
src/pages/api/og/generate.tsx
Outdated
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| Shared from Vets Who Code |
There was a problem hiding this comment.
[nitpick] The hardcoded text 'Shared from Vets Who Code' should be configurable or moved to a constant to make the component more reusable across different projects or contexts.
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
This pull request introduces a comprehensive URL Preview Card feature, enabling automatic fetching and display of rich previews for shared URLs. It includes a reusable React component, robust server-side metadata extraction, dynamic Open Graph image generation, and thorough documentation. The implementation also adds new dependencies for HTML parsing and image generation.
The most important changes are:
Feature Implementation
URLPreviewCardReact component (src/components/url-preview-card/index.tsx) that fetches and displays Open Graph metadata for a given URL, handles loading and error states, and uses a fallback image if necessary./api/og/fetch(src/pages/api/og/fetch.ts) to fetch and parse HTML from a target URL, extract Open Graph and Twitter Card metadata, and return it in a structured format with error handling and security considerations./api/og/generate(src/pages/api/og/generate.tsx) to dynamically generate a visually appealing fallback Open Graph image for URLs lacking their own OG image, using the hostname for branding.Documentation
URL_PREVIEW_CARD_README.mddocumenting features, API usage, customization options, performance tips, troubleshooting, and future enhancements for the URL Preview Card functionality.Dependencies
@vercel/ogandnode-html-parsertopackage.jsonto support OG image generation and HTML parsing for metadata extraction. [1] [2]