From addbaa4df15c344b31db8ce986165d1f3bfe0b28 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 20:42:04 +0200 Subject: [PATCH 1/7] Specify dimensions for logos (constrain by width or height) --- .../LearningResourceExpanded.tsx | 2 +- .../src/components/Logo/Logo.stories.tsx | 1 + .../src/components/Logo/Logo.tsx | 61 ++++++++++++++----- 3 files changed, 49 insertions(+), 15 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 8949a85719..50c204a333 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -244,7 +244,7 @@ const CallToActionSection = ({ {platformImage ? ( on - + ) : null} diff --git a/frontends/ol-components/src/components/Logo/Logo.stories.tsx b/frontends/ol-components/src/components/Logo/Logo.stories.tsx index 07d5abb747..7f210685a6 100644 --- a/frontends/ol-components/src/components/Logo/Logo.stories.tsx +++ b/frontends/ol-components/src/components/Logo/Logo.stories.tsx @@ -37,6 +37,7 @@ const meta: Meta = { = { [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. The @next/next/no-img-element + * lint rule does not have any escape for SVGs despite the + * warning not applying - "Using `` 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 ( - {platform.name} ) } From 6c76ce3b6d3aa7b5f39b2fbbc401d4430c0a2891 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 20:43:34 +0200 Subject: [PATCH 2/7] Replace img with Nextjs Image --- .../ProgramLetterPage/[id]/view/ProgramLetterPage.tsx | 10 +++++++--- .../TestimonialDisplay/AttestantBlock.tsx | 5 ++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx b/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx index 029364a53f..751e12e1f4 100644 --- a/frontends/main/src/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage.tsx +++ b/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 = () => { />
-
@@ -139,9 +141,10 @@ const ProgramLetterPage: React.FC = () => { {templateFields?.program_letter_signatories?.map((signatory) => (
- Signature
@@ -159,9 +162,10 @@ const ProgramLetterPage: React.FC = () => {
{templateFields?.program_letter_footer ? ( - ) : (

MITx MicroMasters program in {templateFields?.title}

diff --git a/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx b/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx index 9925a33ec3..d23fe868f7 100644 --- a/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx +++ b/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,7 @@ const AttestantBlock: React.FC = ({ avatarStyle={avatar} > {attestation.avatar_medium ? ( - + ) : ( )} From b8ff082d32e0117cbe4746a86caa8687779fb879 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 21:15:27 +0200 Subject: [PATCH 3/7] Replace with Next Image --- .../src/components/Banner/Banner.stories.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontends/ol-components/src/components/Banner/Banner.stories.tsx b/frontends/ol-components/src/components/Banner/Banner.stories.tsx index 1fd0b35be0..9754215c0b 100644 --- a/frontends/ol-components/src/components/Banner/Banner.stories.tsx +++ b/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 ( } {...args} @@ -60,9 +63,11 @@ export const logoBannerWithExtras: Story = { return ( } From ca401b4e397b7d706a0c993f2dd3330b836fdbc2 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 21:16:37 +0200 Subject: [PATCH 4/7] Import background images --- frontends/main/src/app-pages/AboutPage/AboutPage.tsx | 3 ++- .../app-pages/ChannelPage/UnitChannelTemplate.tsx | 5 ----- .../src/app-pages/DashboardPage/DashboardPage.tsx | 4 ++-- frontends/ol-components/src/components/Logo/Logo.tsx | 12 ++++++------ package.json | 2 +- 5 files changed, 11 insertions(+), 15 deletions(-) diff --git a/frontends/main/src/app-pages/AboutPage/AboutPage.tsx b/frontends/main/src/app-pages/AboutPage/AboutPage.tsx index 6218c99e68..5c2ca2343e 100644 --- a/frontends/main/src/app-pages/AboutPage/AboutPage.tsx +++ b/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", }, diff --git a/frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx b/frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx index d122c193b6..1bffa7a54a 100644 --- a/frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx +++ b/frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx @@ -105,11 +105,6 @@ const UnitChannelTemplate: React.FC = ({ return ( <> - {/* TODO */} ({ 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%", diff --git a/frontends/ol-components/src/components/Logo/Logo.tsx b/frontends/ol-components/src/components/Logo/Logo.tsx index 4566936bc8..738b0e396f 100644 --- a/frontends/ol-components/src/components/Logo/Logo.tsx +++ b/frontends/ol-components/src/components/Logo/Logo.tsx @@ -102,12 +102,12 @@ export const PlatformLogo: React.FC<{ 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. The @next/next/no-img-element - * lint rule does not have any escape for SVGs despite the - * warning not applying - "Using `` could result in slower - * LCP and higher bandwidth.". + /* 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 `` could result in slower LCP and higher bandwidth.". */ if (width && !height) { height = width / platform.aspect diff --git a/package.json b/package.json index 2cddffcdf7..d593807c39 100644 --- a/package.json +++ b/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" }, From 901d4c3820cc39afa526e0454f51c8020633d9cc Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 21:37:24 +0200 Subject: [PATCH 5/7] Fix header logo link --- frontends/main/src/components/MITLogoLink/MITLogoLink.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx index b94f3f4b67..163789fe09 100644 --- a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx +++ b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx @@ -1,5 +1,6 @@ import React from "react" import Image from "next/image" +import Link from "next/link" import defaultLogo from "../../../public/mit-logo-learn.svg" interface Props { @@ -15,15 +16,15 @@ const MITLogoLink: React.FC = ({ alt = "MIT Learn Logo", className, }) => ( - {alt} - + ) export default MITLogoLink From 70cd4b879f2de2bd74ceb3e2d862a063375fe11f Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Thu, 26 Sep 2024 22:05:11 +0200 Subject: [PATCH 6/7] Lint fixes --- .../TestimonialDisplay/AttestantBlock.tsx | 7 ++++++- .../LearningResourceExpanded.tsx | 5 ++++- .../ol-components/src/components/Logo/Logo.tsx | 17 ++++++++--------- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx b/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx index d23fe868f7..b1ee78bed0 100644 --- a/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx +++ b/frontends/main/src/page-components/TestimonialDisplay/AttestantBlock.tsx @@ -138,7 +138,12 @@ const AttestantBlock: React.FC = ({ avatarStyle={avatar} > {attestation.avatar_medium ? ( - + ) : ( )} diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 50c204a333..6244d1341d 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -244,7 +244,10 @@ const CallToActionSection = ({ {platformImage ? ( on - + ) : null} diff --git a/frontends/ol-components/src/components/Logo/Logo.tsx b/frontends/ol-components/src/components/Logo/Logo.tsx index 738b0e396f..6524b292e3 100644 --- a/frontends/ol-components/src/components/Logo/Logo.tsx +++ b/frontends/ol-components/src/components/Logo/Logo.tsx @@ -2,7 +2,6 @@ import React from "react" import { PlatformEnum } from "api" import Image from "next/image" - type WithImage = { name: string image: string @@ -20,27 +19,27 @@ export const PLATFORMS: Record = { [PlatformEnum.Ocw]: { name: "MIT OpenCourseWare", image: "/unit_logos/ocw.svg", - aspect: 6.03 + aspect: 6.03, }, [PlatformEnum.Edx]: { name: "edX", image: "/platform_logos/edx.svg", - aspect: 1.77 + aspect: 1.77, }, [PlatformEnum.Mitxonline]: { name: "MITx Online", image: "/unit_logos/mitx.svg", - aspect: 3.32 + aspect: 3.32, }, [PlatformEnum.Bootcamps]: { name: "Bootcamps", image: "/platform_logos/bootcamps.svg", - aspect: 5.25 + aspect: 5.25, }, [PlatformEnum.Xpro]: { name: "MIT xPRO", image: "/unit_logos/xpro.svg", - aspect: 3.56 + aspect: 3.56, }, [PlatformEnum.Podcast]: { name: "Podcast", @@ -48,7 +47,7 @@ export const PLATFORMS: Record = { [PlatformEnum.Csail]: { name: "CSAIL", image: "/platform_logos/csail.svg", - aspect: 1.76 + aspect: 1.76, }, [PlatformEnum.Mitpe]: { name: "MIT Professional Education", @@ -56,7 +55,7 @@ export const PLATFORMS: Record = { [PlatformEnum.See]: { name: "MIT Sloan Executive Education", image: "/unit_logos/see.svg", - aspect: 7.73 + aspect: 7.73, }, [PlatformEnum.Scc]: { name: "Schwarzman College of Computing", @@ -82,7 +81,7 @@ export const PLATFORMS: Record = { [PlatformEnum.Oll]: { name: "Open Learning Library", image: "/platform_logos/oll.svg", - aspect: 5.25 + aspect: 5.25, }, [PlatformEnum.Youtube]: { name: "YouTube", From 7c5e0ee3ffcbd4974b72f71aed72bcd506e01349 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Fri, 27 Sep 2024 15:31:53 +0200 Subject: [PATCH 7/7] Alias to public directory --- frontends/main/src/app-pages/AboutPage/AboutPage.tsx | 2 +- frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx | 2 +- frontends/main/src/components/MITLogoLink/MITLogoLink.tsx | 2 +- frontends/main/src/page-components/Footer/Footer.tsx | 2 +- frontends/main/tsconfig.json | 3 ++- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontends/main/src/app-pages/AboutPage/AboutPage.tsx b/frontends/main/src/app-pages/AboutPage/AboutPage.tsx index 5c2ca2343e..0c1aecdefb 100644 --- a/frontends/main/src/app-pages/AboutPage/AboutPage.tsx +++ b/frontends/main/src/app-pages/AboutPage/AboutPage.tsx @@ -9,7 +9,7 @@ import { } from "ol-components" import * as urls from "@/common/urls" import React from "react" -import domeImage from "../../../public/mit-dome-2.jpg" +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" diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx index 971fe329fa..5402943068 100644 --- a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx +++ b/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 backgroundImage from "@/public/images/backgrounds/user_menu_background.svg" import { ProfileEditForm } from "./ProfileEditForm" import { useProfileMeQuery } from "api/hooks/profile" import { diff --git a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx index 163789fe09..58e256f1d6 100644 --- a/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx +++ b/frontends/main/src/components/MITLogoLink/MITLogoLink.tsx @@ -1,7 +1,7 @@ import React from "react" import Image from "next/image" import Link from "next/link" -import defaultLogo from "../../../public/mit-logo-learn.svg" +import defaultLogo from "@/public/mit-logo-learn.svg" interface Props { href?: string diff --git a/frontends/main/src/page-components/Footer/Footer.tsx b/frontends/main/src/page-components/Footer/Footer.tsx index 1619735741..f72caf4739 100644 --- a/frontends/main/src/page-components/Footer/Footer.tsx +++ b/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", diff --git a/frontends/main/tsconfig.json b/frontends/main/tsconfig.json index 31ab164154..e36e578d3b 100644 --- a/frontends/main/tsconfig.json +++ b/frontends/main/tsconfig.json @@ -18,7 +18,8 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./src/*"], + "@/public/*": ["./public/*"] }, "target": "ESNext", "types": [