1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
/*
* Copyright (c) Facebook, Inc. and its affiliates.
* Copyright (c) 2023 Kristóf Marussy <kristof@marussy.com>
*
* SPDX-License-Identifier: MIT
*
* This file was derived from
* https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
* via the `swizzle` mechanism of Docusaurus.
*
* It was modified to correctly track the change of the active anchor
* when `setHash` from `@site/src/components/ActiveSectionProvider` is called.
*/
import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import isInternalUrl from '@docusaurus/isInternalUrl';
import { isRegexpStringMatch } from '@docusaurus/theme-common';
import IconExternalLink from '@theme/Icon/ExternalLink';
import { useActiveSection } from '@site/src/components/ActiveSectionProvider';
export default function NavbarNavLink({
activeBasePath,
activeBaseRegex,
to,
href,
label,
html,
isDropdownLink,
prependBaseUrlToHref,
...props
}) {
const { hash: activeSectionHash } = useActiveSection();
// TODO all this seems hacky
// {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
const toUrl = useBaseUrl(to);
// Check whether the target URL has a hash.
const hashMatch = toUrl?.match(/#.+$/);
const activeBaseUrl = useBaseUrl(activeBasePath);
const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
const isExternalLink = label && href && !isInternalUrl(href);
// Link content is set through html XOR label
const linkContentProps = html
? { dangerouslySetInnerHTML: { __html: html } }
: {
children: (
<>
{label}
{isExternalLink && (
<IconExternalLink
{...(isDropdownLink && { width: 12, height: 12 })}
/>
)}
</>
),
};
if (href) {
return (
<Link
href={prependBaseUrlToHref ? normalizedHref : href}
{...props}
{...linkContentProps}
/>
);
}
return (
<Link
to={toUrl}
isNavLink
{...((activeBasePath || activeBaseRegex || hashMatch) && {
isActive: (_match, location) => {
if (activeBaseRegex) {
return isRegexpStringMatch(activeBaseRegex, location.pathname);
}
if (activeBaseUrl) {
return location.pathname.startsWith(activeBaseUrl);
}
// Make sure to only highlight links with a hash when hash also matches.
return (
!hashMatch || hashMatch[0] === (activeSectionHash ?? location.hash)
);
},
})}
{...props}
{...linkContentProps}
/>
);
}
|
