Skip to content

Commit

Permalink
Merge branch 'dev' into feature/GIVCAMP-282_react-player-light
Browse files Browse the repository at this point in the history
* dev: (34 commits)
  GIVCAMP-292 GIVCAMP-305 | Horizontal Initiative card and image aspect ratio options (#256)
  1.3.3
  Update robots to use different URL for sitemap path (#254)
  1.3.2
  GIVCAMP-307 | Stacked story hero variant (#251)
  1.3.1
  GIVCAMP-297 GIVCAMP-312 | Section background options + add light overlay options (#248)
  Bump follow-redirects from 1.15.4 to 1.15.6 (#249)
  1.3.0
  GIVCAMP-289: Inline External Script Loading. (#246)
  GIVCAMP-88 | data card (#245)
  1.2.2
  GIVCAMP-294 | Basic Hero overlay options and image optimization (#243)
  HSTS set max-age to 31536000 (#242)
  1.2.1
  Icon animation (#240)
  GIVCAMP-304 | Add CTA region to Section and Homepage Theme/Story Section (#239)
  1.2.0
  GIVCAMP-293 | Moment poster (#236)
  NoJira: Remove Editor Token (#237)
  ...
  • Loading branch information
yvonnetangsu committed Apr 2, 2024
2 parents c14b812 + fab0f2d commit f23df9b
Show file tree
Hide file tree
Showing 84 changed files with 1,928 additions and 506 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# [Giving Campaign (Stanford On Purpose)](https://github.com/SU-SWS/ood-giving-campaign)
# [Stanford Momentum](https://github.com/SU-SWS/ood-giving-campaign)

[![Netlify Status](https://api.netlify.com/api/v1/badges/738e5599-7329-41a1-8429-82f8540636d9/deploy-status?branch=dev)](https://app.netlify.com/sites/giving-campaign/deploys)

Description
---

Netlify hosted, Next.js built, Storyblok headless CMS site for the Stanford On Purpose website.
Netlify hosted, Next.js built, Storyblok headless CMS site for the Stanford Momentum website.

Environment variable set up and installation
---
Expand Down
15 changes: 6 additions & 9 deletions app/(editor)/editor/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const bridgeOptions = {
* Init on the server.
*/
storyblokInit({
accessToken: process.env.STORYBLOK_ACCESS_TOKEN, // Preview token because this is in server side.
accessToken: process.env.STORYBLOK_PREVIEW_EDITOR_TOKEN, // Preview token because this is in server side.
use: [apiPlugin],
apiOptions: {
region: 'us',
Expand Down Expand Up @@ -89,17 +89,14 @@ async function getStoryData({ path }: PageProps['searchParams']): Promise<ISbRes
/**
* Validate the editor token.
*
* We expect 1 hour as the time of a token being valid.
* So basically that an editor will work max 1 hour on one page
* before switching to another entry inside the editor or refreshing the browser window.
* You can extend that by adjusting 3600 with the value you need.
* Removed time limit check to support client workflows of several days, or weeks
* of using the preview link for review.
*/
const validateEditor = (searchParams: PageProps['searchParams']) => {
const validationString = searchParams['_storyblok_tk[space_id]'] + ':' + process.env.STORYBLOK_ACCESS_TOKEN + ':' + searchParams['_storyblok_tk[timestamp]'];
const validationString = searchParams['_storyblok_tk[space_id]'] + ':' + process.env.STORYBLOK_PREVIEW_EDITOR_TOKEN + ':' + searchParams['_storyblok_tk[timestamp]'];
const validationToken = crypto.createHash('sha1').update(validationString).digest('hex');
if (searchParams['_storyblok_tk[token]'] == validationToken &&
Number(searchParams['_storyblok_tk[timestamp]']) > Math.floor(Date.now()/1000)-3600) {
// you're in the edit mode.
if (searchParams['_storyblok_tk[token]'] == validationToken) {
//You're in the edit mode.
return true;
}
// Something didn't work out.
Expand Down
4 changes: 2 additions & 2 deletions app/robots.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
const CurrentURL = process.env.DEPLOY_PRIME_URL || 'http://localhost:3000';
const CurrentURL = process.env.URL || process.env.DEPLOY_PRIME_URL || 'https://momentum.stanford.edu';
return {
rules: {
userAgent: '*',
allow: '/',
},
sitemap: CurrentURL + '/sitemap.xml',
};
}
}
8 changes: 4 additions & 4 deletions components/BlurryPoster/BlurryPoster.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { cnb } from 'cnbuilder';

export const root = 'relative bg-no-repeat bg-cover overflow-hidden break-words';

export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
export const bgImage = 'absolute top-0 left-0 size-full object-cover';

export const blurWrapper = (
addBgBlur?: boolean,
addDarkOverlay?: boolean,
type?: 'hero' | 'poster',
bgColor?: 'black' | 'white',
) => cnb(
'relative w-full h-full z-10', {
'relative size-full z-10', {
'backdrop-blur-md' : addBgBlur,
'lg:from-black-true/20 lg:to-black-true/70': type === 'poster' && addDarkOverlay && bgColor === 'black',
'lg:bg-none': type === 'poster' && bgColor === 'black' && !addDarkOverlay,
Expand All @@ -34,7 +34,7 @@ export const contentWrapper = (
'lg:order-first': !imageOnLeft && isTwoCol,
});

export const superhead = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('cc rs-mb-1 w-full', {
export const superhead = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('cc rs-mb-1 w-full text-shadow-sm', {
'lg:pl-40 2xl:pl-60 3xl:pr-[calc(100%-750px)]': imageOnLeft && isTwoCol,
'lg:pr-40 2xl:pr-60 3xl:pl-[calc(100%-750px)]': !imageOnLeft && isTwoCol,
});
Expand Down Expand Up @@ -92,7 +92,7 @@ export const bodyWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('c
'3xl:pl-[calc(100%-750px)] lg:pr-40 2xl:pr-60': !imageOnLeft && isTwoCol,
'*:max-w-[50ch]': !isTwoCol,
});

export const dek = 'text-shadow-sm';
export const cta = 'rs-mt-4';

export const imageWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean, hasImage?: boolean) => cnb('w-full cc', {
Expand Down
82 changes: 39 additions & 43 deletions components/BlurryPoster/BlurryPoster.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,42 +93,44 @@ export const BlurryPoster = ({

return (
<Container {...props} bgColor={bgColor} width="full" className={styles.root}>
<picture>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '1000x600' : '2000x1200', bgImageFocus)}
media="(min-width: 1200px)"
// Exact height and width don't matter as long as aspect ratio is the same as the image
width={2000}
height={1200}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '600x600' : '1200x1200', bgImageFocus)}
media="(min-width: 768px)"
width={1200}
height={1200}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '450x300' : '900x600', bgImageFocus)}
media="(min-width: 461px)"
width={900}
height={600}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '200x300' : '600x900', bgImageFocus)}
media="(max-width: 460px)"
width={600}
height={900}
/>
<img
src={getProcessedImage(bgImageSrc, addBgBlur ? '1000x600' : '2000x1200', bgImageFocus)}
alt={bgImageAlt || ''}
width={2000}
height={1200}
aria-describedby={hasCaption && !!bgImageAlt ? 'story-hero-caption' : undefined}
className={styles.bgImage}
fetchPriority={type === 'hero' ? 'high' : 'auto'}
/>
</picture>
{bgImageSrc && (
<picture>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '1000x600' : '2000x1200', bgImageFocus)}
media="(min-width: 1200px)"
// Exact height and width don't matter as long as aspect ratio is the same as the image
width={2000}
height={1200}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '600x600' : '1200x1200', bgImageFocus)}
media="(min-width: 768px)"
width={1200}
height={1200}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '450x300' : '900x600', bgImageFocus)}
media="(min-width: 461px)"
width={900}
height={600}
/>
<source
srcSet={getProcessedImage(bgImageSrc, addBgBlur ? '200x300' : '600x900', bgImageFocus)}
media="(max-width: 460px)"
width={600}
height={900}
/>
<img
src={getProcessedImage(bgImageSrc, addBgBlur ? '1000x600' : '2000x1200', bgImageFocus)}
alt={bgImageAlt || ''}
width={2000}
height={1200}
aria-describedby={hasCaption && !!bgImageAlt ? 'story-hero-caption' : undefined}
className={styles.bgImage}
fetchPriority={type === 'hero' ? 'high' : 'auto'}
/>
</picture>
)}
<div className={cnb(styles.blurWrapper(
addBgBlur,
!!darkOverlay && darkOverlay !== 'none', type, bgColor,
Expand Down Expand Up @@ -197,17 +199,11 @@ export const BlurryPoster = ({
variant="overview"
weight="normal"
leading="display"
className={styles.dek}
>
{body}
</Paragraph>
)}
{/* No authors and published dates for MVP */}
{/* {byline && (
<Text>{byline}</Text>
)}
{date && (
<time dateTime={publishedDate}>{formattedDate}</time>
)} */}
{cta && (
<div className={styles.cta}>
{cta}
Expand Down
2 changes: 1 addition & 1 deletion components/Bookshelf/Book.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const Book = ({
// animate={{ backgroundColor: isOpen ? '#FF0088' : '#0055FF' }}
className={cnb('group relative transition-colors mr-4 w-120 flex justify-center align-start shrink-0 rounded hocus-visible:underline decoration-white', buttonClassName)}
>
<div className="absolute w-full h-full top-0 right-0 bg-gradient-to-r from-black-90/20 via-transparent to-black-90/20 mix-blend-overlay" />
<div className="absolute size-full top-0 right-0 bg-gradient-to-r from-black-90/20 via-transparent to-black-90/20 mix-blend-overlay" />
<Text
color="white"
font="serif"
Expand Down
2 changes: 1 addition & 1 deletion components/Bookshelf/BookAlt.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const BookAlt = ({
<img
src={getProcessedImage(imgSrc, '1600x1300')}
alt=""
className="w-full h-full object-cover object-left-top"
className="size-full object-cover object-left-top"
/>
<span className="absolute block bottom-0 right-0 bg-gradient-to-t from-gc-black via-50% via-gc-black/50 w-full h-2/5 group-hocus-visible:h-1/2 transition-all" />
<Text
Expand Down
2 changes: 1 addition & 1 deletion components/BracketCard/BracketCard.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const imageWrapper = (textOnLeft: boolean) => cnb(
export const imageAspectRatio = 'aspect-w-6 aspect-h-5';
export const image = 'object-cover group-hocus-within:scale-105 transition-transform';
export const imageOverlay = (textOnLeft: boolean) => cnb(
'hidden sm:block from-black-true/50 via-black-true/20 to-transparent via-20% sm:absolute w-full h-full sm:top-0 sm:left-0',
'hidden sm:block from-black-true/50 via-black-true/20 to-transparent via-20% sm:absolute size-full sm:top-0 sm:left-0',
textOnLeft ? 'bg-gradient-to-r' : 'bg-gradient-to-l',
);

Expand Down
10 changes: 5 additions & 5 deletions components/ChangemakerCard/ChangemakerCard.styles.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export const root = 'relative w-full max-w-[29rem] sm:max-w-300 lg:max-w-[35rem] mx-auto break-words';
export const cardInner = 'relative w-full h-full aspect-w-1 aspect-h-2';
export const cardInner = 'relative size-full aspect-w-1 aspect-h-2';

export const cardFront = 'absolute w-full h-full top-0 left-0';
export const cardFront = 'absolute size-full top-0 left-0';
export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2';
export const info = 'rs-px-1 pb-150 absolute w-full h-full bottom-0 left-0 mb-0';
export const info = 'rs-px-1 pb-150 absolute size-full bottom-0 left-0 mb-0';
export const heading = 'mb-02em mt-auto';

export const cardContent = 'absolute w-full h-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker *:*:*:!mb-1em';
export const cardContent = 'absolute size-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker *:*:*:!mb-1em';

export const button = 'group absolute w-full h-full top-0 left-0';
export const button = 'group absolute size-full top-0 left-0';
export const icon = 'absolute bottom-40 right-36 text-white w-65 h-65 border-2 border-white rounded-full p-16 group-hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform';
3 changes: 2 additions & 1 deletion components/ChangemakerCard/ChangemakerCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,14 @@ export const ChangemakerCard = ({
size={2}
leading="tight"
align="center"
color="white"
className={styles.heading}
>
{heading}
</Heading>
)}
{subheading && (
<Text variant="card" align="center" leading="display">{subheading}</Text>
<Text variant="card" align="center" leading="display" color="white">{subheading}</Text>
)}
</FlexBox>
</div>
Expand Down
4 changes: 4 additions & 0 deletions components/Cta/Cta.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export const ctaIconMap: CtaIconMapType = {
};

export const iconAnimation = {
none: '',
'top-right': 'group-hocus:translate-x-01em group-hocus:-translate-y-01em',
down: 'group-hocus:translate-y-02em',
up: 'group-hocus:-translate-y-02em',
Expand All @@ -152,6 +153,9 @@ export const iconLeftMarginDefault = 'ml-03em';
export const iconLeftMargin: CtaIconLeftMarginType = {
'arrow-right': 'ml-04em',
back: 'ml-04em',
email: 'ml-05em',
external: 'ml-04em',
link: 'ml-05em',
'triangle-right': 'ml-04em',
'triangle-down': 'ml-04em',
'triangle-up': 'ml-04em',
Expand Down
2 changes: 1 addition & 1 deletion components/Cta/Cta.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,6 @@ export interface CtaCommonProps {
icon?: IconType;
iconPosition?: 'left' | 'right';
animate?: IconAnimationType;
iconProps?: HeroIconProps & React.ComponentProps<'svg'>;
iconProps?: Omit<HeroIconProps, 'icon'> & React.ComponentProps<'svg'>;
children?: React.ReactNode;
}
16 changes: 16 additions & 0 deletions components/DataCard/DataCard.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { cnb } from 'cnbuilder';

export const animateWrapper = 'h-full';
// Use border-black-50/50 which works well on both light and dark backgrounds
export const root = 'relative overflow-hidden size-full break-words border-l-2 border-black-50/50';

export const flex = 'h-full';
export const content = (
hasBarColor?: boolean,
) => cnb('rs-pl-2', {
'border-l-[1.4rem] md:border-l-[2rem]': hasBarColor,
});

export const heading = 'rs-mb-3 ml-22 whitespace-pre-line mt-auto';
export const body = '*:*:leading-snug';
export const cta = 'rs-mt-2';
93 changes: 93 additions & 0 deletions components/DataCard/DataCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { cnb } from 'cnbuilder';
import { AnimateInView, type AnimationType } from '@/components/Animate';
import { NumberCounter } from '@/components/NumberCounter';
import { Container } from '@/components/Container';
import { FlexBox } from '@/components/FlexBox';
import { Heading, type HeadingType } from '../Typography';
import { accentBorderColors, type AccentBorderColorType, type PaddingType } from '@/utilities/datasource';
import { splitNumberString } from '@/utilities/splitNumberString';
import * as styles from './DataCard.styles';

export type DataCardProps = React.HTMLAttributes<HTMLDivElement> & {
heading?: string;
headingLevel?: HeadingType;
isDarkTheme?: boolean;
barColor?: AccentBorderColorType;
body?: React.ReactNode;
paddingTop?: PaddingType;
cta?: React.ReactNode;
isCounter?: boolean;
// In number of seconds
counterDuration?: number;
animation?: AnimationType;
delay?: number;
};

export const DataCard = ({
heading,
headingLevel = 'h3',
barColor,
body,
cta,
paddingTop,
isDarkTheme,
isCounter,
counterDuration,
animation = 'slideUp',
delay,
children,
className,
...props
}: DataCardProps) => {
const headingProcessed = isCounter ? splitNumberString(heading) : undefined;

return (
<AnimateInView animation={animation} delay={delay} className={styles.animateWrapper}>
<Container
as="article"
width="full"
pt={paddingTop}
className={styles.root}
{...props}
>
<FlexBox direction="col" className={styles.flex}>
{/* If number counter is enabled, aria-hidden the animated heading and add a SR only heading */}
{isCounter && heading && (
<Heading as={headingLevel} srOnly>{heading}</Heading>
)}
{heading && (
<Heading
as={headingLevel}
font="druk"
leading="druk"
color={isDarkTheme ? 'white' : 'black'}
size="f5"
aria-hidden={isCounter}
className={styles.heading}
>
{isCounter ? (
<>
{headingProcessed?.beforeNumber}
<NumberCounter number={headingProcessed?.number} duration={counterDuration} />
{headingProcessed?.afterNumber}
</>
) : (
heading
)}
</Heading>
)}
<div className={cnb(styles.content(!!barColor), accentBorderColors[barColor])}>
<div className={styles.body}>
{body}
</div>
{!!cta && (
<div className={styles.cta}>
{cta}
</div>
)}
</div>
</FlexBox>
</Container>
</AnimateInView>
);
};
1 change: 1 addition & 0 deletions components/DataCard/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './DataCard';
Loading

0 comments on commit f23df9b

Please sign in to comment.