Skip to content

Commit

Permalink
Updated opportunities and publication displays
Browse files Browse the repository at this point in the history
  • Loading branch information
pookmish committed Nov 14, 2024
1 parent 4bd3cda commit 64366f1
Show file tree
Hide file tree
Showing 18 changed files with 3,400 additions and 939 deletions.
34 changes: 17 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
"dependencies": {
"@heroicons/react": "^2.1.5",
"@mui/base": "5.0.0-beta.61",
"@next/third-parties": "15.0.2",
"@next/third-parties": "15.0.3",
"@tailwindcss/container-queries": "^0.1.1",
"@types/node": "22.9.0",
"@types/react": "18.3.12",
"@types/react-dom": "19.0.0-rc.1",
"algoliasearch": "^5.12.0",
"algoliasearch": "^5.14.0",
"autoprefixer": "^10.4.20",
"clsx": "^2.1.1",
"decanter": "^7.3.0",
Expand All @@ -31,21 +31,21 @@
"graphql-tag": "^2.12.6",
"html-entities": "^2.5.2",
"html-react-parser": "^5.1.18",
"next": "15.0.2",
"next": "15.0.3",
"plaiceholder": "^3.0.0",
"postcss": "^8.4.47",
"postcss": "^8.4.49",
"qs": "^6.13.0",
"react": "19.0.0-rc-fb9a90fa48-20240614",
"react-dom": "19.0.0-rc-fb9a90fa48-20240614",
"react-focus-lock": "^2.13.2",
"react-instantsearch": "^7.13.7",
"react-instantsearch-nextjs": "^0.3.17",
"react-instantsearch": "^7.13.8",
"react-instantsearch-nextjs": "^0.3.18",
"react-slick": "^0.30.2",
"react-super-responsive-table": "^6.0.0",
"react-tiny-oembed": "^1.1.0",
"sharp": "^0.33.5",
"tailwind-merge": "^2.5.4",
"tailwindcss": "^3.4.14",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"usehooks-ts": "^3.1.0"
},
Expand All @@ -57,30 +57,30 @@
"@graphql-codegen/import-types-preset": "^3.0.0",
"@graphql-codegen/typescript-graphql-request": "^6.2.0",
"@graphql-codegen/typescript-operations": "^4.3.1",
"@next/bundle-analyzer": "15.0.2",
"@storybook/addon-essentials": "^8.4.2",
"@storybook/addon-interactions": "^8.4.2",
"@storybook/addon-links": "^8.4.2",
"@next/bundle-analyzer": "15.0.3",
"@storybook/addon-essentials": "^8.4.4",
"@storybook/addon-interactions": "^8.4.4",
"@storybook/addon-links": "^8.4.4",
"@storybook/addon-styling": "^1.3.7",
"@storybook/blocks": "^8.4.2",
"@storybook/nextjs": "^8.4.2",
"@storybook/react": "^8.4.2",
"@storybook/blocks": "^8.4.4",
"@storybook/nextjs": "^8.4.4",
"@storybook/react": "^8.4.4",
"@storybook/testing-library": "^0.2.2",
"@types/react-slick": "^0.23.13",
"concurrently": "^9.1.0",
"encoding": "^0.1.13",
"eslint": "^9.14.0",
"eslint-config-next": "15.0.2",
"eslint-config-next": "15.0.3",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-storybook": "^0.11.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"react-docgen": "^7.1.0",
"storybook": "^8.4.2",
"storybook": "^8.4.4",
"storybook-addon-module-mock": "^1.3.4",
"tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript-eslint": "^8.13.0"
"typescript-eslint": "^8.14.0"
},
"packageManager": "yarn@4.5.1",
"resolutions": {
Expand Down
3 changes: 3 additions & 0 deletions src/components/nodes/cards/node-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford
import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card"
import {isPreviewMode} from "@lib/drupal/is-preview-mode"
import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
import StanfordOpportunityCard from "@components/nodes/cards/stanford-opportunity/stanford-opportunity-card"

type Props = {
/**
Expand Down Expand Up @@ -44,6 +45,8 @@ const NodeCard = ({node, headingLevel}: Props) => {
return <StanfordPolicyCard node={node} headingLevel={headingLevel} {...itemProps} />
case "NodeStanfordPublication":
return <StanfordPublicationCard node={node} headingLevel={headingLevel} {...itemProps} />
case "NodeStanfordOpportunity":
return <StanfordOpportunityCard node={node} headingLevel={headingLevel} {...itemProps} />
}
}
export default NodeCard
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import Link from "@components/elements/link"
import {H2, H3} from "@components/elements/headers"
import {HtmlHTMLAttributes} from "react"
import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
import ImageCard from "@components/patterns/image-card"
import Wysiwyg from "@components/elements/wysiwyg"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
node: NodeStanfordOpportunity
headingLevel?: "h2" | "h3"
}

const StanfordOpportunityCard = ({node, headingLevel, ...props}: Props) => {
const image = node.suOppImage?.mediaImage
const Heading = headingLevel === "h3" ? H3 : H2

return (
<ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} isArticle>
<Heading className="[&_a]:text-black" id={node.id}>
<Link href={node.suOppSource?.url || node.path}>{node.title}</Link>
</Heading>
<Wysiwyg html={node.suOppSummary?.processed || node.body?.summary} />
</ImageCard>
)
}
export default StanfordOpportunityCard
5 changes: 4 additions & 1 deletion src/components/nodes/list-item/node-list-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/
import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item"
import {isPreviewMode} from "@lib/drupal/is-preview-mode"
import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
import StanfordOpportunityListItem from "@components/nodes/list-item/stanford-opportunity/stanford-opportunity-list-item"

type Props = {
/**
Expand Down Expand Up @@ -44,7 +45,9 @@ const NodeListItem = ({node, headingLevel}: Props) => {
case "NodeStanfordPolicy":
return <StanfordPolicyListItem node={node} headingLevel={headingLevel} {...itemProps} />
case "NodeStanfordPublication":
return <StanfordPublicationListItem node={node} headingLevel={headingLevel} {...itemProps} />
return <StanfordPublicationListItem node={node} {...itemProps} />
case "NodeStanfordOpportunity":
return <StanfordOpportunityListItem node={node} headingLevel={headingLevel} {...itemProps} />
}
}
export default NodeListItem
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import Image from "next/image"
import Link from "@components/elements/link"
import {H2, H3} from "@components/elements/headers"
import {HtmlHTMLAttributes} from "react"
import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
import twMerge from "@lib/utils/twMerge"
import Wysiwyg from "@components/elements/wysiwyg"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
node: NodeStanfordOpportunity
headingLevel?: "h2" | "h3"
}

const StanfordOpportunityListItem = ({node, headingLevel, ...props}: Props) => {
const image = node.suOppImage?.mediaImage
const Heading = headingLevel === "h3" ? H3 : H2

return (
<article {...props} aria-labelledby={node.id} className={twMerge("@container", props.className)}>
<div className="flex w-full flex-col justify-between @3xl:flex-row">
<div className="order-2 @3xl:order-1">
<Heading className="font-bold" id={node.id}>
<Link
href={node.suOppSource?.url || node.path}
className="order-2 text-digital-red no-underline hocus:text-black hocus:underline"
>
{node.title}
</Link>
</Heading>

<Wysiwyg html={node.suOppSummary?.processed || node.body?.summary} />
</div>

{image?.url && (
<div className="relative order-1 mb-10 aspect-[16/9] shrink-0 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4">
<Image
className="ed11y-ignore object-cover"
src={image.url}
alt=""
fill
sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
/>
</div>
)}
</div>
</article>
)
}
export default StanfordOpportunityListItem
Original file line number Diff line number Diff line change
@@ -1,39 +1,35 @@
import Link from "@components/elements/link"
import {H2, H3} from "@components/elements/headers"
import {HtmlHTMLAttributes} from "react"
import {NodeStanfordPublication} from "@lib/gql/__generated__/drupal.d"
import twMerge from "@lib/utils/twMerge"
import ReverseVisualOrder from "@components/elements/reverse-visual-order"
import Wysiwyg from "@components/elements/wysiwyg"
import Link from "@components/elements/link"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
node: NodeStanfordPublication
headingLevel?: "h2" | "h3"
apa?: boolean
chicago?: boolean
}

const StanfordPublicationListItem = ({node, headingLevel, ...props}: Props) => {
const citationUrl = node.suPublicationCitation?.suUrl?.url
const Heading = headingLevel === "h3" ? H3 : H2
return (
<article
{...props}
aria-labelledby={node.id}
className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
>
<ReverseVisualOrder>
<Heading id={node.id}>
<Link href={citationUrl || node.path}>{node.title}</Link>
</Heading>
<div className="font-bold">Publication</div>
</ReverseVisualOrder>
const StanfordPublicationListItem = ({node, apa, chicago, ...props}: Props) => {
const citation = apa ? node.suPublicationCitation?.apa : node.suPublicationCitation?.chicago

{node.suPublicationTopics && (
<div>
{node.suPublicationTopics.map(topic => (
<div key={topic.id}>{topic.name}</div>
))}
</div>
return (
<div {...props}>
{citation && (
<Wysiwyg
html={apa ? node.suPublicationCitation?.apa : node.suPublicationCitation?.chicago}
className="ml-12 -indent-12 [&_a]:text-digital-red [&_a]:no-underline [&_a]:hocus:text-black [&_a]:hocus:underline"
/>
)}
{!citation && (
<Link
className="text-digital-red no-underline hocus:text-black hocus:underline"
href={node.path}
prefetch={false}
>
{node.title}
</Link>
)}
</article>
</div>
)
}
export default StanfordPublicationListItem
18 changes: 18 additions & 0 deletions src/components/nodes/pages/node-page-metadata.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,29 @@ import {JSX} from "react"
import {OpenGraphType} from "next/dist/lib/metadata/types/opengraph-types"

type Props = {
/**
* Page title without the site name, undefined if the home page.
*/
pageTitle?: string
/**
* Short description of the page.
*/
description?: string
/**
* Drupal image.
*/
image?: false | Image
/**
* Additional meta data if desired.
*/
children?: JSX.Element | JSX.Element[]
/**
* Page type.
*/
ogType?: OpenGraphType
/**
* Twitter card style.
*/
twitterCard?: "summary" | "summary_large_image" | "app" | "player"
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/nodes/pages/node-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import StanfordPolicyPage from "@components/nodes/pages/stanford-policy/stanford
import StanfordPublicationPage from "@components/nodes/pages/stanford-publication/stanford-publication-page"
import StanfordCoursePage from "@components/nodes/pages/stanford-course/stanford-course-page"
import StanfordEventSeriesPage from "@components/nodes/pages/stanford-event-series/stanford-event-series-page"
import StanfordOpportunityPage from "@components/nodes/pages/stanford-opportunity/stanford-opportunity-page"
import {isPreviewMode} from "@lib/drupal/is-preview-mode"
import {NodeUnion} from "@lib/gql/__generated__/drupal.d"

Expand Down Expand Up @@ -35,6 +36,8 @@ const NodePage = ({node}: {node: NodeUnion}) => {
return <StanfordPolicyPage node={node} {...itemProps} />
case "NodeStanfordPublication":
return <StanfordPublicationPage node={node} {...itemProps} />
case "NodeStanfordOpportunity":
return <StanfordOpportunityPage node={node} {...itemProps} />
}
}
export default NodePage
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
import {getCleanDescription, getFirstText} from "@lib/utils/text-tools"
import NodePageMetadata from "@components/nodes/pages/node-page-metadata"

type Props = {
node: NodeStanfordOpportunity
}
const StanfordOpportunityMetadata = ({node}: Props) => {
const description = getCleanDescription(node.suOppSummary?.processed, 2) || getFirstText(node.suOppComponents)
const image = node.suOppImage?.mediaImage
return <NodePageMetadata pageTitle={node.title} description={description} image={image} />
}
export default StanfordOpportunityMetadata
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import Rows from "@components/paragraphs/rows/rows"
import {H1} from "@components/elements/headers"
import {HtmlHTMLAttributes} from "react"
import {NodeStanfordOpportunity} from "@lib/gql/__generated__/drupal.d"
import StanfordOpportunityMetadata from "@components/nodes/pages/stanford-opportunity/stanford-opportunity-metadata"
import Wysiwyg from "@components/elements/wysiwyg"
import Image from "next/image"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
node: NodeStanfordOpportunity
headingLevel?: "h2" | "h3"
}

const StanfordOpportunityPage = ({node, ...props}: Props) => {
const image = node.suOppImage?.mediaImage
return (
<article className="centered mt-32" {...props}>
<StanfordOpportunityMetadata node={node} />
<H1>{node.title}</H1>

<div className="grid grid-cols-3-1 gap-20">
<div className="space-y-20">
<Wysiwyg html={node.suOppSummary?.processed} />
<Wysiwyg html={node.body?.processed} />
</div>

<div className="space-y-10">
{image?.url && (
<div className="relative order-1 mb-10 aspect-[16/9] shrink-0 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4">
<Image
className="ed11y-ignore object-cover"
src={image.url}
alt=""
fill
sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
/>
</div>
)}

{node.suOppType && (
<div className="font-semibold">
{node.suOppType.map(oppType => (
<div key={oppType.id}>{oppType.name}</div>
))}
</div>
)}

{node.suOppApplicationDeadline && (
<div>Application Deadline: {new Date(node.suOppApplicationDeadline.time).toLocaleString()}</div>
)}
{node.suOppEligibility && (
<div>
Eligibility: <Wysiwyg html={node.suOppEligibility.processed} />
</div>
)}
{node.suOppStartDate && <div>Start Date: {new Date(node.suOppStartDate.time).toLocaleDateString()}</div>}
{node.suOppCourseCode && (
<div>
{node.suOppCourseCode.map((code, i) => (
<div key={`course-code-${i}`}>{code}</div>
))}
</div>
)}
</div>
</div>
<Rows components={node.suOppComponents} className="mx-auto lg:w-8/12" />
</article>
)
}
export default StanfordOpportunityPage
Loading

0 comments on commit 64366f1

Please sign in to comment.