Reinstate head metadata (#1572)

* adding metadata to channel details page * refactor * refactor * switching to using site name * switching to using site name * adding site name * adding site name * removing comment * using getMetadataAsync for open resource drawer * switching to getMetaData * import missing var * fixing search page title and edit channel details title * removing unused attr * removing redundant metatag call * removing comment * fixing regression with settings tabs * adding more titles and fixing regression on search page * fixing missing import * missing import * adding site name * adding site name * removing conditional * moving addition of site name to getMetaData * adding docstrings * refactoring metatag method * switching to standardizeMetadata and refactoring all views to use async method * removign wrapper fragment * set single react types resolution (#1586) * switching to standardizeMetadata method * fixing typechecks --------- Co-authored-by: Chris Chudzicki <[email protected]>
mitodl · Sep 24, 2024 · c491be6 · c491be6
1 parent 45df744
commit c491be6
Show file tree

Hide file tree

Showing 21 changed files with 112 additions and 71 deletions.
diff --git a/frontends/main/src/app-pages/ChannelPage/DefaultChannelTemplate.tsx b/frontends/main/src/app-pages/ChannelPage/DefaultChannelTemplate.tsx
@@ -60,7 +60,6 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
   const displayConfiguration = channel.data?.configuration
   return (
     <>
-      {/* TODO <MetaTags title={channel.data?.title} /> */}
       <Banner
         navText={
           <Breadcrumbs

diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
@@ -313,7 +313,7 @@ const DashboardPage: React.FC = () => {
   const { isLoading: isLoadingProfile, data: profile } = useProfileMeQuery()
   const params = useParams<{ tab: string }>()
 
-  const appRouterPath = `${DASHBOARD_HOME}${params.tab}/`
+  const appRouterPath = `${DASHBOARD_HOME}/${params.tab}`
 
   const id = Number(useParams<RouteParams>().id) || -1
   const showUserListDetail = appRouterPath === MY_LISTS && id !== -1

diff --git a/frontends/main/src/app-pages/LearningPathDetailsPage/ListDetailsPage.tsx b/frontends/main/src/app-pages/LearningPathDetailsPage/ListDetailsPage.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Container, BannerPage, styled } from "ol-components"
-// import MetaTags from "@/page-components/MetaTags/MetaTags"
+import PrivateTitle from "@/components/PrivateTitle/PrivateTitle"
 import ItemsListingComponent from "@/page-components/ItemsListing/ItemsListingComponent"
 import type { ItemsListingComponentProps } from "@/page-components/ItemsListing/ItemsListingComponent"
 
@@ -23,7 +23,7 @@ const ListDetailsPage: React.FC<ItemsListingComponentProps> = ({
       src="/images/backgrounds/course_search_banner.png"
       className="learningpaths-page"
     >
-      {/* TODO <MetaTags title={list?.title} social={false} /> */}
+      <PrivateTitle title={list?.title || ""} />
       <StyledContainer maxWidth="md">
         <ItemsListingComponent
           listType={listType}

diff --git a/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx b/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx
@@ -34,7 +34,6 @@ import {
   DELIVERY_CHOICES,
   ProfileSchema,
 } from "@/common/profile"
-// import MetaTags from "@/page-components/MetaTags/MetaTags"
 
 const NUM_STEPS = 5
 

diff --git a/frontends/main/src/app/about/page.tsx b/frontends/main/src/app/about/page.tsx
@@ -1,9 +1,10 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
+
 import { AboutPage } from "@/app-pages/AboutPage/AboutPage"
+import { standardizeMetadata } from "@/common/metadata"
 
-export const metadata: Metadata = getMetadata({
+export const metadata: Metadata = standardizeMetadata({
   title: "About Us",
 })
 

diff --git a/frontends/main/src/app/c/[channelType]/[name]/page.tsx b/frontends/main/src/app/c/[channelType]/[name]/page.tsx
@@ -1,5 +1,33 @@
 import React from "react"
 import ChannelPage from "@/app-pages/ChannelPage/ChannelPage"
+import { channelsApi } from "api/clients"
+import { ChannelTypeEnum } from "api/v0"
+import { getMetadataAsync } from "@/common/metadata"
+
+type RouteParams = {
+  channelType: ChannelTypeEnum
+  name: string
+}
+
+export async function generateMetadata({
+  searchParams,
+  params,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined }
+  params: RouteParams
+}) {
+  const { channelType, name } = params
+
+  const channelDetails = await channelsApi
+    .channelsTypeRetrieve({ channel_type: channelType, name: name })
+    .then((res) => res.data)
+  return getMetadataAsync({
+    searchParams,
+    title: `${channelDetails.title}`,
+    description: channelDetails.public_description,
+    image: channelDetails.configuration.logo,
+  })
+}
 
 const Page: React.FC = () => {
   return <ChannelPage />

diff --git a/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx b/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx
@@ -1,6 +1,14 @@
 import React from "react"
 import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
 
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "Your MIT Learning Journey",
+  social: false,
+})
+
 const Page: React.FC = () => {
   return <DashboardPage />
 }

diff --git a/frontends/main/src/app/dashboard/[tab]/page.tsx b/frontends/main/src/app/dashboard/[tab]/page.tsx
@@ -1,6 +1,13 @@
 import React from "react"
 import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
 
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "Your MIT Learning Journey",
+  social: false,
+})
 const Page: React.FC = () => {
   return <DashboardPage />
 }

diff --git a/frontends/main/src/app/dashboard/page.tsx b/frontends/main/src/app/dashboard/page.tsx
@@ -1,9 +1,8 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
 import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
-
-export const metadata: Metadata = getMetadata({
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Your MIT Learning Journey",
   social: false,
 })

diff --git a/frontends/main/src/app/departments/page.tsx b/frontends/main/src/app/departments/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
 
-export const metadata: Metadata = getMetadata({
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Departments",
 })
 

diff --git a/frontends/main/src/app/learningpaths/page.tsx b/frontends/main/src/app/learningpaths/page.tsx
@@ -1,6 +1,12 @@
 import React from "react"
 import LearningPathListingPage from "@/app-pages/LearningPathListingPage/LearningPathListingPage"
 
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
+  title: "Learning Paths",
+})
+
 const Page: React.FC = () => {
   return <LearningPathListingPage />
 }

diff --git a/frontends/main/src/app/onboarding/page.tsx b/frontends/main/src/app/onboarding/page.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
 import OnboardingPage from "@/app-pages/OnboardingPage/OnboardingPage"
+import { standardizeMetadata } from "@/common/metadata"
 
-export const metadata: Metadata = getMetadata({
+export const metadata: Metadata = standardizeMetadata({
   title: "Onboarding",
   social: false,
 })

diff --git a/frontends/main/src/app/privacy/page.tsx b/frontends/main/src/app/privacy/page.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
-import PrivacyPage from "@/app-pages/PrivacyPage/PrivacyPage"
 
-export const metadata: Metadata = getMetadata({
+import PrivacyPage from "@/app-pages/PrivacyPage/PrivacyPage"
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Privacy Policy",
 })
 

diff --git a/frontends/main/src/app/search/page.tsx b/frontends/main/src/app/search/page.tsx
@@ -1,11 +1,17 @@
 import React, { Suspense } from "react"
-import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
+import { getMetadataAsync } from "@/common/metadata"
 import SearchPage from "@/app-pages/SearchPage/SearchPage"
 
-export const metadata: Metadata = getMetadata({
-  title: "Search",
-})
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined }
+}) {
+  return await getMetadataAsync({
+    title: "Search",
+    searchParams,
+  })
+}
 
 const Page: React.FC = () => {
   return (

diff --git a/frontends/main/src/app/terms/page.tsx b/frontends/main/src/app/terms/page.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
-import TermsPage from "@/app-pages/TermsPage/TermsPage"
 
-export const metadata: Metadata = getMetadata({
+import TermsPage from "@/app-pages/TermsPage/TermsPage"
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Terms of Service",
 })
 

diff --git a/frontends/main/src/app/topics/page.tsx b/frontends/main/src/app/topics/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
 
-export const metadata: Metadata = getMetadata({
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Topics",
 })
 

diff --git a/frontends/main/src/app/units/page.tsx b/frontends/main/src/app/units/page.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { Metadata } from "next"
-import { getMetadata } from "@/common/metadata"
-import UnitsListingPage from "@/app-pages/UnitsListingPage/UnitsListingPage"
 
-export const metadata: Metadata = getMetadata({
+import UnitsListingPage from "@/app-pages/UnitsListingPage/UnitsListingPage"
+import { standardizeMetadata } from "@/common/metadata"
+export const metadata: Metadata = standardizeMetadata({
   title: "Units",
 })
 

diff --git a/frontends/main/src/common/metadata.ts b/frontends/main/src/common/metadata.ts
@@ -12,6 +12,10 @@ type MetadataAsyncProps = {
   social?: boolean
 }
 
+/*
+ * Fetch metadata for the current page.
+ * the method handles resource param override if necessary.
+ */
 export const getMetadataAsync = async ({
   title = "MIT Learn",
   description = "Learn with MIT",
@@ -20,8 +24,6 @@ export const getMetadataAsync = async ({
   searchParams,
   social = true,
 }: MetadataAsyncProps) => {
-  title = `${title} | ${process.env.NEXT_PUBLIC_SITE_NAME}`
-
   // The learning resource drawer is open
   const learningResourceId = searchParams?.[RESOURCE_DRAWER_QUERY_PARAM]
   if (learningResourceId) {
@@ -30,7 +32,7 @@ export const getMetadataAsync = async ({
         id: Number(learningResourceId),
       })
 
-      title = `${data?.title} | ${process.env.NEXT_PUBLIC_SITE_NAME}`
+      title = data?.title
       description = data?.description?.replace(/<\/[^>]+(>|$)/g, "") ?? ""
       image = data?.image?.url || image
       imageAlt = image === data?.image?.url ? imageAlt : data?.image?.alt || ""
@@ -42,7 +44,7 @@ export const getMetadataAsync = async ({
     }
   }
 
-  return getMetadata({
+  return standardizeMetadata({
     title,
     description,
     image,
@@ -53,19 +55,23 @@ export const getMetadataAsync = async ({
 
 type MetadataProps = Omit<MetadataAsyncProps, "searchParams">
 
-export const getMetadata = ({
+/*
+ * Method that returns standardized metadata including
+ * social tags for the current page
+ */
+export const standardizeMetadata = ({
   title = "MIT Learn",
   description = "Learn with MIT",
   image = DEFAULT_OG_IMAGE,
   imageAlt,
   social = true,
 }: MetadataProps) => {
+  title = `${title} | ${process.env.NEXT_PUBLIC_SITE_NAME}`
   const socialMetadata = social
     ? {
         openGraph: {
           title,
           description,
-          // url: process.env.NEXT_PUBLIC_ORIGIN,
           siteName: process.env.NEXT_PUBLIC_SITE_NAME,
           images: [
             {

diff --git a/frontends/main/src/components/MetaTags/MetaTags.tsx b/frontends/main/src/components/MetaTags/MetaTags.tsx
diff --git a/frontends/main/src/components/PrivateTitle/PrivateTitle.tsx b/frontends/main/src/components/PrivateTitle/PrivateTitle.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+/**
+ * Alert! Prefer the nextjs [metadata api](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
+ * This is intended for rendering titles that require authentication and hence
+ * can't be rendered on our nextjs server.
+ *
+ * Render a title tag. Will be hoisted to <head> by React.
+ * See [title](https://react.dev/reference/react-dom/components/title)
+ */
+const PrivateTitle: React.FC<{ title: string }> = ({ title }) => {
+  return <title>{[title, process.env.NEXT_PUBLIC_SITE_NAME].join(" | ")}</title>
+}
+
+export default PrivateTitle
diff --git a/frontends/mit-learn/src/pages/ChannelPage/EditChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/EditChannelPage.tsx
@@ -4,13 +4,12 @@ import { useRouter, useLocation, useParams } from "next/navigation"
 import Link from "next/link"
 import { Container, TabList, Tab, TabContext, TabPanel } from "ol-components"
 
-// import { MetaTags } from "ol-utilities"
-
 import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
 import { useChannelDetail } from "api/hooks/channels"
 import EditChannelAppearanceForm from "./EditChannelAppearanceForm"
 import { ChannelPageTemplate } from "./ChannelPageTemplate"
 import MetaTags from "@/page-components/MetaTags/MetaTags"
+
 type RouteParams = {
   channelType: string
   name: string
@@ -41,7 +40,7 @@ const EditChannelPage: React.FC = () => {
       name={channel.data?.name}
       channelType={channel.data?.channel_type}
     >
-      {/* TODO <MetaTags title={`Editing | ${channel.data.title}`} social={false} /> */}
+      <MetaTags title={`Editing | ${channel.data.title}`} social={false} />
       {channel.data.is_moderator ? (
         <TabContext value={tabValue}>
           <div className="page-subbanner">