fix: revert opengraph image changes

Author: BrocksiNet

app/(cms)/opengraph-image.tsx

@@ -1,10 +1,16 @@
 import OpengraphImage from "components/opengraph-image";
 import { getPage } from "lib/shopware";
 
-export default async function Image({ params }: { params: { page: string } }) {
-  const { page: pageParamName } = await params;
-  const page = await getPage(pageParamName);
-  const title = page ? page.seo?.title || page.title : "";
+export const runtime = "edge";
+
+export default async function Image({
+  params,
+}: {
+  params?: { page?: string };
+}) {
+  const pageParamName = params?.page || "";
+  const page = pageParamName !== "" ? await getPage(pageParamName) : null;
+  const title = page ? page.seo?.title || page.title || "" : "";
 
   return await OpengraphImage({ title });
 }

app/opengraph-image.tsx

@@ -1,5 +1,7 @@
 import OpengraphImage from "components/opengraph-image";
 
+export const runtime = "edge";
+
 export default async function Image() {
   return await OpengraphImage();
 }

app/product/[...handle]/page.tsx

@@ -8,7 +8,7 @@ import { ProductProvider } from "components/product/product-context";
 import { ProductDescription } from "components/product/product-description";
 import { HIDDEN_PRODUCT_TAG } from "lib/constants";
 import { getProduct, getProductRecommendations } from "lib/shopware";
-import { Image } from "lib/shopware/types";
+import type { Image } from "lib/shopware/types";
 import Link from "next/link";
 import { Suspense } from "react";
 
@@ -130,7 +130,6 @@ async function RelatedProducts({ id }: { id: string }) {
             <Link
               className="relative h-full w-full"
               prefetch={true}
-              role="link"
               href={`/product/${product.path}`}
             >
               <GridTileImage

app/search/(collection)/[...collection]/page.tsx

@@ -1,26 +1,28 @@
-import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 
-import Pagination from 'components/collection/pagination';
-import Grid from 'components/grid';
-import ProductGridItems from 'components/layout/product-grid-items';
-import Collections from 'components/layout/search/collections';
-import FilterList from 'components/layout/search/filter';
+import Pagination from "components/collection/pagination";
+import Grid from "components/grid";
+import ProductGridItems from "components/layout/product-grid-items";
+import Collections from "components/layout/search/collections";
+import FilterList from "components/layout/search/filter";
 
-import { defaultSort, sorting } from 'lib/constants';
-import { getCollection, getCollectionProducts } from 'lib/shopware';
-import { transformHandle } from 'lib/shopware/transform';
+import { defaultSort, sorting } from "lib/constants";
+import { getCollection, getCollectionProducts } from "lib/shopware";
+import { transformHandle } from "lib/shopware/transform";
 
 export async function generateMetadata({
-  params
+  params,
 }: {
   params: Promise<{ collection: string }>;
 }): Promise<Metadata> {
   const { collection: collectionParamName } = await params;
 
   // see https://github.com/facebook/react/issues/25994
-  const collectionName = decodeURIComponent(transformHandle(collectionParamName ?? ''));
-  if (collectionName.includes('.js.map')) {
+  const collectionName = decodeURIComponent(
+    transformHandle(collectionParamName ?? ""),
+  );
+  if (collectionName.includes(".js.map")) {
     return {};
   }
 
@@ -31,47 +33,50 @@ export async function generateMetadata({
   return {
     title: collection.seo?.title || collection.title,
     description:
-      collection.seo?.description || collection.description || `${collection.title} products`,
+      collection.seo?.description ||
+      collection.description ||
+      `${collection.title} products`,
     openGraph: collection.featuredImage
       ? {
           images: [
             {
-              url: collection.featuredImage
-            }
-          ]
+              url: collection.featuredImage,
+            },
+          ],
         }
-      : null
+      : null,
   };
 }
 
 export default async function CategoryPage({
   params,
-  searchParams
+  searchParams,
 }: {
   params: Promise<{ collection: string }>;
   searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const { collection } = await params;
   const { sort, page } = (await searchParams) as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { sortKey, reverse } =
+    sorting.find((item) => item.slug === sort) || defaultSort;
 
   // see https://github.com/facebook/react/issues/25994
-  const collectionName = decodeURIComponent(transformHandle(collection ?? ''));
-  if (collectionName.includes('.js.map')) {
+  const collectionName = decodeURIComponent(transformHandle(collection ?? ""));
+  if (collectionName.includes(".js.map")) {
     return null;
   }
 
   const { products, total, limit } = await getCollectionProducts({
     collection: collectionName,
-    page: page ? parseInt(page) : 1,
+    page: page ? Number.parseInt(page) : 1,
     sortKey,
-    reverse
+    reverse,
   });
 
   return (
     <section>
       {products.length === 0 ? (
-        <p className="py-3 text-lg">{`No products found in this collection`}</p>
+        <p className="py-3 text-lg">No products found in this collection</p>
       ) : (
         <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
           <div className="order-first w-full flex-none md:max-w-[125px]">
@@ -89,7 +94,7 @@ export default async function CategoryPage({
                 <Pagination
                   itemsPerPage={limit}
                   itemsTotal={total}
-                  currentPage={page ? parseInt(page) - 1 : 0}
+                  currentPage={page ? Number.parseInt(page) - 1 : 0}
                 />
               </nav>
             ) : null}

app/search/(collection)/opengraph-image.tsx

@@ -1,13 +1,21 @@
 import OpengraphImage from "components/opengraph-image";
 import { getCollection } from "lib/shopware";
 
+export const runtime = "edge";
+
 export default async function Image({
   params,
 }: {
-  params: { collection: string };
+  params: { collection: string[] };
 }) {
-  const collection = await getCollection(params.collection);
-  const title = collection?.seo?.title || collection?.title;
+  const collectionPath = params.collection
+    ? Array.isArray(params.collection)
+      ? params.collection.join("/")
+      : ""
+    : "";
+  const collection =
+    collectionPath !== "" ? await getCollection(collectionPath) : null;
+  const title = collection?.seo?.title || collection?.title || "";
 
   return await OpengraphImage({ title });
 }

components/opengraph-image.tsx

@@ -1,7 +1,5 @@
 import { ImageResponse } from "next/og";
 import LogoIcon from "./icons/logo";
-import { join } from "path";
-import { readFile } from "fs/promises";
 
 export type Props = {
   title?: string;
@@ -17,9 +15,6 @@ export default async function OpengraphImage(
     ...props,
   };
 
-  const file = await readFile(join(process.cwd(), "./fonts/Inter-Bold.ttf"));
-  const font = Uint8Array.from(file).buffer;
-
   return new ImageResponse(
     (
       <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
@@ -35,7 +30,9 @@ export default async function OpengraphImage(
       fonts: [
         {
           name: "Inter",
-          data: font,
+          data: await fetch(
+            new URL("../fonts/Inter-Bold.ttf", import.meta.url),
+          ).then((res) => res.arrayBuffer()),
           style: "normal",
           weight: 700,
         },