added dev focused attributes

pookmish · Nov 23, 2023 · 4783f55 · 4783f55 · vercel · Nov 23, 2023
1 parent c8d6680
commit 4783f55
Show file tree

Hide file tree

Showing 43 changed files with 236 additions and 171 deletions.
diff --git a/src/components/nodes/cards/node-card.tsx b/src/components/nodes/cards/node-card.tsx
@@ -8,25 +8,32 @@ import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford
 import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card";
 import {StanfordNode} from "@lib/types";
 import {JSX} from "react";
+import {isDraftMode} from "@lib/drupal/utils";
 
 const NodeCard = ({node, headingLevel}: { node: StanfordNode, headingLevel?: string }): JSX.Element | null => {
+  const draftMode = isDraftMode();
+  const itemProps: { [key: string]: string } = {};
+  if (draftMode) {
+    itemProps['data-type'] = node.type;
+    itemProps['data-id'] = node.id;
+  }
   switch (node.type) {
     case 'node--stanford_course':
-      return <StanfordCourseCard node={node} headingLevel={headingLevel}/>
+      return <StanfordCourseCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_event':
-      return <StanfordEventCard node={node} headingLevel={headingLevel}/>
+      return <StanfordEventCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_event_series':
-      return <StanfordEventSeriesCard node={node} headingLevel={headingLevel}/>
+      return <StanfordEventSeriesCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_news':
-      return <StanfordNewsCard node={node} headingLevel={headingLevel}/>
+      return <StanfordNewsCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_page':
-      return <StanfordPageCard node={node} headingLevel={headingLevel}/>
+      return <StanfordPageCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_person':
-      return <StanfordPersonCard node={node} headingLevel={headingLevel}/>
+      return <StanfordPersonCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_policy':
-      return <StanfordPolicyCard node={node} headingLevel={headingLevel}/>
+      return <StanfordPolicyCard node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_publication':
-      return <StanfordPublicationCard node={node} headingLevel={headingLevel}/>
+      return <StanfordPublicationCard node={node} headingLevel={headingLevel} {...itemProps}/>
   }
   return null;
 }

diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -1,11 +1,12 @@
 import {CourseNodeType} from "@lib/types";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordCourseCard = ({node, headingLevel}: { node: CourseNodeType, headingLevel?: string }) => {
+const StanfordCourseCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: CourseNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
       <div className="flex flex-col">
         <Heading className="text-m2 order-last">
           <Link href={node.path?.alias} >

diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -1,11 +1,12 @@
 import Link from "@components/elements/link";
 import {EventSeriesNodeType} from "@lib/types";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordEventSeriesCard = ({node, headingLevel}: { node: EventSeriesNodeType, headingLevel?: string }) => {
+const StanfordEventSeriesCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: EventSeriesNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
       <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red">
         <Link href={node.path?.alias} >
           {node.title}

diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -2,6 +2,7 @@ import {EventNodeType} from "@lib/types";
 import Link from "@components/elements/link";
 import {CalendarDaysIcon, MapPinIcon} from "@heroicons/react/20/solid";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
 export const getEventTimeString = (start: Date, end: Date, timezone: string): string => {
   const startHour = parseInt(start.toLocaleTimeString("en-US", {
@@ -88,7 +89,7 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
   })
 }
 
-const StanfordEventCard = ({node, headingLevel}: { node: EventNodeType, headingLevel?: string }) => {
+const StanfordEventCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: EventNodeType, headingLevel?: string }>) => {
 
   const timezone: string = node.su_event_date_time?.timezone ?? 'America/Los_Angeles';
 
@@ -104,7 +105,7 @@ const StanfordEventCard = ({node, headingLevel}: { node: EventNodeType, headingL
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <div
-      className="max-w-[500px] w-full mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-10 overflow-hidden">
+      className="max-w-[500px] w-full mx-auto shadow-lg border border-black-20 p-10 flex flex-col gap-10 overflow-hidden" {...props}>
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -3,15 +3,16 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {DrupalTaxonomyTerm} from "@lib/types";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordNewsCard = ({node, headingLevel}: { node: NewsNodeType, headingLevel?: string }) => {
+const StanfordNewsCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: NewsNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_news_featured_media?.field_media_image.image_style_uri.card_1900x950;
   const imageAlt = node.su_news_featured_media?.field_media_image.resourceIdObjMeta?.alt ?? '';
 
   const topics: DrupalTaxonomyTerm[] = (node.su_news_topics && node.su_news_topics.length > 0) ? node.su_news_topics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
 
       {imageUrl &&
         <div className="relative aspect-[16/9] w-full">

diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -2,13 +2,14 @@ import {BasicPageNodeType} from "@lib/types";
 import Link from "@components/elements/link";
 import Image from "next/image";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPageCard = ({node, headingLevel}: { node: BasicPageNodeType, headingLevel?: string }) => {
+const StanfordPageCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: BasicPageNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_page_image?.field_media_image.image_style_uri.card_1900x950 || node.su_page_banner?.su_banner_image?.field_media_image.image_style_uri.card_1900x950
   const imageAlt = (node.su_page_image?.field_media_image.resourceIdObjMeta?.alt || node.su_page_banner?.su_banner_image?.field_media_image.resourceIdObjMeta?.alt) ?? '';
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
       {imageUrl &&
         <div
           className="relative aspect-[16/9] w-full">

diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -2,13 +2,14 @@ import {PersonNodeType} from "@lib/types";
 import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPersonCard = ({node, headingLevel}: { node: PersonNodeType, headingLevel?: string }) => {
+const StanfordPersonCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: PersonNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_person_photo?.field_media_image.image_style_uri.square_956
   const placeholder = node.su_person_photo?.field_media_image.uri.base64
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto text-center overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto text-center overflow-hidden" {...props}>
       {imageUrl &&
         <div className="relative aspect-[1/1] mx-auto mb-20 w-3/5">
           <Image

diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -2,13 +2,13 @@ import Link from "@components/elements/link";
 import {PolicyNodeType} from "@lib/types";
 import Wysiwyg from "@components/elements/wysiwyg";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPolicyCard = ({node, headingLevel}: { node: PolicyNodeType, headingLevel?: string }) => {
+const StanfordPolicyCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: PolicyNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   const teaserSummary = node.body?.summary || node.body?.processed.replace(/(<([^>]+)>)/ig, ' ')?.split(" ").slice(0, 50).join(" ") + '...';
   return (
-    <div
-      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
       <Heading className="text-m2">
         <Link href={node.path?.alias} >

diff --git a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
@@ -1,12 +1,12 @@
 import Link from "@components/elements/link";
 import {PublicationNodeType} from "@lib/types";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPublicationCard = ({node, headingLevel}: { node: PublicationNodeType, headingLevel?: string }) => {
+const StanfordPublicationCard = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: PublicationNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div
-      className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10 overflow-hidden" {...props}>
 
       <div className="flex flex-col">
         <Heading className="text-m2 order-last [&_a]:text-black [&_a]:hocus:text-digital-red">

diff --git a/src/components/nodes/list-item/node-list-item.tsx b/src/components/nodes/list-item/node-list-item.tsx
@@ -9,25 +9,33 @@ import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/
 import StanfordPublicationListItem
   from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item";
 import {StanfordNode} from "@lib/types";
+import {isDraftMode} from "@lib/drupal/utils";
 
 const NodeListItem = ({node, headingLevel}: { node: StanfordNode, headingLevel?: string }) => {
+  const draftMode = isDraftMode();
+  const itemProps: { [key: string]: string } = {};
+  if (draftMode) {
+    itemProps['data-type'] = node.type;
+    itemProps['data-id'] = node.id;
+  }
+
   switch (node.type) {
     case 'node--stanford_course':
-      return <StanfordCourseListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordCourseListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_event':
-      return <StanfordEventListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordEventListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_event_series':
-      return <StanfordEventSeriesListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordEventSeriesListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_news':
-      return <StanfordNewsListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordNewsListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_page':
-      return <StanfordPageListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordPageListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_person':
-      return <StanfordPersonListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordPersonListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_policy':
-      return <StanfordPolicyListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordPolicyListItem node={node} headingLevel={headingLevel} {...itemProps}/>
     case 'node--stanford_publication':
-      return <StanfordPublicationListItem node={node} headingLevel={headingLevel}/>
+      return <StanfordPublicationListItem node={node} headingLevel={headingLevel} {...itemProps}/>
   }
 }
 export default NodeListItem;
diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -1,19 +1,20 @@
 import {CourseNodeType} from "@lib/types";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordCourseListItem = ({node, headingLevel}: { node: CourseNodeType, headingLevel?: string }) => {
+const StanfordCourseListItem = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: CourseNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="">
+    <div  {...props}>
       <Heading className="text-m2">
-        <Link href={node.path?.alias} >
+        <Link href={node.path?.alias}>
           {node.title}
         </Link>
       </Heading>
       {node.su_course_instructors &&
         <div>
-          <span className="font-bold">Instructor{node.su_course_instructors.length > 1 ? "s": ""}: </span>
+          <span className="font-bold">Instructor{node.su_course_instructors.length > 1 ? "s" : ""}: </span>
           {node.su_course_instructors.map((instructor, i) =>
             <span key={`${node.id}-instructor-${i}`}>{instructor}</span>
           )}

diff --git a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
@@ -1,14 +1,15 @@
 import Link from "@components/elements/link";
 import {EventSeriesNodeType} from "@lib/types";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordEventSeriesListItem = ({node, headingLevel}: { node: EventSeriesNodeType, headingLevel?: string }) => {
+const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: EventSeriesNodeType, headingLevel?: string }>) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10">
+    <div className="max-w-[500px] w-full mx-auto shadow-xl border border-black-20 p-10" {...props}>
 
       <Heading className="text-m2">
-        <Link href={node.path?.alias} >
+        <Link href={node.path?.alias}>
           {node.title}
         </Link>
       </Heading>

diff --git a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
@@ -95,7 +95,7 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
   })
 }
 
-const StanfordEventListItem = ({node, headingLevel}: { node: EventNodeType, headingLevel?: string }) => {
+const StanfordEventListItem = ({node, headingLevel, ...props}: { node: EventNodeType, headingLevel?: string }) => {
 
   const timezone: string = node.su_event_date_time.timezone ?? 'America/Los_Angeles';
   const start = new Date(node.su_event_date_time.value);
@@ -109,7 +109,7 @@ const StanfordEventListItem = ({node, headingLevel}: { node: EventNodeType, head
   const goToPath = node.su_event_source?.url ?? node.path?.alias as string
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="w-full mx-auto py-10 flex gap-10">
+    <div className="w-full mx-auto py-10 flex gap-10" {...props}>
       <div aria-hidden className="flex flex-col items-start w-fit">
         <div className="text-m0 font-semibold mb-4 w-full text-center">
           {startMonth.toUpperCase()}

diff --git a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
@@ -3,16 +3,17 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {DrupalTaxonomyTerm} from "@lib/types";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordNewsListItem = ({node, headingLevel}: { node: NewsNodeType, headingLevel?: string }) => {
+const StanfordNewsListItem = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: NewsNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_news_featured_media?.field_media_image.image_style_uri.card_1900x950;
   const imageAlt = node.su_news_featured_media?.field_media_image.resourceIdObjMeta?.alt ?? '';
   const publishDate = node.su_news_publishing_date ? new Date(node.su_news_publishing_date) : null;
 
   const topics: DrupalTaxonomyTerm[] = (node.su_news_topics && node.su_news_topics.length > 0) ? node.su_news_topics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="@container">
+    <div className="@container" {...props}>
       <div className="flex w-full justify-between flex-col @3xl:flex-row py-10">
         <div className="order-2 @3xl::order-1 flex flex-col">
 

diff --git a/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx b/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
@@ -2,16 +2,17 @@ import {BasicPageNodeType} from "@lib/types";
 import Link from "@components/elements/link";
 import Image from "next/image";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPageListItem = ({node, headingLevel}: { node: BasicPageNodeType, headingLevel?: string }) => {
+const StanfordPageListItem = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: BasicPageNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_page_image?.field_media_image.image_style_uri.card_1900x950 || node.su_page_banner?.su_banner_image?.field_media_image.image_style_uri.card_1900x950
   const imageAlt = (node.su_page_image?.field_media_image.resourceIdObjMeta?.alt || node.su_page_banner?.su_banner_image?.field_media_image.resourceIdObjMeta?.alt) ?? '';
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <div className="@container py-10 ">
-      <div className="flex flex-col @4xl:flex-row gap-20">
+      <div className="flex flex-col @4xl:flex-row gap-20" {...props}>
         <div className="order-2 @4xl:order-1">
-          <Link href={node.path?.alias} >
+          <Link href={node.path?.alias}>
             <Heading className="text-m2">
               {node.title}
             </Heading>

diff --git a/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx b/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
@@ -2,12 +2,13 @@ import {PersonNodeType} from "@lib/types";
 import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
+import {PropsWithoutRef} from "react";
 
-const StanfordPersonListItem = ({node, headingLevel}: { node: PersonNodeType, headingLevel?: string }) => {
+const StanfordPersonListItem = ({node, headingLevel, ...props}: PropsWithoutRef<{ node: PersonNodeType, headingLevel?: string }>) => {
   const imageUrl = node.su_person_photo?.field_media_image.image_style_uri.square_956
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
-    <div className="max-w-[500px] w-full mx-auto shadow-lg p-20 text-center">
+    <div className="max-w-[500px] w-full mx-auto shadow-lg p-20 text-center" {...props}>
       {imageUrl &&
         <div className="relative aspect-[1/1] w-full mx-auto mb-20">
           <Image
@@ -20,7 +21,7 @@ const StanfordPersonListItem = ({node, headingLevel}: { node: PersonNodeType, he
       }
 
       <Heading className="text-m2">
-        <Link href={node.path?.alias} >
+        <Link href={node.path?.alias}>
           {node.title}
         </Link>
       </Heading>