From 6bff569ae4560ffa7b884d99e0ce552c3eb0e549 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@gmail.com>
Date: Wed, 24 Jul 2024 13:01:56 -0700
Subject: [PATCH] Improved menu cache logic

---
 .../config-pages/GlobalMessage.stories.tsx    |   3 +-
 .../stories/elements/Accordion.stories.tsx    |  35 +--
 .../stories/elements/Address.stories.tsx      |  24 +-
 .../stories/elements/Button.stories.tsx       |  32 +--
 .storybook/stories/elements/Email.stories.tsx |  20 +-
 .../stories/elements/Headers.stories.tsx      |  54 ++---
 .../stories/elements/Oembed.stories.tsx       |  20 +-
 .../stories/elements/SelectList.stories.tsx   |  42 ++--
 .../stories/elements/Telephone.stories.tsx    |  20 +-
 .../elements/lockup/Lockup.stories.tsx        | 157 +++++-------
 .../stories/nodes/StanfordCourse.data.tsx     |  71 +++---
 .../stories/nodes/StanfordEvent.data.tsx      |  68 +++---
 .../nodes/StanfordEventSeries.data.tsx        | 131 +++++-----
 .../stories/nodes/StanfordNews.data.tsx       |   8 +-
 .../stories/nodes/StanfordPage.data.tsx       |   4 +-
 .../stories/nodes/StanfordPerson.data.tsx     |  41 ++--
 .../stories/nodes/StanfordPolicy.data.tsx     |  13 +-
 .../nodes/StanfordPublication.data.tsx        |  52 ++--
 .../nodes/cards/BasicPageCard.stories.tsx     |  38 +--
 .../nodes/cards/CourseCard.stories.tsx        |  42 ++--
 .../stories/nodes/cards/EventCard.stories.tsx |  50 ++--
 .../nodes/cards/EventSeriesCard.stories.tsx   |  36 +--
 .../stories/nodes/cards/NewsCard.stories.tsx  |  53 +++--
 .../nodes/cards/PersonCard.stories.tsx        |  40 ++--
 .../nodes/cards/PolicyCard.stories.tsx        |  36 +--
 .../nodes/cards/PublicationCard.stories.tsx   |  34 +--
 .../list-item/BasicPageListItem.stories.tsx   |  36 +--
 .../list-item/CourseListItem.stories.tsx      |  40 ++--
 .../nodes/list-item/EventListItem.stories.tsx |  44 ++--
 .../list-item/EventSeriesListItem.stories.tsx |  34 +--
 .../nodes/list-item/NewsListItem.stories.tsx  |  53 +++--
 .../list-item/PersonListItem.stories.tsx      |  40 ++--
 .../list-item/PolicyListItem.stories.tsx      |  36 +--
 .../list-item/PublicationListItem.stories.tsx |  34 +--
 .../stories/paragraphs/Banner.stories.tsx     |   6 +-
 .../stories/paragraphs/Card.stories.tsx       |   6 +-
 .../stories/paragraphs/Gallery.stories.tsx    |  10 +-
 .../stories/paragraphs/Wysiwyg.stories.tsx    |  39 +--
 .storybook/stories/storybook-entities.tsx     |  48 ++--
 app/[...slug]/metadata.tsx                    |  11 +-
 app/page.tsx                                  |  14 +-
 src/components/elements/lockup/lockup.tsx     |  44 ++--
 src/components/elements/user-analytics.tsx    |  14 +-
 src/components/global/page-header.tsx         |  13 +-
 src/components/layouts/interior-page.tsx      |   2 +-
 src/components/menu/main-menu.client.tsx      | 221 +++++++++++++++++
 src/components/menu/main-menu.tsx             | 223 +-----------------
 src/lib/gql/gql-queries.tsx                   |  46 +++-
 48 files changed, 1077 insertions(+), 1061 deletions(-)
 create mode 100644 src/components/menu/main-menu.client.tsx

diff --git a/.storybook/stories/config-pages/GlobalMessage.stories.tsx b/.storybook/stories/config-pages/GlobalMessage.stories.tsx
index e82d4ca..0cd280d 100644
--- a/.storybook/stories/config-pages/GlobalMessage.stories.tsx
+++ b/.storybook/stories/config-pages/GlobalMessage.stories.tsx
@@ -29,7 +29,8 @@ const globalMessage = {
   suGlobalMsgHeader: "Global Message Header",
   suGlobalMsgLabel: "Global Message Label",
   suGlobalMsgMessage: {
-    processed: "<p>Erat euismod nunc ipsum morbi tincidunt accumsan bibendum elementum mi vel leo elit urna bibendum sit metus varius leo enim ex tristique amet elit interdum.</p>",
+    processed:
+      "<p>Erat euismod nunc ipsum morbi tincidunt accumsan bibendum elementum mi vel leo elit urna bibendum sit metus varius leo enim ex tristique amet elit interdum.</p>",
   },
   suGlobalMsgType: "success",
   suGlobalMsgLink: {
diff --git a/.storybook/stories/elements/Accordion.stories.tsx b/.storybook/stories/elements/Accordion.stories.tsx
index a6871a8..690e25f 100644
--- a/.storybook/stories/elements/Accordion.stories.tsx
+++ b/.storybook/stories/elements/Accordion.stories.tsx
@@ -1,48 +1,49 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Accordion from "@components/elements/accordion";
+import type {Meta, StoryObj} from "@storybook/react"
+import Accordion from "@components/elements/accordion"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Accordion> = {
-  title: 'Design/Elements/Accordion',
+  title: "Design/Elements/Accordion",
   component: Accordion,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     button: {
-      control: "text"
+      control: "text",
     },
     onClick: {
       table: {
         disable: true,
-      }
+      },
     },
     buttonProps: {
       table: {
         disable: true,
-      }
+      },
     },
     panelProps: {
       table: {
         disable: true,
-      }
+      },
     },
     isVisible: {
       table: {
         disable: true,
-      }
-    }
-  }
-};
+      },
+    },
+  },
+}
 
-export default meta;
-type Story = StoryObj<typeof Accordion>;
+export default meta
+type Story = StoryObj<typeof Accordion>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const AccordionElement: Story = {
   render: ({onClick, ...args}) => {
-    return <Accordion {...args}/>
+    return <Accordion {...args} />
   },
   args: {
     button: "Id arcu nec vel tempus rutrum.",
-    children: "Mi amet tempus congue erat fusce euismod eros cursus morbi amet amet diam tristique bibendum hendrerit sed commodo quisque cursus scelerisque morbi placerat tristique magna."
+    children:
+      "Mi amet tempus congue erat fusce euismod eros cursus morbi amet amet diam tristique bibendum hendrerit sed commodo quisque cursus scelerisque morbi placerat tristique magna.",
   },
-};
+}
diff --git a/.storybook/stories/elements/Address.stories.tsx b/.storybook/stories/elements/Address.stories.tsx
index 3645fbc..59e1594 100644
--- a/.storybook/stories/elements/Address.stories.tsx
+++ b/.storybook/stories/elements/Address.stories.tsx
@@ -1,18 +1,18 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Address from "@components/elements/address";
+import type {Meta, StoryObj} from "@storybook/react"
+import Address from "@components/elements/address"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Address> = {
-  title: 'Design/Elements/Address',
+  title: "Design/Elements/Address",
   component: Address,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    singleLine: {control: "boolean"}
-  }
-};
+    singleLine: {control: "boolean"},
+  },
+}
 
-export default meta;
-type Story = StoryObj<typeof Address>;
+export default meta
+type Story = StoryObj<typeof Address>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const AddressElement: Story = {
@@ -26,11 +26,11 @@ export const AddressElement: Story = {
     postalCode: "postal_code",
     singleLine: false,
   },
-};
+}
 
 export const OnelineAddress: Story = {
   args: {
     ...AddressElement.args,
     singleLine: true,
-  }
-}
\ No newline at end of file
+  },
+}
diff --git a/.storybook/stories/elements/Button.stories.tsx b/.storybook/stories/elements/Button.stories.tsx
index 675a8cf..8b69401 100644
--- a/.storybook/stories/elements/Button.stories.tsx
+++ b/.storybook/stories/elements/Button.stories.tsx
@@ -1,42 +1,42 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import Button from "@components/elements/button";
+import Button from "@components/elements/button"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
-  title: 'Design/Elements/Button',
+  title: "Design/Elements/Button",
   component: Button,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     href: {
-      description: "Link url"
+      description: "Link url",
     },
     buttonElem: {
       description: "Use a <button> element",
-      control: "boolean"
+      control: "boolean",
     },
     big: {
       description: "Big button",
-      control: "boolean"
+      control: "boolean",
     },
     secondary: {
       description: "Secondary button style",
-      control: "boolean"
+      control: "boolean",
     },
     centered: {
       description: "Center the button",
-      control: "boolean"
-    }
-  }
-};
+      control: "boolean",
+    },
+  },
+}
 
-export default meta;
-type Story = StoryObj<typeof Button>;
+export default meta
+type Story = StoryObj<typeof Button>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const ButtonElement: Story = {
   args: {
     href: "http://localhost",
-    children: 'Button Text',
+    children: "Button Text",
   },
-};
+}
diff --git a/.storybook/stories/elements/Email.stories.tsx b/.storybook/stories/elements/Email.stories.tsx
index e7637f6..a2fd1da 100644
--- a/.storybook/stories/elements/Email.stories.tsx
+++ b/.storybook/stories/elements/Email.stories.tsx
@@ -1,20 +1,20 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Email from "@components/elements/email";
+import type {Meta, StoryObj} from "@storybook/react"
+import Email from "@components/elements/email"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Email> = {
-  title: 'Design/Elements/Email',
+  title: "Design/Elements/Email",
   component: Email,
-  tags: ['autodocs'],
-  argTypes: {}
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<typeof Email>;
+export default meta
+type Story = StoryObj<typeof Email>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EmailElement: Story = {
   args: {
-    email: "foo@bar.com"
+    email: "foo@bar.com",
   },
-};
+}
diff --git a/.storybook/stories/elements/Headers.stories.tsx b/.storybook/stories/elements/Headers.stories.tsx
index 8333117..a4395d4 100644
--- a/.storybook/stories/elements/Headers.stories.tsx
+++ b/.storybook/stories/elements/Headers.stories.tsx
@@ -1,93 +1,93 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
 import Heading from "@components/elements/headers"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Heading> = {
-  title: 'Design/Elements/Header',
+  title: "Design/Elements/Header",
   component: Heading,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     level: {
       description: "Heading level for the <h#> tag",
-      control: {type: 'number', min: 1, max: 6}
+      control: {type: "number", min: 1, max: 6},
     },
     children: {
-      description: "String, markup, or JSX Element to be wrapped in the header tag"
-    }
-  }
-};
+      description: "String, markup, or JSX Element to be wrapped in the header tag",
+    },
+  },
+}
 
-export default meta;
-type Story = StoryObj<typeof Heading>;
+export default meta
+type Story = StoryObj<typeof Heading>
 
 export const H1HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 1,
   },
-};
+}
 
 export const H2HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 2,
   },
-};
+}
 export const LinkedH2HeadingElement: Story = {
   args: {
     children: <a href="#">Nulla scelerisque vivamus commodo</a>,
     level: 2,
   },
-};
+}
 export const H3HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 3,
   },
-};
+}
 export const LinkedHH3HeadingElement: Story = {
   args: {
     children: <a href="#">Nulla scelerisque vivamus commodo</a>,
     level: 3,
   },
-};
+}
 
 export const H4HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 4,
   },
-};
+}
 export const LinkedHH4HeadingElement: Story = {
   args: {
     children: <a href="#">Nulla scelerisque vivamus commodo</a>,
     level: 4,
   },
-};
+}
 
 export const H5HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 5,
   },
-};
+}
 export const LinkedHH5HeadingElement: Story = {
   args: {
     children: <a href="#">Nulla scelerisque vivamus commodo</a>,
     level: 5,
   },
-};
+}
 
 export const H6HeadingElement: Story = {
   args: {
-    children: 'Nulla scelerisque vivamus commodo',
+    children: "Nulla scelerisque vivamus commodo",
     level: 6,
   },
-};
+}
 export const LinkedHH6HeadingElement: Story = {
   args: {
     children: <a href="#">Nulla scelerisque vivamus commodo</a>,
     level: 6,
   },
-};
+}
diff --git a/.storybook/stories/elements/Oembed.stories.tsx b/.storybook/stories/elements/Oembed.stories.tsx
index f5ddf81..66a64c3 100644
--- a/.storybook/stories/elements/Oembed.stories.tsx
+++ b/.storybook/stories/elements/Oembed.stories.tsx
@@ -1,20 +1,20 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Oembed from "@components/elements/ombed";
+import type {Meta, StoryObj} from "@storybook/react"
+import Oembed from "@components/elements/ombed"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Oembed> = {
-  title: 'Design/Elements/Oembed',
+  title: "Design/Elements/Oembed",
   component: Oembed,
-  tags: ['autodocs'],
-  argTypes: {}
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<typeof Oembed>;
+export default meta
+type Story = StoryObj<typeof Oembed>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const OembedElement: Story = {
   args: {
-    "url": "https://www.youtube.com/watch?v=9P8mASSREYM"
+    url: "https://www.youtube.com/watch?v=9P8mASSREYM",
   },
-};
+}
diff --git a/.storybook/stories/elements/SelectList.stories.tsx b/.storybook/stories/elements/SelectList.stories.tsx
index e98ab81..0c2a318 100644
--- a/.storybook/stories/elements/SelectList.stories.tsx
+++ b/.storybook/stories/elements/SelectList.stories.tsx
@@ -1,36 +1,38 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import SelectList from "@components/elements/select-list";
-
+import type {Meta, StoryObj} from "@storybook/react"
+import SelectList from "@components/elements/select-list"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof SelectList> = {
-  title: 'Design/Elements/Select List',
+  title: "Design/Elements/Select List",
   component: SelectList,
-  tags: ['autodocs'],
-  argTypes: {}
-};
-
-export default meta;
-type Story = StoryObj<typeof SelectList>;
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
+export default meta
+type Story = StoryObj<typeof SelectList>
 
 const options = [
   {value: "foo", label: "Foo"},
   {value: "bar", label: "Bar"},
-  {value: "baz", label: "Baz"}
-];
+  {value: "baz", label: "Baz"},
+]
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const SingleSelect: Story = {
   render: ({...args}) => {
-    return <div style={{margin: "50px"}}><SelectList {...args}/></div>
+    return (
+      <div style={{margin: "50px"}}>
+        <SelectList {...args} />
+      </div>
+    )
   },
   args: {
     options,
     label: "Single Select",
-    name: "single-select"
+    name: "single-select",
   },
-};
+}
 
 export const RequiredSingleSelect: Story = {
   ...SingleSelect,
@@ -39,7 +41,7 @@ export const RequiredSingleSelect: Story = {
     label: "Single Select",
     required: true,
   },
-};
+}
 
 export const MultipleSelect: Story = {
   ...SingleSelect,
@@ -47,15 +49,15 @@ export const MultipleSelect: Story = {
     options,
     label: "Multiple Select",
     multiple: true,
-    name: "multi-select"
+    name: "multi-select",
   },
-};
+}
 export const RequiredMultipleSelect: Story = {
   ...SingleSelect,
   args: {
     options,
     label: "Multiple Select",
     multiple: true,
-    required: true
+    required: true,
   },
-};
\ No newline at end of file
+}
diff --git a/.storybook/stories/elements/Telephone.stories.tsx b/.storybook/stories/elements/Telephone.stories.tsx
index c1548f8..48c996b 100644
--- a/.storybook/stories/elements/Telephone.stories.tsx
+++ b/.storybook/stories/elements/Telephone.stories.tsx
@@ -1,20 +1,20 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Telephone from "@components/elements/telephone";
+import type {Meta, StoryObj} from "@storybook/react"
+import Telephone from "@components/elements/telephone"
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Telephone> = {
-  title: 'Design/Elements/Telephone',
+  title: "Design/Elements/Telephone",
   component: Telephone,
-  tags: ['autodocs'],
-  argTypes: {}
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<typeof Telephone>;
+export default meta
+type Story = StoryObj<typeof Telephone>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const TelephoneElement: Story = {
   args: {
-    tel: "123-456-7890"
+    tel: "123-456-7890",
   },
-};
+}
diff --git a/.storybook/stories/elements/lockup/Lockup.stories.tsx b/.storybook/stories/elements/lockup/Lockup.stories.tsx
index 57f5a3f..262f97c 100644
--- a/.storybook/stories/elements/lockup/Lockup.stories.tsx
+++ b/.storybook/stories/elements/lockup/Lockup.stories.tsx
@@ -1,142 +1,91 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import Lockup from "@components/elements/lockup/lockup";
-import {ComponentProps} from "react";
-import {Image} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import Lockup from "@components/elements/lockup/lockup"
+import {ComponentProps} from "react"
+import {Image, LockupSetting} from "@lib/gql/__generated__/drupal"
+import {createMock} from "storybook-addon-module-mock"
+import * as gql from "@lib/gql/gql-queries"
 
-type ComponentStoryProps = ComponentProps<typeof Lockup> & {
-  logoUrl?: Image["url"]
-}
+type ComponentStoryProps = ComponentProps<typeof Lockup> & {}
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Elements/Lockup',
+  title: "Design/Elements/Lockup",
   component: Lockup,
-  tags: ['autodocs'],
-  argTypes: {
-    suLockupOptions: {
-      options: ['a', 'b', 'd', 'e', 'h', 'i', 'm', 'o', 'p', 'r', 's', 't', 'none'],
-      control: {type: "select"}
-    },
-    suLockupEnabled: {
-      control: "boolean"
-    },
-    suUseThemeLogo: {
-      control: "boolean"
-    }
-  }
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
+
+const lockupSettings = {
+  id: "foo",
+  metatag: [],
+  suLockupEnabled: true,
+  suLine1: "suLine1",
+  suLine2: "suLine2",
+  suLine3: "suLine3",
+  suLine4: "suLine4",
+  suLine5: "suLine5",
+  suLockupOptions: "b",
+} satisfies LockupSetting
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const LockupDisplay: Story = {
-  render: ({logoUrl, ...args}) => {
-    if(logoUrl) args.suUploadLogoImage = {url: logoUrl, height: 50, width: 300, size: 123, focalY: 50, focalX: 50}
-    return <Lockup {...args}/>
+  render: () => {
+    return <Lockup />
   },
-  args: {
-    suLine1: "Line 1",
-    suLine2: "Line 2",
-    suLine3: "Line 3",
-    suLine4: "Line 4",
-    suLine5: "Line 5",
-    suSiteName: "Site Name",
-    suUseThemeLogo: true,
-    logoUrl: "https://placehold.co/300x50",
-    suLockupEnabled: true,
-    suLockupOptions: "none",
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mockGetConfigPage = createMock(gql, "getConfigPage")
+        mockGetConfigPage.mockResolvedValue(lockupSettings)
+
+        const mockGetConfigPageField = createMock(gql, "getConfigPageField")
+        mockGetConfigPageField.mockResolvedValue("Site Name")
+        return [mockGetConfigPage, mockGetConfigPageField]
+      },
+    },
   },
-};
+}
 
 export const LockupA: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "a"
-  }
+  ...LockupDisplay,
 }
 export const LockupB: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "b"
-  }
+  ...LockupDisplay,
 }
 export const LockupD: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "d"
-  }
+  ...LockupDisplay,
 }
 export const LockupE: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "e"
-  }
+  ...LockupDisplay,
 }
 export const LockupH: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "h"
-  }
+  ...LockupDisplay,
 }
 export const LockupI: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "i"
-  }
+  ...LockupDisplay,
 }
 export const LockupM: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "m"
-  }
+  ...LockupDisplay,
 }
 export const LockupO: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "o"
-  }
+  ...LockupDisplay,
 }
 export const LockupP: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "p"
-  }
+  ...LockupDisplay,
 }
 export const LockupR: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "r"
-  }
+  ...LockupDisplay,
 }
 export const LockupS: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "s"
-  }
+  ...LockupDisplay,
 }
 export const LockupT: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "t"
-  }
+  ...LockupDisplay,
 }
 export const LockupNone: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "none"
-  }
+  ...LockupDisplay,
 }
diff --git a/.storybook/stories/nodes/StanfordCourse.data.tsx b/.storybook/stories/nodes/StanfordCourse.data.tsx
index a292c3a..b4c513d 100644
--- a/.storybook/stories/nodes/StanfordCourse.data.tsx
+++ b/.storybook/stories/nodes/StanfordCourse.data.tsx
@@ -1,58 +1,59 @@
-import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal"
 
 export const StanfordCourseData = () => {
   return {
-    __typename: 'NodeStanfordCourse',
-    id: 'f121f36b-a993-4386-80a2-12c67fa3fb53',
-    title: 'Tennis: Advanced Beginning',
+    __typename: "NodeStanfordCourse",
+    id: "f121f36b-a993-4386-80a2-12c67fa3fb53",
+    title: "Tennis: Advanced Beginning",
     status: true,
-    path: '/courses/physwell27',
+    path: "/courses/physwell27",
     changed: {
-      timezone: 'America/Los_Angeles',
-      time: '2023-08-18T13:32:57-07:00'
+      timezone: "America/Los_Angeles",
+      time: "2023-08-18T13:32:57-07:00",
     },
     created: {
-      timezone: 'America/Los_Angeles',
-      time: '2023-07-21T10:47:31-07:00'
+      timezone: "America/Los_Angeles",
+      time: "2023-07-21T10:47:31-07:00",
     },
     body: {
-      processed: 'Students will review and strengthen stroke techniques with emphasis on control, depth, and direction.  This course will also incorporate rules, etiquette, and basic strategy and tactics. This course will utilize class discussions, class assignments and student participation to enable students to: (1) Understand basic components of health-related physical fitness, cardiovascular fitness, muscular strength and endurance and flexibility (2) Develop physical fitness and motor skills, and (3) Develop a positive attitude toward wellness and physical activity which will facilitate a healthy lifestyle. Prerequisites: 26, or knowledge of rules and scoring and average ability in fundamental strokes but limited playing experience.'
+      processed:
+        "Students will review and strengthen stroke techniques with emphasis on control, depth, and direction.  This course will also incorporate rules, etiquette, and basic strategy and tactics. This course will utilize class discussions, class assignments and student participation to enable students to: (1) Understand basic components of health-related physical fitness, cardiovascular fitness, muscular strength and endurance and flexibility (2) Develop physical fitness and motor skills, and (3) Develop a positive attitude toward wellness and physical activity which will facilitate a healthy lifestyle. Prerequisites: 26, or knowledge of rules and scoring and average ability in fundamental strokes but limited playing experience.",
     },
-    suCourseAcademicYear: '2023-2024',
-    suCourseCode: '27',
+    suCourseAcademicYear: "2023-2024",
+    suCourseCode: "27",
     suCourseId: 102675,
-    suCourseInstructors: ['Thornton, M.', 'Lee, S.', 'Fendrick, L.'],
+    suCourseInstructors: ["Thornton, M.", "Lee, S.", "Fendrick, L."],
     suCourseLink: {
-      url: 'http://explorecourses.stanford.edu/search?q=PHYSWELL27',
-      title: ''
+      url: "http://explorecourses.stanford.edu/search?q=PHYSWELL27",
+      title: "",
     },
     suCourseQuarters: [
       {
-        __typename: 'TermSuCourseQuarter',
-        id: '68944821-ab8c-4f0c-98f7-f5242ab89ddf',
-        name: 'Winter',
-        path: '/courses/winter',
+        __typename: "TermSuCourseQuarter",
+        id: "68944821-ab8c-4f0c-98f7-f5242ab89ddf",
+        name: "Winter",
+        path: "/courses/winter",
         weight: 0,
-        parent: null
+        parent: null,
       },
       {
-        __typename: 'TermSuCourseQuarter',
-        id: '1e2402c2-f27e-4fc8-be1b-63768929de94',
-        name: 'Spring',
-        path: '/courses/spring',
+        __typename: "TermSuCourseQuarter",
+        id: "1e2402c2-f27e-4fc8-be1b-63768929de94",
+        name: "Spring",
+        path: "/courses/spring",
         weight: 0,
-        parent: null
-      }
+        parent: null,
+      },
     ],
-    suCourseSectionUnits: '1',
+    suCourseSectionUnits: "1",
     suCourseSubject: {
-      __typename: 'TermSuCourseSubject',
-      id: '2a30758d-f296-4d32-b07e-2dc02582cddf',
-      name: 'PHYSWELL',
-      path: '/courses/physwell',
+      __typename: "TermSuCourseSubject",
+      id: "2a30758d-f296-4d32-b07e-2dc02582cddf",
+      name: "PHYSWELL",
+      path: "/courses/physwell",
       weight: 0,
-      parent: null
+      parent: null,
     },
-    suCourseTags: null
-  } as unknown as NodeStanfordCourse;
-}
\ No newline at end of file
+    suCourseTags: null,
+  } as unknown as NodeStanfordCourse
+}
diff --git a/.storybook/stories/nodes/StanfordEvent.data.tsx b/.storybook/stories/nodes/StanfordEvent.data.tsx
index f6d7094..3c88108 100644
--- a/.storybook/stories/nodes/StanfordEvent.data.tsx
+++ b/.storybook/stories/nodes/StanfordEvent.data.tsx
@@ -1,19 +1,19 @@
-import {NodeStanfordEvent} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordEvent} from "@lib/gql/__generated__/drupal"
 
 export const StanfordEventData = () => {
   return {
-    __typename: 'NodeStanfordEvent',
-    id: '210be681-f305-4b99-a2a6-da7d7a1ac2e8',
-    title: 'Introduction to Stanford Sites',
+    __typename: "NodeStanfordEvent",
+    id: "210be681-f305-4b99-a2a6-da7d7a1ac2e8",
+    title: "Introduction to Stanford Sites",
     status: true,
-    path: '/events/stanford-sites-onboarding-sessions/5x/introduction-stanford-sites-1',
+    path: "/events/stanford-sites-onboarding-sessions/5x/introduction-stanford-sites-1",
     changed: {
-      timezone: 'America/Los_Angeles',
-      time: '2024-02-01T14:45:54-08:00'
+      timezone: "America/Los_Angeles",
+      time: "2024-02-01T14:45:54-08:00",
     },
     created: {
-      timezone: 'America/Los_Angeles',
-      time: '2024-01-05T16:50:58-08:00'
+      timezone: "America/Los_Angeles",
+      time: "2024-01-05T16:50:58-08:00",
     },
     body: null,
     suEventAltLoc: null,
@@ -21,54 +21,54 @@ export const StanfordEventData = () => {
     suEventComponents: null,
     suEventContactInfo: null,
     suEventCta: {
-      url: 'https://docs.google.com/forms/d/e/1FAIpQLSdzOKMwQ_Mo6XL9F7ytGI8LoUmeI2zHF6FccOYlnUfzVjSJjQ/viewform',
-      title: 'Register'
+      url: "https://docs.google.com/forms/d/e/1FAIpQLSdzOKMwQ_Mo6XL9F7ytGI8LoUmeI2zHF6FccOYlnUfzVjSJjQ/viewform",
+      title: "Register",
     },
     suEventDateTime: {
-      value: '1708110000',
-      end_value: '1708113600',
-      timezone: 'America/Los_Angeles',
+      value: "1708110000",
+      end_value: "1708113600",
+      timezone: "America/Los_Angeles",
       rrule_index: null,
-      rrule: null
+      rrule: null,
     },
-    suEventDek: 'dek field Join our monthly onboarding session',
+    suEventDek: "dek field Join our monthly onboarding session",
     suEventEmail: null,
     suEventGroups: null,
     suEventKeywords: null,
     suEventLocation: {
       langcode: null,
-      country: {name: 'United States', code: 'US'},
+      country: {name: "United States", code: "US"},
       givenName: null,
       additionalName: null,
       familyName: null,
-      organization: 'Green Ridge',
-      addressLine1: '766 Green Ridge Park',
+      organization: "Green Ridge",
+      addressLine1: "766 Green Ridge Park",
       addressLine2: null,
-      postalCode: '99999',
+      postalCode: "99999",
       sortingCode: null,
       dependentLocality: null,
-      locality: 'Washington',
-      administrativeArea: 'DC'
+      locality: "Washington",
+      administrativeArea: "DC",
     },
     suEventMapLink: null,
     suEventSchedule: null,
     suEventSource: {
-      url: 'http://localhost',
-      title: ''
+      url: "http://localhost",
+      title: "",
     },
     suEventSponsor: null,
-    suEventSubheadline: 'subheadline field',
+    suEventSubheadline: "subheadline field",
     suEventSubject: null,
     suEventTelephone: null,
     suEventType: [
       {
-        __typename: 'TermStanfordEventType',
-        id: '2402818d-7056-4eec-a522-49e77def4cdc',
-        name: '5.x',
-        path: '/events/stanford-sites-onboarding-sessions/5x',
+        __typename: "TermStanfordEventType",
+        id: "2402818d-7056-4eec-a522-49e77def4cdc",
+        name: "5.x",
+        path: "/events/stanford-sites-onboarding-sessions/5x",
         weight: 0,
-        parent: {id: '249d3aa0-686f-4533-b73e-493cd596aeee'}
-      }
-    ]
-  } as unknown as NodeStanfordEvent;
-}
\ No newline at end of file
+        parent: {id: "249d3aa0-686f-4533-b73e-493cd596aeee"},
+      },
+    ],
+  } as unknown as NodeStanfordEvent
+}
diff --git a/.storybook/stories/nodes/StanfordEventSeries.data.tsx b/.storybook/stories/nodes/StanfordEventSeries.data.tsx
index 8cf2e07..8f829ab 100644
--- a/.storybook/stories/nodes/StanfordEventSeries.data.tsx
+++ b/.storybook/stories/nodes/StanfordEventSeries.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal"
 
 export const StanfordEventSeriesData = () => {
   return {
@@ -10,67 +10,74 @@ export const StanfordEventSeriesData = () => {
     changed: {timezone: "America/Los_Angeles", time: "2024-02-05T13:12:15-08:00"},
     created: {timezone: "America/Los_Angeles", time: "2024-02-05T13:12:11-08:00"},
     suEventSeriesDek: "Dek field",
-    suEventSeriesEvent: [{
-      __typename: "NodeStanfordEvent",
-      id: "9f753f06-fd90-4e66-9a5f-e974a4a3a3d3",
-      title: "Event with an image",
-      status: false,
-      path: "/events/event-image",
-      changed: {timezone: "America/Los_Angeles", time: "2023-09-19T07:28:42-07:00"},
-      created: {timezone: "America/Los_Angeles", time: "2023-02-03T15:22:15-08:00"},
-      suEventAltLoc: null,
-      suEventSubheadline: null,
-      suEventDek: null,
-      suEventLocation: null,
-      suEventDateTime: {
-        value: "1893484800",
-        end_value: "1893571140",
-        timezone: "America/Los_Angeles",
-        rrule_index: null,
-        rrule: null
+    suEventSeriesEvent: [
+      {
+        __typename: "NodeStanfordEvent",
+        id: "9f753f06-fd90-4e66-9a5f-e974a4a3a3d3",
+        title: "Event with an image",
+        status: false,
+        path: "/events/event-image",
+        changed: {timezone: "America/Los_Angeles", time: "2023-09-19T07:28:42-07:00"},
+        created: {timezone: "America/Los_Angeles", time: "2023-02-03T15:22:15-08:00"},
+        suEventAltLoc: null,
+        suEventSubheadline: null,
+        suEventDek: null,
+        suEventLocation: null,
+        suEventDateTime: {
+          value: "1893484800",
+          end_value: "1893571140",
+          timezone: "America/Los_Angeles",
+          rrule_index: null,
+          rrule: null,
+        },
+        suEventType: null,
+        suEventSource: null,
       },
-      suEventType: null,
-      suEventSource: null
-    }, {
-      __typename: "NodeStanfordEvent",
-      id: "0c36f4e9-804f-4f80-afaa-a9d6209f90ec",
-      title: "Introduction to Stanford Sites",
-      status: true,
-      path: "/events/stanford-sites-onboarding-sessions/introduction-stanford-sites-1",
-      changed: {timezone: "America/Los_Angeles", time: "2023-09-15T10:26:58-07:00"},
-      created: {timezone: "America/Los_Angeles", time: "2023-09-09T15:21:39-07:00"},
-      suEventAltLoc: null,
-      suEventSubheadline: null,
-      suEventDek: "Join our monthly onboarding session",
-      suEventLocation: null,
-      suEventDateTime: {
-        value: "1694800800",
-        end_value: "1694804400",
-        timezone: "America/Los_Angeles",
-        rrule_index: null,
-        rrule: null
+      {
+        __typename: "NodeStanfordEvent",
+        id: "0c36f4e9-804f-4f80-afaa-a9d6209f90ec",
+        title: "Introduction to Stanford Sites",
+        status: true,
+        path: "/events/stanford-sites-onboarding-sessions/introduction-stanford-sites-1",
+        changed: {timezone: "America/Los_Angeles", time: "2023-09-15T10:26:58-07:00"},
+        created: {timezone: "America/Los_Angeles", time: "2023-09-09T15:21:39-07:00"},
+        suEventAltLoc: null,
+        suEventSubheadline: null,
+        suEventDek: "Join our monthly onboarding session",
+        suEventLocation: null,
+        suEventDateTime: {
+          value: "1694800800",
+          end_value: "1694804400",
+          timezone: "America/Los_Angeles",
+          rrule_index: null,
+          rrule: null,
+        },
+        suEventType: [
+          {
+            __typename: "TermStanfordEventType",
+            id: "249d3aa0-686f-4533-b73e-493cd596aeee",
+            name: "Stanford Sites Onboarding Sessions",
+            path: "/events/stanford-sites-onboarding-sessions",
+            weight: 1,
+            parent: null,
+          },
+        ],
+        suEventSource: {
+          url: "https://docs.google.com/forms/d/e/1FAIpQLSdzOKMwQ_Mo6XL9F7ytGI8LoUmeI2zHF6FccOYlnUfzVjSJjQ/viewform",
+          title: "",
+        },
       },
-      suEventType: [{
-        __typename: "TermStanfordEventType",
-        id: "249d3aa0-686f-4533-b73e-493cd596aeee",
-        name: "Stanford Sites Onboarding Sessions",
-        path: "/events/stanford-sites-onboarding-sessions",
-        weight: 1,
-        parent: null
-      }],
-      suEventSource: {
-        url: "https://docs.google.com/forms/d/e/1FAIpQLSdzOKMwQ_Mo6XL9F7ytGI8LoUmeI2zHF6FccOYlnUfzVjSJjQ/viewform",
-        title: ""
-      }
-    }],
+    ],
     suEventSeriesSubheadline: "Subheadline",
-    suEventSeriesType: [{
-      __typename: "TermStanfordEventType",
-      id: "7bf41b36-bd21-494b-aa1e-fbe7edb1bf00",
-      name: "Exhibition",
-      path: "/events/exhibition",
-      weight: 0,
-      parent: null
-    }]
-  } as unknown as NodeStanfordEventSeries;
-}
\ No newline at end of file
+    suEventSeriesType: [
+      {
+        __typename: "TermStanfordEventType",
+        id: "7bf41b36-bd21-494b-aa1e-fbe7edb1bf00",
+        name: "Exhibition",
+        path: "/events/exhibition",
+        weight: 0,
+        parent: null,
+      },
+    ],
+  } as unknown as NodeStanfordEventSeries
+}
diff --git a/.storybook/stories/nodes/StanfordNews.data.tsx b/.storybook/stories/nodes/StanfordNews.data.tsx
index 2d920fc..3209193 100644
--- a/.storybook/stories/nodes/StanfordNews.data.tsx
+++ b/.storybook/stories/nodes/StanfordNews.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordNews} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordNews} from "@lib/gql/__generated__/drupal"
 
 export const StanfordNewsData = () => {
   return {
@@ -11,6 +11,6 @@ export const StanfordNewsData = () => {
     created: {timezone: "America/Los_Angeles", time: "2023-12-05T14:55:01-08:00"},
     suNewsBanner: null,
     suNewsBannerMediaCaption: null,
-    suNewsByline: null
-  } as unknown as NodeStanfordNews;
-}
\ No newline at end of file
+    suNewsByline: null,
+  } as unknown as NodeStanfordNews
+}
diff --git a/.storybook/stories/nodes/StanfordPage.data.tsx b/.storybook/stories/nodes/StanfordPage.data.tsx
index 39137ed..fd3ea86 100644
--- a/.storybook/stories/nodes/StanfordPage.data.tsx
+++ b/.storybook/stories/nodes/StanfordPage.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordPage} from "@lib/gql/__generated__/drupal"
 
 export const StanfordPageData = () => {
   return {
@@ -11,6 +11,6 @@ export const StanfordPageData = () => {
     created: {timezone: "America/Los_Angeles", time: "2019-08-27T14:16:24-07:00"},
     layoutSelection: null,
     suBasicPageType: null,
-    suPageDescription: "Helpful information to build out your website using the \"Stanford Sites\" Drupal platform.",
+    suPageDescription: 'Helpful information to build out your website using the "Stanford Sites" Drupal platform.',
   } as unknown as NodeStanfordPage
 }
diff --git a/.storybook/stories/nodes/StanfordPerson.data.tsx b/.storybook/stories/nodes/StanfordPerson.data.tsx
index 44c2688..fa0a791 100644
--- a/.storybook/stories/nodes/StanfordPerson.data.tsx
+++ b/.storybook/stories/nodes/StanfordPerson.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordPerson} from "@lib/gql/__generated__/drupal"
 
 export const StanfordPersonData = () => {
   return {
@@ -9,7 +9,10 @@ export const StanfordPersonData = () => {
     path: "/people/shea-mckinney",
     changed: {timezone: "America/Los_Angeles", time: "2023-09-14T12:08:41-07:00"},
     created: {timezone: "America/Los_Angeles", time: "2023-07-21T09:38:23-07:00"},
-    body: {processed: "Facilisis arcu sit vel tempus tincidunt congue sem lacus interdum fusce portaest mi proin suspendisse ex consectetur felis sollicitudin pellentesque suspendisse hendrerit ex sem arcu.\nVarius enim morbi metus felis euismod eros vivamus erat interdum ipsum ex cursus nisi erat aliquam eget aliquam eget orci quisque pellentesque maecenas elementum nisi."},
+    body: {
+      processed:
+        "Facilisis arcu sit vel tempus tincidunt congue sem lacus interdum fusce portaest mi proin suspendisse ex consectetur felis sollicitudin pellentesque suspendisse hendrerit ex sem arcu.\nVarius enim morbi metus felis euismod eros vivamus erat interdum ipsum ex cursus nisi erat aliquam eget aliquam eget orci quisque pellentesque maecenas elementum nisi.",
+    },
     suPersonAcademicAppt: null,
     suPersonAdminAppts: null,
     suPersonAffiliations: null,
@@ -20,10 +23,14 @@ export const StanfordPersonData = () => {
     suPersonFirstName: "Marthena",
     suPersonFullTitle: "Senior Sales Associate\n",
     suPersonLastName: "Rapp",
-    suPersonLinks: [{url: "http://www.google.com/", title: "Google"}, {
-      url: "https://drupal.org/",
-      title: "Drupal Page"
-    }, {url: "http://linkedin.com", title: "LinkedIn"}],
+    suPersonLinks: [
+      {url: "http://www.google.com/", title: "Google"},
+      {
+        url: "https://drupal.org/",
+        title: "Drupal Page",
+      },
+      {url: "http://linkedin.com", title: "LinkedIn"},
+    ],
     suPersonLocationAddress: null,
     suPersonLocationName: null,
     suPersonMailCode: null,
@@ -37,8 +44,8 @@ export const StanfordPersonData = () => {
         url: "https://placehold.co/2000x1000",
         alt: "Placeholder Image",
         height: 522,
-        width: 350
-      }
+        width: 350,
+      },
     },
     suPersonProfileLink: {url: "http://localhost", title: "View Full Profile"},
     suPersonPronouns: null,
@@ -47,13 +54,15 @@ export const StanfordPersonData = () => {
     suPersonScholarlyInterests: null,
     suPersonShortTitle: "Senior Sales Associate",
     suPersonTelephone: null,
-    suPersonTypeGroup: [{
-      __typename: "TermStanfordPersonType",
-      id: "87a608ef-8bf5-46c9-b567-f74f36e1e7df",
-      name: "Sales",
-      path: "/people/sales",
-      weight: 2,
-      parent: {id: "50f0f22c-306e-4304-ba72-25cebba57b2b"}
-    }]
+    suPersonTypeGroup: [
+      {
+        __typename: "TermStanfordPersonType",
+        id: "87a608ef-8bf5-46c9-b567-f74f36e1e7df",
+        name: "Sales",
+        path: "/people/sales",
+        weight: 2,
+        parent: {id: "50f0f22c-306e-4304-ba72-25cebba57b2b"},
+      },
+    ],
   } as unknown as NodeStanfordPerson
 }
diff --git a/.storybook/stories/nodes/StanfordPolicy.data.tsx b/.storybook/stories/nodes/StanfordPolicy.data.tsx
index 88acd9e..328da03 100644
--- a/.storybook/stories/nodes/StanfordPolicy.data.tsx
+++ b/.storybook/stories/nodes/StanfordPolicy.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordPolicy} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordPolicy} from "@lib/gql/__generated__/drupal"
 
 export const StanfordPolicyData = () => {
   return {
@@ -9,7 +9,10 @@ export const StanfordPolicyData = () => {
     path: "/about-stanford-sites/stanford-sites-policies/terms-service-stanford-sites-and-stanford-sites",
     changed: {timezone: "America/Los_Angeles", time: "2024-01-04T17:46:30-08:00"},
     created: {timezone: "America/Los_Angeles", time: "2023-10-12T22:48:03-07:00"},
-    body: {processed: "<p class=\"su-intro-text\">The following outlines the Terms of Service for Stanford Sites, Stanford Sites Intranet, and the Stanford Sites User Guide.&nbsp;</p><p>See also <a href=\"https://www.stanford.edu/site/terms/\">Terms of Use</a> for all stanford.edu sites, which includes Stanford Sites and Stanford Sites Intranet.</p><h2>Stanford Sites Terms and Conditions of Use</h2><p>For the purposes of these terms, \"Stanford Sites\" will refer to Stanford Sites, Stanford Sites Intranet, and the Stanford Sites User Guide.</p><h3>1. Terms</h3><p>By using Stanford Sites, you are agreeing to be bound by these Terms and Conditions of Use and agree that you are responsible for the agreement with any applicable local laws. If you disagree with any of these terms, you are prohibited from accessing this service.&nbsp;</p><h3>2. Use License</h3><p>Permission is granted to access all code used in the creation of Stanford Sites. This is the grant of a license, not a transfer of title.</p><h3>3. Disclaimer</h3><p>All the materials in the code or in the documentation are provided “as is”.&nbsp;Stanford&nbsp;does not make any representations concerning the accuracy or reliability of the use of the materials in the documentation.</p><h3>4. Limitations</h3><p>Stanford University&nbsp;or its suppliers will not be held accountable for any damages that will arise with the use or inability to use the materials on&nbsp;Stanford Sites, Stanford Sites Intranet or the User Guide, even if&nbsp;Stanford University&nbsp;or an authorized representative of the University has been notified, orally or written, of the possibility of such damage.&nbsp;</p><h3>5. Revisions and Errata</h3><p>The materials appearing in Stanford Sites or Stanford Sites documentation may include technical, typographical, or photographic errors.&nbsp;Stanford University&nbsp;will not promise that any of the materials in this service or its documentation are accurate, complete, or current.&nbsp;Stanford University&nbsp;may change the materials contained in Stanford Sites at any time without notice.&nbsp;Stanford University&nbsp;does not make any commitment to update the materials.</p><h3>6. Links</h3><p>Stanford University&nbsp;has not reviewed all of the sites linked to its Stanford Sites and is not responsible for the contents of any such linked site. The presence of any link does not imply endorsement by&nbsp;Stanford University&nbsp;of the site. The use of any linked website is at the user's own risk.</p><h3>7. Site Terms of Use Modifications</h3><p>Stanford University&nbsp;may revise these Terms of Use for Stanford Sites at any time without prior notice. By using Stanford Sites, you are agreeing to be bound by the current version of these Terms and Conditions of Use.</p><h3>8. Governing Law</h3><p>Any claim related to&nbsp;Stanford Sites shall be governed by the laws of&nbsp;Country&nbsp;without regards to its conflict of law provisions.</p>"},
+    body: {
+      processed:
+        '<p class="su-intro-text">The following outlines the Terms of Service for Stanford Sites, Stanford Sites Intranet, and the Stanford Sites User Guide.&nbsp;</p><p>See also <a href="https://www.stanford.edu/site/terms/">Terms of Use</a> for all stanford.edu sites, which includes Stanford Sites and Stanford Sites Intranet.</p><h2>Stanford Sites Terms and Conditions of Use</h2><p>For the purposes of these terms, "Stanford Sites" will refer to Stanford Sites, Stanford Sites Intranet, and the Stanford Sites User Guide.</p><h3>1. Terms</h3><p>By using Stanford Sites, you are agreeing to be bound by these Terms and Conditions of Use and agree that you are responsible for the agreement with any applicable local laws. If you disagree with any of these terms, you are prohibited from accessing this service.&nbsp;</p><h3>2. Use License</h3><p>Permission is granted to access all code used in the creation of Stanford Sites. This is the grant of a license, not a transfer of title.</p><h3>3. Disclaimer</h3><p>All the materials in the code or in the documentation are provided “as is”.&nbsp;Stanford&nbsp;does not make any representations concerning the accuracy or reliability of the use of the materials in the documentation.</p><h3>4. Limitations</h3><p>Stanford University&nbsp;or its suppliers will not be held accountable for any damages that will arise with the use or inability to use the materials on&nbsp;Stanford Sites, Stanford Sites Intranet or the User Guide, even if&nbsp;Stanford University&nbsp;or an authorized representative of the University has been notified, orally or written, of the possibility of such damage.&nbsp;</p><h3>5. Revisions and Errata</h3><p>The materials appearing in Stanford Sites or Stanford Sites documentation may include technical, typographical, or photographic errors.&nbsp;Stanford University&nbsp;will not promise that any of the materials in this service or its documentation are accurate, complete, or current.&nbsp;Stanford University&nbsp;may change the materials contained in Stanford Sites at any time without notice.&nbsp;Stanford University&nbsp;does not make any commitment to update the materials.</p><h3>6. Links</h3><p>Stanford University&nbsp;has not reviewed all of the sites linked to its Stanford Sites and is not responsible for the contents of any such linked site. The presence of any link does not imply endorsement by&nbsp;Stanford University&nbsp;of the site. The use of any linked website is at the user\'s own risk.</p><h3>7. Site Terms of Use Modifications</h3><p>Stanford University&nbsp;may revise these Terms of Use for Stanford Sites at any time without prior notice. By using Stanford Sites, you are agreeing to be bound by the current version of these Terms and Conditions of Use.</p><h3>8. Governing Law</h3><p>Any claim related to&nbsp;Stanford Sites shall be governed by the laws of&nbsp;Country&nbsp;without regards to its conflict of law provisions.</p>',
+    },
     suPolicyAuthority: "Stanford Web Services",
     suPolicyAutoPrefix: true,
     suPolicyChangelog: null,
@@ -19,6 +22,6 @@ export const StanfordPolicyData = () => {
     suPolicyRelated: null,
     suPolicySubchapter: null,
     suPolicyTitle: "Terms of Service for Stanford Sites and Stanford Sites Intranet",
-    suPolicyUpdated: {timezone: "UTC", time: "2023-10-12T00:00:00+00:00"}
-  } as unknown as NodeStanfordPolicy;
-}
\ No newline at end of file
+    suPolicyUpdated: {timezone: "UTC", time: "2023-10-12T00:00:00+00:00"},
+  } as unknown as NodeStanfordPolicy
+}
diff --git a/.storybook/stories/nodes/StanfordPublication.data.tsx b/.storybook/stories/nodes/StanfordPublication.data.tsx
index ec02eec..4ad9f70 100644
--- a/.storybook/stories/nodes/StanfordPublication.data.tsx
+++ b/.storybook/stories/nodes/StanfordPublication.data.tsx
@@ -1,4 +1,4 @@
-import {NodeStanfordPublication} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordPublication} from "@lib/gql/__generated__/drupal"
 
 export const StanfordPublicationData = () => {
   return {
@@ -9,30 +9,32 @@ export const StanfordPublicationData = () => {
     path: "/publications/journal-article-example-publication",
     changed: {timezone: "America/Los_Angeles", time: "2023-07-21T10:33:31-07:00"},
     created: {timezone: "America/Los_Angeles", time: "2023-07-21T10:31:38-07:00"},
-    suPublicationAuthorRef: [{
-      __typename: "NodeStanfordPerson",
-      id: "62957556-fb66-4fab-9e8d-eaab24c6cdf3",
-      title: "Foo N Bar",
-      status: true,
-      path: "/people/foobar",
-      changed: {timezone: "America/Los_Angeles", time: "2023-10-03T10:42:12-07:00"},
-      created: {timezone: "America/Los_Angeles", time: "2023-07-21T09:38:01-07:00"},
-      suPersonPhoto: {
-        __typename: "MediaImage",
-        id: "57291474-4abf-4387-ba0d-cdbca677a507",
-        name: "Foo bar",
-        mediaImage: {
-          url: "https://placehold.co/2000x1000",
-          alt: "Placeholder Image",
-          height: 522,
-          width: 350
-        }
+    suPublicationAuthorRef: [
+      {
+        __typename: "NodeStanfordPerson",
+        id: "62957556-fb66-4fab-9e8d-eaab24c6cdf3",
+        title: "Foo N Bar",
+        status: true,
+        path: "/people/foobar",
+        changed: {timezone: "America/Los_Angeles", time: "2023-10-03T10:42:12-07:00"},
+        created: {timezone: "America/Los_Angeles", time: "2023-07-21T09:38:01-07:00"},
+        suPersonPhoto: {
+          __typename: "MediaImage",
+          id: "57291474-4abf-4387-ba0d-cdbca677a507",
+          name: "Foo bar",
+          mediaImage: {
+            url: "https://placehold.co/2000x1000",
+            alt: "Placeholder Image",
+            height: 522,
+            width: 350,
+          },
+        },
+        suPersonFullTitle: "Systems Administrator III",
+        suPersonShortTitle: "SysAdmin",
       },
-      suPersonFullTitle: "Systems Administrator III",
-      suPersonShortTitle: "SysAdmin"
-    }],
+    ],
     suPublicationCta: null,
     suPublicationImage: null,
-    suPublicationTopics: null
-  } as unknown as NodeStanfordPublication;
-}
\ No newline at end of file
+    suPublicationTopics: null,
+  } as unknown as NodeStanfordPublication
+}
diff --git a/.storybook/stories/nodes/cards/BasicPageCard.stories.tsx b/.storybook/stories/nodes/cards/BasicPageCard.stories.tsx
index ead38a8..ac4fdda 100644
--- a/.storybook/stories/nodes/cards/BasicPageCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/BasicPageCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordPageCard from "@components/nodes/cards/stanford-page/stanford-page-card";
-import {StanfordPageData} from "../StanfordPage.data";
-import {ComponentProps} from "react";
-import {Text, Image, NodeStanfordPage} from "@lib/gql/__generated__/drupal";
-import {getStoryBookImage} from "../../storybook-entities";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordPageCard from "@components/nodes/cards/stanford-page/stanford-page-card"
+import {StanfordPageData} from "../StanfordPage.data"
+import {ComponentProps} from "react"
+import {Text, Image, NodeStanfordPage} from "@lib/gql/__generated__/drupal"
+import {getStoryBookImage} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPageCard> & {
   title: NodeStanfordPage["title"]
@@ -12,38 +12,38 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPageCard> & {
 }
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Stanford Page Card',
+  title: "Design/Nodes/Cards/Stanford Page Card",
   component: StanfordPageCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PageCard: Story = {
   render: ({title, suPageImage, suPageDescription, node, ...args}) => {
     node.suPageImage = suPageImage ? getStoryBookImage(suPageImage) : undefined
-    node.title = title;
-    node.suPageDescription = suPageDescription;
-    return <StanfordPageCard node={node} {...args}/>
+    node.title = title
+    node.suPageDescription = suPageDescription
+    return <StanfordPageCard node={node} {...args} />
   },
   args: {
     suPageImage: "https://placehold.co/2000x1000",
     suPageDescription: StanfordPageData().suPageDescription,
     title: StanfordPageData().title,
     headingLevel: "h2",
-    node: StanfordPageData()
+    node: StanfordPageData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/CourseCard.stories.tsx b/.storybook/stories/nodes/cards/CourseCard.stories.tsx
index 3aed25c..839b97f 100644
--- a/.storybook/stories/nodes/cards/CourseCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/CourseCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordCourseCard from "@components/nodes/cards/stanford-course/stanford-course-card";
-import {StanfordCourseData} from "../StanfordCourse.data";
-import {ComponentProps} from "react";
-import {NodeStanfordCourse, TermSuCourseSubject} from "@lib/gql/__generated__/drupal";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordCourseCard from "@components/nodes/cards/stanford-course/stanford-course-card"
+import {StanfordCourseData} from "../StanfordCourse.data"
+import {ComponentProps} from "react"
+import {NodeStanfordCourse, TermSuCourseSubject} from "@lib/gql/__generated__/drupal"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordCourseCard> & {
   title: NodeStanfordCourse["title"]
@@ -14,33 +14,33 @@ type ComponentStoryProps = ComponentProps<typeof StanfordCourseCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Course Card',
+  title: "Design/Nodes/Cards/Course Card",
   component: StanfordCourseCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const CourseCard: Story = {
   render: ({title, suCourseSubject, suCourseCode, suCourseAcademicYear, node, ...args}) => {
-    node.title = title;
-    node.suCourseSubject = suCourseSubject ? getStoryBookTaxonomyTerm(suCourseSubject) : undefined;
-    node.suCourseCode = suCourseCode;
-    node.suCourseAcademicYear = suCourseAcademicYear;
-    return <StanfordCourseCard node={node} {...args}/>
+    node.title = title
+    node.suCourseSubject = suCourseSubject ? getStoryBookTaxonomyTerm(suCourseSubject) : undefined
+    node.suCourseCode = suCourseCode
+    node.suCourseAcademicYear = suCourseAcademicYear
+    return <StanfordCourseCard node={node} {...args} />
   },
   args: {
     title: StanfordCourseData().title,
@@ -48,6 +48,6 @@ export const CourseCard: Story = {
     suCourseCode: StanfordCourseData().suCourseCode,
     suCourseAcademicYear: StanfordCourseData().suCourseAcademicYear,
     headingLevel: "h2",
-    node: StanfordCourseData()
+    node: StanfordCourseData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/EventCard.stories.tsx b/.storybook/stories/nodes/cards/EventCard.stories.tsx
index aa062ae..2c6898c 100644
--- a/.storybook/stories/nodes/cards/EventCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/EventCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordEventCard from "@components/nodes/cards/stanford-event/stanford-event-card";
-import {StanfordEventData} from "../StanfordEvent.data";
-import {ComponentProps} from "react";
-import {NodeStanfordEvent, SmartDateType, TermStanfordEventType} from "@lib/gql/__generated__/drupal";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordEventCard from "@components/nodes/cards/stanford-event/stanford-event-card"
+import {StanfordEventData} from "../StanfordEvent.data"
+import {ComponentProps} from "react"
+import {NodeStanfordEvent, SmartDateType, TermStanfordEventType} from "@lib/gql/__generated__/drupal"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordEventCard> & {
   suEventDateTime_start: SmartDateType["value"]
@@ -16,30 +16,30 @@ type ComponentStoryProps = ComponentProps<typeof StanfordEventCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Event Card',
+  title: "Design/Nodes/Cards/Event Card",
   component: StanfordEventCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     suEventDateTime_start: {
-      control: "date"
+      control: "date",
     },
     suEventDateTime_end: {
-      control: "date"
+      control: "date",
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventCard: Story = {
@@ -53,13 +53,13 @@ export const EventCard: Story = {
     node,
     ...args
   }) => {
-    node.title = title;
-    node.suEventDateTime.value = Math.round(suEventDateTime_start / 1000);
-    node.suEventDateTime.end_value = Math.round(suEventDateTime_end / 1000);
-    node.suEventType = suEventType ? [getStoryBookTaxonomyTerm(suEventType)] : undefined;
-    node.suEventSubheadline = suEventSubheadline;
-    node.suEventAltLoc = suEventAltLoc;
-    return <StanfordEventCard node={node} {...args}/>
+    node.title = title
+    node.suEventDateTime.value = Math.round(suEventDateTime_start / 1000)
+    node.suEventDateTime.end_value = Math.round(suEventDateTime_end / 1000)
+    node.suEventType = suEventType ? [getStoryBookTaxonomyTerm(suEventType)] : undefined
+    node.suEventSubheadline = suEventSubheadline
+    node.suEventAltLoc = suEventAltLoc
+    return <StanfordEventCard node={node} {...args} />
   },
   args: {
     title: StanfordEventData().title,
@@ -69,6 +69,6 @@ export const EventCard: Story = {
     suEventSubheadline: StanfordEventData().suEventSubheadline,
     suEventAltLoc: StanfordEventData().suEventAltLoc,
     headingLevel: "h2",
-    node: StanfordEventData()
+    node: StanfordEventData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/EventSeriesCard.stories.tsx b/.storybook/stories/nodes/cards/EventSeriesCard.stories.tsx
index 30a124a..7a5aa81 100644
--- a/.storybook/stories/nodes/cards/EventSeriesCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/EventSeriesCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordEventSeriesCard from "@components/nodes/cards/stanford-event-series/stanford-event-series-card";
-import {StanfordEventSeriesData} from "../StanfordEventSeries.data";
-import {ComponentProps} from "react";
-import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal";
+import StanfordEventSeriesCard from "@components/nodes/cards/stanford-event-series/stanford-event-series-card"
+import {StanfordEventSeriesData} from "../StanfordEventSeries.data"
+import {ComponentProps} from "react"
+import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordEventSeriesCard> & {
   title: NodeStanfordEventSeries["title"]
@@ -12,36 +12,36 @@ type ComponentStoryProps = ComponentProps<typeof StanfordEventSeriesCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Event Series Card',
+  title: "Design/Nodes/Cards/Event Series Card",
   component: StanfordEventSeriesCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventSeriesCard: Story = {
   render: ({title, suEventSeriesDek, node, ...args}) => {
-    node.title = title;
-    node.suEventSeriesDek = suEventSeriesDek;
-    return <StanfordEventSeriesCard node={node} {...args}/>
+    node.title = title
+    node.suEventSeriesDek = suEventSeriesDek
+    return <StanfordEventSeriesCard node={node} {...args} />
   },
   args: {
     title: StanfordEventSeriesData().title,
     suEventSeriesDek: StanfordEventSeriesData().suEventSeriesDek,
     headingLevel: "h2",
-    node: StanfordEventSeriesData()
+    node: StanfordEventSeriesData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/NewsCard.stories.tsx b/.storybook/stories/nodes/cards/NewsCard.stories.tsx
index 4033f14..16d3ab3 100644
--- a/.storybook/stories/nodes/cards/NewsCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/NewsCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordNewsCard from "@components/nodes/cards/stanford-news/stanford-news-card";
-import {StanfordNewsData} from "../StanfordNews.data";
-import {ComponentProps} from "react";
-import {getStoryBookImage, getStoryBookTaxonomyTerm} from "../../storybook-entities";
-import {DateTime, Image, NodeStanfordNews, TermStanfordNewsTopic} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordNewsCard from "@components/nodes/cards/stanford-news/stanford-news-card"
+import {StanfordNewsData} from "../StanfordNews.data"
+import {ComponentProps} from "react"
+import {getStoryBookImage, getStoryBookTaxonomyTerm} from "../../storybook-entities"
+import {DateTime, Image, NodeStanfordNews, TermStanfordNewsTopic} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordNewsCard> & {
   title: NodeStanfordNews["title"]
@@ -14,47 +14,48 @@ type ComponentStoryProps = ComponentProps<typeof StanfordNewsCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/News Card',
+  title: "Design/Nodes/Cards/News Card",
   component: StanfordNewsCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     suNewsPublishingDate: {
-      control: "date"
+      control: "date",
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const NewsCard: Story = {
   render: ({title, suNewsPublishingDate, suNewsFeaturedMedia, suNewsTopics, node, ...args}) => {
-    node.title = title;
-    if (suNewsPublishingDate) node.suNewsPublishingDate = {
-      offset: "",
-      timestamp: Math.round(new Date(suNewsPublishingDate).getTime() / 1000),
-      time: new Date(suNewsPublishingDate).toISOString(),
-      timezone: "America/Los_Angeles",
-    }
+    node.title = title
+    if (suNewsPublishingDate)
+      node.suNewsPublishingDate = {
+        offset: "",
+        timestamp: Math.round(new Date(suNewsPublishingDate).getTime() / 1000),
+        time: new Date(suNewsPublishingDate).toISOString(),
+        timezone: "America/Los_Angeles",
+      }
     node.suNewsFeaturedMedia = suNewsFeaturedMedia ? getStoryBookImage() : undefined
 
-    node.suNewsTopics = [];
+    node.suNewsTopics = []
     if (suNewsTopics) {
       suNewsTopics.map(name => {
         node.suNewsTopics?.push(getStoryBookTaxonomyTerm(name))
       })
     }
-    return <StanfordNewsCard node={node} {...args}/>
+    return <StanfordNewsCard node={node} {...args} />
   },
   args: {
     title: StanfordNewsData().title,
@@ -62,6 +63,6 @@ export const NewsCard: Story = {
     suNewsTopics: ["foo", "bar"],
     suNewsFeaturedMedia: "image",
     headingLevel: "h2",
-    node: StanfordNewsData()
+    node: StanfordNewsData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/PersonCard.stories.tsx b/.storybook/stories/nodes/cards/PersonCard.stories.tsx
index 0e3c5ed..46c905e 100644
--- a/.storybook/stories/nodes/cards/PersonCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/PersonCard.stories.tsx
@@ -1,10 +1,10 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordPersonCard from "@components/nodes/cards/stanford-person/stanford-person-card";
-import {StanfordPersonData} from "../StanfordPerson.data";
-import {ComponentProps} from "react";
-import {Image, NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
-import {getStoryBookImage} from "../../storybook-entities";
+import StanfordPersonCard from "@components/nodes/cards/stanford-person/stanford-person-card"
+import {StanfordPersonData} from "../StanfordPerson.data"
+import {ComponentProps} from "react"
+import {Image, NodeStanfordPerson} from "@lib/gql/__generated__/drupal"
+import {getStoryBookImage} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPersonCard> & {
   title: NodeStanfordPerson["title"]
@@ -14,38 +14,38 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPersonCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Person Card',
+  title: "Design/Nodes/Cards/Person Card",
   component: StanfordPersonCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PersonCard: Story = {
   render: ({title, suPersonPhoto, suPersonShortTitle, node, ...args}) => {
-    node.title = title;
-    node.suPersonShortTitle = suPersonShortTitle;
-    node.suPersonPhoto = suPersonPhoto ? getStoryBookImage() : undefined;
-    return <StanfordPersonCard node={node} {...args}/>
+    node.title = title
+    node.suPersonShortTitle = suPersonShortTitle
+    node.suPersonPhoto = suPersonPhoto ? getStoryBookImage() : undefined
+    return <StanfordPersonCard node={node} {...args} />
   },
   args: {
     title: StanfordPersonData().title,
     suPersonPhoto: "image",
     suPersonShortTitle: StanfordPersonData().suPersonShortTitle,
     headingLevel: "h2",
-    node: StanfordPersonData()
+    node: StanfordPersonData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/PolicyCard.stories.tsx b/.storybook/stories/nodes/cards/PolicyCard.stories.tsx
index 98bd050..b207260 100644
--- a/.storybook/stories/nodes/cards/PolicyCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/PolicyCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford-policy-card";
-import {StanfordPolicyData} from "../StanfordPolicy.data";
-import {ComponentProps} from "react";
-import {NodeStanfordPolicy, Text} from "@lib/gql/__generated__/drupal";
+import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford-policy-card"
+import {StanfordPolicyData} from "../StanfordPolicy.data"
+import {ComponentProps} from "react"
+import {NodeStanfordPolicy, Text} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPolicyCard> & {
   title: NodeStanfordPolicy["title"]
@@ -12,36 +12,36 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPolicyCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Policy Card',
+  title: "Design/Nodes/Cards/Policy Card",
   component: StanfordPolicyCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PolicyCard: Story = {
   render: ({title, body, node, ...args}) => {
-    node.title = title;
-    node.body = {processed: body};
-    return <StanfordPolicyCard node={node} {...args}/>
+    node.title = title
+    node.body = {processed: body}
+    return <StanfordPolicyCard node={node} {...args} />
   },
   args: {
     title: StanfordPolicyData().title,
     body: StanfordPolicyData().body?.processed,
     headingLevel: "h2",
-    node: StanfordPolicyData()
+    node: StanfordPolicyData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/cards/PublicationCard.stories.tsx b/.storybook/stories/nodes/cards/PublicationCard.stories.tsx
index a80a7f1..cb4d092 100644
--- a/.storybook/stories/nodes/cards/PublicationCard.stories.tsx
+++ b/.storybook/stories/nodes/cards/PublicationCard.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card";
-import {StanfordPublicationData} from "../StanfordPublication.data";
-import {ComponentProps} from "react";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
-import {NodeStanfordPublication, TermStanfordPublicationTopic} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card"
+import {StanfordPublicationData} from "../StanfordPublication.data"
+import {ComponentProps} from "react"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
+import {NodeStanfordPublication, TermStanfordPublicationTopic} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPublicationCard> & {
   title: NodeStanfordPublication["title"]
@@ -12,24 +12,24 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPublicationCard> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/Cards/Publication Card',
+  title: "Design/Nodes/Cards/Publication Card",
   component: StanfordPublicationCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PublicationCard: Story = {
@@ -39,12 +39,12 @@ export const PublicationCard: Story = {
     if (suPublicationTopics) {
       suPublicationTopics.map(name => node.suPublicationTopics?.push(getStoryBookTaxonomyTerm(name)))
     }
-    return <StanfordPublicationCard node={node} {...args}/>
+    return <StanfordPublicationCard node={node} {...args} />
   },
   args: {
     title: StanfordPublicationData().title,
     suPublicationTopics: ["foo", "bar"],
     headingLevel: "h2",
-    node: StanfordPublicationData()
+    node: StanfordPublicationData(),
   },
-};
+}
diff --git a/.storybook/stories/nodes/list-item/BasicPageListItem.stories.tsx b/.storybook/stories/nodes/list-item/BasicPageListItem.stories.tsx
index 14961ba..d277d1b 100644
--- a/.storybook/stories/nodes/list-item/BasicPageListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/BasicPageListItem.stories.tsx
@@ -1,10 +1,10 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordPageListItem from "@components/nodes/list-item/stanford-page/stanford-page-list-item";
-import {PageCard} from "../cards/BasicPageCard.stories";
-import {ComponentProps} from "react";
-import {Image, NodeStanfordPage, Text} from "@lib/gql/__generated__/drupal";
-import {getStoryBookImage} from "../../storybook-entities";
+import StanfordPageListItem from "@components/nodes/list-item/stanford-page/stanford-page-list-item"
+import {PageCard} from "../cards/BasicPageCard.stories"
+import {ComponentProps} from "react"
+import {Image, NodeStanfordPage, Text} from "@lib/gql/__generated__/drupal"
+import {getStoryBookImage} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPageListItem> & {
   title: NodeStanfordPage["title"]
@@ -14,32 +14,32 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPageListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Stanford Page List Item',
+  title: "Design/Nodes/List Item/Stanford Page List Item",
   component: StanfordPageListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PageListItem: Story = {
   render: ({title, suPageImage, suPageDescription, node, ...args}) => {
     node.suPageImage = suPageImage ? getStoryBookImage(suPageImage) : undefined
-    node.title = title;
-    node.suPageDescription = suPageDescription;
-    return <StanfordPageListItem node={node} {...args}/>
+    node.title = title
+    node.suPageDescription = suPageDescription
+    return <StanfordPageListItem node={node} {...args} />
   },
   args: {...PageCard.args},
-};
+}
diff --git a/.storybook/stories/nodes/list-item/CourseListItem.stories.tsx b/.storybook/stories/nodes/list-item/CourseListItem.stories.tsx
index 7954c02..fc303e8 100644
--- a/.storybook/stories/nodes/list-item/CourseListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/CourseListItem.stories.tsx
@@ -1,10 +1,10 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordCourseListItem from "@components/nodes/list-item/stanford-course/stanford-course-list-item";
-import {CourseCard} from "../cards/CourseCard.stories";
-import {ComponentProps} from "react";
-import {NodeStanfordCourse, TermSuCourseSubject} from "@lib/gql/__generated__/drupal";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
+import StanfordCourseListItem from "@components/nodes/list-item/stanford-course/stanford-course-list-item"
+import {CourseCard} from "../cards/CourseCard.stories"
+import {ComponentProps} from "react"
+import {NodeStanfordCourse, TermSuCourseSubject} from "@lib/gql/__generated__/drupal"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordCourseListItem> & {
   title: NodeStanfordCourse["title"]
@@ -15,33 +15,33 @@ type ComponentStoryProps = ComponentProps<typeof StanfordCourseListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Course List Item',
+  title: "Design/Nodes/List Item/Course List Item",
   component: StanfordCourseListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const CourseListItem: Story = {
   render: ({title, suCourseSubject, suCourseCode, suCourseAcademicYear, node, ...args}) => {
-    node.title = title;
-    node.suCourseSubject = suCourseSubject ? getStoryBookTaxonomyTerm(suCourseSubject) : undefined;
-    node.suCourseCode = suCourseCode;
-    node.suCourseAcademicYear = suCourseAcademicYear;
-    return <StanfordCourseListItem node={node} {...args}/>
+    node.title = title
+    node.suCourseSubject = suCourseSubject ? getStoryBookTaxonomyTerm(suCourseSubject) : undefined
+    node.suCourseCode = suCourseCode
+    node.suCourseAcademicYear = suCourseAcademicYear
+    return <StanfordCourseListItem node={node} {...args} />
   },
   args: {...CourseCard.args},
-};
+}
diff --git a/.storybook/stories/nodes/list-item/EventListItem.stories.tsx b/.storybook/stories/nodes/list-item/EventListItem.stories.tsx
index fbb26c8..0c5e93d 100644
--- a/.storybook/stories/nodes/list-item/EventListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/EventListItem.stories.tsx
@@ -1,10 +1,10 @@
-import type {Meta, StoryObj} from '@storybook/react';
+import type {Meta, StoryObj} from "@storybook/react"
 
-import StanfordEventListItem from "@components/nodes/list-item/stanford-event/stanford-event-list-item";
-import {EventCard} from "../cards/EventCard.stories";
-import {ComponentProps} from "react";
-import {NodeStanfordEvent, SmartDateType, TermStanfordEventType} from "@lib/gql/__generated__/drupal";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
+import StanfordEventListItem from "@components/nodes/list-item/stanford-event/stanford-event-list-item"
+import {EventCard} from "../cards/EventCard.stories"
+import {ComponentProps} from "react"
+import {NodeStanfordEvent, SmartDateType, TermStanfordEventType} from "@lib/gql/__generated__/drupal"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordEventListItem> & {
   suEventDateTime_start: SmartDateType["value"]
@@ -17,24 +17,24 @@ type ComponentStoryProps = ComponentProps<typeof StanfordEventListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Event List Item',
+  title: "Design/Nodes/List Item/Event List Item",
   component: StanfordEventListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventListItem: Story = {
@@ -48,13 +48,13 @@ export const EventListItem: Story = {
     node,
     ...args
   }) => {
-    node.title = title;
-    node.suEventDateTime.value = Math.round(suEventDateTime_start / 1000);
-    node.suEventDateTime.end_value = Math.round(suEventDateTime_end / 1000);
-    node.suEventType = suEventType ? [getStoryBookTaxonomyTerm(suEventType)] : undefined;
-    node.suEventSubheadline = suEventSubheadline;
-    node.suEventAltLoc = suEventAltLoc;
-    return <StanfordEventListItem node={node} {...args}/>
+    node.title = title
+    node.suEventDateTime.value = Math.round(suEventDateTime_start / 1000)
+    node.suEventDateTime.end_value = Math.round(suEventDateTime_end / 1000)
+    node.suEventType = suEventType ? [getStoryBookTaxonomyTerm(suEventType)] : undefined
+    node.suEventSubheadline = suEventSubheadline
+    node.suEventAltLoc = suEventAltLoc
+    return <StanfordEventListItem node={node} {...args} />
   },
   args: {...EventCard.args},
-};
+}
diff --git a/.storybook/stories/nodes/list-item/EventSeriesListItem.stories.tsx b/.storybook/stories/nodes/list-item/EventSeriesListItem.stories.tsx
index 3e8793d..78ac14f 100644
--- a/.storybook/stories/nodes/list-item/EventSeriesListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/EventSeriesListItem.stories.tsx
@@ -1,8 +1,8 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordEventSeriesListItem from "@components/nodes/list-item/stanford-event-series/stanford-event-series-list-item";
-import {EventSeriesCard} from "../cards/EventSeriesCard.stories";
-import {ComponentProps} from "react";
-import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordEventSeriesListItem from "@components/nodes/list-item/stanford-event-series/stanford-event-series-list-item"
+import {EventSeriesCard} from "../cards/EventSeriesCard.stories"
+import {ComponentProps} from "react"
+import {NodeStanfordEventSeries} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordEventSeriesListItem> & {
   title: NodeStanfordEventSeries["title"]
@@ -11,31 +11,31 @@ type ComponentStoryProps = ComponentProps<typeof StanfordEventSeriesListItem> &
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Event Series List Item',
+  title: "Design/Nodes/List Item/Event Series List Item",
   component: StanfordEventSeriesListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventSeriesListItem: Story = {
   render: ({title, suEventSeriesDek, node, ...args}) => {
-    node.title = title;
-    node.suEventSeriesDek = suEventSeriesDek;
-    return <StanfordEventSeriesListItem node={node} {...args}/>
+    node.title = title
+    node.suEventSeriesDek = suEventSeriesDek
+    return <StanfordEventSeriesListItem node={node} {...args} />
   },
   args: {...EventSeriesCard.args},
-};
+}
diff --git a/.storybook/stories/nodes/list-item/NewsListItem.stories.tsx b/.storybook/stories/nodes/list-item/NewsListItem.stories.tsx
index 57c01f3..2bedd43 100644
--- a/.storybook/stories/nodes/list-item/NewsListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/NewsListItem.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordNewsListItem from "@components/nodes/list-item/stanford-news/stanford-news-list-item";
-import {NewsCard} from "../cards/NewsCard.stories";
-import {ComponentProps} from "react";
-import {getStoryBookImage, getStoryBookTaxonomyTerm} from "../../storybook-entities";
-import {DateTime, Image, NodeStanfordNews, TermStanfordNewsTopic} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordNewsListItem from "@components/nodes/list-item/stanford-news/stanford-news-list-item"
+import {NewsCard} from "../cards/NewsCard.stories"
+import {ComponentProps} from "react"
+import {getStoryBookImage, getStoryBookTaxonomyTerm} from "../../storybook-entities"
+import {DateTime, Image, NodeStanfordNews, TermStanfordNewsTopic} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordNewsListItem> & {
   title: NodeStanfordNews["title"]
@@ -14,47 +14,48 @@ type ComponentStoryProps = ComponentProps<typeof StanfordNewsListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/News List Item',
+  title: "Design/Nodes/List Item/News List Item",
   component: StanfordNewsListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     suNewsPublishingDate: {
-      control: "date"
+      control: "date",
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const NewsListItem: Story = {
   render: ({title, suNewsPublishingDate, suNewsFeaturedMedia, suNewsTopics, node, ...args}) => {
-    node.title = title;
-    if (suNewsPublishingDate) node.suNewsPublishingDate = {
-      offset: "",
-      timestamp: Math.round(new Date(suNewsPublishingDate).getTime() / 1000),
-      time: new Date(suNewsPublishingDate).toISOString(),
-      timezone: "America/Los_Angeles",
-    }
+    node.title = title
+    if (suNewsPublishingDate)
+      node.suNewsPublishingDate = {
+        offset: "",
+        timestamp: Math.round(new Date(suNewsPublishingDate).getTime() / 1000),
+        time: new Date(suNewsPublishingDate).toISOString(),
+        timezone: "America/Los_Angeles",
+      }
     node.suNewsFeaturedMedia = suNewsFeaturedMedia ? getStoryBookImage() : undefined
 
-    node.suNewsTopics = [];
+    node.suNewsTopics = []
     if (suNewsTopics) {
       suNewsTopics.map(name => {
         node.suNewsTopics?.push(getStoryBookTaxonomyTerm(name))
       })
     }
-    return <StanfordNewsListItem node={node} {...args}/>
+    return <StanfordNewsListItem node={node} {...args} />
   },
-  args: {...NewsCard.args}
-};
+  args: {...NewsCard.args},
+}
diff --git a/.storybook/stories/nodes/list-item/PersonListItem.stories.tsx b/.storybook/stories/nodes/list-item/PersonListItem.stories.tsx
index a227802..789f6ef 100644
--- a/.storybook/stories/nodes/list-item/PersonListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/PersonListItem.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordPersonListItem from "@components/nodes/list-item/stanford-person/stanford-person-list-item";
-import {PersonCard} from "../cards/PersonCard.stories";
-import {ComponentProps} from "react";
-import {Image, NodeStanfordPerson} from "@lib/gql/__generated__/drupal";
-import {getStoryBookImage} from "../../storybook-entities";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordPersonListItem from "@components/nodes/list-item/stanford-person/stanford-person-list-item"
+import {PersonCard} from "../cards/PersonCard.stories"
+import {ComponentProps} from "react"
+import {Image, NodeStanfordPerson} from "@lib/gql/__generated__/drupal"
+import {getStoryBookImage} from "../../storybook-entities"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPersonListItem> & {
   title: NodeStanfordPerson["title"]
@@ -13,32 +13,32 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPersonListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Person List Item',
+  title: "Design/Nodes/List Item/Person List Item",
   component: StanfordPersonListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PersonListItem: Story = {
   render: ({title, suPersonPhoto, suPersonShortTitle, node, ...args}) => {
-    node.title = title;
-    node.suPersonShortTitle = suPersonShortTitle;
-    node.suPersonPhoto = suPersonPhoto ? getStoryBookImage() : undefined;
-    return <StanfordPersonListItem node={node} {...args}/>
+    node.title = title
+    node.suPersonShortTitle = suPersonShortTitle
+    node.suPersonPhoto = suPersonPhoto ? getStoryBookImage() : undefined
+    return <StanfordPersonListItem node={node} {...args} />
   },
-  args: {...PersonCard.args}
-};
+  args: {...PersonCard.args},
+}
diff --git a/.storybook/stories/nodes/list-item/PolicyListItem.stories.tsx b/.storybook/stories/nodes/list-item/PolicyListItem.stories.tsx
index 9339ed5..b168fcb 100644
--- a/.storybook/stories/nodes/list-item/PolicyListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/PolicyListItem.stories.tsx
@@ -1,8 +1,8 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/stanford-policy-list-item";
-import {PolicyCard} from "../cards/PolicyCard.stories";
-import {ComponentProps} from "react";
-import {NodeStanfordPolicy, Text} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/stanford-policy-list-item"
+import {PolicyCard} from "../cards/PolicyCard.stories"
+import {ComponentProps} from "react"
+import {NodeStanfordPolicy, Text} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPolicyListItem> & {
   title: NodeStanfordPolicy["title"]
@@ -11,31 +11,31 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPolicyListItem> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Policy List Item',
+  title: "Design/Nodes/List Item/Policy List Item",
   component: StanfordPolicyListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PolicyListItem: Story = {
   render: ({title, body, node, ...args}) => {
-    node.title = title;
-    node.body = {processed: body};
-    return <StanfordPolicyListItem node={node} {...args}/>
+    node.title = title
+    node.body = {processed: body}
+    return <StanfordPolicyListItem node={node} {...args} />
   },
-  args: {...PolicyCard.args}
-};
+  args: {...PolicyCard.args},
+}
diff --git a/.storybook/stories/nodes/list-item/PublicationListItem.stories.tsx b/.storybook/stories/nodes/list-item/PublicationListItem.stories.tsx
index aabac39..2cc1a8f 100644
--- a/.storybook/stories/nodes/list-item/PublicationListItem.stories.tsx
+++ b/.storybook/stories/nodes/list-item/PublicationListItem.stories.tsx
@@ -1,9 +1,9 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item";
-import {PublicationCard} from "../cards/PublicationCard.stories";
-import {ComponentProps} from "react";
-import {getStoryBookTaxonomyTerm} from "../../storybook-entities";
-import {NodeStanfordPublication, TermStanfordPublicationTopic} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item"
+import {PublicationCard} from "../cards/PublicationCard.stories"
+import {ComponentProps} from "react"
+import {getStoryBookTaxonomyTerm} from "../../storybook-entities"
+import {NodeStanfordPublication, TermStanfordPublicationTopic} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof StanfordPublicationListItem> & {
   title: NodeStanfordPublication["title"]
@@ -12,24 +12,24 @@ type ComponentStoryProps = ComponentProps<typeof StanfordPublicationListItem> &
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Nodes/List Item/Publication List Item',
+  title: "Design/Nodes/List Item/Publication List Item",
   component: StanfordPublicationListItem,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     headingLevel: {
       options: ["h2", "h3"],
-      control: {type: "select"}
+      control: {type: "select"},
     },
     node: {
       table: {
         disable: true,
-      }
+      },
     },
-  }
-};
+  },
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PublicationListItem: Story = {
@@ -39,7 +39,7 @@ export const PublicationListItem: Story = {
     if (suPublicationTopics) {
       suPublicationTopics.map(name => node.suPublicationTopics?.push(getStoryBookTaxonomyTerm(name)))
     }
-    return <StanfordPublicationListItem node={node} {...args}/>
+    return <StanfordPublicationListItem node={node} {...args} />
   },
-  args: {...PublicationCard.args}
-};
+  args: {...PublicationCard.args},
+}
diff --git a/.storybook/stories/paragraphs/Banner.stories.tsx b/.storybook/stories/paragraphs/Banner.stories.tsx
index 42471aa..94460f3 100644
--- a/.storybook/stories/paragraphs/Banner.stories.tsx
+++ b/.storybook/stories/paragraphs/Banner.stories.tsx
@@ -37,9 +37,11 @@ export const Banner: Story = {
         timezone: "America/Los_Angeles",
       },
       id: "9954cc81-919b-4498-9151-bf930831fca7",
-      suBannerHeader: "Nam scelerisque, urna vitae auctor efficitur, tortor nunc cursus tortor, ut blandit purus arcu quis sapien",
+      suBannerHeader:
+        "Nam scelerisque, urna vitae auctor efficitur, tortor nunc cursus tortor, ut blandit purus arcu quis sapien",
       suBannerBody: {
-        processed: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae dignissim felis. Nullam nulla leo, venenatis at feugiat sit amet, ultricies non lorem.</p>",
+        processed:
+          "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae dignissim felis. Nullam nulla leo, venenatis at feugiat sit amet, ultricies non lorem.</p>",
       },
       suBannerImage: getStoryBookImage(),
       suBannerSupHeader: "Vestibulum",
diff --git a/.storybook/stories/paragraphs/Card.stories.tsx b/.storybook/stories/paragraphs/Card.stories.tsx
index 00cb298..f1a696d 100644
--- a/.storybook/stories/paragraphs/Card.stories.tsx
+++ b/.storybook/stories/paragraphs/Card.stories.tsx
@@ -37,9 +37,11 @@ export const Card: Story = {
         timezone: "America/Los_Angeles",
       },
       id: "9954cc81-919b-4498-9151-bf930831fca7",
-      suCardHeader: "Nam scelerisque, urna vitae auctor efficitur, tortor nunc cursus tortor, ut blandit purus arcu quis sapien",
+      suCardHeader:
+        "Nam scelerisque, urna vitae auctor efficitur, tortor nunc cursus tortor, ut blandit purus arcu quis sapien",
       suCardBody: {
-        processed: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae dignissim felis. Nullam nulla leo, venenatis at feugiat sit amet, ultricies non lorem.</p>",
+        processed:
+          "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae dignissim felis. Nullam nulla leo, venenatis at feugiat sit amet, ultricies non lorem.</p>",
       },
       suCardLink: {
         title: "Button",
diff --git a/.storybook/stories/paragraphs/Gallery.stories.tsx b/.storybook/stories/paragraphs/Gallery.stories.tsx
index 191513d..4706399 100644
--- a/.storybook/stories/paragraphs/Gallery.stories.tsx
+++ b/.storybook/stories/paragraphs/Gallery.stories.tsx
@@ -33,12 +33,7 @@ export const Gallery: Story = {
     for (let i = 0; i < numberofimages; i++) {
       paragraph.suGalleryImages.push(getStoryBookGalleryImage(undefined, "Lorem Ipsum"))
     }
-    return (
-      <GalleryParagraph
-        paragraph={paragraph}
-        {...args}
-      />
-    )
+    return <GalleryParagraph paragraph={paragraph} {...args} />
   },
   args: {
     numberofimages: 3,
@@ -60,7 +55,8 @@ export const Gallery: Story = {
         internal: false,
       },
       suGalleryDescription: {
-        processed: "<p>Pepper jack fromage frais pecorino cheesecake cheesy grin camembert de normandie macaroni cheese the big cheese.</p>",
+        processed:
+          "<p>Pepper jack fromage frais pecorino cheesecake cheesy grin camembert de normandie macaroni cheese the big cheese.</p>",
       },
       suGalleryHeadline: "This is a Gallery Headline",
       suGalleryImages: [],
diff --git a/.storybook/stories/paragraphs/Wysiwyg.stories.tsx b/.storybook/stories/paragraphs/Wysiwyg.stories.tsx
index 783522f..8ced9ee 100644
--- a/.storybook/stories/paragraphs/Wysiwyg.stories.tsx
+++ b/.storybook/stories/paragraphs/Wysiwyg.stories.tsx
@@ -1,7 +1,7 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import WysiwygParagraph from "@components/paragraphs/stanford-wysiwyg/wysiwyg-paragraph";
-import {ComponentProps} from "react";
-import {ParagraphStanfordWysiwyg, Text} from "@lib/gql/__generated__/drupal";
+import type {Meta, StoryObj} from "@storybook/react"
+import WysiwygParagraph from "@components/paragraphs/stanford-wysiwyg/wysiwyg-paragraph"
+import {ComponentProps} from "react"
+import {ParagraphStanfordWysiwyg, Text} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof WysiwygParagraph> & {
   text: Text["processed"]
@@ -9,29 +9,30 @@ type ComponentStoryProps = ComponentProps<typeof WysiwygParagraph> & {
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Paragraphs/Wysiwyg',
+  title: "Design/Paragraphs/Wysiwyg",
   component: WysiwygParagraph,
-  tags: ['autodocs'],
-  argTypes: {}
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Wysiwyg: Story = {
   render: ({text, ...args}) => {
-    return <WysiwygParagraph paragraph={{suWysiwygText: {processed: text}} as ParagraphStanfordWysiwyg}/>
+    return <WysiwygParagraph paragraph={{suWysiwygText: {processed: text}} as ParagraphStanfordWysiwyg} />
   },
   args: {
-    text: "<h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>\n" +
-      "<h1><a href=\"#\">Didn't melt fairer keepsakes since Fellowship elsewhere.</a></h1>\n" +
+    text:
+      "<h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>\n" +
+      '<h1><a href="#">Didn\'t melt fairer keepsakes since Fellowship elsewhere.</a></h1>\n' +
       "<p>Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?</p>\n" +
       "<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>\n" +
-      "<h2><a href=\"#\">Tad survive ensnare joy mistake courtesy Bagshot Row.</a></h2>\n" +
+      '<h2><a href="#">Tad survive ensnare joy mistake courtesy Bagshot Row.</a></h2>\n' +
       "<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>\n" +
       "<h3>North valor overflowing sort Iáve mister kingly money?</h3>\n" +
-      "<h3><a href=\"#\">North valor overflowing sort Iáve mister kingly money?</a></h3>\n" +
+      '<h3><a href="#">North valor overflowing sort Iáve mister kingly money?</a></h3>\n' +
       "<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>\n" +
       "<ul>\n" +
       "  <li>Adamant.</li>\n" +
@@ -160,8 +161,8 @@ export const Wysiwyg: Story = {
       "  <dd>Missing vanish taken colleague sway voice tricks 13 Grimbold.</dd>\n" +
       "  <dd>Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.</dd>\n" +
       "</dl>\n" +
-      "<a href=\"#\" class=\"su-button\">Button</a>\n" +
-      "<a href=\"#\" class=\"su-button--secondary\">Button</a>\n" +
-      "<a href=\"#\" class=\"su-button--big\">Button</a>\n"
+      '<a href="#" class="su-button">Button</a>\n' +
+      '<a href="#" class="su-button--secondary">Button</a>\n' +
+      '<a href="#" class="su-button--big">Button</a>\n',
   },
-};
+}
diff --git a/.storybook/stories/storybook-entities.tsx b/.storybook/stories/storybook-entities.tsx
index 7df7013..3a97ed8 100644
--- a/.storybook/stories/storybook-entities.tsx
+++ b/.storybook/stories/storybook-entities.tsx
@@ -1,8 +1,8 @@
-import {MediaImage, MediaStanfordGalleryImage, MediaVideo, TermInterface} from "@lib/gql/__generated__/drupal";
+import {MediaImage, MediaStanfordGalleryImage, MediaVideo, TermInterface} from "@lib/gql/__generated__/drupal"
 
 export const getStoryBookImage = (imageUrl?: string): MediaImage => {
   return {
-    __typename: 'MediaImage',
+    __typename: "MediaImage",
     name: makeid(),
     path: "",
     status: true,
@@ -11,13 +11,13 @@ export const getStoryBookImage = (imageUrl?: string): MediaImage => {
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     created: {
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     langcode: {},
     metatag: [],
@@ -28,14 +28,14 @@ export const getStoryBookImage = (imageUrl?: string): MediaImage => {
       alt: "Placeholder Image",
       size: 123,
       focalY: 50,
-      focalX: 50
-    }
+      focalX: 50,
+    },
   }
 }
 
 export const getStoryBookGalleryImage = (imageUrl?: string, imageCaption?: string): MediaStanfordGalleryImage => {
   return {
-    __typename: 'MediaStanfordGalleryImage',
+    __typename: "MediaStanfordGalleryImage",
     name: makeid(),
     path: "",
     status: true,
@@ -44,13 +44,13 @@ export const getStoryBookGalleryImage = (imageUrl?: string, imageCaption?: strin
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     created: {
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     langcode: {},
     metatag: [],
@@ -62,14 +62,14 @@ export const getStoryBookGalleryImage = (imageUrl?: string, imageCaption?: strin
       alt: "kittens",
       size: 123,
       focalY: 50,
-      focalX: 50
-    }
+      focalX: 50,
+    },
   }
 }
 
 export const getStoryBookVideo = (videoUrl?: string): MediaVideo => {
   return {
-    __typename: 'MediaVideo',
+    __typename: "MediaVideo",
     name: makeid(),
     path: "",
     status: true,
@@ -78,23 +78,23 @@ export const getStoryBookVideo = (videoUrl?: string): MediaVideo => {
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     created: {
       offset: "",
       timestamp: Math.round(new Date().getTime() / 1000),
       time: new Date().toISOString(),
-      timezone: "America/Los_Angeles"
+      timezone: "America/Los_Angeles",
     },
     langcode: {},
     metatag: [],
-    mediaOembedVideo: videoUrl || "https://www.youtube.com/watch?v=9P8mASSREYM"
+    mediaOembedVideo: videoUrl || "https://www.youtube.com/watch?v=9P8mASSREYM",
   }
 }
 
 export const getStoryBookTaxonomyTerm = (name?: string): TermInterface => {
   return {
-    name: name || 'Foo Bar',
+    name: name || "Foo Bar",
     id: makeid(),
     description: {},
     langcode: {},
@@ -107,13 +107,13 @@ export const getStoryBookTaxonomyTerm = (name?: string): TermInterface => {
 }
 
 const makeid = (length: number = 10) => {
-  let result = '';
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  const charactersLength = characters.length;
-  let counter = 0;
+  let result = ""
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+  const charactersLength = characters.length
+  let counter = 0
   while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
+    result += characters.charAt(Math.floor(Math.random() * charactersLength))
+    counter += 1
   }
-  return result;
-}
\ No newline at end of file
+  return result
+}
diff --git a/app/[...slug]/metadata.tsx b/app/[...slug]/metadata.tsx
index 5d2a170..7551755 100644
--- a/app/[...slug]/metadata.tsx
+++ b/app/[...slug]/metadata.tsx
@@ -8,13 +8,20 @@ import {
   NodeUnion,
   ParagraphStanfordWysiwyg,
   ParagraphUnion,
+  StanfordBasicSiteSetting,
 } from "@lib/gql/__generated__/drupal.d"
 import {Metadata} from "next"
 import {decode} from "html-entities"
+import {getConfigPageField} from "@lib/gql/gql-queries"
+
+export const getNodeMetadata = async (node: NodeUnion): Promise<Metadata> => {
+  const siteName = await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteName"]>(
+    "StanfordBasicSiteSetting",
+    "suSiteName"
+  )
 
-export const getNodeMetadata = (node: NodeUnion): Metadata => {
   const defaultData = {
-    title: node.title,
+    title: `${node.title} | ${siteName || "Stanford"}`,
     other: {},
   }
   switch (node.__typename) {
diff --git a/app/page.tsx b/app/page.tsx
index e1b5af7..275e6f3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import Rows from "@components/paragraphs/rows/rows"
 import {notFound} from "next/navigation"
-import {getConfigPage, getEntityFromPath} from "@lib/gql/gql-queries"
+import {getConfigPageField, getEntityFromPath} from "@lib/gql/gql-queries"
 import {NodeStanfordPage, NodeUnion, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d"
 import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {Metadata} from "next"
@@ -30,11 +30,15 @@ const Home = async () => {
 }
 
 export const generateMetadata = async (): Promise<Metadata> => {
-  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
+  const siteName = await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteName"]>(
+    "StanfordBasicSiteSetting",
+    "suSiteName"
+  )
+
   const {entity} = await getEntityFromPath<NodeUnion>("/")
-  const metadata = entity ? getNodeMetadata(entity) : {}
-  metadata.title = siteSettingsConfig?.suSiteName || metadata.title
-  if (metadata.openGraph?.title) metadata.openGraph.title = siteSettingsConfig?.suSiteName || metadata.openGraph.title
+  const metadata = entity ? await getNodeMetadata(entity) : {}
+  metadata.title = siteName || metadata.title
+  if (metadata.openGraph?.title) metadata.openGraph.title = siteName || metadata.openGraph.title
   return metadata
 }
 
diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
index a3db952..97e6616 100644
--- a/src/components/elements/lockup/lockup.tsx
+++ b/src/components/elements/lockup/lockup.tsx
@@ -13,34 +13,28 @@ import LockupS from "@components/elements/lockup/lockup-s"
 import LockupT from "@components/elements/lockup/lockup-t"
 import LockupLogo from "@components/elements/lockup/lockup-logo"
 import {LockupSetting, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d"
+import {getConfigPage, getConfigPageField} from "@lib/gql/gql-queries"
 
-type Props = Omit<LockupSetting, "__typename" | "id" | "metatag"> &
-  Omit<StanfordBasicSiteSetting, "__typename" | "id" | "metatag">
-
-export const Lockup = ({
-  suLockupEnabled,
-  suUseThemeLogo,
-  suUploadLogoImage,
-  suSiteName,
-  suLine1,
-  suLine2,
-  suLine3,
-  suLine4,
-  suLine5,
-  suLockupOptions,
-}: Props) => {
-  const logoUrl = !suUseThemeLogo ? suUploadLogoImage?.url : undefined
+export const Lockup = async () => {
+  const siteName = await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteName"]>(
+    "StanfordBasicSiteSetting",
+    "suSiteName"
+  )
+
+  const lockupSettingsConfig = await getConfigPage<LockupSetting>("LockupSetting")
+
+  const logoUrl = !lockupSettingsConfig?.suUseThemeLogo ? lockupSettingsConfig?.suUploadLogoImage?.url : undefined
   const lockupProps = {
-    line1: suLine1,
-    line2: suLine2,
-    line3: suLine3,
-    line4: suLine4,
-    line5: suLine5,
-    siteName: suSiteName || "Stanford",
+    line1: lockupSettingsConfig?.suLine1,
+    line2: lockupSettingsConfig?.suLine2,
+    line3: lockupSettingsConfig?.suLine3,
+    line4: lockupSettingsConfig?.suLine4,
+    line5: lockupSettingsConfig?.suLine5,
+    siteName: siteName || "Stanford",
     logoUrl: logoUrl,
   }
 
-  if (!suLockupEnabled) {
+  if (!lockupSettingsConfig?.suLockupEnabled) {
     return (
       <div className="py-10">
         <Link href="/" className="flex no-underline">
@@ -48,14 +42,14 @@ export const Lockup = ({
             <div className="mr-2 border-black pr-2 lg:inline-block lg:border-r">
               <LockupLogo {...lockupProps} />
             </div>
-            <div className="type-3 font-normal text-black lg:inline-block">{suSiteName || "University"}</div>
+            <div className="type-3 font-normal text-black lg:inline-block">{siteName || "University"}</div>
           </div>
         </Link>
       </div>
     )
   }
 
-  switch (suLockupOptions) {
+  switch (lockupSettingsConfig?.suLockupOptions) {
     case "a":
       return <LockupA {...lockupProps} />
 
diff --git a/src/components/elements/user-analytics.tsx b/src/components/elements/user-analytics.tsx
index 588d8dd..eac2b38 100644
--- a/src/components/elements/user-analytics.tsx
+++ b/src/components/elements/user-analytics.tsx
@@ -1,4 +1,4 @@
-import {getConfigPage} from "@lib/gql/gql-queries"
+import {getConfigPageField} from "@lib/gql/gql-queries"
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal"
 import Script from "next/script"
 import {GoogleAnalytics} from "@next/third-parties/google"
@@ -6,12 +6,18 @@ import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const UserAnalytics = async () => {
   if (isPreviewMode()) return
-  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
-  if (!siteSettingsConfig?.suGoogleAnalytics || !process.env.NEXT_PUBLIC_DOMAIN) return
+
+  const googleAnalytics = await getConfigPageField<
+    StanfordBasicSiteSetting,
+    StanfordBasicSiteSetting["suGoogleAnalytics"]
+  >("StanfordBasicSiteSetting", "suGoogleAnalytics")
+
+  if (!googleAnalytics) return
+
   return (
     <>
       <Script async src="//siteimproveanalytics.com/js/siteanalyze_80352.js" />
-      <GoogleAnalytics gaId={siteSettingsConfig?.suGoogleAnalytics} />
+      <GoogleAnalytics gaId={googleAnalytics} />
     </>
   )
 }
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index 4ed3239..4cc8b19 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -2,19 +2,12 @@ import SiteSearchForm from "@components/search/site-search-form"
 import MainMenu from "@components/menu/main-menu"
 import GlobalMessage from "@components/config-pages/global-message"
 import Lockup from "@components/elements/lockup/lockup"
-import {getConfigPage, getMenu} from "@lib/gql/gql-queries"
-import {LockupSetting, MenuAvailable, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d"
 import {HTMLAttributes} from "react"
 import {twMerge} from "tailwind-merge"
 
 type Props = HTMLAttributes<HTMLElement>
 
-const PageHeader = async ({...props}: Props) => {
-  const menuItems = await getMenu(MenuAvailable.Main)
-
-  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
-  const lockupSettingsConfig = await getConfigPage<LockupSetting>("LockupSetting")
-
+const PageHeader = ({...props}: Props) => {
   return (
     <header {...props} className={twMerge("shadow-lg", props.className)}>
       <div className="bg-cardinal-red">
@@ -31,12 +24,12 @@ const PageHeader = async ({...props}: Props) => {
       <div className="relative shadow">
         <div className="min-h-50 centered pr-24 lg:pr-0">
           <div className="flex w-full justify-between">
-            <Lockup {...siteSettingsConfig} {...lockupSettingsConfig} />
+            <Lockup />
             <SiteSearchForm className="hidden lg:block" />
           </div>
         </div>
 
-        <MainMenu menuItems={menuItems} />
+        <MainMenu />
       </div>
     </header>
   )
diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
index 95fe293..097669a 100644
--- a/src/components/layouts/interior-page.tsx
+++ b/src/components/layouts/interior-page.tsx
@@ -13,7 +13,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const InteriorPage = async ({children, currentPath, ...props}: Props) => {
-  const menu = await getMenu(MenuAvailable.Main)
+  const menu = await getMenu(MenuAvailable.Main, 4)
   const activeTrail: string[] = getMenuActiveTrail(menu, currentPath)
 
   // Peel off the menu items from the parent.
diff --git a/src/components/menu/main-menu.client.tsx b/src/components/menu/main-menu.client.tsx
new file mode 100644
index 0000000..94223ff
--- /dev/null
+++ b/src/components/menu/main-menu.client.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import Link from "@components/elements/link"
+import SiteSearchForm from "@components/search/site-search-form"
+import {getMenuActiveTrail} from "@lib/drupal/utils"
+import useOutsideClick from "@lib/hooks/useOutsideClick"
+import {ChevronDownIcon} from "@heroicons/react/20/solid"
+import {MenuItem as MenuItemType} from "@lib/gql/__generated__/drupal.d"
+import {clsx} from "clsx"
+import {useBoolean, useEventListener} from "usehooks-ts"
+import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react"
+import {usePathname} from "next/navigation"
+
+const menuLevelsToShow = 2
+
+type Props = {
+  /**
+   * Array of nested menu items.
+   */
+  menuItems: MenuItemType[]
+}
+
+const MainMenuClient = ({menuItems}: Props) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const navId = useId()
+
+  const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
+  const browserUrl = usePathname()
+  const activeTrail = getMenuActiveTrail(menuItems, usePathname() || "")
+
+  useOutsideClick(menuRef, closeMenu)
+
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || !menuOpen) return
+
+      closeMenu()
+      buttonRef.current?.focus()
+    },
+    [menuOpen, closeMenu]
+  )
+
+  useEffect(() => closeMenu(), [browserUrl, closeMenu])
+  useEventListener("keydown", handleEscape, menuRef)
+
+  return (
+    <nav id={navId} aria-label="Main Navigation" className="lg:centered" ref={menuRef}>
+      <button
+        ref={buttonRef}
+        className="group absolute right-10 top-5 flex flex-col items-center lg:hidden"
+        onClick={toggleMenu}
+        aria-expanded={menuOpen}
+        aria-labelledby={navId}
+      >
+        <span className="flex h-[30px] w-[30px] flex-col items-center justify-center">
+          <span
+            className={clsx("block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
+              "translate-y-4 rotate-45": menuOpen,
+              "-translate-y-0.5": !menuOpen,
+            })}
+          />
+          <span
+            className={clsx("my-3 block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
+              "opacity-0": menuOpen,
+              "opacity-100": !menuOpen,
+            })}
+          />
+          <span
+            className={clsx("block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
+              "-translate-y-4 -rotate-45": menuOpen,
+              "translate-y-0.5": !menuOpen,
+            })}
+          />
+        </span>
+        <span className="group-hocus:underline" aria-hidden>
+          {menuOpen ? "Close" : "Menu"}
+        </span>
+      </button>
+
+      <div
+        className={
+          (menuOpen ? "block" : "hidden") +
+          " top-100 absolute z-10 w-full bg-black lg:relative lg:block lg:bg-transparent"
+        }
+      >
+        <SiteSearchForm className="px-10 lg:hidden" />
+        <ul className="list-unstyled m-0 flex-wrap p-0 lg:flex lg:justify-end">
+          {menuItems.map(item => (
+            <MenuItem key={item.id} {...item} activeTrail={activeTrail} level={0} />
+          ))}
+        </ul>
+      </div>
+    </nav>
+  )
+}
+
+type MenuItemProps = MenuItemType & {
+  activeTrail: string[]
+  level: number
+}
+
+const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps) => {
+  const linkId = useId()
+  const menuItemRef = useRef<HTMLLIElement>(null)
+  const belowListRef = useRef<HTMLUListElement>(null)
+
+  const [positionRight, setPositionRight] = useState<boolean>(true)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const {value: submenuOpen, setFalse: closeSubmenu, toggle: toggleSubmenu} = useBoolean(false)
+  const browserUrl = usePathname()
+
+  useOutsideClick(menuItemRef, closeSubmenu)
+
+  // Close the submenu if the url changes.
+  useEffect(() => closeSubmenu(), [browserUrl, closeSubmenu])
+
+  useLayoutEffect(() => {
+    // If the right side of the submenu is not visible, set the position to be on the left of the menu item.
+    const {x, width} = belowListRef.current?.getBoundingClientRect() || {x: 0, width: 0}
+    if (x + width > window.innerWidth) setPositionRight(false)
+  }, [submenuOpen])
+
+  // If the user presses escape on the keyboard, close the submenus.
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || !submenuOpen) return
+
+      closeSubmenu()
+      if (level === 0) buttonRef.current?.focus()
+    },
+    [level, submenuOpen, closeSubmenu]
+  )
+
+  useEventListener("keydown", handleEscape, menuItemRef)
+
+  // List out the specific classes so tailwind will include them. Dynamic classes values don"t get compiled.
+  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"]
+  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"]
+
+  // The last item in the current trail would be the current item id if the user is on that page.
+  const isCurrent = activeTrail.at(-1) === id
+  const inTrail = activeTrail.includes(id) && !isCurrent
+
+  const linkStyles = clsx(
+    "w-full relative inline-block text-white lg:text-digital-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]",
+    leftPadding[level],
+    // Top menu item styles.
+    {
+      "lg:border-l-0 lg:border-b-[6px] ml-5 lg:ml-0 lg:pb-2": level === 0,
+      "border-digital-red lg:border-black": level === 0 && isCurrent,
+      "border-transparent lg:border-foggy-dark": level === 0 && !isCurrent && inTrail,
+      "border-transparent": level === 0 && !isCurrent && !inTrail,
+    },
+    // Child menu item styles.
+    {
+      "ml-5 lg:ml-0 lg:pl-5": level !== 0,
+      "border-digital-red": level !== 0 && isCurrent,
+      "border-transparent": level !== 0 && !isCurrent,
+    }
+  )
+
+  const subMenuStyles = clsx(
+    "list-unstyled w-full min-w-[300px] lg:bg-white lg:shadow-2xl px-0 lg:absolute",
+    zIndexes[level],
+    {
+      "lg:top-full lg:right-0": level === 0,
+      "lg:top-0": level !== 0,
+      "lg:left-full": level !== 0 && positionRight,
+      "lg:right-full": level !== 0 && !positionRight,
+      block: submenuOpen,
+      hidden: !submenuOpen,
+    }
+  )
+
+  return (
+    <li
+      ref={menuItemRef}
+      className={clsx(
+        "relative m-0 border-b border-cool-grey py-2 first:border-t last:border-0 lg:relative lg:mr-5 lg:border-black-20 lg:py-0 last:lg:mr-0",
+        {"first:border-t-0 lg:border-b-0": level === 0}
+      )}
+    >
+      <div className="flex items-center justify-between lg:justify-end">
+        <Link id={linkId} href={url || "#"} className={linkStyles} aria-current={isCurrent ? "true" : undefined}>
+          {title}
+        </Link>
+
+        {children.length > 0 && level < menuLevelsToShow && (
+          <>
+            {level === 0 && <div className="mb-[6px] ml-5 block h-[25px] w-[1px] shrink-0 bg-archway-light" />}
+            <button
+              ref={buttonRef}
+              className="group relative right-10 shrink-0 rounded-full border-b border-transparent bg-digital-red text-white hocus:border-black hocus:bg-white lg:right-0 lg:rounded-none lg:bg-transparent lg:text-digital-red"
+              onClick={toggleSubmenu}
+              aria-expanded={submenuOpen}
+              aria-labelledby={linkId}
+            >
+              <ChevronDownIcon
+                height={35}
+                className={clsx("transition duration-150 ease-in-out group-hocus:scale-125 group-hocus:text-black", {
+                  "rotate-180": submenuOpen,
+                })}
+              />
+            </button>
+          </>
+        )}
+      </div>
+
+      {children.length > 0 && level < menuLevelsToShow && (
+        <ul className={subMenuStyles} ref={belowListRef}>
+          {children.map(item => (
+            <MenuItem key={item.id} {...item} level={level + 1} activeTrail={activeTrail} />
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}
+
+export default MainMenuClient
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 27c225e..15c9319 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -1,221 +1,10 @@
-"use client"
+import {getMenu} from "@lib/gql/gql-queries"
+import MainMenuClient from "@components/menu/main-menu.client"
+import {MenuAvailable} from "@lib/gql/__generated__/drupal.d"
 
-import Link from "@components/elements/link"
-import SiteSearchForm from "@components/search/site-search-form"
-import {getMenuActiveTrail} from "@lib/drupal/utils"
-import useOutsideClick from "@lib/hooks/useOutsideClick"
-import {ChevronDownIcon} from "@heroicons/react/20/solid"
-import {MenuItem as MenuItemType} from "@lib/gql/__generated__/drupal.d"
-import {clsx} from "clsx"
-import {useBoolean, useEventListener} from "usehooks-ts"
-import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react"
-import {usePathname} from "next/navigation"
-
-const menuLevelsToShow = 2
-
-type Props = {
-  /**
-   * Array of nested menu items.
-   */
-  menuItems: MenuItemType[]
-}
-
-const MainMenu = ({menuItems}: Props) => {
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-  const navId = useId()
-
-  const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
-  const browserUrl = usePathname()
-  const activeTrail = getMenuActiveTrail(menuItems, usePathname() || "")
-
-  useOutsideClick(menuRef, closeMenu)
-
-  const handleEscape = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key !== "Escape" || !menuOpen) return
-
-      closeMenu()
-      buttonRef.current?.focus()
-    },
-    [menuOpen, closeMenu]
-  )
-
-  useEffect(() => closeMenu(), [browserUrl, closeMenu])
-  useEventListener("keydown", handleEscape, menuRef)
-
-  return (
-    <nav id={navId} aria-label="Main Navigation" className="lg:centered" ref={menuRef}>
-      <button
-        ref={buttonRef}
-        className="group absolute right-10 top-5 flex flex-col items-center lg:hidden"
-        onClick={toggleMenu}
-        aria-expanded={menuOpen}
-        aria-labelledby={navId}
-      >
-        <span className="flex h-[30px] w-[30px] flex-col items-center justify-center">
-          <span
-            className={clsx("block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
-              "translate-y-4 rotate-45": menuOpen,
-              "-translate-y-0.5": !menuOpen,
-            })}
-          />
-          <span
-            className={clsx("my-3 block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
-              "opacity-0": menuOpen,
-              "opacity-100": !menuOpen,
-            })}
-          />
-          <span
-            className={clsx("block h-[3px] w-full rounded-sm bg-black-true transition-all duration-300 ease-out", {
-              "-translate-y-4 -rotate-45": menuOpen,
-              "translate-y-0.5": !menuOpen,
-            })}
-          />
-        </span>
-        <span className="group-hocus:underline" aria-hidden>
-          {menuOpen ? "Close" : "Menu"}
-        </span>
-      </button>
-
-      <div
-        className={
-          (menuOpen ? "block" : "hidden") +
-          " top-100 absolute z-10 w-full bg-black lg:relative lg:block lg:bg-transparent"
-        }
-      >
-        <SiteSearchForm className="px-10 lg:hidden" />
-        <ul className="list-unstyled m-0 flex-wrap p-0 lg:flex lg:justify-end">
-          {menuItems.map(item => (
-            <MenuItem key={item.id} {...item} activeTrail={activeTrail} level={0} />
-          ))}
-        </ul>
-      </div>
-    </nav>
-  )
-}
-
-type MenuItemProps = MenuItemType & {
-  activeTrail: string[]
-  level: number
-}
-
-const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps) => {
-  const linkId = useId()
-  const menuItemRef = useRef<HTMLLIElement>(null)
-  const belowListRef = useRef<HTMLUListElement>(null)
-
-  const [positionRight, setPositionRight] = useState<boolean>(true)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const {value: submenuOpen, setFalse: closeSubmenu, toggle: toggleSubmenu} = useBoolean(false)
-  const browserUrl = usePathname()
-
-  useOutsideClick(menuItemRef, closeSubmenu)
-
-  // Close the submenu if the url changes.
-  useEffect(() => closeSubmenu(), [browserUrl, closeSubmenu])
-
-  useLayoutEffect(() => {
-    // If the right side of the submenu is not visible, set the position to be on the left of the menu item.
-    const {x, width} = belowListRef.current?.getBoundingClientRect() || {x: 0, width: 0}
-    if (x + width > window.innerWidth) setPositionRight(false)
-  }, [submenuOpen])
-
-  // If the user presses escape on the keyboard, close the submenus.
-  const handleEscape = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key !== "Escape" || !submenuOpen) return
-
-      closeSubmenu()
-      if (level === 0) buttonRef.current?.focus()
-    },
-    [level, submenuOpen, closeSubmenu]
-  )
-
-  useEventListener("keydown", handleEscape, menuItemRef)
-
-  // List out the specific classes so tailwind will include them. Dynamic classes values don"t get compiled.
-  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"]
-  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"]
-
-  // The last item in the current trail would be the current item id if the user is on that page.
-  const isCurrent = activeTrail.at(-1) === id
-  const inTrail = activeTrail.includes(id) && !isCurrent
-
-  const linkStyles = clsx(
-    "w-full relative inline-block text-white lg:text-digital-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]",
-    leftPadding[level],
-    // Top menu item styles.
-    {
-      "lg:border-l-0 lg:border-b-[6px] ml-5 lg:ml-0 lg:pb-2": level === 0,
-      "border-digital-red lg:border-black": level === 0 && isCurrent,
-      "border-transparent lg:border-foggy-dark": level === 0 && !isCurrent && inTrail,
-      "border-transparent": level === 0 && !isCurrent && !inTrail,
-    },
-    // Child menu item styles.
-    {
-      "ml-5 lg:ml-0 lg:pl-5": level !== 0,
-      "border-digital-red": level !== 0 && isCurrent,
-      "border-transparent": level !== 0 && !isCurrent,
-    }
-  )
-
-  const subMenuStyles = clsx(
-    "list-unstyled w-full min-w-[300px] lg:bg-white lg:shadow-2xl px-0 lg:absolute",
-    zIndexes[level],
-    {
-      "lg:top-full lg:right-0": level === 0,
-      "lg:top-0": level !== 0,
-      "lg:left-full": level !== 0 && positionRight,
-      "lg:right-full": level !== 0 && !positionRight,
-      block: submenuOpen,
-      hidden: !submenuOpen,
-    }
-  )
-
-  return (
-    <li
-      ref={menuItemRef}
-      className={clsx(
-        "relative m-0 border-b border-cool-grey py-2 first:border-t last:border-0 lg:relative lg:mr-5 lg:border-black-20 lg:py-0 last:lg:mr-0",
-        {"first:border-t-0 lg:border-b-0": level === 0}
-      )}
-    >
-      <div className="flex items-center justify-between lg:justify-end">
-        <Link id={linkId} href={url || "#"} className={linkStyles} aria-current={isCurrent ? "true" : undefined}>
-          {title}
-        </Link>
-
-        {children.length > 0 && level < menuLevelsToShow && (
-          <>
-            {level === 0 && <div className="mb-[6px] ml-5 block h-[25px] w-[1px] shrink-0 bg-archway-light" />}
-            <button
-              ref={buttonRef}
-              className="group relative right-10 shrink-0 rounded-full border-b border-transparent bg-digital-red text-white hocus:border-black hocus:bg-white lg:right-0 lg:rounded-none lg:bg-transparent lg:text-digital-red"
-              onClick={toggleSubmenu}
-              aria-expanded={submenuOpen}
-              aria-labelledby={linkId}
-            >
-              <ChevronDownIcon
-                height={35}
-                className={clsx("transition duration-150 ease-in-out group-hocus:scale-125 group-hocus:text-black", {
-                  "rotate-180": submenuOpen,
-                })}
-              />
-            </button>
-          </>
-        )}
-      </div>
-
-      {children.length > 0 && level < menuLevelsToShow && (
-        <ul className={subMenuStyles} ref={belowListRef}>
-          {children.map(item => (
-            <MenuItem key={item.id} {...item} level={level + 1} activeTrail={activeTrail} />
-          ))}
-        </ul>
-      )}
-    </li>
-  )
+const MainMenu = async () => {
+  const menuItems = await getMenu(MenuAvailable.Main, 1)
+  return <MainMenuClient menuItems={menuItems} />
 }
 
 export default MainMenu
diff --git a/src/lib/gql/gql-queries.tsx b/src/lib/gql/gql-queries.tsx
index 5bec8fe..0dc0e84 100644
--- a/src/lib/gql/gql-queries.tsx
+++ b/src/lib/gql/gql-queries.tsx
@@ -80,23 +80,39 @@ export const getConfigPage = async <T extends ConfigPagesUnion>(
   return getData()
 }
 
-export const getMenu = cache(async (name?: MenuAvailable): Promise<MenuItem[]> => {
+export const getConfigPageField = async <T extends ConfigPagesUnion, F>(
+  configPageType: ConfigPagesUnion["__typename"],
+  fieldName: keyof T
+): Promise<F | undefined> => {
+  const getData = nextCache(
+    async () => {
+      const configPage = await getConfigPage<T>(configPageType)
+      return configPage?.[fieldName] as F
+    },
+    [fieldName.toString()],
+    {tags: ["config-pages"]}
+  )
+  return getData()
+}
+
+export const getMenu = cache(async (name?: MenuAvailable, maxLevels?: number): Promise<MenuItem[]> => {
   "use server"
   const menuName = name?.toLowerCase() || "main"
 
   const getData = nextCache(
     async () => {
-      const menu = await graphqlClient({cache: "no-store"}).Menu({name})
+      const menu = await graphqlClient({next: {tags: [`menu:${menuName}`]}}).Menu({name})
       const menuItems = (menu.menu?.items || []) as MenuItem[]
 
-      const filterInaccessible = (items: MenuItem[]): MenuItem[] => {
+      const filterInaccessible = (items: MenuItem[], level: number): MenuItem[] => {
+        if (maxLevels && level > maxLevels) return []
         items = items.filter(item => item.title !== "Inaccessible")
-        items.map(item => (item.children = filterInaccessible(item.children)))
+        items.map(item => (item.children = filterInaccessible(item.children, level + 1)))
         return items
       }
-      return filterInaccessible(menuItems)
+      return filterInaccessible(menuItems, 0)
     },
-    ["menus", menuName],
+    ["menus", menuName, maxLevels?.toString() || "all"],
     {tags: ["menus", `menu:${menuName}`]}
   )
 
@@ -142,11 +158,19 @@ export const getAlgoliaCredential = nextCache(
     if (process.env.ALGOLIA_ID && process.env.ALGOLIA_INDEX && process.env.ALGOLIA_KEY) {
       return [process.env.ALGOLIA_ID, process.env.ALGOLIA_INDEX, process.env.ALGOLIA_KEY]
     }
-    const configPage = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
-    if (configPage?.suSiteAlgoliaId && configPage.suSiteAlgoliaIndex && configPage.suSiteAlgoliaSearch) {
-      return [configPage.suSiteAlgoliaId, configPage.suSiteAlgoliaIndex, configPage.suSiteAlgoliaSearch]
-    }
-    return []
+    const appId = await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteAlgoliaId"]>(
+      "StanfordBasicSiteSetting",
+      "suSiteAlgoliaId"
+    )
+    const indexName = await getConfigPageField<
+      StanfordBasicSiteSetting,
+      StanfordBasicSiteSetting["suSiteAlgoliaIndex"]
+    >("StanfordBasicSiteSetting", "suSiteAlgoliaIndex")
+    const apiKey = await getConfigPageField<StanfordBasicSiteSetting, StanfordBasicSiteSetting["suSiteAlgoliaSearch"]>(
+      "StanfordBasicSiteSetting",
+      "suSiteAlgoliaSearch"
+    )
+    return appId && indexName && apiKey ? [appId, indexName, apiKey] : []
   },
   ["algolia"],
   {tags: ["algolia"]}