Remove custom loader for now (#112)

* Remove custom loader for now * Mark images as legacy * Migrate to next 13 images * Prettier Signed-off-by: Ayase Minori <[email protected]> --------- Signed-off-by: Ayase Minori <[email protected]>
vignetteapp · Apr 18, 2024 · 5dae4d7 · 5dae4d7
1 parent cd0df11
commit 5dae4d7
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 49 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,6 @@
 {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true,
-    "eslint.format.enable": true,
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -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
@@ -19,7 +19,15 @@ 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
@@ -11,6 +11,10 @@ const Profile: React.FC<{
     width={size}
     height={size}
     alt=""
+    style={{
+      maxWidth: `100%`,
+      height: `auto`,
+    }}
   />
 )
 

diff --git a/components/sections/MenuComp.tsx b/components/sections/MenuComp.tsx
@@ -95,6 +95,10 @@ const MenuComp = () => {
             width={1400}
             height={800}
             alt=""
+            style={{
+              maxWidth: `100%`,
+              height: `auto`,
+            }}
           />
         </motion.div>
       </Parallax>

diff --git a/components/sections/Partners.tsx b/components/sections/Partners.tsx
@@ -26,6 +26,10 @@ const Partners = () => {
                 alt={partner.name}
                 width={partner.imgWidth}
                 height={partner.imgHeight}
+                style={{
+                  maxWidth: `100%`,
+                  height: `auto`,
+                }}
               />
               {partner.darkImg && (
                 <div
@@ -42,6 +46,10 @@ const Partners = () => {
                     alt={partner.name}
                     width={partner.imgWidth}
                     height={partner.imgHeight}
+                    style={{
+                      maxWidth: `100%`,
+                      height: `auto`,
+                    }}
                   />
                 </div>
               )}

diff --git a/next.config.js b/next.config.js
@@ -6,8 +6,14 @@ module.exports = withContentlayer()({
   reactStrictMode: true,
 
   images: {
-    loader: process.env.NODE_ENV == 'production' ? 'custom' : 'default',
-    loaderFile: 'image-loader.js',
+    domains: [
+      'avatars.githubusercontent.com',
+      'fosshost.org',
+      'owo.whats-th.is',
+      'images.unsplash.com',
+      'yuri.might-be-super.fun',
+      'chito.ge',
+    ],
     formats: ['image/avif', 'image/webp'],
   },
   swcMinify: true,

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -39,6 +39,10 @@ const Custom404: NextPage = () => {
                   width={207}
                   height={45}
                   className="mx-auto"
+                  style={{
+                    maxWidth: `100%`,
+                    height: `auto`,
+                  }}
                 />
               </div>
 
@@ -63,6 +67,10 @@ const Custom404: NextPage = () => {
             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">

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/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

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -63,6 +63,10 @@ const PostLayout: NextPage<{ post: Post }> = ({ post }) => {
               className="rounded-md object-cover object-center "
               alt=""
               priority
+              style={{
+                maxWidth: `100%`,
+                height: `auto`,
+              }}
             />
           </a>
 
@@ -73,6 +77,10 @@ const PostLayout: NextPage<{ post: Post }> = ({ post }) => {
               height={40}
               alt=""
               className="rounded-full"
+              style={{
+                maxWidth: `100%`,
+                height: `auto`,
+              }}
             />
             <div className="pl-3">
               <span className="font-semibold">{post.author}</span>
@@ -120,8 +128,8 @@ const PostLayout: NextPage<{ post: Post }> = ({ post }) => {
         </Link>
       </div>
       {/* <div className="relative left-0 h-80 w-80  lg:top-24 2xl:absolute">
-      <Image src={circles} layout="fill" priority alt="" />
-    </div> */}
+    <Image src={circles} layout="fill" priority alt="" />
+  </div> */}
       <Footer />
     </>
   )

diff --git a/pages/blog/category/[category].tsx b/pages/blog/category/[category].tsx
@@ -67,6 +67,10 @@ function PostCard(post: Post) {
           quality={100}
           className="rounded-md object-cover object-center transition duration-300 hover:scale-105"
           alt=""
+          style={{
+            maxWidth: `100%`,
+            height: `auto`,
+          }}
         />
       </Link>
       <div className="w-full py-4 ">
@@ -87,6 +91,10 @@ function PostCard(post: Post) {
               height={40}
               alt=""
               className="rounded-full"
+              style={{
+                maxWidth: `100%`,
+                height: `auto`,
+              }}
             />
           </Link>
           <div className="pl-2 text-sm">

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -41,6 +41,10 @@ function PostCard(post: Post) {
           quality={100}
           className="rounded-md object-cover object-center transition duration-300 hover:scale-105"
           alt=""
+          style={{
+            maxWidth: `100%`,
+            height: `auto`,
+          }}
         />
       </Link>
       <div className="w-full py-4 ">
@@ -67,6 +71,10 @@ function PostCard(post: Post) {
               height={40}
               alt=""
               className="rounded-full"
+              style={{
+                maxWidth: `100%`,
+                height: `auto`,
+              }}
             />
           </Link>
           <div className="pl-2 text-sm">
@@ -157,6 +165,10 @@ const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
                 className="rounded-md object-cover object-center transition duration-300 hover:scale-105"
                 alt=""
                 priority
+                style={{
+                  maxWidth: `100%`,
+                  height: `auto`,
+                }}
               />
             </Link>
             <div className="py-4 md:px-8 md:py-8 lg:w-[32rem]">
@@ -194,6 +206,10 @@ const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
                     height={40}
                     alt=""
                     className="rounded-full"
+                    style={{
+                      maxWidth: `100%`,
+                      height: `auto`,
+                    }}
                   />
                 </Link>
                 <div className="pl-2 text-sm">

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -87,7 +87,16 @@ const Home: NextPage<cache> = () => {
           <div className="flex h-96 w-[16rem] flex-col justify-between rounded-2xl border p-8 px-10 text-center shadow dark:border-neutral-700">
             <div>
               <div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-full border bg-pinkRed dark:border-none dark:border-neutral-700">
-                <Image src={envelope} width={48} height={48} alt="" />
+                <Image
+                  src={envelope}
+                  width={48}
+                  height={48}
+                  alt=""
+                  style={{
+                    maxWidth: `100%`,
+                    height: `auto`,
+                  }}
+                />
               </div>
               <h3 className=" mt-4 text-xl font-bold">{t(`anything-else`)}</h3>
               <p className="mx-auto mt-2 max-w-[18rem] text-center text-sm">

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -101,6 +101,10 @@ const Home: NextPage<cache> = ({ contributors }) => {
                       width={1280}
                       height={720}
                       quality={90}
+                      style={{
+                        maxWidth: `100%`,
+                        height: `auto`,
+                      }}
                     />
                   </div>
                 </div>
@@ -124,8 +128,8 @@ const Home: NextPage<cache> = ({ contributors }) => {
               {t(`extensions-in-development`)}
             </p>
             {/* <Link href="/extensions" passHref>
-            <a className="button"> {t(`explore-extensions-button`)}</a>
-          </Link> */}
+          <a className="button"> {t(`explore-extensions-button`)}</a>
+        </Link> */}
           </div>
           <div className=" mt-8" title="Coming soon....">
             <Marquee speed={50} gradientWidth={0}>
@@ -163,6 +167,10 @@ const Home: NextPage<cache> = ({ contributors }) => {
                   height={64}
                   className="rounded-full"
                   alt=""
+                  style={{
+                    maxWidth: `100%`,
+                    height: `auto`,
+                  }}
                 />
               </div>
             ))}