pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added preview image and copy buttons - wrote 4 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 12:09:52 +01:00
parent 9c1c4e1581
commit 4163372a17
4 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/actions.ts
View File

@@ -35,12 +35,15 @@ export async function extractMetaData(url: string) {
$('meta[property="og:description"]').attr("content") ||
$('meta[name="description"]').attr("content") ||
"No description found";
const image = $('meta[property="og:image"]').attr("content") || null;
return { data: { title, description } };
return { data: { title, description, image } };
} catch (error) {
console.error(error);
if (error instanceof Error && error.message.includes('Invalid URL')) {
return { error: "The provided URL is not valid. Please check and try again." };
if (error instanceof Error && error.message.includes("Invalid URL")) {
return {
error: "The provided URL is not valid. Please check and try again.",
};
}
return { error: "An unexpected error occurred while fetching the URL." };
}

2
src/app/layout.tsx
View File

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -35,6 +36,7 @@ export default function RootLayout({
disableTransitionOnChange
>
{children}
<Toaster richColors />
</ThemeProvider>
</body>
</html>

41
src/components/copy-button.tsx Normal file
View File

@@ -0,0 +1,41 @@
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Check, Copy } from "lucide-react";
import { toast } from "sonner";
interface CopyButtonProps {
textToCopy: string;
}
export function CopyButton({ textToCopy }: CopyButtonProps) {
const [isCopied, setIsCopied] = useState(false);
const handleCopy = () => {
if (!textToCopy || textToCopy === "Not found") return;
navigator.clipboard.writeText(textToCopy).then(() => {
setIsCopied(true);
toast.success("Copied to clipboard!");
setTimeout(() => {
setIsCopied(false);
}, 2000);
});
};
return (
<Button
variant="ghost"
size="icon"
onClick={handleCopy}
className="h-8 w-8"
>
{isCopied ? (
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="h-4 w-4" />
)}
<span className="sr-only">Copy</span>
</Button>
);
}

51
src/components/meta-form.tsx
View File

@@ -7,10 +7,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";
interface MetaData {
title: string;
description: string;
image?: string | null;
}
export function MetaForm() {
@@ -40,7 +42,10 @@ export function MetaForm() {
return (
<div className="w-full space-y-6">
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center gap-3">
<form
onSubmit={handleSubmit}
className="flex flex-col sm:flex-row items-center gap-3"
>
<div className="relative w-full">
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
<Input
@@ -51,7 +56,11 @@ export function MetaForm() {
className="pl-10 h-12 text-base rounded-lg shadow-sm"
/>
</div>
<Button type="submit" disabled={loading} className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all">
<Button
type="submit"
disabled={loading}
className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all"
>
{loading ? "Extracting..." : "Extract"}
</Button>
</form>
@@ -67,29 +76,55 @@ export function MetaForm() {
{metaData && (
<Card className="w-full shadow-lg rounded-lg">
<CardHeader>
<CardTitle className="text-xl text-card-foreground">Extraction Results</CardTitle>
<CardTitle className="text-xl text-card-foreground">
Extraction Results
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-6">
{metaData.image && (
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Title</h3>
<h3 className="font-semibold text-card-foreground mb-2">
Preview Image
</h3>
<div className="aspect-video bg-muted rounded-md overflow-hidden relative">
<img
src={metaData.image}
alt="Meta preview image"
className="w-full h-full object-cover"
/>
</div>
</div>
)}
<div>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground">
Meta Title
</h3>
<LengthIndicator
length={metaData.title.length}
type="title"
/>
</div>
<CopyButton textToCopy={metaData.title} />
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.title || "Not found"}
</p>
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Description</h3>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground">
Meta Description
</h3>
<LengthIndicator
length={metaData.description.length}
type="description"
/>
</div>
<CopyButton textToCopy={metaData.description} />
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.description || "Not found"}
</p>