From 1949ffb62ec1d10437668faa19ef315bc3b0aaa5 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 15:28:59 -0400
Subject: [PATCH 1/6] load adobe font

---
 .../ThemeProvider/MITLearnGlobalStyles.tsx    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
index 1fe672169b..7557b4ceae 100644
--- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
+++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
@@ -3,8 +3,26 @@
 import React from "react"
 import { css, Global } from "@emotion/react"
 import { theme } from "./ThemeProvider"
+import { preload } from "react-dom"
+
+/**
+    Font files for Adobe neue haas grotesk.
+    WARNING: This is linked to chudzick@mit.edu's Adobe account.
+    We'd prefer a non-personal MIT account to be used.
+    See XXX for more.
+
+    Ideally the font would be loaded via a <link /> tag; see
+      - https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata
+      - https://github.com/vercel/next.js/discussions/52877
+      - https://github.com/vercel/next.js/discussions/50796
+ */
+const ADOBE_FONT_URL = "https://use.typekit.net/lbk1xay.css"
 
 const pageCss = css`
+  @import url("${ADOBE_FONT_URL}"); /**
+    @import must come before other styles, including comments
+  */
+
   html {
     font-family: ${theme.typography.body1.fontFamily};
     color: ${theme.typography.body1.color};
@@ -101,6 +119,11 @@ const muiCss = css`
 `
 
 const MITLearnGlobalStyles: React.FC = () => {
+  /**
+   * Preload the font just in case emotion doesn't put the import near top of
+   * HTML.
+   */
+  preload(ADOBE_FONT_URL, { as: "style", fetchPriority: "high" })
   return <Global styles={[pageCss, formCss, muiCss]}></Global>
 }
 

From 3823b5c8d5d215f983a558c79c8da10094836a24 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 16:20:37 -0400
Subject: [PATCH 2/6] add noindex based on MITOL_NOINDEX

---
 frontends/main/src/app/page.tsx       | 2 ++
 frontends/main/src/common/metadata.ts | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontends/main/src/app/page.tsx b/frontends/main/src/app/page.tsx
index c1d6165e03..58ac06a9d1 100644
--- a/frontends/main/src/app/page.tsx
+++ b/frontends/main/src/app/page.tsx
@@ -16,6 +16,8 @@ export async function generateMetadata({
   return await getMetadataAsync({
     title: "Learn with MIT",
     searchParams,
+    robots:
+      process.env.MITOL_NOINDEX === "true" ? "noindex, nofollow" : undefined,
   })
 }
 
diff --git a/frontends/main/src/common/metadata.ts b/frontends/main/src/common/metadata.ts
index 1dfa0032ff..ab40c3050e 100644
--- a/frontends/main/src/common/metadata.ts
+++ b/frontends/main/src/common/metadata.ts
@@ -1,5 +1,6 @@
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
 import { learningResourcesApi } from "api/clients"
+import type { Metadata } from "next"
 
 const DEFAULT_OG_IMAGE = `${process.env.NEXT_PUBLIC_ORIGIN}/images/opengraph-image.jpg`
 
@@ -10,7 +11,7 @@ type MetadataAsyncProps = {
   imageAlt?: string
   searchParams?: { [key: string]: string | string[] | undefined }
   social?: boolean
-}
+} & Metadata
 
 /*
  * Fetch metadata for the current page.
@@ -23,6 +24,7 @@ export const getMetadataAsync = async ({
   imageAlt,
   searchParams,
   social = true,
+  ...otherMeta
 }: MetadataAsyncProps) => {
   // The learning resource drawer is open
   const learningResourceId = searchParams?.[RESOURCE_DRAWER_QUERY_PARAM]
@@ -50,6 +52,7 @@ export const getMetadataAsync = async ({
     image,
     imageAlt,
     social,
+    ...otherMeta,
   })
 }
 
@@ -65,7 +68,8 @@ export const standardizeMetadata = ({
   image = DEFAULT_OG_IMAGE,
   imageAlt,
   social = true,
-}: MetadataProps) => {
+  ...otherMeta
+}: MetadataProps): Metadata => {
   title = `${title} | ${process.env.NEXT_PUBLIC_SITE_NAME}`
   const socialMetadata = social
     ? {
@@ -98,5 +102,6 @@ export const standardizeMetadata = ({
     title,
     description,
     ...socialMetadata,
+    ...otherMeta,
   }
 }

From 32f96ea768113e07c1ffbf7c6fdef456278a49c5 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 17:01:11 -0400
Subject: [PATCH 3/6] add appzi script

---
 frontends/main/src/app/layout.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontends/main/src/app/layout.tsx b/frontends/main/src/app/layout.tsx
index cf32f524c3..2f3f280abe 100644
--- a/frontends/main/src/app/layout.tsx
+++ b/frontends/main/src/app/layout.tsx
@@ -6,6 +6,7 @@ import Footer from "@/page-components/Footer/Footer"
 import { PageWrapper, PageWrapperInner } from "./styled"
 import Providers from "./providers"
 import { MITLearnGlobalStyles } from "ol-components"
+import Script from "next/script"
 
 import "./GlobalStyles"
 
@@ -26,6 +27,9 @@ export default function RootLayout({
           </PageWrapper>
         </Providers>
       </body>
+      {process.env.NEXT_PUBLIC_APPZI_URL ? (
+        <Script async src={process.env.NEXT_PUBLIC_APPZI_URL} />
+      ) : null}
     </html>
   )
 }

From c57fcb487385ea4e68a845b237c55194379f7779 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 17:01:23 -0400
Subject: [PATCH 4/6] validate env

---
 frontends/main/next.config.js |  3 +++
 frontends/main/validateEnv.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 frontends/main/validateEnv.js

diff --git a/frontends/main/next.config.js b/frontends/main/next.config.js
index f97530c0d8..6283b8c7ab 100644
--- a/frontends/main/next.config.js
+++ b/frontends/main/next.config.js
@@ -1,4 +1,7 @@
 // @ts-check
+const { validateEnv } = require("./validateEnv")
+
+validateEnv()
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
diff --git a/frontends/main/validateEnv.js b/frontends/main/validateEnv.js
new file mode 100644
index 0000000000..9455764d5c
--- /dev/null
+++ b/frontends/main/validateEnv.js
@@ -0,0 +1,29 @@
+/**
+ * Validate the environment variables we use throughout the app.
+ *
+ * This only validates them. It does not transform them (e.g., into a boolean).
+ * Env vars should still be accessed via process.env.ENV_VAR
+ */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const yup = require("yup")
+
+const schema = yup.object().shape({
+  // Server-only env vars
+  MITOL_NOINDEX: yup.string().oneOf(["true", "false"]),
+  // Client or Server env vars
+  NEXT_PUBLIC_APPZI_URL: yup.string(),
+  NEXT_PUBLIC_ORIGIN: yup.string().required(),
+  NEXT_PUBLIC_MITOL_API_BASE_URL: yup.string().required(),
+  NEXT_PUBLIC_PUBLIC_URL: yup.string().required(),
+  NEXT_PUBLIC_SITE_NAME: yup.string().required(),
+  NEXT_PUBLIC_MITOL_SUPPORT_EMAIL: yup.string().required(),
+  NEXT_PUBLIC_EMBEDLY_KEY: yup.string(),
+  NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS: yup
+    .string()
+    .oneOf(["true", "false"]),
+  NEXT_PUBLIC_CSRF_COOKIE_NAME: yup.string().required(),
+})
+
+const validateEnv = () => schema.validateSync(process.env)
+
+module.exports = { validateEnv }

From 7127e82093c6b5cc0468009ab8726d86324c58c8 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 17:21:12 -0400
Subject: [PATCH 5/6] comment, fix ci

---
 .github/workflows/ci.yml                                    | 6 ++++++
 frontends/main/validateEnv.js                               | 1 -
 .../src/components/ThemeProvider/MITLearnGlobalStyles.tsx   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 671698127b..76ed51364a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -128,6 +128,12 @@ jobs:
 
       - name: Build Next.js frontend
         run: yarn workspace main build
+        env:
+          NEXT_PUBLIC_ORIGIN: https://ci.learn.mit.edu
+          NEXT_PUBLIC_MITOL_API_BASE_URL: https://api.ci.learn.mit.edu
+          NEXT_PUBLIC_CSRF_COOKIE_NAME: cookie-monster
+          NEXT_PUBLIC_SITE_NAME: MIT Learn
+          NEXT_PUBLIC_MITOL_SUPPORT_EMAIL: help@ci.learn.mit.edu
         # do this before typecheck. See https://github.com/vercel/next.js/issues/53959#issuecomment-1735563224
 
       - name: Typecheck
diff --git a/frontends/main/validateEnv.js b/frontends/main/validateEnv.js
index 9455764d5c..74f01e2cf7 100644
--- a/frontends/main/validateEnv.js
+++ b/frontends/main/validateEnv.js
@@ -14,7 +14,6 @@ const schema = yup.object().shape({
   NEXT_PUBLIC_APPZI_URL: yup.string(),
   NEXT_PUBLIC_ORIGIN: yup.string().required(),
   NEXT_PUBLIC_MITOL_API_BASE_URL: yup.string().required(),
-  NEXT_PUBLIC_PUBLIC_URL: yup.string().required(),
   NEXT_PUBLIC_SITE_NAME: yup.string().required(),
   NEXT_PUBLIC_MITOL_SUPPORT_EMAIL: yup.string().required(),
   NEXT_PUBLIC_EMBEDLY_KEY: yup.string(),
diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
index 7557b4ceae..921bdf6fa9 100644
--- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
+++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
@@ -9,7 +9,7 @@ import { preload } from "react-dom"
     Font files for Adobe neue haas grotesk.
     WARNING: This is linked to chudzick@mit.edu's Adobe account.
     We'd prefer a non-personal MIT account to be used.
-    See XXX for more.
+    See https://github.com/mitodl/hq/issues/4237 for more.
 
     Ideally the font would be loaded via a <link /> tag; see
       - https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata

From f08d8f90354966b737ed3daa5188bdda5c838f3e Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Wed, 18 Sep 2024 17:28:49 -0400
Subject: [PATCH 6/6] build nextjs for production

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 76ed51364a..81345d82a1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -129,6 +129,7 @@ jobs:
       - name: Build Next.js frontend
         run: yarn workspace main build
         env:
+          NODE_ENV: production
           NEXT_PUBLIC_ORIGIN: https://ci.learn.mit.edu
           NEXT_PUBLIC_MITOL_API_BASE_URL: https://api.ci.learn.mit.edu
           NEXT_PUBLIC_CSRF_COOKIE_NAME: cookie-monster