allow headings contain links

.changeset/brown-cats-deliver.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+allow headings contain links

packages/nextra-theme-blog/src/mdx-theme.tsx

@@ -36,14 +36,15 @@ const createHeaderLink =
   ({ children, id, ...props }: ComponentProps<'h2'>): ReactElement => {
     return (
       <Tag className={`subheading-${Tag}`} {...props}>
-        <span className="subheading-anchor -mt-8" id={id} />
-        <a href={`#${id}`}>{children}</a>
+        {children}
+        <span className="absolute -mt-7" id={id} />
+        <a href={`#${id}`} className="subheading-anchor" />
       </Tag>
     )
   }
 
 const A = ({ children, ...props }: ComponentProps<'a'>) => {
-  const isExternal = props.href && props.href.startsWith('https://')
+  const isExternal = props.href?.startsWith('https://')
   if (isExternal) {
     return (
       <a target="_blank" rel="noreferrer" {...props}>

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -85,7 +85,7 @@ const createHeaderLink = (
     ...props
   }: ComponentProps<'h2'>): ReactElement {
     setActiveAnchor ??= useSetActiveAnchor()
-    const obRef = useRef<HTMLSpanElement>(null)
+    const obRef = useRef<HTMLAnchorElement>(null)
 
     useEffect(() => {
       const heading = obRef.current
@@ -119,8 +119,9 @@ const createHeaderLink = (
         )}
         {...props}
       >
-        <span className="subheading-anchor -mt-20" id={id} ref={obRef} />
-        <a href={`#${id}`}>{children}</a>
+        {children}
+        <span className="absolute -mt-20" id={id} ref={obRef} />
+        <a href={`#${id}`} className="subheading-anchor" />
       </Tag>
     )
   }

packages/nextra/styles/subheading-anchor.css

@@ -1,18 +1,17 @@
 .subheading-anchor {
-  @apply absolute;
+  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
 
-  & + a {
-    @apply text-current no-underline hover:after:opacity-100;
+  span:target + &,
+  :hover > & {
+    @apply no-underline opacity-100;
   }
 
-  & + a:after {
-    @apply absolute /* for not including # in focus ring border */;
-    @apply content-['#'] text-gray-300 px-2 opacity-0 transition-opacity;
-    @apply dark:text-neutral-700;
-  }
-
-  &:target + a:after {
-    @apply text-gray-400 opacity-100;
-    @apply dark:text-neutral-500;
+  &:after {
+    @apply content-['#'] px-1;
+    @apply text-gray-300 dark:text-neutral-700;
+    span:target + & {
+      @apply text-gray-400;
+      @apply dark:text-neutral-500;
+    }
   }
 }