53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
import { useEffect, useState } from "react"
|
|
import Link from 'next/link';
|
|
import { Tooltip } from './Tooltip';
|
|
/**
|
|
* Component for adding previews on hovering over anchor tags with relative paths
|
|
*/
|
|
export const Anchor = (props) => {
|
|
/* Check if the path is relative */
|
|
const pathIsRelative = (path) => {
|
|
return path &&
|
|
path.indexOf("http:") !== 0 &&
|
|
path.indexOf("https:") !== 0
|
|
}
|
|
|
|
const href = props.href.endsWith(".md")
|
|
? props.href.replace(".md", "")
|
|
: props.href;
|
|
|
|
const [ path, setPath ] = useState(href)
|
|
|
|
useEffect(() => {
|
|
let isMount = true
|
|
if (isMount) {
|
|
const link = document.createElement("a")
|
|
link.href = href
|
|
setPath(link.pathname)
|
|
}
|
|
return () => {
|
|
setPath(href)
|
|
isMount = false
|
|
}
|
|
},[])
|
|
|
|
if (pathIsRelative(href)) {
|
|
if (href.indexOf("#") !== 0) {
|
|
return (
|
|
<Tooltip {...props} href={href} render={ tooltipTriggerProps => (
|
|
<Link href={path}>
|
|
<a {...tooltipTriggerProps} href={path} />
|
|
</Link>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
return (
|
|
<Link href={href}>
|
|
<a {...props} />
|
|
</Link>
|
|
)
|
|
}
|
|
return <a target="_blank" rel="noopener" {...props} />;
|
|
};
|