-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2173 from zeitgeistpm/tr-cms-news
Sanity CMS migration
- Loading branch information
Showing
16 changed files
with
194 additions
and
268 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,74 @@ | ||
| import { CSSProperties, FC, useMemo } from "react"; | ||
| import Link from "next/link"; | ||
| import { News } from "lib/cms/get-news"; | ||
| import { CmsNews } from "lib/cms/news"; | ||
| import { isCurrentOrigin } from "lib/util/is-current-origin"; | ||
|
|
||
| export interface HeroSlideProps { | ||
| className?: string; | ||
| style?: CSSProperties; | ||
| banner: News; | ||
| banner: CmsNews; | ||
| } | ||
|
|
||
| export const HeroSlide: FC<HeroSlideProps> = ({ banner, style, className }) => { | ||
| const isExternalLink = banner.ctaLink | ||
| ? !isCurrentOrigin(banner.ctaLink) | ||
| : false; | ||
| const linkProps = { | ||
| style: { | ||
| backgroundColor: `${banner.buttonColor}`, | ||
| borderColor: `${banner.buttonColor}`, | ||
| color: banner.buttonTextColor, | ||
| }, | ||
| className: | ||
| "leading-[42px] w-full sm:w-fit text-center sm:text-start border rounded px-5 mb-5 mr-5 font-bold", | ||
| href: banner.ctaLink, | ||
| }; | ||
| return <></>; | ||
| // const link = banner.link?.isMarket | ||
| // ? `/markets/${news.link?.market?.marketId}` | ||
| // : news.link?.url; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`flex h-full w-full items-center ${className}`} | ||
| style={style} | ||
| > | ||
| <div className="w-full pb-8"> | ||
| <h2 | ||
| className={`mb-4 text-center font-sans text-5xl font-extrabold text-white sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`} | ||
| > | ||
| {banner.title} | ||
| </h2> | ||
| <p | ||
| className={ | ||
| "mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white sm:text-start md:text-4xl" | ||
| } | ||
| > | ||
| {banner.subtitle} | ||
| </p> | ||
| <div className="flex flex-col sm:flex-row"> | ||
| {isExternalLink ? ( | ||
| <a {...linkProps} target="_blank"> | ||
| {banner.ctaText} | ||
| </a> | ||
| ) : ( | ||
| <> | ||
| {linkProps.href && ( | ||
| <Link | ||
| href={linkProps.href} | ||
| className={linkProps.className} | ||
| style={linkProps.style} | ||
| > | ||
| {banner.ctaText} | ||
| </Link> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| // const isExternalLink = link ? !isCurrentOrigin(link) : false; | ||
|
|
||
| // const isExternalLink = banner.ctaLink | ||
| // ? !isCurrentOrigin(banner.ctaLink) | ||
| // : false; | ||
| // const linkProps = { | ||
| // style: { | ||
| // backgroundColor: `${banner.buttonColor}`, | ||
| // borderColor: `${banner.buttonColor}`, | ||
| // color: banner.buttonTextColor, | ||
| // }, | ||
| // className: | ||
| // "leading-[42px] w-full sm:w-fit text-center sm:text-start border rounded px-5 mb-5 mr-5 font-bold", | ||
| // href: banner.ctaLink, | ||
| // }; | ||
|
|
||
| // return ( | ||
| // <div | ||
| // className={`flex h-full w-full items-center ${className}`} | ||
| // style={style} | ||
| // > | ||
| // <div className="w-full pb-8"> | ||
| // <h2 | ||
| // className={`mb-4 text-center font-sans text-5xl font-extrabold text-white sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`} | ||
| // > | ||
| // {banner.title} | ||
| // </h2> | ||
| // <p | ||
| // className={ | ||
| // "mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white sm:text-start md:text-4xl" | ||
| // } | ||
| // > | ||
| // {banner.subtitle} | ||
| // </p> | ||
| // <div className="flex flex-col sm:flex-row"> | ||
| // {isExternalLink ? ( | ||
| // <a {...linkProps} target="_blank"> | ||
| // {banner.ctaText} | ||
| // </a> | ||
| // ) : ( | ||
| // <> | ||
| // {linkProps.href && ( | ||
| // <Link | ||
| // href={linkProps.href} | ||
| // className={linkProps.className} | ||
| // style={linkProps.style} | ||
| // > | ||
| // {banner.ctaText} | ||
| // </Link> | ||
| // )} | ||
| // </> | ||
| // )} | ||
| // </div> | ||
| // </div> | ||
| // </div> | ||
| // ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,69 @@ | ||
| import Image from "next/image"; | ||
| import { HeroControls } from "./HeroControls"; | ||
| import { HeroSlide } from "./HeroSlide"; | ||
| import { News } from "lib/cms/get-news"; | ||
| import { CmsNews } from "lib/cms/news"; | ||
| import { useSliderControls } from "lib/hooks/slides"; | ||
| import { Transition } from "@headlessui/react"; | ||
|
|
||
| const HeroSlider = ({ | ||
| banners, | ||
| bannerPlaceHolders, | ||
| }: { | ||
| banners: News[]; | ||
| banners: CmsNews[]; | ||
| bannerPlaceHolders: string[]; | ||
| }) => { | ||
| const slider = useSliderControls({ | ||
| count: banners.length, | ||
| autoplay: 15 * 1000, | ||
| pauseOnUserInteraction: 45 * 1000, | ||
| }); | ||
| return <></>; | ||
| // const slider = useSliderControls({ | ||
| // count: banners.length, | ||
| // autoplay: 15 * 1000, | ||
| // pauseOnUserInteraction: 45 * 1000, | ||
| // }); | ||
|
|
||
| return ( | ||
| <section | ||
| className={`relative mx-auto h-[527px] w-full`} | ||
| data-testid="HeroSlider__container" | ||
| > | ||
| {banners.map((banner, index) => ( | ||
| <Image | ||
| key={index} | ||
| priority | ||
| src={banner.imageUrl ?? ""} | ||
| alt={`Image depicting ${banner.title}`} | ||
| placeholder="blur" | ||
| blurDataURL={bannerPlaceHolders[index]} | ||
| sizes="100vw" | ||
| fill | ||
| className="object-cover" | ||
| style={{ | ||
| objectFit: "cover", | ||
| transitionDuration: index == slider.currentSlide ? "0.5s" : "1s", | ||
| opacity: index == slider.currentSlide ? "1" : "0.001", | ||
| objectPosition: `${banner.imageAlignment} 50%`, | ||
| }} | ||
| /> | ||
| ))} | ||
| <div className="container-fluid relative h-full"> | ||
| {banners.map((banner, index) => ( | ||
| <Transition | ||
| className="container-fluid absolute left-0 h-full w-full" | ||
| show={index == slider.currentSlide} | ||
| enter="transition-all duration-1000" | ||
| enterFrom="opacity-0 blur-md" | ||
| enterTo="opacity-100 blur-none" | ||
| leave="transition-all duration-1000" | ||
| leaveFrom="opacity-100 blur-none" | ||
| leaveTo="opacity-0 blur-md" | ||
| key={index} | ||
| > | ||
| <HeroSlide banner={banner} /> | ||
| </Transition> | ||
| ))} | ||
| {banners.length > 1 && ( | ||
| <HeroControls slides={banners} slider={slider} /> | ||
| )} | ||
| </div> | ||
| </section> | ||
| ); | ||
| // return ( | ||
| // <section | ||
| // className={`relative mx-auto h-[527px] w-full`} | ||
| // data-testid="HeroSlider__container" | ||
| // > | ||
| // {banners.map((banner, index) => ( | ||
| // <Image | ||
| // key={index} | ||
| // priority | ||
| // src={banner.imageUrl ?? ""} | ||
| // alt={`Image depicting ${banner.title}`} | ||
| // placeholder="blur" | ||
| // blurDataURL={bannerPlaceHolders[index]} | ||
| // sizes="100vw" | ||
| // fill | ||
| // className="object-cover" | ||
| // style={{ | ||
| // objectFit: "cover", | ||
| // transitionDuration: index == slider.currentSlide ? "0.5s" : "1s", | ||
| // opacity: index == slider.currentSlide ? "1" : "0.001", | ||
| // objectPosition: `${banner.imageAlignment} 50%`, | ||
| // }} | ||
| // /> | ||
| // ))} | ||
| // <div className="container-fluid relative h-full"> | ||
| // {banners.map((banner, index) => ( | ||
| // <Transition | ||
| // className="container-fluid absolute left-0 h-full w-full" | ||
| // show={index == slider.currentSlide} | ||
| // enter="transition-all duration-1000" | ||
| // enterFrom="opacity-0 blur-md" | ||
| // enterTo="opacity-100 blur-none" | ||
| // leave="transition-all duration-1000" | ||
| // leaveFrom="opacity-100 blur-none" | ||
| // leaveTo="opacity-0 blur-md" | ||
| // key={index} | ||
| // > | ||
| // <HeroSlide banner={banner} /> | ||
| // </Transition> | ||
| // ))} | ||
| // {banners.length > 1 && ( | ||
| // <HeroControls slides={banners} slider={slider} /> | ||
| // )} | ||
| // </div> | ||
| // </section> | ||
| // ); | ||
| }; | ||
| export default HeroSlider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import groq from "groq"; | ||
| import { sanity } from "./sanity"; | ||
|
|
||
| export type CmsFeaturedMarkets = { | ||
| marketIds: number[]; | ||
| }; | ||
|
|
||
| const fields = groq`{ | ||
| "marketIds": markets[].marketId, | ||
| }`; | ||
|
|
||
| export const getCmsFeaturedMarkets = async () => { | ||
| // Short circuit to use default if NOTION_API_KEY doesn't exist. | ||
| const data = await sanity.fetch<CmsFeaturedMarkets[]>( | ||
| groq`*[_type == "featuredMarkets"]${fields}`, | ||
| ); | ||
|
|
||
| return data?.[0]; | ||
| }; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.