Updated opportunities and publication displays

package.json

@@ -16,12 +16,12 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@mui/base": "5.0.0-beta.61",
-    "@next/third-parties": "15.0.2",
+    "@next/third-parties": "15.0.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "22.9.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "19.0.0-rc.1",
-    "algoliasearch": "^5.12.0",
+    "algoliasearch": "^5.14.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
@@ -31,21 +31,21 @@
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.18",
-    "next": "15.0.2",
+    "next": "15.0.3",
     "plaiceholder": "^3.0.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "qs": "^6.13.0",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-focus-lock": "^2.13.2",
-    "react-instantsearch": "^7.13.7",
-    "react-instantsearch-nextjs": "^0.3.17",
+    "react-instantsearch": "^7.13.8",
+    "react-instantsearch-nextjs": "^0.3.18",
     "react-slick": "^0.30.2",
     "react-super-responsive-table": "^6.0.0",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "usehooks-ts": "^3.1.0"
   },
@@ -57,30 +57,30 @@
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.3.1",
-    "@next/bundle-analyzer": "15.0.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
+    "@next/bundle-analyzer": "15.0.3",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/nextjs": "^8.4.2",
-    "@storybook/react": "^8.4.2",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/nextjs": "^8.4.4",
+    "@storybook/react": "^8.4.4",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.1.0",
     "encoding": "^0.1.13",
     "eslint": "^9.14.0",
-    "eslint-config-next": "15.0.2",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.11.0",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "react-docgen": "^7.1.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "storybook-addon-module-mock": "^1.3.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript-eslint": "^8.13.0"
+    "typescript-eslint": "^8.14.0"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/nodes/cards/node-card.tsx

@@ -8,6 +8,7 @@ import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford
 import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
+import StanfordOpportunityCard from "@components/nodes/cards/stanford-opportunity/stanford-opportunity-card"
 
 type Props = {
   /**
@@ -44,6 +45,8 @@ const NodeCard = ({node, headingLevel}: Props) => {
       return <StanfordPolicyCard node={node} headingLevel={headingLevel} {...itemProps} />
     case "NodeStanfordPublication":
       return <StanfordPublicationCard node={node} headingLevel={headingLevel} {...itemProps} />
+    case "NodeStanfordOpportunity":
+      return <StanfordOpportunityCard node={node} headingLevel={headingLevel} {...itemProps} />
   }
 }
 export default NodeCard

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

@@ -0,0 +1,26 @@
+import Link from "@components/elements/link"
+import {H2, H3} from "@components/elements/headers"
+import {HtmlHTMLAttributes} from "react"
+import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
+import ImageCard from "@components/patterns/image-card"
+import Wysiwyg from "@components/elements/wysiwyg"
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  node: NodeStanfordOpportunity
+  headingLevel?: "h2" | "h3"
+}
+
+const StanfordOpportunityCard = ({node, headingLevel, ...props}: Props) => {
+  const image = node.suOppImage?.mediaImage
+  const Heading = headingLevel === "h3" ? H3 : H2
+
+  return (
+    <ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} isArticle>
+      <Heading className="[&_a]:text-black" id={node.id}>
+        <Link href={node.suOppSource?.url || node.path}>{node.title}</Link>
+      </Heading>
+      <Wysiwyg html={node.suOppSummary?.processed || node.body?.summary} />
+    </ImageCard>
+  )
+}
+export default StanfordOpportunityCard

src/components/nodes/list-item/node-list-item.tsx

@@ -8,6 +8,7 @@ import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/
 import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
+import StanfordOpportunityListItem from "@components/nodes/list-item/stanford-opportunity/stanford-opportunity-list-item"
 
 type Props = {
   /**
@@ -44,7 +45,9 @@ const NodeListItem = ({node, headingLevel}: Props) => {
     case "NodeStanfordPolicy":
       return <StanfordPolicyListItem node={node} headingLevel={headingLevel} {...itemProps} />
     case "NodeStanfordPublication":
-      return <StanfordPublicationListItem node={node} headingLevel={headingLevel} {...itemProps} />
+      return <StanfordPublicationListItem node={node} {...itemProps} />
+    case "NodeStanfordOpportunity":
+      return <StanfordOpportunityListItem node={node} headingLevel={headingLevel} {...itemProps} />
   }
 }
 export default NodeListItem

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

@@ -0,0 +1,49 @@
+import Image from "next/image"
+import Link from "@components/elements/link"
+import {H2, H3} from "@components/elements/headers"
+import {HtmlHTMLAttributes} from "react"
+import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
+import twMerge from "@lib/utils/twMerge"
+import Wysiwyg from "@components/elements/wysiwyg"
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  node: NodeStanfordOpportunity
+  headingLevel?: "h2" | "h3"
+}
+
+const StanfordOpportunityListItem = ({node, headingLevel, ...props}: Props) => {
+  const image = node.suOppImage?.mediaImage
+  const Heading = headingLevel === "h3" ? H3 : H2
+
+  return (
+    <article {...props} aria-labelledby={node.id} className={twMerge("@container", props.className)}>
+      <div className="flex w-full flex-col justify-between @3xl:flex-row">
+        <div className="order-2 @3xl:order-1">
+          <Heading className="font-bold" id={node.id}>
+            <Link
+              href={node.suOppSource?.url || node.path}
+              className="order-2 text-digital-red no-underline hocus:text-black hocus:underline"
+            >
+              {node.title}
+            </Link>
+          </Heading>
+
+          <Wysiwyg html={node.suOppSummary?.processed || node.body?.summary} />
+        </div>
+
+        {image?.url && (
+          <div className="relative order-1 mb-10 aspect-[16/9] shrink-0 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4">
+            <Image
+              className="ed11y-ignore object-cover"
+              src={image.url}
+              alt=""
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
+            />
+          </div>
+        )}
+      </div>
+    </article>
+  )
+}
+export default StanfordOpportunityListItem

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

@@ -1,39 +1,35 @@
-import Link from "@components/elements/link"
-import {H2, H3} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordPublication} from "@lib/gql/__generated__/drupal.d"
-import twMerge from "@lib/utils/twMerge"
-import ReverseVisualOrder from "@components/elements/reverse-visual-order"
+import Wysiwyg from "@components/elements/wysiwyg"
+import Link from "@components/elements/link"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPublication
-  headingLevel?: "h2" | "h3"
+  apa?: boolean
+  chicago?: boolean
 }
 
-const StanfordPublicationListItem = ({node, headingLevel, ...props}: Props) => {
-  const citationUrl = node.suPublicationCitation?.suUrl?.url
-  const Heading = headingLevel === "h3" ? H3 : H2
-  return (
-    <article
-      {...props}
-      aria-labelledby={node.id}
-      className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
-    >
-      <ReverseVisualOrder>
-        <Heading id={node.id}>
-          <Link href={citationUrl || node.path}>{node.title}</Link>
-        </Heading>
-        <div className="font-bold">Publication</div>
-      </ReverseVisualOrder>
+const StanfordPublicationListItem = ({node, apa, chicago, ...props}: Props) => {
+  const citation = apa ? node.suPublicationCitation?.apa : node.suPublicationCitation?.chicago
 
-      {node.suPublicationTopics && (
-        <div>
-          {node.suPublicationTopics.map(topic => (
-            <div key={topic.id}>{topic.name}</div>
-          ))}
-        </div>
+  return (
+    <div {...props}>
+      {citation && (
+        <Wysiwyg
+          html={apa ? node.suPublicationCitation?.apa : node.suPublicationCitation?.chicago}
+          className="ml-12 -indent-12 [&_a]:text-digital-red [&_a]:no-underline [&_a]:hocus:text-black [&_a]:hocus:underline"
+        />
+      )}
+      {!citation && (
+        <Link
+          className="text-digital-red no-underline hocus:text-black hocus:underline"
+          href={node.path}
+          prefetch={false}
+        >
+          {node.title}
+        </Link>
       )}
-    </article>
+    </div>
   )
 }
 export default StanfordPublicationListItem

src/components/nodes/pages/node-page-metadata.tsx

@@ -4,11 +4,29 @@ import {JSX} from "react"
 import {OpenGraphType} from "next/dist/lib/metadata/types/opengraph-types"
 
 type Props = {
+  /**
+   * Page title without the site name, undefined if the home page.
+   */
   pageTitle?: string
+  /**
+   * Short description of the page.
+   */
   description?: string
+  /**
+   * Drupal image.
+   */
   image?: false | Image
+  /**
+   * Additional meta data if desired.
+   */
   children?: JSX.Element | JSX.Element[]
+  /**
+   * Page type.
+   */
   ogType?: OpenGraphType
+  /**
+   * Twitter card style.
+   */
   twitterCard?: "summary" | "summary_large_image" | "app" | "player"
 }
 

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

@@ -6,6 +6,7 @@ import StanfordPolicyPage from "@components/nodes/pages/stanford-policy/stanford
 import StanfordPublicationPage from "@components/nodes/pages/stanford-publication/stanford-publication-page"
 import StanfordCoursePage from "@components/nodes/pages/stanford-course/stanford-course-page"
 import StanfordEventSeriesPage from "@components/nodes/pages/stanford-event-series/stanford-event-series-page"
+import StanfordOpportunityPage from "@components/nodes/pages/stanford-opportunity/stanford-opportunity-page"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
 
@@ -35,6 +36,8 @@ const NodePage = ({node}: {node: NodeUnion}) => {
       return <StanfordPolicyPage node={node} {...itemProps} />
     case "NodeStanfordPublication":
       return <StanfordPublicationPage node={node} {...itemProps} />
+    case "NodeStanfordOpportunity":
+      return <StanfordOpportunityPage node={node} {...itemProps} />
   }
 }
 export default NodePage

src/components/nodes/pages/stanford-opportunity/stanford-opportunity-metadata.tsx

@@ -0,0 +1,13 @@
+import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
+import {getCleanDescription, getFirstText} from "@lib/utils/text-tools"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+
+type Props = {
+  node: NodeStanfordOpportunity
+}
+const StanfordOpportunityMetadata = ({node}: Props) => {
+  const description = getCleanDescription(node.suOppSummary?.processed, 2) || getFirstText(node.suOppComponents)
+  const image = node.suOppImage?.mediaImage
+  return <NodePageMetadata pageTitle={node.title} description={description} image={image} />
+}
+export default StanfordOpportunityMetadata

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

@@ -0,0 +1,70 @@
+import Rows from "@components/paragraphs/rows/rows"
+import {H1} from "@components/elements/headers"
+import {HtmlHTMLAttributes} from "react"
+import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
+import StanfordOpportunityMetadata from "@components/nodes/pages/stanford-opportunity/stanford-opportunity-metadata"
+import Wysiwyg from "@components/elements/wysiwyg"
+import Image from "next/image"
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  node: NodeStanfordOpportunity
+  headingLevel?: "h2" | "h3"
+}
+
+const StanfordOpportunityPage = ({node, ...props}: Props) => {
+  const image = node.suOppImage?.mediaImage
+  return (
+    <article className="centered mt-32" {...props}>
+      <StanfordOpportunityMetadata node={node} />
+      <H1>{node.title}</H1>
+
+      <div className="grid grid-cols-3-1 gap-20">
+        <div className="space-y-20">
+          <Wysiwyg html={node.suOppSummary?.processed} />
+          <Wysiwyg html={node.body?.processed} />
+        </div>
+
+        <div className="space-y-10">
+          {image?.url && (
+            <div className="relative order-1 mb-10 aspect-[16/9] shrink-0 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4">
+              <Image
+                className="ed11y-ignore object-cover"
+                src={image.url}
+                alt=""
+                fill
+                sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
+              />
+            </div>
+          )}
+
+          {node.suOppType && (
+            <div className="font-semibold">
+              {node.suOppType.map(oppType => (
+                <div key={oppType.id}>{oppType.name}</div>
+              ))}
+            </div>
+          )}
+
+          {node.suOppApplicationDeadline && (
+            <div>Application Deadline: {new Date(node.suOppApplicationDeadline.time).toLocaleString()}</div>
+          )}
+          {node.suOppEligibility && (
+            <div>
+              Eligibility: <Wysiwyg html={node.suOppEligibility.processed} />
+            </div>
+          )}
+          {node.suOppStartDate && <div>Start Date: {new Date(node.suOppStartDate.time).toLocaleDateString()}</div>}
+          {node.suOppCourseCode && (
+            <div>
+              {node.suOppCourseCode.map((code, i) => (
+                <div key={`course-code-${i}`}>{code}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      <Rows components={node.suOppComponents} className="mx-auto lg:w-8/12" />
+    </article>
+  )
+}
+export default StanfordOpportunityPage