🪛 Clean up and fix og-image code (#820)

apps/landing/src/pages/api/og-image.tsx

@@ -23,7 +23,6 @@ export default async function handler(req: NextRequest) {
   const { searchParams } = req.nextUrl;
   const title = searchParams.get("title");
   const excerpt = searchParams.get("excerpt");
-  const type = searchParams.get("type");
 
   return new ImageResponse(
     (
@@ -47,7 +46,7 @@ export default async function handler(req: NextRequest) {
                 height={64}
               />
               <div tw="flex text-gray-800 text-3xl tracking-tight font-bold">
-                <span tw="bg-gray-200 px-6 py-3 rounded-full">{type}</span>
+                <span tw="bg-gray-200 px-6 py-3 rounded-full">Blog</span>
               </div>
             </div>
           </div>

apps/landing/src/pages/blog/[slug].tsx

@@ -36,19 +36,13 @@ const Page: NextPageWithLayout<Props> = ({ post }) => {
         openGraph={{
           title: post.title,
           description: post.excerpt,
+          url: absoluteUrl(`/blog/${post.slug}`),
           images: [
             {
-              url:
+              url: absoluteUrl("/api/og-image", {
-                `${absoluteUrl()}/_next/image?w=1200&q=100&url=${encodeURIComponent(
+                title: post.title,
-                  `/api/og-image`,
+                excerpt: post.excerpt,
-                )}` +
+              }),
-                encodeURIComponent(
-                  `?type=${encodeURIComponent(
-                    "Blog",
-                  )}&title=${encodeURIComponent(
-                    post.title,
-                  )}&excerpt=${encodeURIComponent(post.excerpt)}`,
-                ),
               width: 1200,
               height: 630,
               alt: post.title,

apps/web/src/pages/invite/[urlId].tsx

@@ -86,11 +86,12 @@ const GoToApp = () => {
 };
 
 type PageProps = {
+  id: string;
   title: string;
   user: string | null;
 };
 
-const Page = ({ title, user }: PageProps) => {
+const Page = ({ id, title, user }: PageProps) => {
   const { t } = useTranslation();
   const name = user ?? t("guest");
   return (
@@ -99,17 +100,13 @@ const Page = ({ title, user }: PageProps) => {
         openGraph={{
           title,
           description: `By ${name}`,
+          url: absoluteUrl(`/invite/${id}`),
           images: [
             {
-              url:
+              url: `${absoluteUrl("/api/og-image-poll", {
-                `${absoluteUrl()}/_next/image?w=1200&q=100&url=${encodeURIComponent(
-                  `/api/og-image-poll`,
-                )}` +
-                encodeURIComponent(
-                  `?title=${encodeURIComponent(
                 title,
-                  )}&author=${encodeURIComponent(name)}`,
+                author: name,
-                ),
+              })}`,
               width: 1200,
               height: 630,
               alt: title,
@@ -192,6 +189,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
       id: ctx.params?.urlId as string,
     },
     select: {
+      id: true,
       title: true,
       user: {
         select: {
@@ -207,6 +205,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
     return {
       props: {
         ...res.props,
+        id: poll.id,
         title: poll.title,
         user: poll.user?.name ?? null,
       },

packages/utils/src/absolute-url.ts

@@ -15,13 +15,18 @@ function joinPath(baseUrl: string, subpath = "") {
   return baseUrl;
 }
 
-export function absoluteUrl(subpath = "") {
+export function absoluteUrl(subpath = "", query?: Record<string, string>) {
+  const queryString = query
+    ? `?${Object.entries(query)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+        .join("&")}`
+    : "";
   const baseUrl =
     process.env.NEXT_PUBLIC_BASE_URL ??
     getVercelUrl() ??
     `http://localhost:${port}`;
 
-  return joinPath(baseUrl, subpath);
+  return joinPath(baseUrl, subpath) + queryString;
 }
 
 export function shortUrl(subpath = "") {