mirror of
https://github.com/zen-browser/www.git
synced 2025-07-10 02:05:31 +02:00
Optimize image loading in components
This commit is contained in:
mauro 🤙
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">
|
||||
<div className="h-screen flex flex-wrap items-center justify-center">
|
||||
<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">
|
||||
Back to release notes
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
<Footer />
|
||||
<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>
|
||||
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
|
||||
{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">
|
||||
{releaseNote.version}
|
||||
</div>
|
||||
|
|
@ -24,7 +24,7 @@ export default function ReleaseNotes() {
|
|||
Alpha Release
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -219,16 +219,16 @@ export default function DownloadPage() {
|
|||
web with Zen!
|
||||
</p>
|
||||
<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
|
||||
className="ml-5"
|
||||
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
>
|
||||
Donate
|
||||
</Link>
|
||||
<Link className="ml-5" href="/release-notes/latest">
|
||||
</a>
|
||||
<a className="ml-5" href="/release-notes/latest">
|
||||
Release Notes
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
{selectedPlatform === "MacOS" && (
|
||||
<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"
|
||||
>
|
||||
System requirements
|
||||
</Link>
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -150,11 +150,11 @@ export default function Features() {
|
|||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/download">
|
||||
<a href="/download">
|
||||
<Button className="mt-4 rounded-full p-5 ml-auto">
|
||||
Download Zen now!
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</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">
|
||||
{COLORS.map((color) => (
|
||||
|
|
@ -190,11 +190,11 @@ export default function Features() {
|
|||
Killer feature
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/download">
|
||||
<a href="/download">
|
||||
<Button className="mt-4 rounded-full p-5 ml-4">
|
||||
Download Zen now!
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
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"
|
||||
>
|
||||
Source Code
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function Header() {
|
|||
id="hero"
|
||||
className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
|
||||
>
|
||||
<Link href="/download">
|
||||
<a href="/download">
|
||||
<AnimatedGradientText>
|
||||
🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "}
|
||||
<span
|
||||
|
|
@ -32,7 +32,7 @@ export default function Header() {
|
|||
</span>
|
||||
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
|
||||
</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">
|
||||
Zen is the best way
|
||||
<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
|
||||
your data.
|
||||
</p>
|
||||
<Link href="/download">
|
||||
<a href="/download">
|
||||
<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"
|
||||
>
|
||||
<span>Download Zen Now </span>
|
||||
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
<div
|
||||
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)]"
|
||||
|
|
|
|||
|
|
@ -104,6 +104,6 @@ function MobileLink({
|
|||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ export function Navigation() {
|
|||
Firefox based browser with a focus on privacy and
|
||||
customization.
|
||||
</p>
|
||||
</Link>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<ListItem href="/download" title="Download">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
|
|||
className="text-underline text-blue-500"
|
||||
>
|
||||
the issues page
|
||||
</Link>
|
||||
</a>
|
||||
. Thanks everyone for your feedback! ❤️
|
||||
</p>
|
||||
{data.extra && (
|
||||
|
|
@ -87,7 +87,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
|
|||
className="ml-1 text-blue-500"
|
||||
>
|
||||
issue #{fix.issue}
|
||||
</Link>
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -96,9 +96,9 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
|
|||
)}
|
||||
</div>
|
||||
<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>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue