Website Metadata Card Generator

I'll create a tool that fetches and displays website metadata in a card format when you enter a domain address. The card will show the website's OG image as a thumbnail, favicon as a logo, and include the title and description from the metadata.

How It Works

1. Input Form: Enter any website domain (e.g., vercel.com, github.com) in the input field.

2. Metadata Fetching: When you click "Generate Card", the app:

   • Fetches the website's HTML content using a server action

   • Extracts metadata including:

     • Title from the <title> tag
     • Description from meta tags
     • OG image for the thumbnail
     • Favicon for the logo

3. Card Display: The metadata is displayed in a card format showing:

   • The website's OG image as a large thumbnail
   • The favicon as a small logo
   • The website title
   • The website description
   • The domain name with a link to the original site

Features

• Automatic URL Formatting: Adds https:// if not included
• Error Handling: Displays fallback content if images fail to load
• Responsive Design: Works on mobile and desktop
• Relative URL Resolution: Properly handles relative paths for favicons and images

You can use this tool to quickly preview how websites appear in social media shares or to create a collection of website cards for bookmarking purposes.

I see the issue. The error "Unexpected identifier '$'" is likely coming from the JSDOM library usage in the server action. Let's fix this by using a different approach to parse HTML that's more compatible with Next.js.

I've fixed the error by replacing the JSDOM-based approach with a simpler regex-based solution. The "Unexpected identifier '$'" error was likely caused by the JSDOM library, which might not be properly supported in the Next.js server environment.

Changes Made:

1. Removed JSDOM dependency: Instead of using JSDOM to parse the HTML, I'm now using regular expressions to extract the metadata.

2. Created separate extraction functions:

   • extractTitle() - Gets the website title
   • extractDescription() - Gets the meta description
   • extractOgImage() - Gets the Open Graph image
   • extractFavicon() - Gets the favicon
3. Kept the URL resolution logic: The resolveUrl() function remains the same to handle relative URLs.

This approach should be more compatible with Next.js server components and server actions. The regex patterns will extract the same metadata as before, but without relying on DOM manipulation libraries that might cause issues in the server environment.

Try this updated version - it should resolve the "Unexpected identifier '$'" error while maintaining all the functionality of the original implementation.