mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-28 17:56:37 +02:00
🐛 Revert changes to og image and handle missing author (#1610)
This commit is contained in:
Luke Vella
GitHub
parent
22f7712348
commit
25eef430bc
4 changed files with 24 additions and 137 deletions
|
|
@ -1,109 +0,0 @@
|
|||
import { prisma } from "@rallly/database";
|
||||
import { ImageResponse } from "next/og";
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { join } from "node:path";
|
||||
import * as React from "react";
|
||||
|
||||
import Logo from "./logo-color.svg";
|
||||
|
||||
export const contentType = "image/png";
|
||||
export const size = {
|
||||
width: 1200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
const regularFont = readFile(
|
||||
join(process.cwd(), "public/static/fonts/inter-regular.ttf"),
|
||||
);
|
||||
|
||||
const boldFont = readFile(
|
||||
join(process.cwd(), "public/static/fonts/inter-bold.ttf"),
|
||||
);
|
||||
|
||||
export default async function OgImage({
|
||||
params,
|
||||
}: {
|
||||
params: { urlId: string; locale: string };
|
||||
}) {
|
||||
const [regularFontData, boldFontData] = await Promise.all([
|
||||
regularFont,
|
||||
boldFont,
|
||||
]);
|
||||
|
||||
const poll = await prisma.poll.findUnique({
|
||||
where: {
|
||||
id: params.urlId as string,
|
||||
},
|
||||
select: {
|
||||
title: true,
|
||||
deleted: true,
|
||||
user: {
|
||||
select: {
|
||||
name: true,
|
||||
banned: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!poll || poll.deleted || poll.user?.banned) {
|
||||
return new Response("Not Found", { status: 404 });
|
||||
}
|
||||
|
||||
const title = poll.title;
|
||||
const author = poll.user?.name;
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div tw="flex relative flex-col bg-gray-100 w-full h-full px-[80px] py-[70px] items-start justify-center">
|
||||
<div tw="h-full flex flex-col w-full justify-start">
|
||||
<div tw="flex justify-between items-center w-full">
|
||||
<Logo height={81} width={370} />
|
||||
<div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
|
||||
<span tw="bg-gray-200 px-6 py-3 rounded-full">Invite</span>
|
||||
</div>
|
||||
</div>
|
||||
<div tw="relative flex w-full flex-col mt-auto">
|
||||
{author ? (
|
||||
<div
|
||||
tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
|
||||
style={{
|
||||
width: 1000,
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
By {author}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
tw="flex mt-3 text-[64px] font-bold w-[1040px] overflow-hidden"
|
||||
style={{
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{
|
||||
name: "Inter",
|
||||
data: regularFontData,
|
||||
weight: 400,
|
||||
},
|
||||
{
|
||||
name: "Inter",
|
||||
data: boldFontData,
|
||||
weight: 700,
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import { notFound } from "next/navigation";
|
|||
|
||||
import { InvitePage } from "@/app/[locale]/invite/[urlId]/invite-page";
|
||||
import { PermissionProvider } from "@/contexts/permissions";
|
||||
import { getTranslation } from "@/i18n/server";
|
||||
import { createSSRHelper } from "@/trpc/server/create-ssr-helper";
|
||||
|
||||
import Providers from "./providers";
|
||||
|
|
@ -58,7 +57,7 @@ export default async function Page({
|
|||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { urlId, locale },
|
||||
params: { urlId },
|
||||
}: {
|
||||
params: {
|
||||
urlId: string;
|
||||
|
|
@ -83,20 +82,18 @@ export async function generateMetadata({
|
|||
},
|
||||
});
|
||||
|
||||
const { t } = await getTranslation(locale);
|
||||
|
||||
if (!poll || poll.deleted || poll.user?.banned) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { title, id, user } = poll;
|
||||
|
||||
const author =
|
||||
user?.name ||
|
||||
t("guest", {
|
||||
ns: "app",
|
||||
defaultValue: "Guest",
|
||||
});
|
||||
const author = user?.name || "Guest";
|
||||
|
||||
const ogImageUrl = absoluteUrl("/api/og-image-poll", {
|
||||
title,
|
||||
author,
|
||||
});
|
||||
|
||||
return {
|
||||
title,
|
||||
|
|
@ -107,7 +104,7 @@ export async function generateMetadata({
|
|||
url: `/invite/${id}`,
|
||||
images: [
|
||||
{
|
||||
url: `/invite/${id}/opengraph-image?${poll.updatedAt.getTime()}`,
|
||||
url: ogImageUrl,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: title,
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,12 +1,13 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
import { ImageResponse } from "next/og";
|
||||
import type { NextRequest } from "next/server";
|
||||
import * as React from "react";
|
||||
import { z } from "zod";
|
||||
|
||||
import Logo from "./logo-color.svg";
|
||||
|
||||
const schema = z.object({
|
||||
title: z.string().min(1),
|
||||
author: z.string().min(1),
|
||||
author: z.string().nullish(),
|
||||
});
|
||||
|
||||
export const runtime = "edge";
|
||||
|
|
@ -37,26 +38,24 @@ export async function GET(req: NextRequest) {
|
|||
<div tw="flex relative flex-col bg-gray-100 w-full h-full px-[80px] py-[70px] items-start justify-center">
|
||||
<div tw="h-full flex flex-col w-full justify-start">
|
||||
<div tw="flex justify-between items-center w-full">
|
||||
<img
|
||||
alt="Rallly"
|
||||
src="https://rallly.co/static/images/logo-color.svg"
|
||||
height={64}
|
||||
/>
|
||||
<Logo height={81} width={370} />
|
||||
<div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
|
||||
<span tw="bg-gray-200 px-6 py-3 rounded-full">Invite</span>
|
||||
</div>
|
||||
</div>
|
||||
<div tw="relative flex w-full flex-col mt-auto">
|
||||
<div
|
||||
tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
|
||||
style={{
|
||||
width: 1000,
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
By {author}
|
||||
</div>
|
||||
{author ? (
|
||||
<div
|
||||
tw="flex text-gray-500 text-[48px] w-[1040px] overflow-hidden"
|
||||
style={{
|
||||
width: 1000,
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
By {author}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
tw="flex mt-3 text-[64px] font-bold w-[1040px] overflow-hidden"
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue