Skip to content

Commit

Permalink
perf improvement attempt and communities section
Browse files Browse the repository at this point in the history
  • Loading branch information
@lassejaco
lassejaco committed Mar 27, 2024
1 parent 8559dc9 commit 50aa1d2
Showing 1 changed file with 93 additions and 88 deletions.
181 changes: 93 additions & 88 deletions devcon/src/pages/road-to-devcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ const useWindowWidth = (cssVariableName: string) => {
}, [cssVariableName])
}

const useIntersectionRatio = (options?: any) => {
const useIntersectionRatio = (ref: any, options?: any) => {
const [intersectionRatio, setIntersectionRatio] = useState(0)
const ref = useRef(null)
// const ref = useRef(null)

useEffect(() => {
const observerOptions = {
Expand Down Expand Up @@ -266,7 +266,7 @@ const useHorizontalParallax = (onChange: (progress: number) => void) => {
}

const Hero = (props: any) => {
const { controlsRef, sections, goToSection } = props
const { controlsRef, sectionRefs, goToSection } = props

useWindowWidth('window-width')

Expand Down Expand Up @@ -302,7 +302,7 @@ const Hero = (props: any) => {
</div>

<SwipeToScroll slideControls={controlsRef}>
<div className="absolute left-0 h-full pointer-events-none w-[var(--window-width)]" ref={sections[0].ref} />
<div className="absolute left-0 h-full pointer-events-none w-[var(--window-width)]" ref={sectionRefs[0]} />
<div className={`${css['horizontal-container']} pt-20 lg:pt-0 flex no-wrap h-full w-content relative`}>
{/* Desktop version first slide */}
<div className="relative hidden lg:block lg:w-[var(--window-width)] h-full">
Expand Down Expand Up @@ -417,7 +417,7 @@ const Hero = (props: any) => {
<div className="flex flex-col min-[1024px]:justify-center h-full w-[600px] max-w-[100vw] px-4 lg:px-0 z-10">
<div className={css['glass-wrapper']}>
<p className="text-slate-100 text-base bold lg:text-xl">Why Devcon is for You</p>
<p className="text-slate-100 mt-4 text-lg" ref={sections[1].ref}>
<p className="text-slate-100 mt-4 text-lg" ref={sectionRefs[1]}>
Devcon is the Ethereum conference for developers, thinkers, and makers. You’ll meet the smartest and
kindest people in the Ethereum ecosystem IRL, and gain insight into a unique culture that is challenging
to fully understand just online.
Expand Down Expand Up @@ -474,7 +474,7 @@ const Hero = (props: any) => {
<div className={css['glass-wrapper']}>
<p className="text-slate-100 text-base bold lg:text-xl">What is the Road to Devcon?</p>

<p className="text-slate-100 mt-4 text-lg" ref={sections[2].ref}>
<p className="text-slate-100 mt-4 text-lg" ref={sectionRefs[2]}>
The Road to Devcon (RTD) is a series of Ethereum events and educational initiatives leading up to
Devcon, organized by the active local communities in Southeast Asia.
</p>
Expand Down Expand Up @@ -527,7 +527,7 @@ const Hero = (props: any) => {
Become a leader: Organize an event or start a community
</p>

<p className="text-slate-100 mt-4 lg:text-lg" ref={sections[3].ref}>
<p className="text-slate-100 mt-4 lg:text-lg" ref={sectionRefs[3]}>
If you're in SEA, community-driven, and passionate about Ethereum's positive impact, we're here to
support you! This is your call to adventure, to be part of something bigger, something wilder.
</p>
Expand Down Expand Up @@ -652,35 +652,40 @@ const Gallery = React.memo(() => {
// title="ROAD TO DEVCON"
images={[
{
alt: 'About 1',
alt: 'Community 1',
src: Gal1,
},
{
alt: 'About 2',
alt: 'Community 2',
src: Gal2,
},
{
alt: 'About 3',
alt: 'Community 3',
src: Gal3,
},
{
alt: 'About 4',
alt: 'Community 4',
src: Gal4,
},
{
alt: 'Community 5',
src: Gal5,
},
]}
/>
</div>
)
})

export default pageHOC(function RoadToDevcon(props: any) {
const { data } = useTina<PagesQuery>(props.cms)
const { data: grantsData } = useTina<PagesQuery>(props.grantsCms)
const pages = data.pages as PagesRoad_To_Devcon
const grantsPages = grantsData.pages as PagesIndex
const controlsRef = useRef<any>()
const SlideControls = ({ sectionRefs, controlsRef, goToSection }: any) => {
const [showDragIndicator, setShowDragIndicator] = React.useState(true)

const sections = sectionRefs.map((ref: any) => {
return useIntersectionRatio(ref, {
root: 'intersection-root',
})
})

useEffect(() => {
controlsRef.current.subscribeX((x: any) => {
if (x > 100) {
Expand All @@ -691,46 +696,86 @@ export default pageHOC(function RoadToDevcon(props: any) {
})
}, [controlsRef.current])

const sections = [
useIntersectionRatio({
root: 'intersection-root',
}),
useIntersectionRatio({
root: 'intersection-root',
}),
useIntersectionRatio({
root: 'intersection-root',
}),
useIntersectionRatio({
root: 'intersection-root',
}),
]

const ratios = sections.map(section => parseFloat(section.intersectionRatio))
const highestRatio = Math.max(...ratios)
const currentSlide =
highestRatio === 0 ? -1 : sections.findIndex(section => section.intersectionRatio === highestRatio)

const goToSection = (index: number) => {
if (!sections[index]) return
useKeyBinding(() => goToSection(currentSlide - 1), ['ArrowLeft'])
useKeyBinding(() => goToSection(currentSlide + 1), ['ArrowRight'])

window.scrollTo(0, 0)
return (
<div className="section py-2 flex w-full relative z-10">
<div className="flex justify-between items-center lg:justify-center">
<div className="flex items-center justify-center bg-slate-700 lg:bg-opacity-30 rounded shadow lg:hover:bg-opacity-100 transition-all select-none">
<div
className={`text-xs cursor-pointer px-2 py-2 pr-3 ${currentSlide === 0 && 'opacity-20'}`}
onClick={() => goToSection(currentSlide - 1)}
>
<IconChevronLeft />
</div>

// We need to know how far the element is from the side of the screen to align with the rest of the content
// The calculations are quite complicated so we'll left curve it and look at a piece of content that respects the layout and match its padding to the side
const padding = (() => {
const randomBoundedElement = document.getElementById('dont-remove-me-the-hero-needs-me')
<p className="text-sm lg:text-base">
<span className="bold">0{currentSlide + 1}</span> / 0{sections.length}
</p>

return randomBoundedElement?.offsetLeft || 0
})()
<div
className={`text-xs cursor-pointer px-2 py-2 pl-3 ${currentSlide === sections.length - 1 && 'opacity-20'}`}
onClick={() => goToSection(currentSlide + 1)}
>
<IconChevronRight />
</div>
</div>

const offsetLeft = sections[index].ref.current.offsetLeft
<motion.div
className={`lg:!hidden ${css['drag-to-continue']} bg-slate-700 text-sm rounded shadow py-1 px-4 self-end lg:self-start`}
animate={{ opacity: showDragIndicator ? '100%' : '0%', x: showDragIndicator ? '0%' : '-10%' }}
transition={{ bounceDamping: 100, duration: 0.8, type: 'tween' }}
>
<p className="pr-1">
<span>Drag or use arrow keys to continue</span>
<span>Swipe to continue</span>
</p>
<CircleArrowRightIcon className={`icon ${css['circle-arrow-right-icon']}`} />
</motion.div>
</div>
</div>
)
}

controlsRef.current.setX(offsetLeft - padding)
}
export default pageHOC(function RoadToDevcon(props: any) {
const { data } = useTina<PagesQuery>(props.cms)
const { data: grantsData } = useTina<PagesQuery>(props.grantsCms)
const pages = data.pages as PagesRoad_To_Devcon
const grantsPages = grantsData.pages as PagesIndex
const controlsRef = useRef<any>()
const sections: any = [useRef(), useRef(), useRef(), useRef()]

useKeyBinding(() => goToSection(currentSlide - 1), ['ArrowLeft'])
useKeyBinding(() => goToSection(currentSlide + 1), ['ArrowRight'])
const goToSection = React.useMemo(() => {
return (index: number) => {
if (!sections[index]) return

window.scrollTo(0, 0)

// We need to know how far the element is from the side of the screen to align with the rest of the content
// The calculations are quite complicated so we'll left curve it and look at a piece of content that respects the layout and match its padding to the side
const padding = (() => {
const randomBoundedElement = document.getElementById('dont-remove-me-the-hero-needs-me')

return randomBoundedElement?.offsetLeft || 0
})()

const offsetLeft = sections[index].current.offsetLeft

controlsRef.current.setX(offsetLeft - padding)
}
}, [])

const showDragIndicator = true

const SlideControlsMemo = React.useMemo(() => {
return () => <SlideControls sectionRefs={sections} controlsRef={controlsRef} goToSection={goToSection} />
}, [...sections])

return (
<>
Expand All @@ -739,47 +784,7 @@ export default pageHOC(function RoadToDevcon(props: any) {
<PageHero
className={css['page-hero']}
path={[{ text: <span className="bold">Get Involved</span> }, { text: 'Road To Devcon' }]}
renderCustomNavigation={() => {
return (
<div className="section py-2 flex w-full relative z-10">
<div className="flex justify-between items-center lg:justify-center">
<div className="flex items-center justify-center bg-slate-700 lg:bg-opacity-30 rounded shadow lg:hover:bg-opacity-100 transition-all select-none">
<div
className={`text-xs cursor-pointer px-2 py-2 pr-3 ${currentSlide === 0 && 'opacity-20'}`}
onClick={() => goToSection(currentSlide - 1)}
>
<IconChevronLeft />
</div>

<p className="text-sm lg:text-base">
<span className="bold">0{currentSlide + 1}</span> / 0{sections.length}
</p>

<div
className={`text-xs cursor-pointer px-2 py-2 pl-3 ${
currentSlide === sections.length - 1 && 'opacity-20'
}`}
onClick={() => goToSection(currentSlide + 1)}
>
<IconChevronRight />
</div>
</div>

<motion.div
className={`lg:!hidden ${css['drag-to-continue']} bg-slate-700 text-sm rounded shadow py-1 px-4 self-end lg:self-start`}
animate={{ opacity: showDragIndicator ? '100%' : '0%', x: showDragIndicator ? '0%' : '-10%' }}
transition={{ bounceDamping: 100, duration: 0.8, type: 'tween' }}
>
<p className="pr-1">
<span>Drag or use arrow keys to continue</span>
<span>Swipe to continue</span>
</p>
<CircleArrowRightIcon className={`icon ${css['circle-arrow-right-icon']}`} />
</motion.div>
</div>
</div>
)
}}
renderCustomNavigation={SlideControlsMemo}
navigation={[
{
title: 'Journey',
Expand Down Expand Up @@ -823,7 +828,7 @@ export default pageHOC(function RoadToDevcon(props: any) {
>
<Hero
controlsRef={controlsRef}
sections={sections}
sectionRefs={sections}
showDragIndicator={showDragIndicator}
goToSection={goToSection}
/>
Expand Down

0 comments on commit 50aa1d2

Please sign in to comment.