fix: og image fix for collections
This commit is contained in:
gosangam
@@ -76,6 +76,10 @@ export async function GET(
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
// Root carries NO padding — absolutely-positioned children measure
|
||||
// from the padding box, so any root padding would inset the full-bleed
|
||||
// cover image and leave the bg colour showing as a strip. Padding lives
|
||||
// on the inner content layer instead.
|
||||
<div
|
||||
style={{
|
||||
width: 1200,
|
||||
@@ -85,7 +89,6 @@ export async function GET(
|
||||
backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
|
||||
fontFamily: "Noto Sans, sans-serif",
|
||||
position: "relative",
|
||||
padding: 80,
|
||||
}}
|
||||
>
|
||||
{hasImage ? (
|
||||
@@ -119,72 +122,80 @@ export async function GET(
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* Eyebrow */}
|
||||
{/* Content layer — holds the padding so the bg image stays full-bleed. */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 6,
|
||||
textTransform: "uppercase",
|
||||
color: accent,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 80,
|
||||
}}
|
||||
>
|
||||
Collection
|
||||
</div>
|
||||
|
||||
{/* Title — the centrepiece */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: title.length > 48 ? 60 : 76,
|
||||
fontWeight: 700,
|
||||
color: textPrimary,
|
||||
lineHeight: 1.15,
|
||||
marginTop: 24,
|
||||
maxHeight: 320,
|
||||
overflow: "hidden",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{description ? (
|
||||
{/* Eyebrow */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 28,
|
||||
color: textSecondary,
|
||||
lineHeight: 1.4,
|
||||
marginTop: 24,
|
||||
maxHeight: 120,
|
||||
overflow: "hidden",
|
||||
zIndex: 1,
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 6,
|
||||
textTransform: "uppercase",
|
||||
color: accent,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
Collection
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div style={{ flex: 1, display: "flex" }} />
|
||||
|
||||
{/* Footer: count + branding */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
|
||||
{count}
|
||||
{/* Title — the centrepiece */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: title.length > 48 ? 60 : 76,
|
||||
fontWeight: 700,
|
||||
color: textPrimary,
|
||||
lineHeight: 1.15,
|
||||
marginTop: 24,
|
||||
maxHeight: 320,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div style={{ fontSize: 22, color: accent, fontWeight: 700 }}>
|
||||
prabhupadasays.org
|
||||
|
||||
{description ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 28,
|
||||
color: textSecondary,
|
||||
lineHeight: 1.4,
|
||||
marginTop: 24,
|
||||
maxHeight: 120,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div style={{ flex: 1, display: "flex" }} />
|
||||
|
||||
{/* Footer: count + branding */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 24, color: textSecondary, display: "flex" }}>
|
||||
{count}
|
||||
</div>
|
||||
<div style={{ fontSize: 22, color: accent, fontWeight: 700 }}>
|
||||
prabhupadasays.org
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +102,6 @@ export async function GET(
|
||||
backgroundColor: hasImage ? "#1a1410" : "#faf5f0",
|
||||
fontFamily: "Noto Sans, sans-serif",
|
||||
position: "relative",
|
||||
padding: 80,
|
||||
}}
|
||||
>
|
||||
{/* Background image + dimming overlay */}
|
||||
@@ -138,6 +137,19 @@ export async function GET(
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* Content layer — holds the padding so the bg image stays
|
||||
full-bleed (absolute children measure from the padding box, so
|
||||
padding on the root would inset the image and show a strip). */}
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 80,
|
||||
}}
|
||||
>
|
||||
{/* Caption — the centrepiece */}
|
||||
<div
|
||||
style={{
|
||||
@@ -254,6 +266,7 @@ export async function GET(
|
||||
prabhupadasays.org
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
|
||||
@@ -152,29 +152,60 @@ export function PostCardMenu({
|
||||
// Copy the post's caption + source citation + a (short) link to the post —
|
||||
// the same payload the share sheet / footer produce. Available to every
|
||||
// viewer.
|
||||
async function copyCaption() {
|
||||
setOpen(false);
|
||||
try {
|
||||
const origin = window.location.origin;
|
||||
let url = "";
|
||||
if (authorHandle) {
|
||||
const longPath = `/u/${encodeURIComponent(authorHandle)}/posts#post-${post.id}`;
|
||||
const code = await createShortLink(longPath);
|
||||
url = code
|
||||
? new URL(`/share/${code}`, origin).toString()
|
||||
: new URL(longPath, origin).toString();
|
||||
}
|
||||
const ref = structuredReferenceForPost(post.source_url, post.source_title);
|
||||
const lines: string[] = [];
|
||||
if (post.caption) lines.push(`“${post.caption}”`, "");
|
||||
lines.push("Source:", ref.title);
|
||||
if (ref.detail) lines.push(ref.detail);
|
||||
if (url) lines.push(url);
|
||||
await navigator.clipboard.writeText(lines.join("\n"));
|
||||
toast.success("Caption copied");
|
||||
} catch {
|
||||
toast.error("Could not copy");
|
||||
// Build the copy payload — caption + citation + a short link to the post.
|
||||
// The short link is a network round-trip, so we must NOT await it before
|
||||
// touching the clipboard or we lose the click's transient user activation
|
||||
// (the write then fails on the first click and only lands on the second,
|
||||
// once the link is cached). See `useCopyFeedback` for the same fix.
|
||||
async function buildCaptionText(): Promise<string> {
|
||||
const origin = window.location.origin;
|
||||
let url = "";
|
||||
if (authorHandle) {
|
||||
const longPath = `/u/${encodeURIComponent(authorHandle)}/posts#post-${post.id}`;
|
||||
const code = await createShortLink(longPath);
|
||||
url = code
|
||||
? new URL(`/share/${code}`, origin).toString()
|
||||
: new URL(longPath, origin).toString();
|
||||
}
|
||||
const ref = structuredReferenceForPost(post.source_url, post.source_title);
|
||||
const lines: string[] = [];
|
||||
if (post.caption) lines.push(`“${post.caption}”`, "");
|
||||
lines.push("Source:", ref.title);
|
||||
if (ref.detail) lines.push(ref.detail);
|
||||
if (url) lines.push(url);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
function copyCaption() {
|
||||
setOpen(false);
|
||||
// Hand the clipboard a *Promise* of the text via ClipboardItem so the
|
||||
// browser keeps the gesture alive while the short link resolves — one
|
||||
// click copies cleanly.
|
||||
if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
|
||||
try {
|
||||
const item = new ClipboardItem({
|
||||
"text/plain": buildCaptionText().then(
|
||||
(s) => new Blob([s], { type: "text/plain" }),
|
||||
),
|
||||
});
|
||||
navigator.clipboard.write([item]).then(
|
||||
() => toast.success("Caption copied"),
|
||||
() => toast.error("Could not copy"),
|
||||
);
|
||||
return;
|
||||
} catch {
|
||||
// ClipboardItem-with-promise unsupported → fall through to the
|
||||
// await + writeText path below.
|
||||
}
|
||||
}
|
||||
void buildCaptionText().then(async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast.success("Caption copied");
|
||||
} catch {
|
||||
toast.error("Could not copy");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Build the items list AFTER all hooks have run so a conditional
|
||||
|
||||
Reference in New Issue
Block a user