forked from mito-systems/sol-mem-gen
Add button to share generated meme on twitter
This commit is contained in:
parent
c7e291c19e
commit
1976cfbbe6
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user