deep-stack/sol-mem-gen
3
0
Fork 0
forked from mito-systems/sol-mem-gen
Code Pull Requests Activity

Add button to share generated meme on twitter

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/memes/[id]/page.tsx
View File

@ -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>
); );

18
src/components/AIServiceCard.tsx
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 ( 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>