From 0c3193ebd0f430a5d072ca044d39cd5e929fbffd Mon Sep 17 00:00:00 2001
From: "moxey.eth" <jakemoxey@gmail.com>
Date: Sun, 12 May 2024 11:18:00 +1000
Subject: [PATCH] fix: resolves #157

---
 .changeset/silly-buttons-prove.md   |  5 +++++
 src/app/components/mdx/Autolink.tsx | 14 ++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/silly-buttons-prove.md

diff --git a/.changeset/silly-buttons-prove.md b/.changeset/silly-buttons-prove.md
new file mode 100644
index 00000000..66c3e807
--- /dev/null
+++ b/.changeset/silly-buttons-prove.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed outline slug links when a `basePath` exists.
diff --git a/src/app/components/mdx/Autolink.tsx b/src/app/components/mdx/Autolink.tsx
index edbf7eee..cbc41d86 100644
--- a/src/app/components/mdx/Autolink.tsx
+++ b/src/app/components/mdx/Autolink.tsx
@@ -1,18 +1,12 @@
 import { clsx } from 'clsx'
 import { type AnchorHTMLAttributes, type DetailedHTMLProps } from 'react'
+import { Link } from 'react-router-dom'
 
-import { useLocation } from 'react-router-dom'
 import * as styles from './Autolink.css.js'
 
 export function Autolink(
-  props: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+  props: Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, 'ref'>,
 ) {
-  const { pathname } = useLocation()
-  return (
-    <a
-      {...props}
-      className={clsx(props.className, styles.root)}
-      href={`${pathname}${props.href}`}
-    />
-  )
+  if (!props.href) return null
+  return <Link {...props} className={clsx(props.className, styles.root)} to={props.href} />
 }