fix: don't prefetch as links enter viewport

This commit is contained in:
iCrawl
2022-08-26 12:00:25 +02:00
parent 13baf75cae
commit 682e0e1802
9 changed files with 19 additions and 19 deletions

View File

@@ -15,7 +15,7 @@ export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
{tokens.map((token, idx) => { {tokens.map((token, idx) => {
if (token.path) { if (token.path) {
return ( return (
<Link key={idx} href={token.path} passHref> <Link key={idx} href={token.path} passHref prefetch={false}>
<Anchor component="a" inherit> <Anchor component="a" inherit>
{token.text} {token.text}
</Anchor> </Anchor>

View File

@@ -6,7 +6,7 @@ export function InheritanceText({ data }: { data: InheritanceData }) {
return ( return (
<Text weight={600}> <Text weight={600}>
{'Inherited from '} {'Inherited from '}
<Link href={data.path} passHref> <Link href={data.path} passHref prefetch={false}>
<Anchor component="a" className="font-mono"> <Anchor component="a" className="font-mono">
{data.parentName} {data.parentName}
</Anchor> </Anchor>

View File

@@ -116,7 +116,7 @@ export function SidebarItems({
.map((group, idx) => ( .map((group, idx) => (
<Section key={idx} title={group} icon={resolveIcon(group)}> <Section key={idx} title={group} icon={resolveIcon(group)}>
{groupItems[group].map((member, i) => ( {groupItems[group].map((member, i) => (
<Link key={i} href={member.path} passHref> <Link key={i} href={member.path} passHref prefetch={false}>
<NavLink <NavLink
className={classes.link} className={classes.link}
component="a" component="a"

View File

@@ -195,7 +195,7 @@ export function SidebarLayout({
const breadcrumbs = useMemo( const breadcrumbs = useMemo(
() => () =>
asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => ( asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref> <Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref prefetch={false}>
<Anchor component="a" sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}> <Anchor component="a" sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}>
{path} {path}
</Anchor> </Anchor>
@@ -317,7 +317,7 @@ export function SidebarLayout({
</MediaQuery> </MediaQuery>
</Box> </Box>
<Group> <Group>
<Link href="https://github.com/discordjs/discord.js" passHref> <Link href="https://github.com/discordjs/discord.js" passHref prefetch={false}>
<ActionIcon <ActionIcon
component="a" component="a"
target="_blank" target="_blank"
@@ -356,7 +356,7 @@ export function SidebarLayout({
> >
<Container> <Container>
<Box className={classes.links}> <Box className={classes.links}>
<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref> <Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" prefetch={false}>
<a title="Vercel"> <a title="Vercel">
<Image <Image
src="/powered-by-vercel.svg" src="/powered-by-vercel.svg"
@@ -371,12 +371,12 @@ export function SidebarLayout({
<Stack spacing={8}> <Stack spacing={8}>
<Title order={4}>Community</Title> <Title order={4}>Community</Title>
<Stack spacing={0}> <Stack spacing={0}>
<Link href="https://discord.gg/djs" passHref> <Link href="https://discord.gg/djs" passHref prefetch={false}>
<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
Discord Discord
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://github.com/discordjs/discord.js/discussions" passHref> <Link href="https://github.com/discordjs/discord.js/discussions" passHref prefetch={false}>
<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
GitHub discussions GitHub discussions
</Anchor> </Anchor>
@@ -386,17 +386,17 @@ export function SidebarLayout({
<Stack spacing={8}> <Stack spacing={8}>
<Title order={4}>Project</Title> <Title order={4}>Project</Title>
<Stack spacing={0}> <Stack spacing={0}>
<Link href="https://github.com/discordjs/discord.js" passHref> <Link href="https://github.com/discordjs/discord.js" passHref prefetch={false}>
<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord.js discord.js
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://discordjs.guide" passHref> <Link href="https://discordjs.guide" passHref prefetch={false}>
<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord.js guide discord.js guide
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://discord-api-types.dev" passHref> <Link href="https://discord-api-types.dev" passHref prefetch={false}>
<Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord-api-types discord-api-types
</Anchor> </Anchor>

View File

@@ -41,7 +41,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (codeDestination) { if (codeDestination) {
return ( return (
<Link key={idx} href={codeDestination.path} passHref> <Link key={idx} href={codeDestination.path} passHref prefetch={false}>
<Anchor component="a" className="font-mono"> <Anchor component="a" className="font-mono">
{text ?? codeDestination.name} {text ?? codeDestination.name}
</Anchor> </Anchor>
@@ -51,7 +51,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (urlDestination) { if (urlDestination) {
return ( return (
<Link key={idx} href={urlDestination} passHref> <Link key={idx} href={urlDestination} passHref prefetch={false}>
<Anchor component="a" className="font-mono"> <Anchor component="a" className="font-mono">
{text ?? urlDestination} {text ?? urlDestination}
</Anchor> </Anchor>

View File

@@ -29,7 +29,7 @@ export default function FourOhFourPage() {
<Box className={classes.label}>404</Box> <Box className={classes.label}>404</Box>
<Title align="center">Not found.</Title> <Title align="center">Not found.</Title>
<Group position="center"> <Group position="center">
<Link href="/docs/packages" passHref> <Link href="/docs/packages" passHref prefetch={false}>
<Button component="a" variant="filled" size="md" mt="xl"> <Button component="a" variant="filled" size="md" mt="xl">
Take me back Take me back
</Button> </Button>

View File

@@ -107,7 +107,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
Select a version: Select a version:
</Title> </Title>
{props.data?.versions.map((version) => ( {props.data?.versions.map((version) => (
<Link key={version} href={`/docs/packages/${props.packageName!}/${version}`} passHref> <Link key={version} href={`/docs/packages/${props.packageName!}/${version}`} passHref prefetch={false}>
<UnstyledButton className={classes.control} component="a"> <UnstyledButton className={classes.control} component="a">
<Group position="apart"> <Group position="apart">
<Group> <Group>

View File

@@ -43,7 +43,7 @@ export default function PackagesRoute() {
Select a package: Select a package:
</Title> </Title>
{PACKAGES.map((pkg) => ( {PACKAGES.map((pkg) => (
<Link key={pkg} href={`/docs/packages/${pkg}`} passHref> <Link key={pkg} href={`/docs/packages/${pkg}`} passHref prefetch={false}>
<UnstyledButton className={classes.control} component="a"> <UnstyledButton className={classes.control} component="a">
<Group position="apart"> <Group position="apart">
<Group> <Group>

View File

@@ -76,12 +76,12 @@ export default function IndexRoute() {
</Text> </Text>
<Group mt={30}> <Group mt={30}>
<Link href="/docs" passHref> <Link href="/docs" passHref prefetch={false}>
<Button component="a" radius="sm" size="md"> <Button component="a" radius="sm" size="md">
Docs Docs
</Button> </Button>
</Link> </Link>
<Link href="https://discordjs.guide" passHref> <Link href="https://discordjs.guide" passHref prefetch={false}>
<Button component="a" variant="default" radius="sm" size="md" rightIcon={<FiExternalLink />}> <Button component="a" variant="default" radius="sm" size="md" rightIcon={<FiExternalLink />}>
Guide Guide
</Button> </Button>
@@ -116,7 +116,7 @@ await client.login('token');`}
</Box> </Box>
</Box> </Box>
<Center> <Center>
<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"> <Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" prefetch={false}>
<a title="Vercel"> <a title="Vercel">
<Image <Image
src="/powered-by-vercel.svg" src="/powered-by-vercel.svg"