c7878533ed
This PR changes `<Link>` to use `prefetch={false}` in the following
components:
1. Header
2. Sidebar
3. Docs header
4. Markdown content
This means that prefetch happens on hover of the link rather than page
load, and will reduce the amount of edge requests made from the app.
## Current Behavior
<!-- This is the behavior we have today -->
## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->
Fixes #
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import Link from 'next/link';
|
|
import { BlogPostDataEntry } from '@nx/nx-dev/data-access-documents/node-only';
|
|
import { BlogAuthors } from './authors';
|
|
import Image from 'next/image';
|
|
|
|
export interface BlogEntryProps {
|
|
post: BlogPostDataEntry;
|
|
}
|
|
|
|
export function BlogEntry({ post }: BlogEntryProps) {
|
|
return (
|
|
<div className="relative flex h-full transform-gpu flex-col overflow-hidden rounded-2xl border border-slate-200 shadow transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-lg dark:border-slate-800">
|
|
{post.cover_image && (
|
|
<div className="aspect-[1.7] w-full">
|
|
<Image
|
|
quality={100}
|
|
className="h-full w-full object-cover"
|
|
src={post.cover_image}
|
|
alt={post.title}
|
|
width={1400}
|
|
height={735}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-1 p-4">
|
|
<BlogAuthors authors={post.authors} />
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
title={post.title}
|
|
className="text-balance text-lg font-semibold text-slate-900 dark:text-white"
|
|
prefetch={false}
|
|
>
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
{post.title}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|