Migrate remaining images to Next.js

frontends/main/src/app-pages/AboutPage/AboutPage.tsx

@@ -9,6 +9,7 @@ import {
 } from "ol-components"
 import * as urls from "@/common/urls"
 import React from "react"
+import domeImage from "@/public/mit-dome-2.jpg"
 
 const WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER = "what-is-mit-learn"
 const NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER = "non-degree-learning"
@@ -86,7 +87,7 @@ const SubHeaderImage = styled.img({
   borderRadius: "8px",
   backgroundSize: "cover",
   backgroundPosition: "center",
-  backgroundImage: "url('/mit-dome-2.jpg')",
+  backgroundImage: `url(${domeImage.src})`,
   [theme.breakpoints.down("md")]: {
     height: "300px",
   },

frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx

@@ -105,11 +105,6 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
 
   return (
     <>
-      {/* TODO <MetaTags
-        title={channel.data?.title}
-        description={channel.data?.configuration.heading}
-        // no image for now. Channel images are svg and not suitable for social sharing
-      /> */}
       <StyledBannerBackground
         backgroundUrl={
           displayConfiguration?.banner_background ??

frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx

@@ -27,7 +27,7 @@ import Link from "next/link"
 import { useUserMe } from "api/hooks/user"
 import { useParams } from "next/navigation"
 import UserListListingComponent from "@/page-components/UserListListing/UserListListing"
-
+import backgroundImage from "@/public/images/backgrounds/user_menu_background.svg"
 import { ProfileEditForm } from "./ProfileEditForm"
 import { useProfileMeQuery } from "api/hooks/profile"
 import {
@@ -66,7 +66,7 @@ const DesktopOnly = styled.div(({ theme }) => ({
 
 const Background = styled.div(({ theme }) => ({
   backgroundColor: theme.custom.colors.lightGray1,
-  backgroundImage: "url('/images/backgrounds/user_menu_background.svg')",
+  backgroundImage: `url(${backgroundImage.src})`,
   backgroundAttachment: "fixed",
   backgroundRepeat: "no-repeat",
   height: "100%",

frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx

@@ -5,6 +5,7 @@ import { styled } from "ol-components"
 import { useProgramLettersDetail } from "api/hooks/programLetters"
 import { useParams } from "next/navigation"
 import { CkeditorDisplay } from "ol-ckeditor"
+import Image from "next/image"
 
 type RouteParams = {
   id: string
@@ -122,9 +123,10 @@ const ProgramLetterPage: React.FC = () => {
           />
         </div>
         <div className="letter-logo">
-          <img
+          <Image
             src={templateFields?.program_letter_logo?.meta?.download_url}
             alt=""
+            fill
           />
         </div>
       </ProgramLetterHeader>
@@ -139,9 +141,10 @@ const ProgramLetterPage: React.FC = () => {
           {templateFields?.program_letter_signatories?.map((signatory) => (
             <div key={signatory.id} className="signatory">
               <div className="sig-image">
-                <img
+                <Image
                   src={signatory.signature_image?.meta?.download_url}
                   alt="Signature"
+                  fill
                 />
               </div>
               <div className="name">
@@ -159,9 +162,10 @@ const ProgramLetterPage: React.FC = () => {
       <ProgramLetterFooter>
         <div className="program-footer">
           {templateFields?.program_letter_footer ? (
-            <img
+            <Image
               src={templateFields.program_letter_footer?.meta?.download_url}
               alt=""
+              fill
             />
           ) : (
             <p>MITx MicroMasters program in {templateFields?.title}</p>

frontends/main/src/components/MITLogoLink/MITLogoLink.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import Image from "next/image"
-import defaultLogo from "../../../public/mit-logo-learn.svg"
+import Link from "next/link"
+import defaultLogo from "@/public/mit-logo-learn.svg"
 
 interface Props {
   href?: string
@@ -15,15 +16,15 @@ const MITLogoLink: React.FC<Props> = ({
   alt = "MIT Learn Logo",
   className,
 }) => (
-  <a
-    href={href}
+  <Link
+    href={href || "/"}
     title="Link to Homepage"
     className={className}
     // eslint-disable-next-line react/no-unknown-property
     appzi-screenshot-exclude="true"
   >
     <Image src={logo || defaultLogo} alt={alt} fill />
-  </a>
+  </Link>
 )
 
 export default MITLogoLink

frontends/main/src/page-components/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import { Container, styled } from "ol-components"
 import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
 import * as urls from "@/common/urls"
 import React, { FunctionComponent } from "react"
-import footerLogo from "../../../public/images/mit-logo-transparent5.svg"
+import footerLogo from "@/public/images/mit-logo-transparent5.svg"
 
 const FooterContainer = styled.div(({ theme }) => ({
   display: "flex",

frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx

@@ -1,9 +1,8 @@
 import React from "react"
-
 import { RiAccountCircleFill } from "@remixicon/react"
-
 import { TruncateText, styled, theme } from "ol-components"
 import type { Attestation } from "api/v0"
+import Image from "next/image"
 
 type AttestantAvatarPosition = "start" | "end"
 type AttestantBlockColor = "light" | "dark"
@@ -139,7 +138,12 @@ const AttestantBlock: React.FC<AttestantBlockProps> = ({
         avatarStyle={avatar}
       >
         {attestation.avatar_medium ? (
-          <img src={attestation.avatar_medium} alt="" />
+          <Image
+            src={attestation.avatar_medium}
+            alt=""
+            width={40}
+            height={40}
+          />
         ) : (
           <StyledRiAccountCircleFill />
         )}

frontends/main/tsconfig.json

@@ -18,7 +18,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/public/*": ["./public/*"]
     },
     "target": "ESNext",
     "types": [

frontends/ol-components/src/components/Banner/Banner.stories.tsx

@@ -4,6 +4,7 @@ import { Banner } from "./Banner"
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs"
 import { Button } from "../Button/Button"
 import Typography from "@mui/material/Typography"
+import Image from "next/image"
 
 const lipsum =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo"
@@ -43,10 +44,12 @@ export const logoBanner: Story = {
     return (
       <Banner
         avatar={
-          <img
+          <Image
             src="/mit-logo-transparent5.svg"
             alt="MIT Logo"
-            style={{ height: "37px", filter: "saturate(0%) invert(100%)" }}
+            width={70}
+            height={37}
+            style={{ filter: "saturate(0%) invert(100%)" }}
           />
         }
         {...args}
@@ -60,9 +63,11 @@ export const logoBannerWithExtras: Story = {
     return (
       <Banner
         avatar={
-          <img
+          <Image
             src="/mit-logo-transparent5.svg"
             alt="MIT Logo"
+            width={70}
+            height={37}
             style={{ height: "37px", filter: "saturate(0%) invert(100%)" }}
           />
         }

frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx

@@ -244,7 +244,10 @@ const CallToActionSection = ({
       {platformImage ? (
         <Platform>
           <OnPlatform>on</OnPlatform>
-          <StyledPlatformLogo platformCode={platform?.code as PlatformEnum} />
+          <StyledPlatformLogo
+            platformCode={platform?.code as PlatformEnum}
+            height={26}
+          />
         </Platform>
       ) : null}
     </CallToAction>

frontends/ol-components/src/components/Logo/Logo.stories.tsx

@@ -37,6 +37,7 @@ const meta: Meta<StoryProps> = {
             </Grid>
             <Grid item xs={8}>
               <SizedPlatformLogo
+                height={27}
                 iconHeight={iconHeight}
                 showIconBackground={showIconBackground}
                 platformCode={platformCode as PlatformEnum}

frontends/ol-components/src/components/Logo/Logo.tsx

@@ -1,99 +1,131 @@
 import React from "react"
 import { PlatformEnum } from "api"
+import Image from "next/image"
 
-type PlatformObject = {
+type WithImage = {
   name: string
-  image: string | null
+  image: string
+  aspect: number
 }
 
+type WithoutImage = {
+  name: string
+  image?: null
+}
+
+type PlatformObject = WithImage | WithoutImage
+
 export const PLATFORMS: Record<PlatformEnum, PlatformObject> = {
   [PlatformEnum.Ocw]: {
     name: "MIT OpenCourseWare",
     image: "/unit_logos/ocw.svg",
+    aspect: 6.03,
   },
   [PlatformEnum.Edx]: {
     name: "edX",
     image: "/platform_logos/edx.svg",
+    aspect: 1.77,
   },
   [PlatformEnum.Mitxonline]: {
     name: "MITx Online",
     image: "/unit_logos/mitx.svg",
+    aspect: 3.32,
   },
   [PlatformEnum.Bootcamps]: {
     name: "Bootcamps",
     image: "/platform_logos/bootcamps.svg",
+    aspect: 5.25,
   },
   [PlatformEnum.Xpro]: {
     name: "MIT xPRO",
     image: "/unit_logos/xpro.svg",
+    aspect: 3.56,
   },
   [PlatformEnum.Podcast]: {
     name: "Podcast",
-    image: null,
   },
   [PlatformEnum.Csail]: {
     name: "CSAIL",
     image: "/platform_logos/csail.svg",
+    aspect: 1.76,
   },
   [PlatformEnum.Mitpe]: {
     name: "MIT Professional Education",
-    image: null,
   },
   [PlatformEnum.See]: {
     name: "MIT Sloan Executive Education",
     image: "/unit_logos/see.svg",
+    aspect: 7.73,
   },
   [PlatformEnum.Scc]: {
     name: "Schwarzman College of Computing",
-    image: null,
   },
   [PlatformEnum.Ctl]: {
     name: "Center for Transportation & Logistics",
-    image: null,
   },
   [PlatformEnum.Emeritus]: {
     name: "Emeritus",
-    image: null,
   },
   [PlatformEnum.Simplilearn]: {
     name: "Simplilearn",
-    image: null,
   },
   [PlatformEnum.Globalalumni]: {
     name: "Global Alumni",
-    image: null,
   },
   [PlatformEnum.Susskind]: {
     name: "Susskind",
-    image: null,
   },
   [PlatformEnum.Whu]: {
     name: "WHU",
-    image: null,
   },
   [PlatformEnum.Oll]: {
     name: "Open Learning Library",
     image: "/platform_logos/oll.svg",
+    aspect: 5.25,
   },
   [PlatformEnum.Youtube]: {
     name: "YouTube",
-    image: null,
   },
 }
 
+const DEFAULT_WIDTH = 200
+
 export const PlatformLogo: React.FC<{
   platformCode?: PlatformEnum
   className?: string
-}> = ({ platformCode, className }) => {
+  width?: number
+  height?: number
+}> = ({ platformCode, className, width, height }) => {
   const platform = PLATFORMS[platformCode!]
   if (!platform?.image) {
     return null
   }
+
+  /* The Next.js Image component's requirement to specify both width and height are peculiar
+   * in the context of SVG images that do not optimize. Likely to ensure no layout shift,
+   * though for such a hard error ("Image is missing required width property"), the layout
+   * doesn't necessarily shift, depending on the image placement and can be prevented with CSS.
+   * The @next/next/no-img-element lint rule does not have any escape for SVGs despite the warning
+   * not actually applying - "Using `<img>` could result in slower LCP and higher bandwidth.".
+   */
+  if (width && !height) {
+    height = width / platform.aspect
+  }
+  if (!width && height) {
+    width = height * platform.aspect
+  }
+  if (!width) {
+    width = DEFAULT_WIDTH
+    height = width / platform.aspect
+  }
+
   return (
-    <img
+    <Image
       src={`/images${platform?.image}`}
       className={className}
       alt={platform.name}
+      width={width}
+      height={height}
     />
   )
 }

package.json

@@ -17,7 +17,7 @@
     "style-lint": "yarn workspace frontends run style-lint",
     "test": "MITOL_API_BASE_URL=https://api.test.learn.mit.edu yarn workspace frontends global:test",
     "test-watch": "MITOL_API_BASE_URL=https://api.test.learn.mit.edu yarn workspace frontends test-watch",
-    "storybook": "yarn workspace frontends storybook",
+    "storybook": "yarn workspace ol-components storybook",
     "lint-check": "yarn workspace frontends run lint-check",
     "typecheck": "yarn workspace frontends run typecheck"
   },