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 };
|
params: { id: string };
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Meme {
|
function getMeme(id: string): string {
|
||||||
title: string;
|
const pinataImageUrl = `https://${process.env.PINATA_GATEWAY}/ipfs/${id}`
|
||||||
imageUrl: string;
|
return pinataImageUrl;
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMeme(baseUrl: string, id: string): Meme {
|
|
||||||
return {
|
|
||||||
title: 'Generated meme',
|
|
||||||
imageUrl: `${baseUrl}/api/images/${id}`,
|
|
||||||
description: 'A funny meme',
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function generateMetadata(
|
export async function generateMetadata(
|
||||||
@ -23,37 +14,34 @@ export async function generateMetadata(
|
|||||||
parent: ResolvingMetadata
|
parent: ResolvingMetadata
|
||||||
): Promise<Metadata> {
|
): Promise<Metadata> {
|
||||||
const baseUrl = process.env.SITE_URL!;
|
const baseUrl = process.env.SITE_URL!;
|
||||||
const meme = getMeme(baseUrl, params.id);
|
const meme = getMeme(params.id);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: meme.title,
|
title: '',
|
||||||
description: meme.description,
|
description: '',
|
||||||
metadataBase: new URL(baseUrl),
|
metadataBase: new URL(baseUrl),
|
||||||
openGraph: {
|
openGraph: {
|
||||||
type: 'website',
|
type: 'website',
|
||||||
url: `${baseUrl}/memes/${params.id}`,
|
url: `${baseUrl}/memes/${params.id}`,
|
||||||
siteName: "Mark's meme market",
|
siteName: "Mark's meme market",
|
||||||
images: [{ url: meme.imageUrl }],
|
images: [{ url: meme }],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MemePage({ params }: Props) {
|
export default function MemePage({ params }: Props) {
|
||||||
const baseUrl = process.env.SITE_URL!;
|
const meme = getMeme(params.id);
|
||||||
const meme = getMeme(baseUrl, params.id);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||||
<div className="relative flex flex-col items-center">
|
<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">
|
<div className="relative w-full max-w-2xl aspect-square">
|
||||||
<img
|
<img
|
||||||
src={meme.imageUrl}
|
src={meme}
|
||||||
alt={meme.title}
|
alt='Generated image'
|
||||||
className="object-contain rounded-lg w-full h-full"
|
className="object-contain rounded-lg w-full h-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-4 text-lg text-gray-600">{meme.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</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 (
|
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="w-full bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8">
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
@ -136,6 +144,16 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
|
|||||||
alt="Generated content"
|
alt="Generated content"
|
||||||
className="w-full h-auto rounded-xl shadow-2xl"
|
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>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user