Adjusted graphql types for easier properties

app/[...slug]/metadata.tsx

@@ -1,14 +1,12 @@
 import {decode} from 'html-entities';
 import {
-  Image,
   Maybe,
   NodeStanfordEvent,
   NodeStanfordNews,
   NodeStanfordPage,
   NodeStanfordPerson, NodeStanfordPolicy,
   NodeUnion, ParagraphStanfordWysiwyg, ParagraphUnion
 } from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
 
 export const getNodeMetadata = (node: NodeUnion) => {
   const defaultData = {
@@ -50,8 +48,8 @@ export const getNodeMetadata = (node: NodeUnion) => {
 }
 
 const getBasicPageMetaData = (node: NodeStanfordPage) => {
-  const pageImage = getMediaFromEntityField<Image>(node.suPageImage);
-  const bannerImage = getMediaFromEntityField<Image>(node.suPageBanner?.__typename === 'ParagraphStanfordBanner' ? node.suPageBanner?.suBannerImage : undefined);
+  const pageImage = node.suPageImage?.mediaImage
+  const bannerImage = node.suPageBanner?.suBannerImage?.mediaImage;
 
   const imageUrl = pageImage?.url || bannerImage?.url
   const imageAlt = pageImage?.alt || bannerImage?.alt || '';
@@ -69,8 +67,8 @@ const getBasicPageMetaData = (node: NodeStanfordPage) => {
 }
 
 const getNewsMetaData = (node: NodeStanfordNews) => {
-  const pageImage = getMediaFromEntityField<Image>(node.suNewsFeaturedMedia);
-  const bannerImage = getMediaFromEntityField<Image>(node.suNewsBanner);
+  const pageImage = node.suNewsFeaturedMedia?.mediaImage;
+  const bannerImage = node.suNewsBanner?.__typename === 'MediaImage' ? node.suNewsBanner.mediaImage : undefined;
 
   const imageUrl = pageImage?.url || bannerImage?.url
   const imageAlt = pageImage?.alt || bannerImage?.alt || '';
@@ -96,7 +94,7 @@ const getNewsMetaData = (node: NodeStanfordNews) => {
 }
 
 const getPersonMetaData = (node: NodeStanfordPerson) => {
-  const pageImage = getMediaFromEntityField<Image>(node.suPersonPhoto);
+  const pageImage = node.suPersonPhoto?.mediaImage;
   const imageUrl = pageImage?.url;
   const imageAlt = pageImage?.alt || '';
   const description = node.suPersonFullTitle ?? getCleanDescription(node.body?.processed);

src/components/config-pages/global-message.tsx

@@ -1,12 +1,11 @@
-
 import {GlobalMessageConfigPageType} from "@lib/drupal/drupal-jsonapi.types";
 import {BellIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon} from "@heroicons/react/20/solid";
 import {H2} from "@components/elements/headers";
 import Wysiwyg from "@components/elements/wysiwyg";
 import Link from "@components/elements/link";
 import {clsx} from "clsx";
 
-const GlobalMessage = ({configPage}:{configPage?:GlobalMessageConfigPageType}) => {
+const GlobalMessage = ({configPage}: { configPage?: GlobalMessageConfigPageType }) => {
   if (!configPage || !configPage.su_global_msg_enabled) return;
 
   const wrapperClasses = clsx({

src/components/config-pages/local-footer.tsx

@@ -23,7 +23,7 @@ import {Maybe} from "@lib/gql/__generated__/drupal";
 import {LocalFooterConfigPageType} from "@lib/drupal/drupal-jsonapi.types";
 import {buildUrl} from "@lib/drupal/utils";
 
-const LocalFooter = ({configPage}:{configPage?: LocalFooterConfigPageType}) => {
+const LocalFooter = ({configPage}: { configPage?: LocalFooterConfigPageType }) => {
   if (!configPage || !configPage.su_footer_enabled) return;
 
   const lockupProps = {

src/components/elements/button.tsx

@@ -15,7 +15,16 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
   prefetch?: boolean
 }
 
-export const Button = ({href, buttonElem = false, big = false, secondary = false, centered = false, children, className, ...props}: Props) => {
+export const Button = ({
+  href,
+  buttonElem = false,
+  big = false,
+  secondary = false,
+  centered = false,
+  children,
+  className,
+  ...props
+}: Props) => {
 
   const standardClasses = clsx(
     {

src/components/elements/select-list.tsx

@@ -96,7 +96,18 @@ interface Props {
   name?: Maybe<string>
 }
 
-const SelectList = ({options = [], label, multiple, ariaLabelledby, required, defaultValue, name, emptyValue, emptyLabel = "- None -", ...props}: Props) => {
+const SelectList = ({
+  options = [],
+  label,
+  multiple,
+  ariaLabelledby,
+  required,
+  defaultValue,
+  name,
+  emptyValue,
+  emptyLabel = "- None -",
+  ...props
+}: Props) => {
   const labelId = useId();
   const labeledBy = ariaLabelledby ?? labelId;
 

src/components/elements/string-with-lines.tsx

@@ -1,5 +1,4 @@
-
-const StringWithLines = ({text, key}: { text: string, key: string}) => {
+const StringWithLines = ({text, key}: { text: string, key: string }) => {
   return (
     <>
       {text.split('\n').map((line, i) =>

src/components/global/page-footer.tsx

@@ -21,7 +21,8 @@ const PageFooter = async () => {
             </a>
           </div>
           <div className="mx-auto lg:mx-0 [&_a:hover]:underline [&_a:focus]:underline">
-            <nav aria-label="University Links" className="flex gap-20 sm:gap-0 sm:flex-col justify-center lg:justify-start mb-5">
+            <nav aria-label="University Links"
+                 className="flex gap-20 sm:gap-0 sm:flex-col justify-center lg:justify-start mb-5">
               <ul className="text-2xl md:text-3xl list-unstyled sm:flex sm:gap-10 justify-center lg:justify-start">
                 <li>
                   <a href="https://www.stanford.edu">

src/components/menu/main-menu.tsx

@@ -121,7 +121,7 @@ const MenuItem = ({id, url, title, activeTrail, items, level = 0}: MenuItemProps
     // Child menu item styles.
     {
       'ml-5 lg:ml-0 lg:pl-5': level !== 0,
-      'border-digital-red':  level !== 0 && isCurrent,
+      'border-digital-red': level !== 0 && isCurrent,
       'border-transparent': level !== 0 && !isCurrent
     }
   )

src/components/nodes/cards/stanford-course/stanford-course-card.tsx

@@ -11,7 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id}
+             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
       <div className="flex flex-col">
         <Heading className="text-m2 order-last" id={node.id}>
           <Link href={node.path}>

src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx

@@ -11,7 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id}
+             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
       <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>
           {node.title}

src/components/nodes/cards/stanford-event/stanford-event-card.tsx

@@ -25,7 +25,7 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article aria-labelledby={node.id}
-      className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-10 overflow-hidden" {...props}>
+             className="mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-10 overflow-hidden" {...props}>
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}

src/components/nodes/cards/stanford-news/stanford-news-card.tsx

@@ -2,29 +2,27 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {NodeStanfordNews, TermUnion, Image as ImageType} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordNews, TermUnion} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
   headingLevel?: string
 }
 
 const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
-  const image = getMediaFromEntityField<ImageType>(node.suNewsFeaturedMedia)
-  const imageUrl = image?.url;
+  const image = node.suNewsFeaturedMedia?.mediaImage
 
   const topics: TermUnion[] = node.suNewsTopics ? node.suNewsTopics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
 
-      {imageUrl &&
+      {image?.url &&
         <div className="relative aspect-[16/9] w-full">
           <Image
             className="object-cover"
-            src={imageUrl}
-            alt={image?.alt || ''}
+            src={image.url}
+            alt={image.alt || ''}
             fill
             sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />

src/components/nodes/cards/stanford-page/stanford-page-card.tsx

@@ -2,29 +2,26 @@ import Link from "@components/elements/link";
 import Image from "next/image";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {NodeStanfordPage, Image as ImageType} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
   headingLevel?: string
 }
 
 const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
-  const image = getMediaFromEntityField<ImageType>(node.suPageImage) || getMediaFromEntityField<ImageType>(node.suPageBanner?.__typename === 'ParagraphStanfordBanner' ? node.suPageBanner?.suBannerImage : undefined);
-
-  const imageUrl = image?.url
+  const image = node.suPageImage?.mediaImage || node.suPageBanner?.suBannerImage?.mediaImage
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
-      {imageUrl &&
+      {image?.url &&
         <div
           className="relative aspect-[16/9] w-full">
           <Image
             className="object-cover"
-            src={imageUrl}
-            alt={image?.alt || ''}
+            src={image.url}
+            alt={image.alt || ''}
             fill
             sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />

src/components/nodes/cards/stanford-person/stanford-person-card.tsx

@@ -2,16 +2,15 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {NodeStanfordPerson, Image as ImageType} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPerson
   headingLevel?: string
 }
 
 const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
-  const imageUrl = getMediaFromEntityField<ImageType>(node.suPersonPhoto)?.url
+  const imageUrl = node.suPersonPhoto?.mediaImage.url
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (

src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx

@@ -19,7 +19,8 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
 
   const teaserSummary = node.body?.summary || (trimmedBodyText + '...');
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id}
+             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>

src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx

@@ -11,7 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
+    <article aria-labelledby={node.id}
+             className="mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
       <div className="flex flex-col">
         <Heading className="text-m2 order-last [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>

src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx

@@ -11,7 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
+    <article aria-labelledby={node.id}
+             className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
 
       <Heading className="text-m2" id={node.id}>
         <Link href={node.path}>

src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx

@@ -2,17 +2,15 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {Image as ImageType, NodeStanfordNews, TermUnion} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordNews, TermUnion} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
   headingLevel?: string
 }
 
 const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
-  const image = getMediaFromEntityField<ImageType>(node.suNewsFeaturedMedia)
-  const imageUrl = image?.url;
+  const image = node.suNewsFeaturedMedia?.mediaImage
 
   const publishDate = node.suNewsPublishingDate && new Date(node.suNewsPublishingDate.time);
 
@@ -49,12 +47,12 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
           }
         </div>
 
-        {imageUrl &&
+        {image?.url &&
           <div className="order-1 @3xl:order-2 relative aspect-[16/9] @3xl:w-1/4 mb-10 @3xl:mb-0 shrink-0">
             <Image
               className="object-cover"
-              src={imageUrl}
-              alt={image?.alt || ''}
+              src={image.url}
+              alt={image.alt || ''}
               fill
               sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />

src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx

@@ -2,18 +2,15 @@ import Link from "@components/elements/link";
 import Image from "next/image";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {Image as ImageType, NodeStanfordPage} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
   headingLevel?: string
 }
 
 const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
-  const image = getMediaFromEntityField<ImageType>(node.suPageImage) || getMediaFromEntityField<ImageType>(node.suPageBanner?.__typename === 'ParagraphStanfordBanner' ? node.suPageBanner?.suBannerImage : undefined);
-
-  const imageUrl = image?.url
+  const image = node.suPageImage?.mediaImage || node.suPageBanner?.suBannerImage?.mediaImage;
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
@@ -31,13 +28,13 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
           }
         </div>
 
-        {imageUrl &&
+        {image?.url &&
           <div
             className="order-1 @4xl:order-2 relative aspect-[16/9] h-fit w-full @4xl:w-1/4 shrink-0">
             <Image
               className="object-cover"
-              src={imageUrl}
-              alt={image?.alt || ''}
+              src={image.url}
+              alt={image.alt || ''}
               fill
               sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />

src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx

@@ -2,16 +2,15 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {Image as ImageType, NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
-import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
+import {NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPerson
   headingLevel?: string
 }
 
 const StanfordPersonListItem = ({node, headingLevel, ...props}: Props) => {
-  const imageUrl = getMediaFromEntityField<ImageType>(node.suPersonPhoto)?.url;
+  const imageUrl = node.suPersonPhoto?.mediaImage.url
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (

src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx

@@ -11,7 +11,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordPublicationListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <article aria-labelledby={node.id} className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
+    <article aria-labelledby={node.id}
+             className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
       <div className="flex flex-col">
         <Heading className="text-m2 order-first" id={node.id}>
           <Link href={node.path}>

src/components/nodes/pages/stanford-page/stanford-page-page.tsx

@@ -15,7 +15,7 @@ const StanfordPagePage = ({node, ...props}: Props) => {
 
   return (
     <article {...props}>
-      {node.suPageBanner?.__typename === 'ParagraphStanfordBanner' &&
+      {node.suPageBanner &&
         <header aria-label="Page banner">
           <BannerParagraph paragraph={node.suPageBanner} eagerLoadImage/>
         </header>