fix: Improve og images (#21)

* Improve og images * Adjust disable comment
mirumee · Oct 22, 2024 · bd5861b · bd5861b
1 parent 9016a06
commit bd5861b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 87 deletions.
diff --git a/apps/storefront/messages/en-GB.json b/apps/storefront/messages/en-GB.json
@@ -1,7 +1,8 @@
 {
   "home": {
     "title": "Homepage",
-    "description": "Nimara's headless architecture, built on Saleor, provides a flexible, cost-effective solution for online businesses. It’s ready to deploy with minimal setup, supports seamless integration of new providers, and features an intuitive UI for easy storefront customization and management."
+    "description": "Nimara's headless architecture, built on Saleor, provides a flexible, cost-effective solution for online businesses. It’s ready to deploy with minimal setup, supports seamless integration of new providers, and features an intuitive UI for easy storefront customization and management.",
+    "homepage-preview": "Homepage preview"
   },
   "locale": {
     "region": "Region",
@@ -35,7 +36,8 @@
     "sort-by": "Sort by",
     "all-products-link": "All products link",
     "open-search": "Open search",
-    "search-label": "Search"
+    "search-label": "Search",
+    "search-preview": "Search preview"
   },
   "common": {
     "checkout": "Checkout",

diff --git a/apps/storefront/public/og-hp.png b/apps/storefront/public/og-hp.png
diff --git a/apps/storefront/src/app/[locale]/(main)/opengraph-image.tsx b/apps/storefront/src/app/[locale]/(main)/opengraph-image.tsx
diff --git a/apps/storefront/src/app/[locale]/(main)/page.tsx b/apps/storefront/src/app/[locale]/(main)/page.tsx
@@ -20,6 +20,16 @@ export async function generateMetadata(_params: {
   return {
     title: t("title"),
     description: t("description"),
+    openGraph: {
+      images: [
+        {
+          url: "/og-hp.png",
+          width: 1200,
+          height: 630,
+          alt: t("homepage-preview"),
+        },
+      ],
+    },
   };
 }
 

diff --git a/apps/storefront/src/app/[locale]/(main)/products/[slug]/opengraph-image.tsx b/apps/storefront/src/app/[locale]/(main)/products/[slug]/opengraph-image.tsx
@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/og";
 
+import { ReactComponent as NimaraLogo } from "@/assets/nimara-logo.svg";
 import { CACHE_TTL } from "@/config";
 import { clientEnvs } from "@/envs/client";
 import { getCurrentRegion } from "@/regions/server";
@@ -47,16 +48,40 @@ export default async function Image({
 
   return new ImageResponse(
     (
-      <div tw="flex w-full h-full items-center justify-center bg-neutral-100">
-        <div style={{ display: "flex" }}>
-          <div
+      <div
+        tw="flex w-full h-full"
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <div
+          style={{
+            width: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <NimaraLogo width={276} height={56} />
+        </div>
+        <div
+          style={{
+            width: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={data?.product?.images[0]?.url}
+            alt={data?.product?.name}
             style={{
-              backgroundImage: `url(${data?.product?.images[0]?.url})`,
-              height: "630px",
-              width: "630px",
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "center",
-              backgroundSize: "contain",
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
             }}
           />
         </div>

diff --git a/apps/storefront/src/app/[locale]/(main)/search/page.tsx b/apps/storefront/src/app/[locale]/(main)/search/page.tsx
@@ -31,6 +31,16 @@ export async function generateMetadata({ searchParams }: PageProps) {
     title: searchParams.q
       ? t("search-for", { query: searchParams.q })
       : t("search-results"),
+    openGraph: {
+      images: [
+        {
+          url: "/og-hp.png",
+          width: 1200,
+          height: 630,
+          alt: t("search-preview"),
+        },
+      ],
+    },
   };
 }
 

diff --git a/packages/codegen/schema.ts b/packages/codegen/schema.ts
@@ -14838,7 +14838,7 @@ export type MutationTransactionCreateArgs = {
 
 
 export type MutationTransactionEventReportArgs = {
-  amount: Scalars['PositiveDecimal']['input'];
+  amount?: InputMaybe<Scalars['PositiveDecimal']['input']>;
   availableActions?: InputMaybe<Array<TransactionActionEnum>>;
   externalUrl?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['ID']['input']>;
@@ -28600,7 +28600,8 @@ export type TransactionEventReportErrorCode =
   | 'GRAPHQL_ERROR'
   | 'INCORRECT_DETAILS'
   | 'INVALID'
-  | 'NOT_FOUND';
+  | 'NOT_FOUND'
+  | 'REQUIRED';
 
 /**
  * Represents possible event types.