Skip to content

Commit

Permalink
Added lazy loading for iframes (#251)
Browse files Browse the repository at this point in the history 
https://web.dev/iframe-lazy-loading/
  • Loading branch information
@Willaiem
Willaiem committed Sep 14, 2023
2 parents af40806 + cc8140f commit 229bf87
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 177 deletions.
207 changes: 104 additions & 103 deletions src/components/DonationModal/DonationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,112 +8,113 @@ import { usePersistedState } from '../../hooks/usePersistedState'
import { DonationButton } from './DonationButton'

const DonationModal = () => {
const [donationDismissed, setDonationDismissed] = usePersistedState(
false,
'donationDismissed',
)
const [donationDismissed, setDonationDismissed] = usePersistedState(
false,
'donationDismissed',
)

const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
setDonationDismissed(true)
}
}
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
setDonationDismissed(true)
}
}

const announcementButtonClickHandler = () => {
setDonationDismissed(false)
}
const announcementButtonClickHandler = () => {
setDonationDismissed(false)
}

return (
<Dialog.Root open={!donationDismissed} onOpenChange={handleOpenChange}>
<Dialog.Trigger asChild>
<DonationButton onClick={announcementButtonClickHandler} />
</Dialog.Trigger>
<Dialog.Portal forceMount>
<AnimatePresence>
{!donationDismissed && (
<>
<Dialog.Overlay key='backdrop' asChild>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className='bg-backdrop/40 fixed inset-0 z-[5000]'
></motion.div>
</Dialog.Overlay>
<Dialog.Content asChild key='modal'>
<motion.div
key='modal'
initial={{ opacity: 0, scale: 0.8, y: '-40%', x: '-50%' }}
animate={{ opacity: 1, scale: 1, y: '-50%', x: '-50%' }}
exit={{ opacity: 0, scale: 0.5, y: '-40%', x: '-50%' }}
transition={{
delay: 0.1,
}}
className='will-change-transform ring-1 ring-basetext/10 shadow-xl z-[6000] bg-theme-base fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-3xl max-h-[85vh] p-6 overflow-hidden flex flex-col rounded-md align-baseline'
>
<Dialog.Title className='m-0 font-bold text-lg xl:text-3xl pb-1 text-theme-base w-full max-w-none'>
We need{' '}
<span className={'gradient-text font-extrabold'}>
your help
</span>
</Dialog.Title>
<div className='relative overflow-auto'>
<Dialog.Description className='text-theme-base m-0 leading-6 text-sm xl:mb-6'>
Hello! If you find value in our platform, please consider
making a small donation to help us cover the costs. Even a
few dollars can make a big difference in ensuring our
website stays accessible to everyone. Thank you for your
support!
</Dialog.Description>
<h3
className={
'p-0 gradient-text font-extrabold mt-2 mb-1 text-lg xl:text-2xl'
}
>
Why we need funding to keep our project alive
</h3>
<ol className='text-theme-base pl-5 list-decimal mb-3 text-sm xl:mb-6'>
<li className='mb-1'>
We need to pay for our domain $40 each year (sadly it
turns out that .tech domain reneval is expensive 💔)
</li>
<li className='mb-1'>
We plan to add features that will require backend
hosting: comments inside bewebdev.tech, user feedback of
invalid links and more
</li>
</ol>
<p className='text-sm text-theme-base mb-4'>
We would be very happy if we could cover at least half of
the cost of domain renewal with donations from users 💕.
</p>
<iframe
id='kofiframe'
src='https://ko-fi.com/prplblck/?hidefeed=true&widget=true&embed=true&preview=true'
className='md:min-w-[400px] m-auto max-w-full border-none h-[750px] rounded-md bg-[#ffffff] p-1 overflow-hidden'
title='prplblck'
></iframe>
</div>
<Dialog.Close asChild>
<button
className='rounded-full h-10 w-10 inline-flex items-center justify-center text-theme-base bg-theme-base absolute top-[10px] right-[10px] cursor-pointer shadow-md motion-safe:hover:scale-125 transition ease-out p-2 hover:shadow-lg group ring-1 ring-basetext/20 motion-reduce:hover:ring-basetext/60'
aria-label='Close'
>
<Cross2Icon
width='100%'
height='100%'
className='motion-safe:group-hover:rotate-90 transition duration-700'
/>
</button>
</Dialog.Close>
</motion.div>
</Dialog.Content>
</>
)}
</AnimatePresence>
</Dialog.Portal>
</Dialog.Root>
)
return (
<Dialog.Root open={!donationDismissed} onOpenChange={handleOpenChange}>
<Dialog.Trigger asChild>
<DonationButton onClick={announcementButtonClickHandler} />
</Dialog.Trigger>
<Dialog.Portal forceMount>
<AnimatePresence>
{!donationDismissed && (
<>
<Dialog.Overlay key='backdrop' asChild>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className='fixed inset-0 z-[5000] bg-backdrop/40'
></motion.div>
</Dialog.Overlay>
<Dialog.Content asChild key='modal'>
<motion.div
key='modal'
initial={{ opacity: 0, scale: 0.8, y: '-40%', x: '-50%' }}
animate={{ opacity: 1, scale: 1, y: '-50%', x: '-50%' }}
exit={{ opacity: 0, scale: 0.5, y: '-40%', x: '-50%' }}
transition={{
delay: 0.1,
}}
className='fixed left-1/2 top-1/2 z-[6000] flex max-h-[85vh] w-[90vw] max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-md bg-theme-base p-6 align-baseline shadow-xl ring-1 ring-basetext/10 will-change-transform'
>
<Dialog.Title className='m-0 w-full max-w-none pb-1 text-lg font-bold text-theme-base xl:text-3xl'>
We need{' '}
<span className={'gradient-text font-extrabold'}>
your help
</span>
</Dialog.Title>
<div className='relative overflow-auto'>
<Dialog.Description className='m-0 text-sm leading-6 text-theme-base xl:mb-6'>
Hello! If you find value in our platform, please consider
making a small donation to help us cover the costs. Even a
few dollars can make a big difference in ensuring our
website stays accessible to everyone. Thank you for your
support!
</Dialog.Description>
<h3
className={
'gradient-text mb-1 mt-2 p-0 text-lg font-extrabold xl:text-2xl'
}
>
Why we need funding to keep our project alive
</h3>
<ol className='mb-3 list-decimal pl-5 text-sm text-theme-base xl:mb-6'>
<li className='mb-1'>
We need to pay for our domain $40 each year (sadly it
turns out that .tech domain reneval is expensive 💔)
</li>
<li className='mb-1'>
We plan to add features that will require backend
hosting: comments inside bewebdev.tech, user feedback of
invalid links and more
</li>
</ol>
<p className='mb-4 text-sm text-theme-base'>
We would be very happy if we could cover at least half of
the cost of domain renewal with donations from users 💕.
</p>
<iframe
id='kofiframe'
src='https://ko-fi.com/prplblck/?hidefeed=true&widget=true&embed=true&preview=true'
className='m-auto h-[750px] max-w-full overflow-hidden rounded-md border-none bg-[#ffffff] p-1 md:min-w-[400px]'
title='prplblck'
loading='lazy'
></iframe>
</div>
<Dialog.Close asChild>
<button
className='group absolute right-[10px] top-[10px] inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-theme-base p-2 text-theme-base shadow-md ring-1 ring-basetext/20 transition ease-out hover:shadow-lg motion-safe:hover:scale-125 motion-reduce:hover:ring-basetext/60'
aria-label='Close'
>
<Cross2Icon
width='100%'
height='100%'
className='transition duration-700 motion-safe:group-hover:rotate-90'
/>
</button>
</Dialog.Close>
</motion.div>
</Dialog.Content>
</>
)}
</AnimatePresence>
</Dialog.Portal>
</Dialog.Root>
)
}

export default DonationModal
148 changes: 74 additions & 74 deletions src/components/LandingPage/VideoEmbed/VideoEmbed.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,96 +5,96 @@ const YOUTUBE_CHANNEL_ID = 'UUww1wSWy6LvZjyEEHr7ypLA'
const LATEST_VIDEO_COUNT = 3
const CHANNEL_SUBSCRIBE_LINK =
'https://www.youtube.com/@bewebdev?sub_confirmation=1'
'https://www.youtube.com/@bewebdev?sub_confirmation=1'
const getLatestVideoLink = (index: number) => {
return `https://www.youtube.com/embed?listType=playlist&list=${YOUTUBE_CHANNEL_ID}&index=${
index + 1
}`
return `https://www.youtube.com/embed?listType=playlist&list=${YOUTUBE_CHANNEL_ID}&index=${
index + 1
}`
}
---

<style lang='scss'>
section {
margin: 0 auto;
text-align: center;
margin-bottom: 2rem;
width: min(90%, 1280px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
section {
margin: 0 auto;
text-align: center;
margin-bottom: 2rem;
width: min(90%, 1280px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

h2 {
margin: 0 auto;
padding: 0;
width: 100%;
margin-bottom: 1rem;
}
h2 {
margin: 0 auto;
padding: 0;
width: 100%;
margin-bottom: 1rem;
}

.videos-wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.videos-wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.video {
flex: 1 1 300px;
width: 100%;
height: 100%;
border-radius: 4px;
margin: 1rem auto;
aspect-ratio: 16/9;
border: none;
filter: grayscale(0.8);
.video {
flex: 1 1 300px;
width: 100%;
height: 100%;
border-radius: 4px;
margin: 1rem auto;
aspect-ratio: 16/9;
border: none;
filter: grayscale(0.8);

&:hover {
filter: none;
}
}
&:hover {
filter: none;
}
}
</style>

<div class='flex items-center gap-8 flex-wrap-reverse mb-8 mt-36'>
<div class='flex-grow basis-80 shrink-0'>
<iframe class='video' src={getLatestVideoLink(0)}></iframe>
</div>
<div class='shrink-1 basis-64 grow'>
<h2 class='text-3xl font-bold mb-4'>
We record <span class='gradient-text'>code reviews</span>
</h2>
<p class='mb-5'>
We believe that code review can be the best way to learn best practices
and new ways to write code for both parties - code reviewer and code
writer
</p>
<DocsButton href={CHANNEL_SUBSCRIBE_LINK}>
Visit our YouTube channel
</DocsButton>
</div>
<div class='mb-8 mt-36 flex flex-wrap-reverse items-center gap-8'>
<div class='shrink-0 flex-grow basis-80'>
<iframe class='video' loading='lazy' src={getLatestVideoLink(0)}></iframe>
</div>
<div class='shrink-1 grow basis-64'>
<h2 class='mb-4 text-3xl font-bold'>
We record <span class='gradient-text'>code reviews</span>
</h2>
<p class='mb-5'>
We believe that code review can be the best way to learn best practices
and new ways to write code for both parties - code reviewer and code
writer
</p>
<DocsButton href={CHANNEL_SUBSCRIBE_LINK}>
Visit our YouTube channel
</DocsButton>
</div>
</div>
<div class='flex gap-4 lg:gap-8 xl:gap-14 flex-wrap w-full'>
{
Array.from({ length: LATEST_VIDEO_COUNT }).map((_, index) => {
const embedSource = getLatestVideoLink(index + 1)
return <iframe class='video' src={embedSource} />
})
}
<div class='flex w-full flex-wrap gap-4 lg:gap-8 xl:gap-14'>
{
Array.from({ length: LATEST_VIDEO_COUNT }).map((_, index) => {
const embedSource = getLatestVideoLink(index + 1)
return <iframe class='video' loading='lazy' src={embedSource} />
})
}
</div>

<script>
import { getUserIsFromPoland } from './helpers'
const isFromPoland = getUserIsFromPoland()
import { getUserIsFromPoland } from './helpers'
const isFromPoland = getUserIsFromPoland()

const removeCTAElement = () => {
const youtubeCTAElement =
document.querySelector<HTMLElement>('#youtube-cta')
if (youtubeCTAElement) youtubeCTAElement.style.display = 'none'
}
const removeCTAElement = () => {
const youtubeCTAElement =
document.querySelector<HTMLElement>('#youtube-cta')
if (youtubeCTAElement) youtubeCTAElement.style.display = 'none'
}

if (!isFromPoland) {
removeCTAElement()
}
if (!isFromPoland) {
removeCTAElement()
}
</script>

0 comments on commit 229bf87

Please sign in to comment.