[v3] attach heading anchor id attribute to heading (like Pagefind d…

…o) and fix heading anchor styles when `theme.typesetting: 'article'` is set (#3132)

aa

.changeset/moody-badgers-design.md

@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+attach heading anchor `id` attribute to heading (like Pagefind do) and fix heading anchor styles when `theme.typesetting: 'article'` is set

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

@@ -36,6 +36,7 @@ function HeadingLink({
 }: ComponentProps<'h2'> & { tag: `h${2 | 3 | 4 | 5 | 6}` }): ReactElement {
   return (
     <Tag
+      id={id}
       className={
         // can be added by footnotes
         className === 'sr-only' ? '_sr-only' : `subheading-${Tag}`
@@ -46,7 +47,6 @@ function HeadingLink({
       {id && (
         <a
           href={`#${id}`}
-          id={id}
           className="_not-prose subheading-anchor"
           aria-label="Permalink for this section"
         />

packages/nextra-theme-docs/css/typesetting-article.css

@@ -22,7 +22,7 @@ article.nextra-body-typesetting-article {
   pre code {
     @apply dark:_bg-transparent;
   }
-  .subheading-anchor + a {
-    @apply _no-underline hover:_no-underline after:_hidden;
+  .subheading-anchor {
+    @apply hover:_no-underline;
   }
 }

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

@@ -63,6 +63,7 @@ const createHeading = (
 
     return (
       <Tag
+        id={id}
         className={
           // can be added by footnotes
           className === 'sr-only'
@@ -84,7 +85,6 @@ const createHeading = (
         {id && (
           <a
             href={`#${id}`}
-            id={id}
             className="subheading-anchor"
             aria-label="Permalink for this section"
             ref={obRef}

packages/nextra/styles/subheading-anchor.css

@@ -1,17 +1,19 @@
 .subheading-anchor {
   @apply _opacity-0 _transition-opacity ltr:_ml-1 rtl:_mr-1;
 
-  :hover > &,
+  :target > &,
+  &:hover,
   &:focus {
     @apply _opacity-100;
   }
 
+  :target > &:after {
+    @apply _text-gray-400;
+    @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;
-    }
   }
 }