From b062f01d1887f1249c6bfd9c2dfe01e136e8882a Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 26 Oct 2024 23:33:03 +0100 Subject: [PATCH] Add sticky top sponsor --- src/components/FrameRenderer/renderer.ts | 8 ++--- src/components/OnboardingNudge.tsx | 9 ++++- .../PageSponsors/BottomRightSponsor.tsx | 2 ++ src/components/PageSponsors/PageSponsors.tsx | 20 +++++++---- .../PageSponsors/StickyTopSponsor.tsx | 36 +++++++++++++------ src/stores/page.ts | 4 ++- 6 files changed, 54 insertions(+), 25 deletions(-) diff --git a/src/components/FrameRenderer/renderer.ts b/src/components/FrameRenderer/renderer.ts index 6f51f7ddf..c6baa2c0a 100644 --- a/src/components/FrameRenderer/renderer.ts +++ b/src/components/FrameRenderer/renderer.ts @@ -57,7 +57,7 @@ export class Renderer { } // Clone it so we can use it later - this.loaderHTML = this.loaderEl!.innerHTML; + this.loaderHTML = this.loaderEl?.innerHTML!; const dataset = this.containerEl.dataset; this.resourceType = dataset.resourceType!; @@ -66,11 +66,7 @@ export class Renderer { return true; } - /** - * @param { string } jsonUrl - * @returns {Promise} - */ - jsonToSvg(jsonUrl: string) { + jsonToSvg(jsonUrl: string): Promise | null { if (!jsonUrl) { console.error('jsonUrl not defined in frontmatter'); return null; diff --git a/src/components/OnboardingNudge.tsx b/src/components/OnboardingNudge.tsx index 0ddad202e..97fb1c330 100644 --- a/src/components/OnboardingNudge.tsx +++ b/src/components/OnboardingNudge.tsx @@ -2,6 +2,8 @@ import { cn } from '../lib/classname.ts'; import { memo, useEffect, useState } from 'react'; import { useScrollPosition } from '../hooks/use-scroll-position.ts'; import { X } from 'lucide-react'; +import { isOnboardingStripHidden } from '../stores/page.ts'; +import { useStore } from '@nanostores/react'; type OnboardingNudgeProps = { onStartOnboarding: () => void; @@ -14,6 +16,7 @@ export function OnboardingNudge(props: OnboardingNudgeProps) { const [isLoading, setIsLoading] = useState(false); + const $isOnboardingStripHidden = useStore(isOnboardingStripHidden); const { y: scrollY } = useScrollPosition(); useEffect(() => { @@ -30,10 +33,14 @@ export function OnboardingNudge(props: OnboardingNudgeProps) { return null; } + if ($isOnboardingStripHidden) { + return null; + } + return (
{ e.preventDefault(); + e.stopPropagation(); + setIsHidden(true); onSponsorHidden(); }} diff --git a/src/components/PageSponsors/PageSponsors.tsx b/src/components/PageSponsors/PageSponsors.tsx index f92a1a70f..cee656e07 100644 --- a/src/components/PageSponsors/PageSponsors.tsx +++ b/src/components/PageSponsors/PageSponsors.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import { httpGet, httpPatch } from '../../lib/http'; import { sponsorHidden } from '../../stores/page'; import { useStore } from '@nanostores/react'; -import { X } from 'lucide-react'; import { setViewSponsorCookie } from '../../lib/jwt'; import { isMobile } from '../../lib/is-mobile'; import Cookies from 'js-cookie'; @@ -21,12 +20,21 @@ type PageSponsorType = { id: string; }; -export type StickyTopSponsorType = PageSponsorType & {}; +export type StickyTopSponsorType = PageSponsorType & { + buttonText: string; + style?: { + fromColor?: string; + toColor?: string; + textColor?: string; + buttonBackgroundColor?: string; + buttonTextColor?: string; + }; +}; export type BottomRightSponsorType = PageSponsorType; type V1GetSponsorResponse = { - bottomRightAd?: PageSponsorType; - stickyTopAd?: PageSponsorType; + bottomRightAd?: BottomRightSponsorType; + stickyTopAd?: StickyTopSponsorType; }; type PageSponsorsProps = { @@ -55,9 +63,9 @@ export function PageSponsors(props: PageSponsorsProps) { const $isSponsorHidden = useStore(sponsorHidden); const [stickyTopSponsor, setStickyTopSponsor] = - useState(); + useState(); const [bottomRightSponsor, setBottomRightSponsor] = - useState(); + useState(); useEffect(() => { const foundUtmParams = getUrlUtmParams(); diff --git a/src/components/PageSponsors/StickyTopSponsor.tsx b/src/components/PageSponsors/StickyTopSponsor.tsx index 8e2e5fc2e..77a0c792e 100644 --- a/src/components/PageSponsors/StickyTopSponsor.tsx +++ b/src/components/PageSponsors/StickyTopSponsor.tsx @@ -3,6 +3,7 @@ import { useScrollPosition } from '../../hooks/use-scroll-position.ts'; import { X } from 'lucide-react'; import type { StickyTopSponsorType } from './PageSponsors.tsx'; import { useEffect, useState } from 'react'; +import { isOnboardingStripHidden } from '../../stores/page.ts'; type StickyTopSponsorProps = { sponsor: StickyTopSponsorType; @@ -22,6 +23,15 @@ export function StickyTopSponsor(props: StickyTopSponsorProps) { const [isImpressionLogged, setIsImpressionLogged] = useState(false); const [isHidden, setIsHidden] = useState(false); + useEffect(() => { + if (!sponsor) { + return; + } + + // hide the onboarding strip when the sponsor is visible + isOnboardingStripHidden.set(true); + }, [sponsor]); + useEffect(() => { if (scrollY < SCROLL_DISTANCE || isImpressionLogged) { return; @@ -42,25 +52,29 @@ export function StickyTopSponsor(props: StickyTopSponsorProps) { onClick={onSponsorClick} className={cn( 'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950', - 'bg-gradient-to-b from-purple-700 to-purple-800 text-white', )} + style={{ + backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`, + color: sponsor.style?.textColor, + }} > - {'ad'} - - Register for our free cloud workshop - -