Migrate to next 13 images

vignetteapp · Apr 18, 2024 · 4b559ee · 4b559ee
1 parent 0c00c9b
commit 4b559ee
Show file tree

Hide file tree

Showing 12 changed files with 597 additions and 553 deletions.
diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -1,5 +1,5 @@
 import logo from 'public/images/logo.png'
-import Image from "next/legacy/image"
+import Image from "next/image"
 import logoDark from 'public/images/logo-dark.png'
 
 import logosquare from 'public/images/logo-square.png'
@@ -19,34 +19,15 @@ const Logo = ({
   <>
     {forceLight ? (
       <div className={`${className} flex dark:hidden`}>
-        <Image
-          src={logoDark}
-          priority
-          width={width}
-          height={height}
-          layout="fixed"
-          alt=""
-        />
+        <Image src={logoDark} priority width={width} height={height} alt="" />
       </div>
     ) : (
       <>
         <div className={`${className} flex dark:hidden`}>
-          <Image
-            src={logo}
-            width={width}
-            height={height}
-            layout="fixed"
-            alt=""
-          />
+          <Image src={logo} width={width} height={height} alt="" />
         </div>
         <div className={`${className} hidden dark:flex`}>
-          <Image
-            src={logoDark}
-            width={width}
-            height={height}
-            layout="fixed"
-            alt=""
-          />
+          <Image src={logoDark} width={width} height={height} alt="" />
         </div>
       </>
     )}
@@ -55,22 +36,10 @@ const Logo = ({
 const LogoSquare: React.FC<{ size: number }> = ({ size }) => (
   <>
     <div className="flex dark:hidden">
-      <Image
-        src={logosquare}
-        width={size}
-        height={size}
-        layout="fixed"
-        alt=""
-      />
+      <Image src={logosquare} width={size} height={size} alt="" />
     </div>
     <div className="hidden dark:flex">
-      <Image
-        src={logosquareDark}
-        width={size}
-        height={size}
-        layout="fixed"
-        alt=""
-      />
+      <Image src={logosquareDark} width={size} height={size} alt="" />
     </div>
   </>
 )

diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import Image, { ImageProps } from "next/legacy/image"
+import Image, { ImageProps } from "next/image"
 import { ReactNode } from 'react'
 
 interface Props {
@@ -19,7 +19,14 @@ const CustomLink = (props: Props) => {
 }
 
 const RoundedImage = (props: ImageProps) => {
-  return <Image {...props} />
+  return (
+    <Image
+      {...props}
+      style={{
+        maxWidth: "100%",
+        height: "auto"
+      }} />
+  );
 }
 
 const MDXComponents = {

diff --git a/components/Profile.tsx b/components/Profile.tsx
@@ -1,4 +1,4 @@
-import Image, { StaticImageData } from "next/legacy/image"
+import Image, { StaticImageData } from "next/image"
 
 const Profile: React.FC<{
   size: number
@@ -11,7 +11,10 @@ const Profile: React.FC<{
     width={size}
     height={size}
     alt=""
-  />
+    style={{
+      maxWidth: "100%",
+      height: "auto"
+    }} />
 )
 
 export default Profile
diff --git a/components/sections/MenuComp.tsx b/components/sections/MenuComp.tsx
@@ -1,4 +1,4 @@
-import Image from "next/legacy/image"
+import Image from "next/image"
 import { Parallax } from 'components'
 import { motion } from 'framer-motion'
 import { useState, useEffect } from 'react'
@@ -95,11 +95,14 @@ const MenuComp = () => {
             width={1400}
             height={800}
             alt=""
-          />
+            style={{
+              maxWidth: "100%",
+              height: "auto"
+            }} />
         </motion.div>
       </Parallax>
     </div>
-  )
+  );
 }
 
 export default MenuComp
diff --git a/components/sections/Partners.tsx b/components/sections/Partners.tsx
@@ -1,6 +1,6 @@
 import partners from 'data/partners'
 import { useTranslation } from 'next-i18next'
-import Image from "next/legacy/image"
+import Image from "next/image"
 import Link from 'next/link'
 
 const Partners = () => {
@@ -26,7 +26,10 @@ const Partners = () => {
                 alt={partner.name}
                 width={partner.imgWidth}
                 height={partner.imgHeight}
-              />
+                style={{
+                  maxWidth: "100%",
+                  height: "auto"
+                }} />
               {partner.darkImg && (
                 <div
                   className={`${
@@ -42,7 +45,10 @@ const Partners = () => {
                     alt={partner.name}
                     width={partner.imgWidth}
                     height={partner.imgHeight}
-                  />
+                    style={{
+                      maxWidth: "100%",
+                      height: "auto"
+                    }} />
                 </div>
               )}
             </div>
@@ -64,6 +70,6 @@ const Partners = () => {
         </Link>
       </div>
     </div>
-  )
+  );
 }
 export default Partners
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,6 +1,6 @@
 import type { GetStaticProps, NextPage } from 'next'
 import Link from 'next/link'
-import Image from "next/legacy/image"
+import Image from "next/image"
 import Blahaj from 'public/images/blahaj.jpg'
 import text404 from 'public/images/404text.png'
 
@@ -18,82 +18,86 @@ const Custom404: NextPage = () => {
   console.log(path)
   const inConstruction = [`/features`, `/plugins`].includes(path as string)
 
-  return (
-    <>
-      <SEO
-        title={
-          inConstruction
-            ? `This page is currently being developed.`
-            : `You hit a dead end.`
-        }
-      />
-      <Nav />
-      <div className="container mt-24" id="content">
-        <div className="z-20 mx-auto  text-center ">
-          {!inConstruction ? (
-            <>
-              <div className="animation-flicker mt-4">
-                <Image
-                  src={text404}
-                  alt="404"
-                  width={207}
-                  height={45}
-                  className="mx-auto"
-                />
-              </div>
+  return <>
+    <SEO
+      title={
+        inConstruction
+          ? `This page is currently being developed.`
+          : `You hit a dead end.`
+      }
+    />
+    <Nav />
+    <div className="container mt-24" id="content">
+      <div className="z-20 mx-auto  text-center ">
+        {!inConstruction ? (
+          <>
+            <div className="animation-flicker mt-4">
+              <Image
+                src={text404}
+                alt="404"
+                width={207}
+                height={45}
+                className="mx-auto"
+                style={{
+                  maxWidth: "100%",
+                  height: "auto"
+                }} />
+            </div>
 
-              <h1 className="text-5xl font-semibold lg:text-6xl">
-                {t(`dead-end`)}
-              </h1>
-              <p className="my-5 mt-4 text-xl ">{t(`guide-back`)}</p>
-            </>
-          ) : (
-            <>
-              <h1 className="mt-8 text-3xl font-semibold lg:text-4xl">
-                {t(`in-construction`)}
-              </h1>
-              <p className="mt-4 text-lg">{t(`check-later`)}</p>
-              <p className="my-2 mb-4 text-sm lg:text-lg">
-                {t(`blahaj-while-waiting`)}
-              </p>
-            </>
-          )}
+            <h1 className="text-5xl font-semibold lg:text-6xl">
+              {t(`dead-end`)}
+            </h1>
+            <p className="my-5 mt-4 text-xl ">{t(`guide-back`)}</p>
+          </>
+        ) : (
+          <>
+            <h1 className="mt-8 text-3xl font-semibold lg:text-4xl">
+              {t(`in-construction`)}
+            </h1>
+            <p className="mt-4 text-lg">{t(`check-later`)}</p>
+            <p className="my-2 mb-4 text-sm lg:text-lg">
+              {t(`blahaj-while-waiting`)}
+            </p>
+          </>
+        )}
 
-          <Image
-            src={Blahaj}
-            alt=""
-            className=" my-2 mx-auto max-h-[26rem] w-auto rounded-xl border"
-          />
+        <Image
+          src={Blahaj}
+          alt=""
+          className=" my-2 mx-auto max-h-[26rem] w-auto rounded-xl border"
+          style={{
+            maxWidth: "100%",
+            height: "auto"
+          }} />
 
-          <div className="mx-auto mt-8 mb-8 flex flex-wrap justify-center gap-4">
-            <Button
-              type="primary"
-              className="whitespace-nowrap bg-pinkRed"
-              onClick={() => router.back()}
-            >
-              {t(`go-back`)}
-            </Button>
-
-            <Button
-              type="secondary"
-              href="https://www.ikea.com/us/en/p/blahaj-soft-toy-shark-90373590/"
-              className="whitespace-nowrap"
-            >
-              <span className="mx-auto">{t(`get-blahaj`)}</span>
-            </Button>
-          </div>
+        <div className="mx-auto mt-8 mb-8 flex flex-wrap justify-center gap-4">
+          <Button
+            type="primary"
+            className="whitespace-nowrap bg-pinkRed"
+            onClick={() => router.back()}
+          >
+            {t(`go-back`)}
+          </Button>
 
-          <a
-            href="https://twitter.com/niichi021"
-            className="pt-4 text-sm text-gray-700 dark:text-gray-300"
+          <Button
+            type="secondary"
+            href="https://www.ikea.com/us/en/p/blahaj-soft-toy-shark-90373590/"
+            className="whitespace-nowrap"
           >
-            {t(`image-sauce`)}
-          </a>
+            <span className="mx-auto">{t(`get-blahaj`)}</span>
+          </Button>
         </div>
+
+        <a
+          href="https://twitter.com/niichi021"
+          className="pt-4 text-sm text-gray-700 dark:text-gray-300"
+        >
+          {t(`image-sauce`)}
+        </a>
       </div>
-      <Footer />
-    </>
-  )
+    </div>
+    <Footer />
+  </>;
 }
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable prettier/prettier */
 import type { NextPage, GetStaticProps } from 'next'
-import Image from "next/legacy/image"
+import Image from "next/image"
 import Link from 'next/link'
 import ReactMarkdown from 'react-markdown'
 
@@ -107,7 +107,17 @@ const OpenSource: NextPage<pageProps> = ({
         </Fadein>
       </div>
       <Fadein className="mt-32 text-center ">
-        <Image src={repoIcon} alt="" quality={100} width={72} height={72} className="inline-block" />
+        <Image
+          src={repoIcon}
+          alt=""
+          quality={100}
+          width={72}
+          height={72}
+          className="inline-block"
+          style={{
+            maxWidth: "100%",
+            height: "auto"
+          }} />
 
         <h2 className="mt-8 text-2xl font-bold lg:text-3xl">
           {t(`section1-title`)}
@@ -127,7 +137,10 @@ const OpenSource: NextPage<pageProps> = ({
                   className="rounded-full"
                   src={user.profile}
                   alt=""
-                />
+                  style={{
+                    maxWidth: "100%",
+                    height: "auto"
+                  }} />
               </div>
 
             </Link>)
@@ -143,7 +156,16 @@ const OpenSource: NextPage<pageProps> = ({
         </p>
       </Fadein>
       <div className="container mt-12 text-center">
-        <Image src={donationImage}  className="inline-block" width={400} height={400} alt="" />
+        <Image
+          src={donationImage}
+          className="inline-block"
+          width={400}
+          height={400}
+          alt=""
+          style={{
+            maxWidth: "100%",
+            height: "auto"
+          }} />
         <h1 className="text-3xl font-bold"> {t(`section3-title`)}</h1>
         <p className="mx-auto mt-2 mb-2 max-w-[34em]">{t(`section3-p`)}</p>
         <button