Invalidate menu items automatically if a page in the menu is invalidated

app/api/revalidate/route.tsx

@@ -1,5 +1,7 @@
 import {NextRequest, NextResponse} from "next/server"
 import {revalidateTag} from "next/cache"
+import {getMenu} from "@lib/gql/gql-queries"
+import {getMenuActiveTrail} from "@lib/drupal/utils"
 
 export const revalidate = 0
 
@@ -19,5 +21,8 @@ export const GET = async (request: NextRequest) => {
 
   tagsInvalidated.map(tag => revalidateTag(tag))
 
+  const menu = await getMenu()
+  if (!!getMenuActiveTrail(menu, path).length) tagsInvalidated.push("menu:main")
+
   return NextResponse.json({revalidated: true, tags: tagsInvalidated})
 }

package.json

@@ -78,6 +78,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
     "storybook": "^8.1.11",
+    "storybook-addon-module-mock": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

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

@@ -11,8 +11,11 @@ const GlobalMessage = async () => {
   const globalMessageConfig = await getConfigPage<StanfordGlobalMessage>("StanfordGlobalMessage")
   if (!globalMessageConfig?.suGlobalMsgEnabled) return
 
+  const WrapperElement = globalMessageConfig.suGlobalMsgHeader ? "article" : "div"
+
   return (
-    <div
+    <WrapperElement
+      aria-labelledby={globalMessageConfig.suGlobalMsgHeader ? globalMessageConfig.id : undefined}
       className={twMerge(
         "py-10",
         clsx({
@@ -30,11 +33,17 @@ const GlobalMessage = async () => {
           {globalMessageConfig.suGlobalMsgLabel}:
         </div>
         <div>
-          {globalMessageConfig.suGlobalMsgHeader && <H2>{globalMessageConfig.suGlobalMsgHeader}</H2>}
+          {globalMessageConfig.suGlobalMsgHeader && <H2 id={globalMessageConfig.id}>{globalMessageConfig.suGlobalMsgHeader}</H2>}
 
           <Wysiwyg
             html={globalMessageConfig.suGlobalMsgMessage?.processed}
-            className="[&_a.btn]:border-2 [&_a.btn]:border-white [&_a.btn]:bg-transparent [&_a]:text-white"
+            className={twMerge(
+              "[&_a.btn]:border-2 [&_a]:no-underline [&_a]:hocus:underline",
+              clsx({
+                "[&_a.btn]:border-white [&_a.btn]:bg-transparent [&_a]:text-white": !["warning", "plain"].includes(globalMessageConfig.suGlobalMsgType),
+                "[&_a.btn]:border-black [&_a.btn]:bg-transparent [&_a]:text-black [&_a]:hocus:text-black": ["warning", "plain"].includes(globalMessageConfig.suGlobalMsgType),
+              })
+            )}
           />
 
           {globalMessageConfig.suGlobalMsgLink?.url && (
@@ -53,7 +62,7 @@ const GlobalMessage = async () => {
           )}
         </div>
       </div>
-    </div>
+    </WrapperElement>
   )
 }
 

src/components/layouts/interior-page.tsx

@@ -2,7 +2,7 @@ import {getMenu} from "@lib/gql/gql-queries"
 import SideNav from "@components/menu/side-nav"
 import {HtmlHTMLAttributes} from "react"
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d"
-import useActiveTrail from "@lib/hooks/useActiveTrail"
+import {getMenuActiveTrail} from "@lib/drupal/utils"
 import {twMerge} from "tailwind-merge"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
@@ -14,7 +14,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const InteriorPage = async ({children, currentPath, ...props}: Props) => {
   const menu = await getMenu(MenuAvailable.Main)
-  const activeTrail: string[] = useActiveTrail(menu, currentPath)
+  const activeTrail: string[] = getMenuActiveTrail(menu, currentPath)
 
   // Peel off the menu items from the parent.
   const topMenuItem = activeTrail.length > 0 ? menu.find(item => item.id === activeTrail[0]) : undefined

src/components/menu/main-menu.tsx

@@ -2,7 +2,7 @@
 
 import Link from "@components/elements/link"
 import SiteSearchForm from "@components/search/site-search-form"
-import useActiveTrail from "@lib/hooks/useActiveTrail"
+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"
@@ -27,7 +27,7 @@ const MainMenu = ({menuItems}: Props) => {
 
   const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
   const browserUrl = usePathname()
-  const activeTrail = useActiveTrail(menuItems, usePathname() || "")
+  const activeTrail = getMenuActiveTrail(menuItems, usePathname() || "")
 
   useOutsideClick(menuRef, closeMenu)
 

src/lib/drupal/utils.tsx

@@ -1,5 +1,5 @@
 import {stringify} from "qs"
-import {TermUnion} from "@lib/gql/__generated__/drupal.d"
+import {TermUnion, MenuItem} from "@lib/gql/__generated__/drupal.d"
 
 export const buildUrl = (path: string, params?: string | Record<string, string> | URLSearchParams): URL => {
   const url = new URL(path.charAt(0) === "/" ? `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${path}` : path)
@@ -45,3 +45,40 @@ export const buildTaxonomyTree = <T extends TermUnion>(terms: T[], parent: T["id
       }
     : {}
 }
+
+/**
+ * Get an array of menu item ids representing the current page's location in the main menu.
+ *
+ * @param menuItems
+ *   Array of menu items.
+ * @param currentPath
+ *   Current page url.
+ *
+ * @return
+ *   Active trail menu item ids.
+ */
+export const getMenuActiveTrail = (menuItems: MenuItem[], currentPath?: string): string[] => {
+  const getActiveTrail = (menuItems: MenuItem[], trail: string[] = []): string[] => {
+    let childTrail, currentTrail
+    for (let i = 0; i < menuItems.length; i++) {
+      currentTrail = [...trail]
+      currentTrail.push(menuItems[i].id)
+
+      if (currentPath === menuItems[i].url) {
+        return currentTrail
+      }
+
+      const childrenItems = menuItems[i].children
+
+      if (childrenItems) {
+        childTrail = getActiveTrail(childrenItems, [...currentTrail])
+        if (childTrail.length > 0) {
+          return childTrail
+        }
+      }
+    }
+    return []
+  }
+
+  return getActiveTrail(menuItems)
+}

src/lib/gql/entity-queries.drupal.gql

@@ -188,6 +188,7 @@ query ConfigPages {
     stanfordBasicSiteSettings(first: 1) {
         nodes {
             __typename
+            id
             suGoogleAnalytics
             suSiteAlgolia
             suSiteAlgoliaId
@@ -202,6 +203,7 @@ query ConfigPages {
     stanfordGlobalMessages(first: 1) {
         nodes {
             __typename
+            id
             suGlobalMsgEnabled
             suGlobalMsgHeader
             suGlobalMsgLabel
@@ -218,6 +220,7 @@ query ConfigPages {
     stanfordLocalFooters(first: 1) {
         nodes {
             __typename
+            id
             suFooterEnabled
             suLocalFootAction {
                 title
@@ -300,6 +303,7 @@ query ConfigPages {
     stanfordSuperFooters(first: 1) {
         nodes {
             __typename
+            id
             suSuperFootEnabled
             suSuperFootIntranet {
                 title
@@ -318,6 +322,7 @@ query ConfigPages {
     lockupSettings(first: 1) {
         nodes {
             __typename
+            id
             suLine1
             suLine2
             suLine3

yarn.lock

@@ -6520,7 +6520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:8.1.11":
+"@storybook/test@npm:8.1.11, @storybook/test@npm:^8.0.9":
   version: 8.1.11
   resolution: "@storybook/test@npm:8.1.11"
   dependencies:
@@ -7014,6 +7014,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.0":
+  version: 4.17.6
+  resolution: "@types/lodash@npm:4.17.6"
+  checksum: 10c0/3b197ac47af9443fee8c4719c5ffde527d7febc018b827d44a6bc2523c728c7adfdd25196fdcfe3eed827993e0c41a917d0da6e78938b18b2be94164789f1117
+  languageName: node
+  linkType: hard
+
 "@types/mdx@npm:^2.0.0":
   version: 2.0.10
   resolution: "@types/mdx@npm:2.0.10"
@@ -9712,7 +9719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -9859,6 +9866,7 @@ __metadata:
     react-tiny-oembed: "npm:^1.1.0"
     sharp: "npm:^0.33.4"
     storybook: "npm:^8.1.11"
+    storybook-addon-module-mock: "npm:^1.3.0"
     tailwind-merge: "npm:^2.4.0"
     tailwindcss: "npm:^3.4.4"
     tsconfig-paths-webpack-plugin: "npm:^4.1.0"
@@ -13679,6 +13687,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 10c0/fb407355f7e6cd523a9383e76e6b455321f0f153a6c9625e21a8827d10c54c2a2341bd2ae8d034358b60e07325e1330c14c224ff582d04612a46a4f0479ff2f2
+  languageName: node
+  linkType: hard
+
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"
@@ -15872,6 +15887,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-base16-styling@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "react-base16-styling@npm:0.10.0"
+  dependencies:
+    "@types/lodash": "npm:^4.17.0"
+    color: "npm:^4.2.3"
+    csstype: "npm:^3.1.3"
+    lodash-es: "npm:^4.17.21"
+  checksum: 10c0/86392f1b33ff04b542496c714937d05fcacffb1ab01a398d7930588b6e69185deb4cae9ac7dcb0f993073f3ae60152f6e50828b79d7da15fa111f54463f8f678
+  languageName: node
+  linkType: hard
+
 "react-clientside-effect@npm:^1.2.6":
   version: 1.2.6
   resolution: "react-clientside-effect@npm:1.2.6"
@@ -16065,6 +16092,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-json-tree@npm:^0.19.0":
+  version: 0.19.0
+  resolution: "react-json-tree@npm:0.19.0"
+  dependencies:
+    "@types/lodash": "npm:^4.17.0"
+    react-base16-styling: "npm:^0.10.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/197aa5b6ed19eb362a1d9e74a144e35641c7937257531047653ba828c3e85b0010846ca7f535f3395e78161982900d5d62e6813c9cf9601dc0c319ed422edefa
+  languageName: node
+  linkType: hard
+
 "react-property@npm:2.0.2":
   version: 2.0.2
   resolution: "react-property@npm:2.0.2"
@@ -17445,6 +17485,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-addon-module-mock@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "storybook-addon-module-mock@npm:1.3.0"
+  dependencies:
+    "@storybook/test": "npm:^8.0.9"
+    react-json-tree: "npm:^0.19.0"
+  checksum: 10c0/c6f3634dc94c14fb8f9180a4db887f8390c038128c82bff5c15e74ce7d3fe2706631a2829b67f0b143418fc4b198487c5af70f0031a659771009fb3c0605405f
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^8.1.11":
   version: 8.1.11
   resolution: "storybook@npm:8.1.11"