mirror of
https://github.com/zen-browser/www.git
synced 2025-07-10 10:15:31 +02:00
Optimize image loading in components
This commit is contained in:
parent
62ad886e53
commit
b69f2d25e4
11 changed files with 24 additions and 54 deletions
4
.babelrc
4
.babelrc
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"presets": ["next/babel"],
|
|
||||||
"plugins": ["./babel/disable-nextjs-link-prefetching"]
|
|
||||||
}
|
|
|
@ -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"),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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 */}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)]"
|
||||||
|
|
|
@ -104,6 +104,6 @@ function MobileLink({
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</Link>
|
</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue