Use Image for remote unsplash link

Also update API forwarding URL Need to find what discord url is used for profile pics for the final img migration
DreamExposure · Jan 23, 2025 · 05bdbb6 · 05bdbb6
1 parent 1b7980d
commit 05bdbb6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/next.config.js b/next.config.js
@@ -5,8 +5,18 @@ module.exports = {
       return [
           {
               source: '/api/:slug*',
-              destination: 'https://dev-api.discalbot.com/:slug*'
-          }
+              destination: 'https://dev.discalbot.com/api/:slug*'
+          },
       ]
-    }
+    },
+    images: {
+      remotePatterns: [
+          {
+              protocol: 'https',
+              hostname: "images.unsplash.com",
+              port: '',
+              search: ''
+          },
+      ],
+    },
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -9,6 +9,8 @@ import {
     CommandLineIcon,
     MegaphoneIcon,
 } from "@heroicons/react/24/outline";
+import Image from "next/image";
+import calendarOverviewScreenshotImage from "../public/screenshots/calendar-overview.png"
 
 function Hero(): JSX.Element {
     function Heading(): JSX.Element {
@@ -72,10 +74,13 @@ function Hero(): JSX.Element {
     function MainImage() {
         return <div
             className="relative w-full h-64 sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:h-full">
-            <img
+            <Image
                 className="absolute inset-0 w-full h-full object-cover"
-                src="https://images.unsplash.com/photo-1588453251771-cd919b362ed4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80"
+                src="https://images.unsplash.com/photo-1588453251771-cd919b362ed4"
                 alt="Calendar with muffins and coffee cup"
+                width={1152}
+                height={720}
+                priority
             />
         </div>
     }
@@ -107,9 +112,9 @@ function Example(): JSX.Element {
                 </p>
             </div>
             <div className="mt-12 -mb-10 sm:-mb-24 lg:-mb-80">
-                <img
+                <Image
                     className="rounded-lg shadow-xl ring-1 ring-black ring-opacity-5"
-                    src="/screenshots/calendar-overview.png"
+                    src={calendarOverviewScreenshotImage}
                     alt=""
                 />
             </div>
@@ -219,9 +224,9 @@ function CTA(): JSX.Element {
 
     function CTAImage(): JSX.Element {
         return <div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
-            <img className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top
+            <Image className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top
             sm:translate-x-16 lg:translate-y-20"
-                 src="/screenshots/calendar-overview.png"
+                 src={calendarOverviewScreenshotImage}
                  alt="App screenshot"
             />
         </div>