From 8ac2f595392acf444654ce3cc1e3d135c61a8132 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 8 Oct 2024 10:13:05 -0700
Subject: [PATCH] SUL23-638 | configure related links; memo-ize headings; add
 link styles

---
 app/[...slug]/page.tsx                  |  2 +-
 src/components/patterns/on-the-page.tsx | 92 +++++++++++++++----------
 src/lib/format-html.tsx                 |  3 +-
 3 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
index a4124906..44d33eae 100644
--- a/app/[...slug]/page.tsx
+++ b/app/[...slug]/page.tsx
@@ -73,7 +73,7 @@ const NodePage = async ({params, previewMode}: PageProps) => {
             <NodePageDisplay node={entity} />
           </div>
 
-          {entity.__typename === "NodeStanfordPage" && <OnThePageLink content={entity.suPageComponents} />}
+          {entity.__typename === "NodeStanfordPage" && <OnThePageLink node={entity} />}
           <SecondaryMenu menuItems={menuItems} currentPath={entity.path} />
         </div>
       )}
diff --git a/src/components/patterns/on-the-page.tsx b/src/components/patterns/on-the-page.tsx
index 4921fb47..23bcee78 100644
--- a/src/components/patterns/on-the-page.tsx
+++ b/src/components/patterns/on-the-page.tsx
@@ -1,8 +1,9 @@
 "use client"
 
-import React, {useState, useEffect} from "react"
+import React, {useState, useEffect, useMemo} from "react"
 import parse from "html-react-parser"
 import {NodeStanfordPage} from "@/lib/gql/__generated__/drupal.d"
+import {twMerge} from "tailwind-merge"
 
 interface Heading {
   text: string
@@ -11,28 +12,31 @@ interface Heading {
 
 const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
   const [activeHeading, setActiveHeading] = useState<string>("")
-  const headings: Heading[] = []
+  const relLinkHeading = node.sulRelLinksHeading
+  const relLinks = node.sulRelLinks
 
-  const content =
-    node.suPageComponents &&
-    node.suPageComponents
-      .filter(item => item.__typename === "ParagraphStanfordWysiwyg")
-      .map(item => item.suWysiwygText.processed)
-      .join(" ")
+  const headings = useMemo(() => {
+    const content =
+      node?.suPageComponents &&
+      node?.suPageComponents
+        .filter(item => item.__typename === "ParagraphStanfordWysiwyg")
+        .map(item => item.suWysiwygText.processed)
+        .join(" ")
 
-  console.log("CONTENT", content)
+    const parsedContent = parse(content)
+    const headingsArr: Heading[] = []
 
-  const parsedContent = parse(content)
+    React.Children.forEach(parsedContent, child => {
+      if (React.isValidElement(child) && child.type === "h2") {
+        const text = child.props.children
+        const id = text.toLowerCase().replace(/\s+/g, "-")
+        headingsArr.push({text, id})
+      }
+    })
 
-  React.Children.forEach(parsedContent, child => {
-    if (React.isValidElement(child) && child.type === "h2") {
-      const text = child.props.children
-      const id = text.toLowerCase().replace(/\s+/g, "-")
-      headings.push({text, id})
-    }
-  })
+    return headingsArr
+  }, [node])
 
-  // Set up Intersection Observer
   useEffect(() => {
     const options: IntersectionObserverInit = {
       root: null,
@@ -61,24 +65,40 @@ const OnThePageLink = ({node}: {node: NodeStanfordPage}) => {
   }, [headings])
 
   return (
-    <nav>
-      <h2>Jump to:</h2>
-      <ul>
-        {headings.map(heading => (
-          <li key={heading.id}>
-            <a
-              href={`#${heading.id}`}
-              style={{
-                fontWeight: activeHeading === heading.id ? "bold" : "normal",
-                color: activeHeading === heading.id ? "blue" : "black",
-              }}
-            >
-              {heading.text}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <div className="sticky top-0 h-fit bg-fog-light px-24 pb-40 pt-16">
+      <nav>
+        <h3 className="font-sans font-semibold">On this page</h3>
+        <ul className="list-none p-0">
+          {headings.map(heading => (
+            <li key={heading.id}>
+              <a
+                href={`#${heading.id}`}
+                className={twMerge(
+                  "type-1 border-l-4 pl-16 font-sans font-normal leading-[36px] text-black no-underline",
+                  activeHeading === heading.id ? "border-cardinal-red" : "border-transparent"
+                )}
+              >
+                {heading.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      {relLinks && (
+        <div className="mt-40">
+          <h3 className="font-sans font-semibold">{relLinkHeading || "Related content"}</h3>
+          <ul className="list-none p-0">
+            {relLinks.map((link, index) => (
+              <li key={index}>
+                <a href={link.url} className={twMerge("type-1 font-sans font-normal leading-[36px]")}>
+                  {link.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
   )
 }
 
diff --git a/src/lib/format-html.tsx b/src/lib/format-html.tsx
index 91fe42ab..1491dea0 100644
--- a/src/lib/format-html.tsx
+++ b/src/lib/format-html.tsx
@@ -96,10 +96,11 @@ const options: HTMLReactParserOptions = {
           return <NodeName {...nodeProps}>{domToReact(domNode.children as DOMNode[], options)}</NodeName>
 
         case "h2":
+          console.log("DATA:", domNode.children[0])
           const text = domNode.children[0].data
           const id = text.toLowerCase().replace(/\s+/g, "-")
           return (
-            <NodeName {...nodeProps} id={id}>
+            <NodeName {...nodeProps} id={id} className={twMerge("scroll-smooth", nodeProps.className)}>
               {domToReact(domNode.children as DOMNode[], options)}
             </NodeName>
           )