Feature/link image upgrade (#214)

* rm legacy behavior on links * convert image * image adjustments * image optimization * fonts * capitalization * tailwind
FormidableLabs · Dec 11, 2023 · 88878ee · 88878ee · vercel · Dec 11, 2023
1 parent d97b7a6
commit 88878ee
Show file tree

Hide file tree

Showing 19 changed files with 114 additions and 122 deletions.
diff --git a/packages/nextjs/app/global.css b/packages/nextjs/app/global.css
@@ -6,78 +6,6 @@ body {
   @apply bg-secondary;
 }
 
-/* Cabinet Grotesk */
-/* See: https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,400,300&display=swap */
-/* See: https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets */
-@font-face {
-  font-family: 'Cabinet Grotesk';
-  src: url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.woff2') format('woff2'),
-       url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.woff') format('woff'),
-       url('//cdn.fontshare.com/wf/7GWNQ5AHAZORLOWZ7ELKPLOIQITAR5S5/NYLYMGXMB4RANWVNJSIHG2IKPZ44CN5E/MT4CWVHB3N2C6KFUZ75QK4JQ2FYK4J4M.ttf') format('truetype');
-  font-weight: 300;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Cabinet Grotesk';
-  src: url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff2') format('woff2'),
-       url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff') format('woff'),
-       url('//cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Cabinet Grotesk';
-  src: url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff2') format('woff2'),
-       url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff') format('woff'),
-       url('//cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.ttf') format('truetype');
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Cabinet Grotesk';
-  src: url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff2') format('woff2'),
-       url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff') format('woff'),
-       url('//cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-  font-style: normal;
-}
-
-
-@font-face {
-  font-family: "JeanLuc";
-  src: url('../assets/fonts/jeanluc/jeanlucweb-bold.woff');
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JeanLuc";
-  src: url('../assets/fonts/jeanluc/jeanlucweb-thin.woff');
-  font-weight: auto;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url('../assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2');
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url('../assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2');
-  font-weight: auto;
-  font-style: normal;
-}
-
 code {
   @apply rounded-md bg-black/5 px-1.5 py-0.5;
   font-family: 'JetBrains Mono', monospace;

diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -4,6 +4,7 @@ import { Header } from "components/Header/Header";
 import { Metadata } from "next";
 import { CartProvider } from "components/CartContext";
 import { AnimatePresence, MotionConfig } from "./ui/framer";
+import localFont from "next/font/local";
 
 export const metadata: Metadata = {
   title: "Home",
@@ -14,9 +15,51 @@ export const viewport = {
   width: "device-width",
 };
 
+const cabinetFont = localFont({
+  src: [
+    {
+      path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-300.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-400.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-500.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../assets/fonts/cabinetgrotesk/cabinetgrotesk-700.woff2",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-cabinet",
+});
+
+const jeanLuc = localFont({
+  src: [
+    {
+      path: "../assets/fonts/jeanluc/jeanlucweb-bold.woff",
+      weight: "bold",
+      style: "normal",
+    },
+    {
+      path: "../assets/fonts/jeanluc/jeanlucweb-thin.woff",
+      weight: "normal",
+      style: "normal",
+    },
+  ],
+  variable: "--font-jeanLuc",
+});
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={`${cabinetFont.variable} ${jeanLuc.variable}`}>
       <body>
         <MotionConfig reducedMotion="user">
           <CartProvider>

diff --git a/packages/nextjs/app/migration/about.tsx b/packages/nextjs/app/migration/about.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { NextPage } from "next";
-import NextImage from "next/legacy/image";
+import NextImage from "next/image";
 
 import Link from "next/link";
 import { BreadIcon } from "shared-ui";
@@ -60,14 +60,13 @@ const AboutPage: NextPage = () => {
         </div>
         <div className="order-2">
           <NextImage
+            alt="big picture diagram"
             src={require("../../../../docs/img/big-picture.png")}
             loader={localImageLoader}
-            layout="intrinsic"
             width={DIAGRAM_WIDTH}
             height={DIAGRAM_HEIGHT}
-            objectFit="contain"
-            objectPosition="center"
-            className="rounded-2xl"
+            className="rounded-2xl max-w-full h-auto object-contain object-center"
+            priority
           />
         </div>
         <div className="order-3 lg:col-span-2 flex flex-col gap-9 justify-between">
@@ -162,14 +161,12 @@ const AboutPage: NextPage = () => {
                   </p>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-9 text-primary">
                     <NextImage
+                      alt="cache diagram"
                       src={require("../../../../docs/img/caching-diagram.png")}
                       loader={localImageLoader}
-                      layout="intrinsic"
                       width={FASTLY_WIDTH}
                       height={FASTLY_HEIGHT}
-                      objectFit="contain"
-                      objectPosition="center"
-                      className="rounded-2xl"
+                      className="rounded-2xl max-w-full h-auto object-contain object-center"
                     />
                     <div>
                       <div>

diff --git a/packages/nextjs/app/migration/home-page.tsx b/packages/nextjs/app/migration/home-page.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { NextPage } from "next";
 import { FiArrowRight } from "react-icons/fi";
 import Link from "next/link";
-import NextImage from "next/legacy/image";
+import NextImage from "next/image";
 
 import { Button, FeaturedQuote } from "../ui/shared-ui";
 import { localImageLoader } from "utils/localImageLoader";
@@ -28,18 +28,16 @@ const Home: NextPage<PageProps> = ({ data }) => {
         <div className="flex justify-between items-center py-9">
           <div className="max-w-[600px]">
             <h1 className="text-primary text-h1">Formidable breads for your daily life.</h1>
-            <Link href="/products" legacyBehavior>
-              <Button as="a" variant="secondary" className="inline-flex items-center mt-6">
-                <FiArrowRight size={24} className="mr-2" /> Show now
-              </Button>
-            </Link>
+            <Button as={Link} href="/products" variant="secondary" className="inline-flex items-center mt-6">
+              <FiArrowRight size={24} className="mr-2" /> Show now
+            </Button>
           </div>
 
           <span className="hidden sm:block">
             <Image
               width={600}
               height={600}
-              className="rounded-2xl"
+              className="rounded-2xl aspect-square"
               src={data?.products[0].images?.[0] ?? ""}
               alt={data?.products[0].name ?? ""}
             />
@@ -50,11 +48,9 @@ const Home: NextPage<PageProps> = ({ data }) => {
       <TitleBanner>Our bestsellers</TitleBanner>
       <section className="container py-9 flex flex-col gap-9">
         <FeaturedList items={data?.products} />
-        <Link href="/products" legacyBehavior>
-          <Button as="a" variant="primary" className="w-full inline-block text-center">
-            Show all breads
-          </Button>
-        </Link>
+        <Button as={Link} href="/products" variant="primary" className="w-full inline-block text-center">
+          Show all breads
+        </Button>
       </section>
 
       <FeaturedQuote />
@@ -70,9 +66,8 @@ const Home: NextPage<PageProps> = ({ data }) => {
             <NextImage
               src={featuredImg}
               loader={localImageLoader}
-              layout="intrinsic"
               alt="featured image"
-              className="rounded-full overflow-hidden aspect-square"
+              className="rounded-full overflow-hidden aspect-square max-w-full h-auto"
             />
           </div>
           <div className="flex-1 text-secondary">

diff --git a/packages/nextjs/app/migration/products/[slug].tsx b/packages/nextjs/app/migration/products/[slug].tsx
@@ -110,7 +110,9 @@ const PageBody = ({ variant, product }: { product?: ProductDetail; variant?: Pro
     <div className="container">
       <div className="grid md:grid-cols-2 gap-6">
         <div className="md:row-span-2 order-2 md:order-1">
-          {variant?.images && <ImageCarousel productImages={variant?.images} />}
+          {variant?.images && (
+            <ImageCarousel sizes="(max-width: 768px) 100vw, 50vw" imagePriority productImages={variant?.images} />
+          )}
         </div>
         <div className="text-primary order-1 md:order-2 self-end">
           <h4 className="text-h4 font-medium mb-2">{product?.name}</h4>

diff --git a/packages/nextjs/app/migration/products/index.tsx b/packages/nextjs/app/migration/products/index.tsx
@@ -102,8 +102,8 @@ const ProductsPage: NextPage<ProductsPageProps> = ({
                     )}
                     key={productNames}
                   >
-                    {variants.map((variant) => (
-                      <Product key={variant._id} item={variant} />
+                    {variants.map((variant, index) => (
+                      <Product key={variant._id} item={variant} priorityImage={index === 0} />
                     ))}
                     {/* Add padder items when on page > 1 so pagination bar isn't moving around */}
                     {+(query?.get("page") || 1) > 1 &&

diff --git a/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-300.woff2 b/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-300.woff2
diff --git a/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-400.woff2 b/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-400.woff2
diff --git a/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-500.woff2 b/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-500.woff2
diff --git a/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-700.woff2 b/packages/nextjs/assets/fonts/cabinetgrotesk/cabinetgrotesk-700.woff2
diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -13,6 +13,8 @@ export interface CardProps {
   imageProps: {
     src: SanityImageSource;
     alt: string;
+    priority?: boolean;
+    sizes?: string;
     containerClassName?: string;
   };
 }
@@ -35,7 +37,14 @@ export const Card = ({
       href={to}
       className={className}
     >
-      <Image layout="fill" src={imageProps.src} alt={imageProps.alt} objectFit="cover" objectPosition="center" />
+      <Image
+        fill
+        src={imageProps.src}
+        alt={imageProps.alt}
+        sizes={imageProps.sizes}
+        priority={imageProps.priority}
+        className="object-cover object-center"
+      />
     </BaseCard>
   );
 };
diff --git a/packages/nextjs/components/CategoryList.tsx b/packages/nextjs/components/CategoryList.tsx
@@ -10,7 +10,7 @@ export const CategoryList = ({ items }: CategoryListProps) => {
 
   return (
     <ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-9">
-      {items.map((category) => (
+      {items.map((category, index) => (
         <li key={category._id}>
           <Card
             to={{
@@ -20,8 +20,10 @@ export const CategoryList = ({ items }: CategoryListProps) => {
               },
             }}
             imageProps={{
+              priority: index === 0,
               src: category.images?.[0]?.images ?? "",
               alt: category.images?.[0]?.name ?? "",
+              sizes: "(max-width: 768px) 100vw, 50vw",
               containerClassName: "aspect-[16/10]",
             }}
             title={category.name ?? ""}

diff --git a/packages/nextjs/components/FeaturedList.tsx b/packages/nextjs/components/FeaturedList.tsx
@@ -35,6 +35,7 @@ export const FeaturedList = ({ items }: Props) => {
               src: item.variants?.[0]?.images?.[0] ?? "",
               alt: item.variants?.[0]?.name ?? "",
               containerClassName: "aspect-square",
+              sizes: "(max-width: 768px) 100vw, 33vw",
             },
           };
         } else if (item._type === "category") {
@@ -52,6 +53,7 @@ export const FeaturedList = ({ items }: Props) => {
                 src: item.images?.[0]?.images ?? "",
                 alt: item.images?.[0]?.name ?? "",
                 containerClassName: "aspect-[16/10]",
+                sizes: "(max-width: 768px) 100vw, 33vw",
               },
             };
           }

diff --git a/packages/nextjs/components/Image.tsx b/packages/nextjs/components/Image.tsx
@@ -1,7 +1,7 @@
-import type { ImageProps, ImageLoaderProps } from "next/legacy/image";
+import type { ImageProps, ImageLoaderProps } from "next/image";
 import * as React from "react";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types";
-import NextImage from "next/legacy/image";
+import NextImage from "next/image";
 import { imageBuilder } from "utils/sanityClient";
 
 interface Props extends Omit<ImageProps, "src"> {
@@ -21,14 +21,16 @@ const sanityLoader = (sanitySrc: SanityImageSource, { width, quality }: ImageLoa
 
 export const Image = (props: Props) => {
   const baseURL = "https://cdn.sanity.io/images/";
+  const { className, ...rest } = props;
 
   if (!props.src) return null;
 
   return (
     <NextImage
       loader={(p) => sanityLoader(props.src, p)}
-      {...props}
+      {...rest}
       src={imageBuilder.image(props?.src).url()?.toString().replace(baseURL, "") ?? ""}
+      className={`${className} max-w-full`}
     />
   );
 };
diff --git a/packages/nextjs/components/ImageCarousel.tsx b/packages/nextjs/components/ImageCarousel.tsx
@@ -5,15 +5,19 @@ import { ImageCarousel as BaseImageCarousel } from "shared-ui";
 
 export type ImageCarouselProps = {
   productImages: ProductImage[];
+  imagePriority?: boolean;
+  sizes?: string;
 };
 
-export const ImageCarousel = ({ productImages }: ImageCarouselProps) => {
+export const ImageCarousel = ({ productImages, imagePriority, sizes }: ImageCarouselProps) => {
   return (
     <BaseImageCarousel>
       {productImages?.map((image) => (
         <Image
           className="rounded-2xl aspect-square w-full"
-          layout="fill"
+          fill
+          priority={imagePriority}
+          sizes={sizes}
           key={image?._key}
           src={image ?? ""}
           alt={image?.name ?? ""}