jason/memer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build preview card

Browse Source
This commit is contained in:
jason
2026-03-28 09:25:11 -05:00
parent aea08337d1
commit 32bcdc94fc
4 changed files with 136 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/SharePanel.tsx
View File

@@ -9,23 +9,26 @@ interface Props {
export function SharePanel({ meme }: Props) {
const [copied, setCopied] = useState(false);
// /m/:id gives crawlers OG meta tags so SMS/Telegram show a rich preview card
const shareUrl = `${window.location.origin}/m/${meme.id}`;
const imageUrl = `${window.location.origin}${api.imageUrl(meme.file_path)}`;
async function copyLink() {
await navigator.clipboard.writeText(imageUrl);
await navigator.clipboard.writeText(shareUrl);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(imageUrl)}&text=${encodeURIComponent(meme.title)}`;
const smsUrl = `sms:?body=${encodeURIComponent(imageUrl)}`;
const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(meme.title)}`;
const smsUrl = `sms:?body=${encodeURIComponent(shareUrl)}`;
return (
<div className="flex flex-wrap gap-2">
<button
onClick={copyLink}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm font-medium transition-colors"
title="Copy image link"
title="Copy share link"
>
{copied ? (
<Check size={14} className="text-green-400" />
@@ -56,7 +59,7 @@ export function SharePanel({ meme }: Props) {
</a>
<a
href={api.imageUrl(meme.file_path)}
href={imageUrl}
download={meme.file_name}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm font-medium transition-colors"
title="Download original"

4
frontend/src/pages/Gallery.tsx
View File

@@ -19,7 +19,9 @@ export function Gallery() {
const [activeTag, setActiveTag] = useState<string | null>(null);
const [activeCollectionId, setActiveCollectionId] = useState<number | null>(null);
const [page, setPage] = useState(1);
const [selectedMemeId, setSelectedMemeId] = useState<string | null>(null);
const [selectedMemeId, setSelectedMemeId] = useState<string | null>(() => {
return new URLSearchParams(window.location.search).get('open');
});
const [quickShareMeme, setQuickShareMeme] = useState<Meme | null>(null);
const [showUpload, setShowUpload] = useState(false);
const [showLogin, setShowLogin] = useState(false);