Image and video optimizations

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

@@ -10,6 +10,7 @@ import {
 import * as urls from "@/common/urls"
 import React from "react"
 import domeImage from "@/public/mit-dome-2.jpg"
+import Image from "next/image"
 
 const WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER = "what-is-mit-learn"
 const NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER = "non-degree-learning"
@@ -81,13 +82,15 @@ const SubHeaderTextContainer = styled.div({
   alignSelf: "flex-start",
 })
 
-const SubHeaderImage = styled.img({
+const SubHeaderImageContainer = styled.div({
   flexGrow: 1,
   alignSelf: "stretch",
+  position: "relative",
+})
+
+const SubHeaderImage = styled(Image)({
   borderRadius: "8px",
-  backgroundSize: "cover",
-  backgroundPosition: "center",
-  backgroundImage: `url(${domeImage.src})`,
+  objectFit: "cover",
   [theme.breakpoints.down("md")]: {
     height: "300px",
   },
@@ -165,7 +168,13 @@ const AboutPage: React.FC = () => {
               <li>Continue your education at your own pace</li>
             </List>
           </SubHeaderTextContainer>
-          <SubHeaderImage />
+          <SubHeaderImageContainer>
+            <SubHeaderImage
+              src={domeImage}
+              alt="A view of the entablature of MIT's Great Dome"
+              fill
+            />
+          </SubHeaderImageContainer>
         </SubHeaderContainer>
         <BodySection>
           <HighlightContainer>

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

@@ -379,7 +379,7 @@ describe("Channel Pages, Topic only", () => {
 })
 
 describe("Channel Pages, Unit only", () => {
-  it("Displays the channel title, banner, and avatar", async () => {
+  it("Displays the channel title, banner", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
       channel_type: "unit",
@@ -388,9 +388,24 @@ describe("Channel Pages, Unit only", () => {
       url: `/c/${channel.channel_type}/${channel.name}`,
     })
 
-    const title = await screen.findByRole("heading", { name: channel.title })
-    getByImageSrc(title, `${window.origin}${channel.configuration.logo}`)
+    await screen.findByRole("heading", { name: channel.title })
   })
+
+  it("Displays the channel logo", async () => {
+    const { channel } = setupApis({
+      name: "ocw",
+      channel_type: "unit",
+    })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
+
+    const images = await screen.findAllByRole("img", {
+      name: "MIT OpenCourseWare",
+    })
+    expect(images[0]).toHaveAttribute("src", "/images/unit_logos/ocw.svg")
+  })
+
   it("Displays a featured carousel if the channel type is 'unit'", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { styled, Breadcrumbs, Banner } from "ol-components"
+import { backgroundSrcSetCSS } from "ol-utilities"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
@@ -10,6 +11,7 @@ import {
   CHANNEL_TYPE_BREADCRUMB_TARGETS,
   ChannelControls,
 } from "./ChannelPageTemplate"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -57,6 +59,7 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
   const channel = useChannelDetail(String(channelType), String(name))
   const urlParams = new URLSearchParams(channel.data?.search_filter)
   const displayConfiguration = channel.data?.configuration
+
   return (
     <>
       <Banner
@@ -87,7 +90,10 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
         title={channel.data?.title}
         header={displayConfiguration?.heading}
         subHeader={displayConfiguration?.sub_heading}
-        backgroundUrl={displayConfiguration?.banner_background}
+        backgroundUrl={
+          displayConfiguration?.banner_background ??
+          backgroundSrcSetCSS(backgroundSteps)
+        }
         extraActions={
           <ChannelControlsContainer>
             <ChannelControls>

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

@@ -23,8 +23,9 @@ import {
   useLearningResourceTopic,
   useLearningResourceTopics,
 } from "api/hooks/learningResources"
-import { propsNotNil } from "ol-utilities"
+import { propsNotNil, backgroundSrcSetCSS } from "ol-utilities"
 import invariant from "tiny-invariant"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -222,6 +223,7 @@ const TopicChannelTemplateInternal: React.FC<
   ) : (
     <BreadcrumbsInternal current={channel.title} />
   )
+
   return (
     <>
       <Banner
@@ -249,7 +251,7 @@ const TopicChannelTemplateInternal: React.FC<
         extraHeader={<TopicChips topic={topic} />}
         backgroundUrl={
           displayConfiguration?.banner_background ??
-          "/images/backgrounds/background_steps.jpg"
+          backgroundSrcSetCSS(backgroundSteps)
         }
         extraActions={
           <ChannelControlsContainer>

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

@@ -8,15 +8,16 @@ import {
   BannerBackground,
   Typography,
   VisuallyHidden,
+  UnitLogo,
 } from "ol-components"
+import { OfferedByEnum, SourceTypeEnum } from "api"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { ChannelDetails } from "@/page-components/ChannelDetails/ChannelDetails"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
 import ResourceCarousel, {
   ResourceCarouselProps,
 } from "@/page-components/ResourceCarousel/ResourceCarousel"
-import { SourceTypeEnum } from "api"
 import { getSearchParamMap } from "@/common/utils"
 import { HOME as HOME_URL, UNITS as UNITS_URL } from "../../common/urls"
 import { ChannelTypeEnum } from "api/v0"
@@ -38,13 +39,13 @@ const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({
   },
 }))
 
-const UnitLogo = styled.img(({ theme }) => ({
+const UnitLogoInverted = styled(UnitLogo)(({ theme }) => ({
   filter: "saturate(0%) invert(100%)",
+  height: 50,
   maxWidth: "100%",
-  width: "auto",
-  height: "50px",
   [theme.breakpoints.down("md")]: {
-    height: "40px",
+    height: 40,
+    width: "auto",
   },
 }))
 
@@ -126,7 +127,10 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
               <ChannelHeader>
                 <VisuallyHidden>{channel.data?.title}</VisuallyHidden>
                 {channel.data ? (
-                  <UnitLogo alt="" src={displayConfiguration.logo} />
+                  <UnitLogoInverted
+                    unitCode={name as OfferedByEnum}
+                    height={50}
+                  />
                 ) : null}
               </ChannelHeader>
               <Stack gap={{ xs: "16px", lg: "32px" }}>

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

@@ -13,7 +13,7 @@ import {
   Banner,
   Breadcrumbs,
 } from "ol-components"
-import { pluralize } from "ol-utilities"
+import { pluralize, backgroundSrcSetCSS } from "ol-utilities"
 import type { LearningResourceSchool } from "api"
 import { useSchoolsList } from "api/hooks/learningResources"
 import {
@@ -27,7 +27,7 @@ import {
   RiTerminalBoxLine,
 } from "@remixicon/react"
 import { HOME } from "@/common/urls"
-
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
 
@@ -201,7 +201,6 @@ const DepartmentListingPage: React.FC = () => {
   return (
     <>
       <Banner
-        backgroundUrl="/images/backgrounds/background_steps.jpg"
         title="Browse by Academic Department"
         header="At MIT, academic departments span a wide range of disciplines, from science and engineering to humanities. Select a department below to explore all of its non-degree learning offerings."
         navText={
@@ -211,6 +210,7 @@ const DepartmentListingPage: React.FC = () => {
             current="Departments"
           />
         }
+        backgroundUrl={backgroundSrcSetCSS(backgroundSteps)}
       />
       <Container>
         <Grid container>

frontends/main/src/app-pages/HomePage/PersonalizeSection.tsx

@@ -1,11 +1,14 @@
 import React from "react"
 import { Typography, styled, Container, ButtonLink } from "ol-components"
+import { backgroundSrcSetCSS } from "ol-utilities"
 import { useUserMe } from "api/hooks/user"
 import * as urls from "@/common/urls"
+import personalizeImage from "@/public/images/homepage/personalize-image.png"
+import personalizeBgImage from "@/public/images/homepage/personalize-bg.png"
 
 const FullWidthBackground = styled.div(({ theme }) => ({
   padding: "80px 0",
-  background: 'url("/images/homepage/personalize-bg.png") center top no-repeat',
+  background: `${backgroundSrcSetCSS(personalizeBgImage)} center top no-repeat`,
   backgroundSize: "cover",
   [theme.breakpoints.down("md")]: {
     padding: "40px 0",
@@ -108,7 +111,7 @@ const PersonalizeSection = () => {
   return (
     <FullWidthBackground>
       <PersonalizeContainer>
-        <ImageContainer src="/images/homepage/personalize-image.png" alt="" />
+        <ImageContainer src={personalizeImage.src} alt="" />
         <PersonalizeContent />
       </PersonalizeContainer>
     </FullWidthBackground>

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

@@ -84,11 +84,6 @@ const LearningPathListingPage: React.FC = () => {
       src="/images/backgrounds/course_search_banner.png"
       className="learningpaths-page"
     >
-      {/* TODO <MetaTags title="Learning Paths" social={false} />
-      <Helmet>
-        <meta name="robots" content="noindex,noarchive" />
-      </Helmet>
-       */}
       <Container maxWidth="md" style={{ paddingBottom: 100 }}>
         <GridContainer>
           <GridColumn variant="single-full">

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

@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react"
-// Not urrently linked to. See https://github.com/mitodl/hq/issues/4639
+// Not currently linked to. See https://github.com/mitodl/hq/issues/4639
 import {
   Breadcrumbs,
   Container,

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

@@ -14,14 +14,14 @@ import {
   Breadcrumbs,
 } from "ol-components"
 import Link from "next/link"
-import { propsNotNil } from "ol-utilities"
-
+import { propsNotNil, backgroundSrcSetCSS } from "ol-utilities"
 import { useLearningResourceTopics } from "api/hooks/learningResources"
 import { LearningResourceTopic } from "api"
 import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon"
 import { HOME } from "@/common/urls"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 type ChannelSummary = {
   id: number | string
@@ -275,6 +275,7 @@ const TopicsListingPage: React.FC = () => {
         }
         title="Browse by Topic"
         header="Select a topic below to explore relevant learning resources across all Academic and Professional units."
+        backgroundUrl={backgroundSrcSetCSS(backgroundSteps)}
       />
       <Container>
         <Grid container>

frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx

@@ -1,6 +1,13 @@
 import React from "react"
 import { LearningResourceOfferorDetail, OfferedByEnum } from "api"
-import { Card, Skeleton, Typography, styled, theme } from "ol-components"
+import {
+  Card,
+  Skeleton,
+  Typography,
+  styled,
+  theme,
+  UnitLogo,
+} from "ol-components"
 import { useChannelDetail } from "api/hooks/channels"
 
 const CardStyled = styled(Card)({
@@ -34,14 +41,12 @@ const LogoContainer = styled.div({
       margin: "0 auto",
     },
   },
-})
-
-const UnitLogo = styled.img({
-  height: "50px",
-  display: "block",
-  [theme.breakpoints.down("md")]: {
-    height: "40px",
-    margin: "0 auto",
+  img: {
+    display: "block",
+    [theme.breakpoints.down("md")]: {
+      height: "40px",
+      margin: "0 auto",
+    },
   },
 })
 
@@ -108,15 +113,6 @@ const CountsText = styled(Typography)(({ theme }) => ({
   },
 }))
 
-const unitLogos = {
-  [OfferedByEnum.Mitx]: "/images/unit_logos/mitx.svg",
-  [OfferedByEnum.Ocw]: "/images/unit_logos/ocw.svg",
-  [OfferedByEnum.Bootcamps]: "/images/unit_logos/bootcamps.svg",
-  [OfferedByEnum.Xpro]: "/images/unit_logos/xpro.svg",
-  [OfferedByEnum.Mitpe]: "/images/unit_logos/mitpe.svg",
-  [OfferedByEnum.See]: "/images/unit_logos/see.svg",
-}
-
 interface UnitCardsProps {
   units: LearningResourceOfferorDetail[] | undefined
   courseCounts: Record<string, number>
@@ -125,13 +121,12 @@ interface UnitCardsProps {
 
 interface UnitCardProps {
   unit: LearningResourceOfferorDetail
-  logo: string
   courseCount: number
   programCount: number
 }
 
 const UnitCard: React.FC<UnitCardProps> = (props) => {
-  const { unit, logo, courseCount, programCount } = props
+  const { unit, courseCount, programCount } = props
   const channelDetailQuery = useChannelDetail("unit", unit.code)
   const channelDetail = channelDetailQuery.data
   const unitUrl = channelDetail?.channel_url
@@ -144,7 +139,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
         <UnitCardContainer>
           <UnitCardContent>
             <LogoContainer>
-              <UnitLogo src={logo} alt={unit.name} />
+              <UnitLogo unitCode={unit.code as OfferedByEnum} height={50} />
             </LogoContainer>
             <CardBottom>
               <ValuePropContainer>
@@ -197,14 +192,10 @@ export const UnitCards: React.FC<UnitCardsProps> = (props) => {
       {units?.map((unit) => {
         const courseCount = courseCounts[unit.code] || 0
         const programCount = programCounts[unit.code] || 0
-        const logo =
-          unitLogos[unit.code as OfferedByEnum] ||
-          `/images/unit_logos/${unit.code}.svg`
         return unit.value_prop ? (
           <UnitCard
             key={unit.code}
             unit={unit}
-            logo={logo}
             courseCount={courseCount}
             programCount={programCount}
           />