Optimize image loading in components

This commit is contained in:
mauro 🤙 2024-08-27 23:18:00 +00:00
parent 62ad886e53
commit b69f2d25e4
11 changed files with 24 additions and 54 deletions

View file

@ -1,4 +0,0 @@
{
"presets": ["next/babel"],
"plugins": ["./babel/disable-nextjs-link-prefetching"]
}

View file

@ -1,26 +0,0 @@
/**
* Based on the docs at https://nextjs.org/docs/api-reference/next/link, the
* only way to disable prefetching is to make sure every <Link /> has <Link
* prefetch={false} />
*
* We don't want to create a wrapper Component or go around changing every
* single <Link />, so we use this Babel Plugin to add them in at build-time.
*/
module.exports = function (babel) {
const { types: t } = babel
return {
name: 'disable-link-prefetching',
visitor: {
JSXOpeningElement(path) {
if (path.node.name.name === 'Link') {
path.node.attributes.push(
t.jSXAttribute(
t.jSXIdentifier('prefetch'),
t.stringLiteral("force-off"),
),
)
}
},
},
}
}

View file

@ -24,11 +24,11 @@ export default function ReleaseNotePage({ params }: { params: { version: string
<main className="flex min-h-screen flex-col items-center justify-center"> <main className="flex min-h-screen flex-col items-center justify-center">
<div className="h-screen flex flex-wrap items-center justify-center"> <div className="h-screen flex flex-wrap items-center justify-center">
<h1 className="text-4xl font-bold mt-12">Release note not found</h1> <h1 className="text-4xl font-bold mt-12">Release note not found</h1>
<Link href="/release-notes"> <a href="/release-notes">
<Button className="mt-4 items-center justify-center"> <Button className="mt-4 items-center justify-center">
Back to release notes Back to release notes
</Button> </Button>
</Link> </a>
</div> </div>
<Footer /> <Footer />
<Navigation /> {/* At the bottom of the page */} <Navigation /> {/* At the bottom of the page */}

View file

@ -12,7 +12,7 @@ export default function ReleaseNotes() {
<h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1> <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10"> <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
{releaseNotes.map((releaseNote) => ( {releaseNotes.map((releaseNote) => (
<Link href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}> <a href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>
<div className="text-md font-medium mb-5"> <div className="text-md font-medium mb-5">
{releaseNote.version} {releaseNote.version}
</div> </div>
@ -24,7 +24,7 @@ export default function ReleaseNotes() {
Alpha Release Alpha Release
</div> </div>
)} )}
</Link> </a>
))} ))}
</div> </div>
</div> </div>

View file

@ -219,16 +219,16 @@ export default function DownloadPage() {
web with Zen! web with Zen!
</p> </p>
<div className="flex font-bold mt-5 items-center justify-between mx-auto"> <div className="flex font-bold mt-5 items-center justify-between mx-auto">
<Link href="https://github.com/zen-browser">Source Code</Link> <a href="https://github.com/zen-browser">Source Code</a>
<Link <Link
className="ml-5" className="ml-5"
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink" href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
> >
Donate Donate
</Link> </a>
<Link className="ml-5" href="/release-notes/latest"> <a className="ml-5" href="/release-notes/latest">
Release Notes Release Notes
</Link> </a>
</div> </div>
{selectedPlatform === "MacOS" && ( {selectedPlatform === "MacOS" && (
<div className="mt-12 flex flex-col items-start border justify-between rounded-md bg-background p-5"> <div className="mt-12 flex flex-col items-start border justify-between rounded-md bg-background p-5">
@ -557,7 +557,7 @@ export default function DownloadPage() {
className="text-blue-400" className="text-blue-400"
> >
System requirements System requirements
</Link> </a>
. .
</p> </p>
</div> </div>

View file

@ -150,11 +150,11 @@ export default function Features() {
</a> </a>
</p> </p>
</div> </div>
<Link href="/download"> <a href="/download">
<Button className="mt-4 rounded-full p-5 ml-auto"> <Button className="mt-4 rounded-full p-5 ml-auto">
Download Zen now! Download Zen now!
</Button> </Button>
</Link> </a>
</div> </div>
<div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3"> <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
{COLORS.map((color) => ( {COLORS.map((color) => (
@ -190,11 +190,11 @@ export default function Features() {
Killer feature Killer feature
</div> </div>
</div> </div>
<Link href="/download"> <a href="/download">
<Button className="mt-4 rounded-full p-5 ml-4"> <Button className="mt-4 rounded-full p-5 ml-4">
Download Zen now! Download Zen now!
</Button> </Button>
</Link> </a>
</div> </div>
<img <img
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png" src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png"

View file

@ -12,7 +12,7 @@ export default function Footer() {
className="mt-5 md:mt-0 md:ml-2 font-bold" className="mt-5 md:mt-0 md:ml-2 font-bold"
> >
Source Code Source Code
</Link> </a>
</div> </div>
); );
} }

View file

@ -20,7 +20,7 @@ export default function Header() {
id="hero" id="hero"
className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8" className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
> >
<Link href="/download"> <a href="/download">
<AnimatedGradientText> <AnimatedGradientText>
🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "} 🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "}
<span <span
@ -32,7 +32,7 @@ export default function Header() {
</span> </span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedGradientText> </AnimatedGradientText>
</Link> </a>
<h1 className="animate-fade-in -translate-y-4 text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-8xl dark:from-white dark:to-white/40"> <h1 className="animate-fade-in -translate-y-4 text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-8xl dark:from-white dark:to-white/40">
Zen is the best way Zen is the best way
<br className="hidden md:block" /> to browse the web. <br className="hidden md:block" /> to browse the web.
@ -42,14 +42,14 @@ export default function Header() {
<br className="hidden md:block" /> We care about your experience, not <br className="hidden md:block" /> We care about your experience, not
your data. your data.
</p> </p>
<Link href="/download"> <a href="/download">
<Button <Button
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black" className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
> >
<span>Download Zen Now </span> <span>Download Zen Now </span>
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" /> <ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button> </Button>
</Link> </a>
<div <div
ref={ref} ref={ref}
className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]" className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"

View file

@ -104,6 +104,6 @@ function MobileLink({
{...props} {...props}
> >
{children} {children}
</Link> </a>
) )
} }

View file

@ -76,7 +76,7 @@ export function Navigation() {
Firefox based browser with a focus on privacy and Firefox based browser with a focus on privacy and
customization. customization.
</p> </p>
</Link> </a>
</NavigationMenuLink> </NavigationMenuLink>
</li> </li>
<ListItem href="/download" title="Download"> <ListItem href="/download" title="Download">

View file

@ -20,7 +20,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
className="text-underline text-blue-500" className="text-underline text-blue-500"
> >
the issues page the issues page
</Link> </a>
. Thanks everyone for your feedback! . Thanks everyone for your feedback!
</p> </p>
{data.extra && ( {data.extra && (
@ -87,7 +87,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
className="ml-1 text-blue-500" className="ml-1 text-blue-500"
> >
issue #{fix.issue} issue #{fix.issue}
</Link> </a>
)} )}
</li> </li>
))} ))}
@ -96,9 +96,9 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
)} )}
</div> </div>
<div className="flex flex-wrap items-center justify-center"> <div className="flex flex-wrap items-center justify-center">
<Link href="/download"> <a href="/download">
<Button className="mt-12 w-fit mx-auto">Download Zen now!</Button> <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
</Link> </a>
</div> </div>
</div> </div>
); );