diff --git a/site/components/Anchor.js b/site/components/Anchor.js index 0faf460..da9815f 100644 --- a/site/components/Anchor.js +++ b/site/components/Anchor.js @@ -3,30 +3,36 @@ import { useRouter } from 'next/router' import { Tooltip } from './Tooltip'; import siteConfig from '../config/siteConfig.js' - +/** + * Component for adding previews on hover for specific anchor tags. + * Note: currently tooltips will be displayed only for anchor tags pointing to concepts. + */ export const Anchor = (props) => { const { href } = props; const router = useRouter(); - const absoluteContentPath = (href) => { - // return content path only if it points to a local file (href path is relative) - if ( - href && + /* Check if the url is relative */ + const urlIsRelative = (url) => { + return href && href.indexOf("http:") !== 0 && href.indexOf("https:") !== 0 - ) { - const currentPageContentPath = [siteConfig.rawContentBaseUrl, router.asPath].join(""); - const hrefContentPath = new URL(href, currentPageContentPath).href; - // excluding notes and claims - if (!hrefContentPath.includes("notes") && !hrefContentPath.includes("claims")) { - return hrefContentPath; - } - } } - if (absoluteContentPath(props.href)) { + /* Return absolute path to raw markdown content + * Note: currently disabled for guide page due to non-standard relative paths in some anchors (TBD) */ + const getRawMdContentUrl = (url, routerPath) => { + if (routerPath === '/guide' || !urlIsRelative(url)) { + return null + } + const currentPageMdUrl = [siteConfig.rawContentBaseUrl, routerPath].join(""); + return new URL(href, currentPageMdUrl).href; + } + + const rawMdUrl = getRawMdContentUrl(href, router.asPath); + + if (rawMdUrl && !rawMdUrl.includes("notes") && !rawMdUrl.includes("claims")) { return ( - ( + ( )} /> diff --git a/site/components/Tooltip.js b/site/components/Tooltip.js index bf320e6..217d2ac 100644 --- a/site/components/Tooltip.js +++ b/site/components/Tooltip.js @@ -55,7 +55,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => { const [ showTooltip, setShowTooltip ] = useState(false); const [ tooltipContent, setTooltipContent ] = useState(""); const [ tooltipContentLoaded, setTooltipContentLoaded ] = useState(false); - // floating-ui dom hook + // floating-ui hook const { x, y, @@ -76,7 +76,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => { inline(), // correct position for multiline anchor tags ] }); - // floating-ui interactions hook + // floating-ui hook const { getReferenceProps, getFloatingProps } = useInteractions([ useHover(context, { delay: 100 }), useFocus(context), @@ -84,7 +84,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => { useDismiss(context, { ancestorScroll: true }), ]); - const tooltipTriggerProps = getReferenceProps({ ...props, ref: reference}); + const triggerElementProps = getReferenceProps({ ...props, ref: reference}); const tooltipProps = getFloatingProps({ ref: floating, style: { @@ -124,7 +124,7 @@ export const Tooltip = ({ absolutePath, render, ...props }) => { return ( - { render(tooltipTriggerProps) } + { render(triggerElementProps) } { showTooltip && tooltipContentLoaded &&