Use metatag field

.storybook/stories/nodes/list-item/PublicationListItem.stories.tsx

@@ -16,10 +16,6 @@ const meta: Meta<ComponentStoryProps> = {
   component: StanfordPublicationListItem,
   tags: ["autodocs"],
   argTypes: {
-    headingLevel: {
-      options: ["h2", "h3"],
-      control: {type: "select"},
-    },
     node: {
       table: {
         disable: true,

app/page.tsx

@@ -4,7 +4,7 @@ import {getEntityFromPath} from "@lib/gql/gql-queries"
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal.d"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph"
-import StanfordPageMetadata from "@components/nodes/pages/stanford-page/stanford-page-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const revalidate = false
@@ -18,7 +18,7 @@ const Home = async () => {
 
   return (
     <article>
-      <StanfordPageMetadata node={entity} isHome />
+      <NodePageMetadata pageTitle={undefined} metatags={entity.metatag} />
       {entity.suPageBanner?.__typename === "ParagraphStanfordBanner" && (
         <header>
           <BannerParagraph paragraph={entity.suPageBanner} eagerLoadImage />

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

@@ -1,43 +1,32 @@
 import {getConfigPageField} from "@lib/gql/gql-queries"
-import {Image, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d"
+import {
+  MetaTagUnion,
+  MetaTagValue as MetaTagValueType,
+  MetaTagProperty as MetaTagPropertyType,
+  StanfordBasicSiteSetting,
+} from "@lib/gql/__generated__/drupal.d"
 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.
+   * Metatag field data.
    */
-  description?: string
+  metatags?: MetaTagUnion[]
   /**
-   * Drupal image.
+   * If no description metatag is provided by the backend, use this.
    */
-  image?: false | Image
+  backupDescription?: string
   /**
    * Additional meta data if desired.
    */
   children?: JSX.Element | JSX.Element[]
-  /**
-   * Page type.
-   */
-  ogType?: OpenGraphType
-  /**
-   * Twitter card style.
-   */
-  twitterCard?: "summary" | "summary_large_image" | "app" | "player"
 }
 
-const NodePageMetadata = async ({
-  pageTitle,
-  description,
-  image,
-  ogType = "website",
-  twitterCard = "summary_large_image",
-  children,
-}: Props) => {
+const NodePageMetadata = async ({pageTitle, metatags, backupDescription, children}: Props) => {
   const siteName =
     (await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteName"]>(
       "StanfordBasicSiteSetting",
@@ -46,38 +35,46 @@ const NodePageMetadata = async ({
 
   const title = pageTitle ? `${pageTitle} | ${siteName}` : siteName
 
+  const hasDescription = metatags?.some(
+    tag => tag.__typename === "MetaTagValue" && tag.attributes.name === "description"
+  )
+
   return (
     <>
       <title>{title}</title>
       <meta property="og:title" content={title} />
-      <meta property="og:type" content={ogType} />
-      <meta name="twitter:card" content={twitterCard} />
       <meta name="twitter:title" content={title} />
 
-      {description && (
+      {!hasDescription && backupDescription && (
         <>
-          <meta name="description" content={description} />
-          <meta property="og:description" content={description} />
-          <meta name="twitter:description" content={description} />
+          <meta name="description" content={backupDescription} />
+          <meta name="twitter:description" content={backupDescription} />
+          <meta property="og:description" content={backupDescription} />
         </>
       )}
 
-      {image && (
-        <>
-          <meta property="og:image" content={image.url} />
-          <meta property="og:image:width" content={image.width.toString()} />
-          <meta property="og:image:height" content={image.height.toString()} />
-          {image.alt && <meta property="og:image:alt" content={image.alt} />}
-
-          <meta name="twitter:image" content={image.url} />
-          <meta name="twitter:image:width" content={image.width.toString()} />
-          <meta name="twitter:image:height" content={image.height.toString()} />
-          {image.alt && <meta name="twitter:image:alt" content={image.alt} />}
-        </>
-      )}
+      {metatags?.map((tag, i) => <MetaTag key={`metatag-${i}`} tag={tag} />)}
 
       {children}
     </>
   )
 }
+
+const MetaTag = ({tag}: {tag: MetaTagUnion}) => {
+  if (tag.__typename === "MetaTagValue") return <MetaTagValue tag={tag} />
+  if (tag.__typename === "MetaTagProperty") return <MetaTagProperty tag={tag} />
+}
+
+const MetaTagValue = ({tag}: {tag: MetaTagValueType}) => {
+  const ignoreNames = ["title", "twitter:title"]
+  if (tag.attributes.name && tag.attributes.content && !ignoreNames.includes(tag.attributes.name))
+    return <meta name={tag.attributes.name} content={tag.attributes.content} />
+}
+
+const MetaTagProperty = ({tag}: {tag: MetaTagPropertyType}) => {
+  const ignoreProperties = ["og:url", "og:title"]
+  if (tag.attributes.property && tag.attributes.content && !ignoreProperties.includes(tag.attributes.property))
+    return <meta property={tag.attributes.property} content={tag.attributes.content} />
+}
+
 export default NodePageMetadata

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

@@ -4,7 +4,8 @@ import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal.d"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
-import StanfordCourseMetadata from "@components/nodes/pages/stanford-course/stanford-course-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getCleanDescription} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordCourse
@@ -15,7 +16,11 @@ const StanfordCoursePage = ({node, ...props}: Props) => {
   if (node.suCourseLink?.url && !isPreviewMode()) redirect(node.suCourseLink?.url)
   return (
     <article className="centered my-32" {...props}>
-      <StanfordCourseMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={getCleanDescription(node.body?.processed)}
+      />
       <H1>{node.title}</H1>
       <div className="flex flex-col gap-10">
         {node.suCourseSubject && <div>{node.suCourseSubject.name}</div>}

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

@@ -2,7 +2,8 @@ import StanfordEventListItem from "@components/nodes/list-item/stanford-event/st
 import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal.d"
-import StanfordEventSeriesMetadata from "@components/nodes/pages/stanford-event-series/stanford-event-series-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getFirstText} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEventSeries
@@ -12,7 +13,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesPage = ({node, ...props}: Props) => {
   return (
     <article className="centered" {...props}>
-      <StanfordEventSeriesMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={node.suEventSeriesSubheadline || getFirstText(node.suEventSeriesComponents)}
+      />
       <H1 className="mt-32">{node.title}</H1>
 
       {node.suEventSeriesDek && <div className="type-4 mb-20 font-bold">{node.suEventSeriesDek}</div>}

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

@@ -14,7 +14,8 @@ import Telephone from "@components/elements/telephone"
 import Link from "@components/elements/link"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import ReverseVisualOrder from "@components/elements/reverse-visual-order"
-import StanfordEventMetadata from "@components/nodes/pages/stanford-event/stanford-event-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getCleanDescription} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEvent
@@ -30,7 +31,11 @@ const StanfordEventPage = ({node, ...props}: Props) => {
 
   return (
     <article className="centered mt-32 flex flex-col gap-20" {...props}>
-      <StanfordEventMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={node.suEventSubheadline || getCleanDescription(node.body?.processed)}
+      />
       <ReverseVisualOrder>
         <H1>{node.title}</H1>
 

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

@@ -7,7 +7,8 @@ import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordNews} from "@lib/gql/__generated__/drupal.d"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import ReverseVisualOrder from "@components/elements/reverse-visual-order"
-import StanfordNewsMetadata from "@components/nodes/pages/stanford-news/stanford-news-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getFirstText} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
@@ -37,7 +38,11 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
 
   return (
     <article className="centered mt-32" {...props}>
-      <StanfordNewsMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={node.suNewsDek || getFirstText(node.suNewsComponents)}
+      />
       <div className="mx-auto mb-48 lg:w-10/12">
         <ReverseVisualOrder>
           <H1>{node.title}</H1>

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

@@ -2,9 +2,10 @@ 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"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getCleanDescription, getFirstText} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordOpportunity
@@ -15,7 +16,15 @@ const StanfordOpportunityPage = ({node, ...props}: Props) => {
   const image = node.suOppImage?.mediaImage
   return (
     <article className="centered mt-32" {...props}>
-      <StanfordOpportunityMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={
+          getCleanDescription(node.suOppSummary?.processed, 2) ||
+          getCleanDescription(node.body?.processed) ||
+          getFirstText(node.suOppComponents)
+        }
+      />
       <H1>{node.title}</H1>
 
       <div className="grid grid-cols-3-1 gap-20">

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

@@ -5,7 +5,8 @@ import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal.d"
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph"
 import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph"
-import StanfordPageMetadata from "@components/nodes/pages/stanford-page/stanford-page-metadata"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
+import {getFirstText} from "@lib/utils/text-tools"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
@@ -17,7 +18,11 @@ const StanfordPagePage = ({node, ...props}: Props) => {
 
   return (
     <article {...props}>
-      <StanfordPageMetadata node={node} />
+      <NodePageMetadata
+        pageTitle={node.title}
+        metatags={node.metatag}
+        backupDescription={getFirstText(node.suPageComponents)}
+      />
       {node.suPageBanner?.__typename === "ParagraphStanfordBanner" && (
         <header>
           <BannerParagraph paragraph={node.suPageBanner} eagerLoadImage />