Updates logo and fixes OG images

app/[page]/page.tsx

@@ -21,13 +21,6 @@ export async function generateMetadata({
     title: page.seo?.title || page.title,
     description: page.seo?.description || page.bodySummary,
     openGraph: {
-      images: [
-        {
-          url: `/api/og?title=${encodeURIComponent(page.title)}`,
-          width: 1200,
-          height: 630
-        }
-      ],
       publishedTime: page.createdAt,
       modifiedTime: page.updatedAt,
       type: 'article'

app/page.tsx

@@ -8,13 +8,6 @@ export const runtime = 'edge';
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
   openGraph: {
-    images: [
-      {
-        url: `/api/og?title=${encodeURIComponent(process.env.SITE_NAME || '')}`,
-        width: 1200,
-        height: 630
-      }
-    ],
     type: 'website'
   }
 };

components/grid/tile.tsx

@@ -31,6 +31,7 @@ export function GridTileImage({
       )}
     >
       {props.src ? (
+        // eslint-disable-next-line jsx-a11y/alt-text
         <Image
           className={clsx('relative h-full w-full object-contain', {
             'transition duration-300 ease-in-out hover:scale-105': isInteractive

components/icons/logo.tsx

@@ -1,21 +1,16 @@
 import clsx from 'clsx';
 
-export default function LogoIcon({ className }: { className?: string }) {
+export default function LogoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       aria-label={`${process.env.SITE_NAME} logo`}
-      viewBox="0 0 32 32"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={clsx('h-4 w-4', className)}
+      viewBox="0 0 32 28"
+      {...props}
+      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
     >
-      <path
-        className=" fill-black dark:fill-white"
-        d="M19.1999 7.59974L16 2L0 30H6.32501L19.1999 7.59974ZM23.2351 14.6614L20.035 20.3476L22.3566 24.4108H17.7482L14.6025 30H32L23.2351 14.6614Z"
-      />
+      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
+      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
     </svg>
   );
 }

components/logo-square.tsx

@@ -5,14 +5,19 @@ export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
   return (
     <div
       className={clsx(
-        'flex flex-none items-center justify-center border border-neutral-200 dark:border-neutral-700',
+        'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
         {
           'h-[40px] w-[40px] rounded-xl': !size,
           'h-[30px] w-[30px] rounded-lg': size === 'sm'
         }
       )}
     >
-      <LogoIcon className="h-3 w-3" />
+      <LogoIcon
+        className={clsx({
+          'h-[16px] w-[16px]': !size,
+          'h-[10px] w-[10px]': size === 'sm'
+        })}
+      />
     </div>
   );
 }

components/opengraph-image.tsx

@@ -1,4 +1,5 @@
 import { ImageResponse } from 'next/server';
+import LogoIcon from './icons/logo';
 
 export type Props = {
   title?: string;
@@ -15,15 +16,9 @@ export default async function OpengraphImage(props?: Props): Promise<ImageRespon
   return new ImageResponse(
     (
       <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
-        <svg viewBox="0 0 32 32" width="140">
-          <rect width="100%" height="100%" rx="16" fill="white" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            fill="black"
-            d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-          />
-        </svg>
+        <div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl">
+          <LogoIcon width="64" height="58" fill="white" />
+        </div>
         <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
       </div>
     ),