Make metadataBase apply to all pages, not just homepage

[ChristopherChudzicki]

What are the relevant tickets?

Followup to #1671

Description (What does it do?)

This PR moves metadadataBase from root page to root layout.

Child pages load all their parent layouts (but not parent pages!) so the earlier positioning of metadataBase was only affecting the home page.

How can this be tested?

1. Despite what the docs say here, it seems like metadataBase does not work in local dev mode. So set NODE_ENV=production and NEXT_PUBLIC_ORIGIN=https://learn.mit.edu, then run yarn workspace main build yarn workspace main start

   • you should NOT see any warnings like

   ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:8062". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

2. Visit your local production server and run $$('meta').forEach(e => console.log(e.outerHTML)) in the dev console

   • all pages, including homepage, should have og:image urls beginning with learn.mit.edu

[ChristopherChudzicki]

These are all client components for now because they use runtime CSS-in-JS (Emotion) which depends on react useContext.

Marking them as use-client allows importing them into server components.

[ChristopherChudzicki]

layout.tsx needs to be a server component in order to define metadata

[ChristopherChudzicki]

This is unrelated to the other changes, but...

• we noticed the metadataBase issue because channel og:image were not working
• og:image cannot be an SVG, so without this change, they still won't work.

[jonkafton]

Works!.. in prod mode yarn build; yarn start;

Interesting and odd that it does not work in dev mode. You mentioned that's apparently the case on Slack, but didn't see that info while scanning the docs.