Add button to share generated meme on twitter

This commit is contained in:
Adw8 2025-02-05 14:19:32 +05:30
parent c7e291c19e
commit 1976cfbbe6
2 changed files with 28 additions and 22 deletions

View File

@ -4,18 +4,9 @@ interface Props {
params: { id: string };
}
interface Meme {
title: string;
imageUrl: string;
description: string;
}
function getMeme(baseUrl: string, id: string): Meme {
return {
title: 'Generated meme',
imageUrl: `${baseUrl}/api/images/${id}`,
description: 'A funny meme',
};
function getMeme(id: string): string {
const pinataImageUrl = `https://${process.env.PINATA_GATEWAY}/ipfs/${id}`
return pinataImageUrl;
}
export async function generateMetadata(
@ -23,37 +14,34 @@ export async function generateMetadata(
parent: ResolvingMetadata
): Promise<Metadata> {
const baseUrl = process.env.SITE_URL!;
const meme = getMeme(baseUrl, params.id);
const meme = getMeme(params.id);
return {
title: meme.title,
description: meme.description,
title: '',
description: '',
metadataBase: new URL(baseUrl),
openGraph: {
type: 'website',
url: `${baseUrl}/memes/${params.id}`,
siteName: "Mark's meme market",
images: [{ url: meme.imageUrl }],
images: [{ url: meme }],
},
};
}
export default function MemePage({ params }: Props) {
const baseUrl = process.env.SITE_URL!;
const meme = getMeme(baseUrl, params.id);
const meme = getMeme(params.id);
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="relative flex flex-col items-center">
<h1 className="text-4xl font-bold mb-8">{meme.title}</h1>
<div className="relative w-full max-w-2xl aspect-square">
<img
src={meme.imageUrl}
alt={meme.title}
src={meme}
alt='Generated image'
className="object-contain rounded-lg w-full h-full"
/>
</div>
<p className="mt-4 text-lg text-gray-600">{meme.description}</p>
</div>
</main>
);

View File

@ -86,6 +86,14 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
}
}
const generateTwitterShareUrl = (imageUrl: string): string => {
const baseUrl = window.location.href;
const ipfsImageUrl = imageUrl.split("/ipfs/")[1];
const memeUrl = `${baseUrl}/memes/${ipfsImageUrl}`;
return `https://twitter.com/intent/tweet?text=Check%20out%20this%20generated%20image!&url=${encodeURIComponent(memeUrl)}`;
};
return (
<div className="w-full bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8">
<div className="p-6">
@ -136,6 +144,16 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
alt="Generated content"
className="w-full h-auto rounded-xl shadow-2xl"
/>
<div className="mt-4 text-center">
<a
href={generateTwitterShareUrl(generationState.imageUrl)}
target="_blank"
rel="noopener noreferrer"
className="inline-block w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-blue-500/25"
>
Share on Twitter
</a>
</div>
</div>
)}
</div>