Minor improvements and fix font family

pookmish · Mar 4, 2024 · 2753c02 · 2753c02
1 parent d5e5297
commit 2753c02
Show file tree

Hide file tree

Showing 36 changed files with 114 additions and 167 deletions.
diff --git a/app/@modal/(.)gallery-image/[uuid]/page.tsx b/app/@modal/(.)gallery-image/[uuid]/page.tsx
@@ -1,7 +1,7 @@
 import InterceptionModal from "@components/elements/interception-modal";
 import {randomUUID} from "crypto";
 import Image from "next/image";
-import {graphqlClient} from "@lib/gql/fetcher";
+import {graphqlClient} from "@lib/gql/gql-client";
 import {MediaStanfordGalleryImage} from "@lib/gql/__generated__/drupal.d";
 
 const Page = async ({params: {uuid}}: { params: { uuid: string } }) => {

diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
@@ -3,7 +3,7 @@ import NodePage from "@components/nodes/pages/node-page";
 import {Metadata} from "next";
 import {getNodeMetadata} from "./metadata";
 import {isDraftMode} from "@lib/drupal/utils";
-import {getAllNodePaths, getEntityFromPath} from "@lib/gql/fetcher";
+import {getAllNodePaths, getEntityFromPath} from "@lib/gql/gql-queries";
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
 import UnpublishedBanner from "@components/elements/unpublished-banner";
 

diff --git a/app/gallery-image/[uuid]/page.tsx b/app/gallery-image/[uuid]/page.tsx
@@ -2,7 +2,7 @@ import {notFound} from "next/navigation";
 import {H1} from "@components/elements/headers";
 import Image from "next/image";
 import {MediaStanfordGalleryImage} from "@lib/gql/__generated__/drupal.d";
-import {graphqlClient} from "@lib/gql/fetcher";
+import {graphqlClient} from "@lib/gql/gql-client";
 
 export const metadata = {
   title: 'Gallery Image',

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,13 @@
 import '../src/styles/index.css';
-import {sourceSansPro} from "../src/styles/fonts";
+import {sourceSans3} from "../src/styles/fonts";
 import PageHeader from "@components/global/page-header";
 import PageFooter from "@components/global/page-footer";
 import Editori11y from "@components/tools/editorially";
 import Script from "next/script";
 import {isDraftMode} from "@lib/drupal/utils";
 import BackToTop from "@components/elements/back-to-top";
 import Link from "@components/elements/link";
-import {getConfigPage} from "@lib/gql/fetcher";
+import {getConfigPage} from "@lib/gql/gql-queries";
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
 import {GoogleAnalytics} from "@next/third-parties/google";
 
@@ -25,7 +25,7 @@ const RootLayout = async ({children, modal}: { children: React.ReactNode, modal:
   const draftMode = isDraftMode();
   const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>('StanfordBasicSiteSetting')
   return (
-    <html lang="en" className={`${sourceSansPro.className} font-sans`}>
+    <html lang="en" className={sourceSans3.className}>
     {draftMode && <Editori11y/>}
 
     {/* Add Google Analytics and SiteImprove when not in draft mode. */}

diff --git 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 {getEntityFromPath} from "@lib/gql/fetcher";
+import {getEntityFromPath} from "@lib/gql/gql-queries";
 import {NodeStanfordPage, NodeUnion} from "@lib/gql/__generated__/drupal.d";
 import {isDraftMode} from "@lib/drupal/utils";
 import {Metadata} from "next";

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -4,7 +4,7 @@ import {H1} from "@components/elements/headers";
 import {DrupalNode} from "next-drupal";
 import {Suspense} from "react";
 import {DrupalJsonApiParams} from "drupal-jsonapi-params";
-import {getConfigPage} from "@lib/gql/fetcher";
+import {getConfigPage} from "@lib/gql/gql-queries";
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
 import AlgoliaSearch from "./algolia-search";
 

diff --git a/app/sitemap.tsx b/app/sitemap.tsx
@@ -1,6 +1,5 @@
 import {MetadataRoute} from "next";
-import {graphqlClient} from "@lib/gql/fetcher";
-import {headers} from "next/headers";
+import {graphqlClient} from "@lib/gql/gql-client";
 import {NodeUnion} from "@lib/gql/__generated__/drupal";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
@@ -19,12 +18,10 @@ const Sitemap = async (): Promise<MetadataRoute.Sitemap> => {
   nodeQuery.nodeStanfordPeople.nodes.map(node => nodes.push(node as NodeUnion));
   nodeQuery.nodeStanfordPolicies.nodes.map(node => nodes.push(node as NodeUnion));
 
-
   const sitemap: MetadataRoute.Sitemap = [];
-  const domain = 'https://' + headers().get('host');
 
   nodes.map(node => sitemap.push({
-    url: `${domain}${node.path}`,
+    url: `https://localhost:3000${node.path}`,
     lastModified: new Date(node.changed.time),
     priority: node.__typename === "NodeStanfordPage" ? 1 : .8,
     changeFrequency: node.__typename === "NodeStanfordPage" ? "weekly": "monthly"

diff --git a/src/components/config-pages/global-message.tsx b/src/components/config-pages/global-message.tsx
@@ -32,9 +32,9 @@ const GlobalMessage = ({
         </div>
         <div className="[&_a]:text-white [&_a.btn]:bg-transparent [&_a.btn]:border-2 [&_a.btn]:border-white">
           {suGlobalMsgHeader && <H2>{suGlobalMsgHeader}</H2>}
-          {suGlobalMsgMessage?.processed &&
-            <Wysiwyg html={suGlobalMsgMessage.processed}/>
-          }
+
+          <Wysiwyg html={suGlobalMsgMessage?.processed}/>
+
           {suGlobalMsgLink?.url &&
             <Link href={suGlobalMsgLink.url} className="text-white">
               {suGlobalMsgLink.title}

diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -104,9 +104,7 @@ const LocalFooter = ({
               </ul>
             }
 
-            {suLocalFootPrCo &&
-              <Wysiwyg html={suLocalFootPrCo.processed}/>
-            }
+            <Wysiwyg html={suLocalFootPrCo?.processed}/>
           </div>
 
           <div>
@@ -126,9 +124,7 @@ const LocalFooter = ({
                 })}
               </ul>
             }
-            {suLocalFootSeCo &&
-              <Wysiwyg html={suLocalFootSeCo.processed}/>
-            }
+            <Wysiwyg html={suLocalFootSeCo?.processed}/>
 
           </div>
 
@@ -151,17 +147,12 @@ const LocalFooter = ({
               </ul>
             }
 
-            {suLocalFootTr2Co &&
-              <Wysiwyg html={suLocalFootTr2Co.processed}/>
-            }
+            <Wysiwyg html={suLocalFootTr2Co?.processed}/>
 
           </div>
 
-          <div>
-            {suLocalFootTrCo &&
-              <Wysiwyg html={suLocalFootTrCo.processed}/>
-            }
-          </div>
+          <Wysiwyg html={suLocalFootTrCo?.processed}/>
+
         </div>
       </div>
     </div>

diff --git a/src/components/config-pages/super-footer.tsx b/src/components/config-pages/super-footer.tsx
@@ -14,9 +14,8 @@ const SuperFooter = ({suSuperFootEnabled, suSuperFootTitle, suSuperFootText, suS
           {suSuperFootTitle &&
             <H2 className="text-m2">{suSuperFootTitle}</H2>
           }
-          {suSuperFootText?.processed &&
-            <Wysiwyg html={suSuperFootText.processed}/>
-          }
+
+          <Wysiwyg html={suSuperFootText?.processed}/>
         </div>
 
         <div className="flex-1 text-right">

diff --git a/src/components/elements/wysiwyg.tsx b/src/components/elements/wysiwyg.tsx
@@ -9,15 +9,17 @@ import {Maybe} from "@lib/gql/__generated__/drupal.d";
 import Mathjax from "@components/tools/mathjax";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
-  html: string
-  className?: Maybe<string>
+  html?: Maybe<string>
 }
 
-const Wysiwyg = ({html, className = "", ...props}: Props) => {
-  className = twMerge(className, 'wysiwyg');
+const Wysiwyg = ({html, className, ...props}: Props) => {
+  if (!html) return;
+  // Remove comments and empty lines.
+  html = html.replaceAll(/<!--[\s\S]*?-->/g, '').replaceAll(/(^(\r\n|\n|\r)$)|(^(\r\n|\n|\r))|^\s*$/gm, "");
+
   const addMathJax = html.match(/\$\$.*\$\$/) || html.match(/\\\[.*\\\]/) || html.match(/\\\(.*\\\)/);
   return (
-    <div className={className} {...props}>
+    <div className={twMerge('wysiwyg', className)} {...props}>
       {addMathJax && <Mathjax/>}
       {formatHtml(html)}
     </div>
@@ -29,7 +31,7 @@ const options: HTMLReactParserOptions = {
 
     if (domNode instanceof Element) {
       const nodeProps = attributesToProps(domNode.attribs);
-      nodeProps.className = fixClasses(nodeProps.className) || '';
+      nodeProps.className = fixClasses(nodeProps.className);
       const NodeName = domNode.name as React.ElementType
       const children: DOMNode[] = domNode.children as DOMNode[];
 
@@ -43,7 +45,7 @@ const options: HTMLReactParserOptions = {
 
         case "div":
           delete nodeProps.role;
-          if (!!nodeProps.className?.indexOf('media-entity-wrapper')) {
+          if (nodeProps.className && !!nodeProps.className.indexOf('media-entity-wrapper')) {
             return cleanMediaMarkup(domNode);
           }
           return <NodeName {...nodeProps}>{domToReact(children, options)}</NodeName>
@@ -107,9 +109,9 @@ const options: HTMLReactParserOptions = {
   }
 }
 
-const fixClasses = (classes: string | boolean = ''): undefined | string => {
-  if (!classes) return undefined;
-  // Pass the classes so that we can easily replace a whole class instead of parts of them.
+const fixClasses = (classes?: string | boolean): string => {
+  if (!classes) return '';
+  // Pad the classes so that we can easily replace a whole class instead of parts of them.
   classes = ` ${classes} `;
 
   classes = classes.replaceAll(' su-', ' ')
@@ -122,22 +124,22 @@ const fixClasses = (classes: string | boolean = ''): undefined | string => {
     .replaceAll(' font-splash ', ' splash-text text-m4 ')
     .replaceAll(' callout-text ', ' font-bold text-m2 ')
     .replaceAll(' related-text ', ' shadow-lg border border-black-20 p-16 ')
-    .replaceAll(' drop-cap ', ' text-m1 first-letter:font-bold first-letter:text-m5 first-letter:float-left first-letter:my-2 first-letter:mr-4 ')
-    .replace(/tablesaw.*? /g, ' ')
+    .replaceAll(' drop-cap ', ' text-m1 first-letter:font-bold first-letter:text-m6 first-letter:float-left first-letter:my-2 first-letter:mr-4 ')
+    .replaceAll(' intro-text ', ' text-m2 ')
+    .replace(/ tablesaw.*? /g, ' ')
     .replace(/ +/g, ' ')
     .trim();
 
   classes = classes.split(' ')
     .filter(className => className.trim().length >= 1)
-    .filter((value, index, self) => self?.indexOf(value) === index)
     .join(' ');
 
-  return classes.trim();
+  return twMerge(classes.trim());
 }
 
 const cleanMediaMarkup = (node: Element) => {
   const nodeProps = attributesToProps(node.attribs);
-  nodeProps.className = fixClasses(nodeProps.className) || '';
+  nodeProps.className = fixClasses(nodeProps.className);
 
   const getImage = (node: Element): ComponentProps<any> | undefined => {
     let img;
@@ -204,14 +206,15 @@ const cleanMediaMarkup = (node: Element) => {
     const figCaption = getFigCaption(node);
 
     if (figCaption) {
-      nodeProps.className += ' table';
+      nodeProps.className = twMerge('table', nodeProps.className);
       if (!!nodeProps.className?.indexOf('mx-auto')) nodeProps.className += ' w-full'
       delete nodeProps.role;
       return (
         <figure {...nodeProps}>
           <WysiwygImage src={src} alt={alt} height={height} width={width}/>
-          <figcaption
-            className="table-caption caption-bottom text-center">{domToReact(figCaption, options)}</figcaption>
+          <figcaption className="table-caption caption-bottom text-center">
+            {domToReact(figCaption, options)}
+          </figcaption>
         </figure>
       )
     }
@@ -229,7 +232,7 @@ const cleanMediaMarkup = (node: Element) => {
   return <NodeName {...nodeProps}>{domToReact(node.children as DOMNode[], options)}</NodeName>
 }
 
-const WysiwygImage = ({src, alt, height, width, className = ''}: {
+const WysiwygImage = ({src, alt, height, width, className}: {
   src: string,
   alt?: Maybe<string>,
   height?: Maybe<string>,

diff --git a/src/components/global/page-footer.tsx b/src/components/global/page-footer.tsx
@@ -1,6 +1,6 @@
 import LocalFooter from "@components/config-pages/local-footer";
 import SuperFooter from "@components/config-pages/super-footer";
-import {getConfigPage} from "@lib/gql/fetcher";
+import {getConfigPage} from "@lib/gql/gql-queries";
 import {StanfordLocalFooter, StanfordSuperFooter} from "@lib/gql/__generated__/drupal.d";
 
 const PageFooter = async () => {

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
@@ -2,7 +2,7 @@ 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/fetcher";
+import {getConfigPage, getMenu} from "@lib/gql/gql-queries";
 import {
   LockupSetting,
   MenuAvailable,

diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
@@ -1,4 +1,4 @@
-import {getMenu} from "@lib/gql/fetcher";
+import {getMenu} from "@lib/gql/gql-queries";
 import SideNav from "@components/menu/side-nav";
 import {HtmlHTMLAttributes} from "react";
 import {isDraftMode} from "@lib/drupal/utils";

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
@@ -65,7 +65,7 @@ type MenuItemProps = MenuItemType & {
 }
 
 const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps) => {
-  const sublistRef = useRef<HTMLUListElement>(null);
+  const sublistRef = useRef<HTMLLIElement>(null);
   const [positionRight, setPositionRight] = useState<boolean>(true)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const {value: submenuOpen, setFalse: closeSubmenu, toggle: toggleSubmenu} = useBoolean(false)
@@ -86,9 +86,9 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
   const handleEscape = useCallback((event: KeyboardEvent) => {
     if (event.key === "Escape" && submenuOpen) {
       closeSubmenu()
-      buttonRef.current?.focus();
+      if (level === 0) buttonRef.current?.focus();
     }
-  }, [submenuOpen, closeSubmenu]);
+  }, [level, submenuOpen, closeSubmenu]);
 
   useEventListener("keydown", handleEscape)
 
@@ -133,6 +133,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
 
   return (
     <li
+      ref={sublistRef}
       className={clsx("m-0 py-2 lg:py-0 relative border-b first:border-t last:border-0 border-cool-grey lg:border-black-20 lg:relative lg:mr-5 last:lg:mr-0", level === 0 && "lg:border-b-0 first:border-t-0")}
     >
       <div className="flex items-center justify-between lg:justify-end">
@@ -166,10 +167,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
       </div>
 
       {children &&
-        <ul
-          ref={sublistRef}
-          className={subMenuStyles}
-        >
+        <ul className={subMenuStyles}>
           {children.map(item =>
             <MenuItem
               key={item.id}
@@ -183,4 +181,5 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
     </li>
   )
 }
+
 export default MainMenu;
diff --git a/src/components/nodes/pages/stanford-course/stanford-course-page.tsx b/src/components/nodes/pages/stanford-course/stanford-course-page.tsx
@@ -26,9 +26,7 @@ const StanfordCoursePage = ({node, ...props}: Props) => {
           <div>{node.suCourseCode}</div>
         }
 
-        {node.body &&
-          <Wysiwyg html={node.body.processed}/>
-        }
+        <Wysiwyg html={node.body?.processed}/>
 
         {node.suCourseTags &&
           <div>

diff --git a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
@@ -133,16 +133,9 @@ const StanfordEventPage = ({node, ...props}: Props) => {
         }
       </div>
 
+      <Wysiwyg html={node.body?.processed} className="lg:w-3/4 mx-auto"/>
 
-      {node.body?.processed &&
-        <div className="lg:w-3/4 mx-auto">
-          <Wysiwyg html={node.body.processed}/>
-        </div>
-      }
-
-      {node.suEventComponents &&
-        <Rows components={node.suEventComponents}/>
-      }
+      <Rows components={node.suEventComponents}/>
 
       {node.suEventSchedule &&
         <div>

diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
@@ -81,11 +81,7 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
         </figure>
       }
 
-      {node.suNewsComponents &&
-        <div className="lg:w-8/12 mx-auto">
-        <Rows components={node.suNewsComponents}/>
-        </div>
-      }
+      <Rows components={node.suNewsComponents} className="lg:w-8/12 mx-auto"/>
 
     </article>
   )

diff --git a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx b/src/components/nodes/pages/stanford-page/stanford-page-page.tsx
@@ -35,13 +35,11 @@ const StanfordPagePage = ({node, ...props}: Props) => {
 
       {!fullWidth &&
         <InteriorPage currentPath={node.path}>
-          {node.suPageComponents &&
-            <Rows components={node.suPageComponents}/>
-          }
+          <Rows components={node.suPageComponents}/>
         </InteriorPage>
       }
 
-      {(fullWidth && node.suPageComponents) &&
+      {fullWidth &&
         <Rows components={node.suPageComponents}/>
       }