Update rehype anchor heading stylings

Author: webstackdev

src/components/Breadcrumbs/index.astro

@@ -42,7 +42,7 @@ const breadcrumbSchema =
           {breadcrumbs.map((item, i) => (
             <li class="flex items-center">
               {i > 0 && (
-                <span class="w-6 h-px border-t-2 border-dashed border-page-inverse" />
+                <span class="w-4 h-px border-t-2 border-dashed border-page-inverse" />
               )}
               {item.isCurrentPage ? (
                 <span aria-current="page" class="rounded px-2 py-1 text-xs text-content-inverse bg-page-inverse">

src/components/Layout/HeadingAnchor/index.astro

@@ -15,7 +15,7 @@ const { href } = Astro.props
   tabindex="-1"
 >
   <span
-    class="inline-block ml-[0.2rem] opacity-0 -translate-y-1 transition-opacity duration-200 ease-in-out [h1:hover_&]:opacity-100 [h2:hover_&]:opacity-100 [h3:hover_&]:opacity-100 [h4:hover_&]:opacity-100 [h5:hover_&]:opacity-100 [h6:hover_&]:opacity-100 group-focus-visible:opacity-100"
+    class="inline-block ml-[0.2rem] opacity-0 -translate-x-1 transition-opacity duration-200 ease-in-out [h1:hover_&]:opacity-100 [h2:hover_&]:opacity-100 [h3:hover_&]:opacity-100 [h4:hover_&]:opacity-100 [h5:hover_&]:opacity-100 [h6:hover_&]:opacity-100 group-focus-visible:opacity-100"
     aria-hidden="true"
   >
     <Icon icon="link" size={6} color="page-inverse" classes="" />

src/lib/markdown/__tests__/e2e/full-pipeline.spec.tsx

@@ -36,7 +36,7 @@ describe('Layer 4: E2E - Full Pipeline Integration', () => {
       expect(html).toContain('class="blockquote') // Blockquote attribution/caption
       expect(html).toContain('❤️') // Emoji
       expect(html).toContain('href="https://www.webstackbuilders.com"') // Auto-linking
-      expect(html).toContain('class="anchor-link') // Anchor headings
+      expect(html).toContain('opacity-0') // Anchor headings (span wrapper)
 
       // Check accessibility
       const results = await axe(container)
@@ -87,18 +87,17 @@ describe('Layer 4: E2E - Full Pipeline Integration', () => {
     it('should ensure heading anchor links are accessible', async () => {
       const { container } = render(<MarkdownOutput html={html} />)
 
-      // Find anchor links - these are <a> tags inside headings that contain .anchor-link spans
-      // Query for headings that contain anchor links
+      // Find anchor links — heading <a> elements with the `group` class
       const headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6')
       const headingsWithAnchors = Array.from(headings).filter(
-        (h: Element) => h.querySelector('.anchor-link') !== null
+        (h: Element) => h.querySelector('a.group') !== null
       )
 
       expect(headingsWithAnchors.length).toBeGreaterThan(0)
 
       headingsWithAnchors.forEach((heading: Element) => {
-        // Find the <a> tag (parent of .anchor-link span)
-        const anchorLink = heading.querySelector('a')
+        // Find the heading anchor <a> tag
+        const anchorLink = heading.querySelector('a.group')
         expect(anchorLink).toBeTruthy()
 
         // Should have href pointing to the heading ID

src/lib/markdown/__tests__/e2e/rehype-autolink-headings.spec.tsx

@@ -108,6 +108,6 @@ describe('Layer 3: E2E - rehypeAutolinkHeadings', () => {
     expect(headingAnchor?.getAttribute('aria-label')).toBeTruthy()
 
     // The icon itself should remain hidden from screen readers
-    expect(html).toMatch(/class=["'][^"']*anchor-link[^"']*["'][^>]*aria-hidden=["']true["']/)
+    expect(html).toMatch(/class="[^"]*inline-block[^"]*"[^>]*aria-hidden="true"/)
   })
 })

src/lib/markdown/__tests__/integration/rehype-autolink-headings-astro.spec.ts

@@ -20,9 +20,9 @@ describe('rehype-autolink-headings (Layer 2: With Astro Pipeline)', () => {
       })
 
       expect(html).toContain('<h2')
-      expect(html).toContain('🔗')
-      expect(html).toContain('class="anchor-link')
-      expect(html).toContain('class="heading-anchor')
+      expect(html).toContain('<svg')
+      expect(html).toContain('inline-block')
+      expect(html).toContain('group')
       expect(html).toContain('<table')
     })
 
@@ -37,7 +37,7 @@ describe('rehype-autolink-headings (Layer 2: With Astro Pipeline)', () => {
 
       expect(html).toContain('<h2')
       expect(html).toContain('<del>Old</del>')
-      expect(html).toContain('🔗')
+      expect(html).toContain('<svg')
     })
 
     it('should work with GFM autolinks in headings', async () => {
@@ -51,7 +51,7 @@ describe('rehype-autolink-headings (Layer 2: With Astro Pipeline)', () => {
 
       expect(html).toContain('<h2')
       expect(html).toContain('href="https://example.com"')
-      expect(html).toContain('🔗')
+      expect(html).toContain('<svg')
     })
   })
 
@@ -70,7 +70,7 @@ describe('rehype-autolink-headings (Layer 2: With Astro Pipeline)', () => {
       })
 
       expect(html).toContain('<h2')
-      expect(html).toContain('🔗')
+      expect(html).toContain('<svg')
       expect(html).toContain('footnote')
     })
 
@@ -112,7 +112,7 @@ Content[^1]
         stage: 'rehype',
       })
 
-      const anchorCount = (html.match(/class="anchor-link\b/g) || []).length
+      const anchorCount = (html.match(/opacity-0/g) || []).length
       expect(anchorCount).toBe(4) // All 4 headings should have anchors
     })
 
@@ -129,7 +129,7 @@ Content[^1]
       expect(html).toContain('<strong>Bold</strong>')
       expect(html).toContain('<del>Strike</del>')
       expect(html).toContain('<code>code</code>')
-      expect(html).toContain('🔗')
+      expect(html).toContain('<svg')
     })
   })
 })

src/lib/markdown/__tests__/integration/rehype-tailwind-astro.spec.ts

@@ -200,11 +200,11 @@ Paragraph with a [regular link](https://example.com)
 
       const html = await processWithFullPipeline(markdown)
 
-      // Heading anchors are created by rehype-autolink-headings and should be styled via its config.
-      expect(html).toContain('class="heading-anchor')
-      // Regular links should not be marked as heading anchors.
+      // Heading anchors are created by rehype-autolink-headings with a `group` class.
+      expect(html).toContain('group')
+      // Regular links should not have the heading anchor `group` class.
       expect(html).toContain('href="https://example.com"')
-      expect(html).not.toMatch(/href="https:\/\/example\.com"[^>]*class="[^"]*heading-anchor/)
+      expect(html).not.toMatch(/href="https:\/\/example\.com"[^>]*class="[^"]*group/)
     })
   })
 })

src/lib/markdown/plugins/rehype-autolink-headings/__tests__/index.spec.ts

@@ -16,10 +16,11 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
     expect(html).toContain('<h1')
     expect(html).toContain('<a')
     expect(html).toContain('href="#')
-    expect(html).toContain('class="heading-anchor')
+    expect(html).toContain('group')
+    expect(html).toContain('no-underline')
   })
 
-  it('should use the hard-coded emoji anchor content', async () => {
+  it('should use an inline SVG link icon as anchor content', async () => {
     const markdown = '## Section Title'
 
     const html = await processIsolated({
@@ -29,8 +30,10 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
       slugify: true,
     })
 
-    expect(html).toContain('🔗')
-    expect(html).toContain('class="anchor-link')
+    expect(html).toContain('<svg')
+    expect(html).toContain('<path')
+    expect(html).toContain('inline-block')
+    expect(html).toContain('opacity-0')
   })
 
   it('should set aria-hidden on anchor content span', async () => {
@@ -59,7 +62,7 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
     expect(html).toContain('aria-label="Link to this section"')
   })
 
-  it('should add no-underline classes to the anchor link', async () => {
+  it('should add group and transition classes to the anchor link', async () => {
     const markdown = '## Styled Heading'
 
     const html = await processIsolated({
@@ -69,6 +72,7 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
       slugify: true,
     })
 
+    expect(html).toContain('group')
     expect(html).toContain('no-underline')
     expect(html).toContain('transition-colors')
   })
@@ -95,7 +99,7 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
     expect(html).toContain('<h5')
     expect(html).toContain('<h6')
 
-    const anchorCount = (html.match(/class="anchor-link\b/g) || []).length
+    const anchorCount = (html.match(/opacity-0/g) || []).length
     expect(anchorCount).toBe(6)
   })
 
@@ -110,7 +114,8 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
     })
 
     expect(html).toContain('<h1')
-    expect(html).not.toContain('class="heading-anchor')
+    expect(html).not.toContain('group')
+    expect(html).not.toContain('<svg')
   })
 
   it('should handle headings with code', async () => {
@@ -125,7 +130,7 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
 
     expect(html).toContain('<h2')
     expect(html).toContain('<code>')
-    expect(html).toContain('🔗')
+    expect(html).toContain('<svg')
   })
 
   it('should handle multiple headings with the same text', async () => {
@@ -140,7 +145,7 @@ describe('rehype-autolink-headings plugin (Layer 1: Isolated)', () => {
       slugify: true,
     })
 
-    const anchorCount = (html.match(/class="anchor-link\b/g) || []).length
+    const anchorCount = (html.match(/opacity-0/g) || []).length
     expect(anchorCount).toBe(3)
   })
 })

src/lib/markdown/plugins/rehype-autolink-headings/index.ts

@@ -4,39 +4,89 @@
  * This is a project-owned fork of `rehype-autolink-headings` with all
  * configuration hard-coded for our site. There are no user-facing options.
  *
- * Behavior: append an `<a>` after the heading text containing a link-icon
- * `<span>`. Classes on the `<a>` and `<span>` support the project's
- * heading-anchor hover/focus styles.
+ * Behavior: append an `<a>` after the heading text containing a link SVG icon
+ * wrapped in a `<span>`. The markup and classes exactly mirror the Astro
+ * `HeadingAnchor` component so both sources produce identical output.
  */
 import { headingRank } from 'hast-util-heading-rank'
 import { SKIP, visit } from 'unist-util-visit'
 import type { ElementContent, Element, Root } from 'hast'
 
 /**
  * Properties set on the injected `<a>` element.
- * These classes let us style heading anchors independently from the generic
- * `<a>` handling in rehypeTailwindClasses.
+ * Mirrors: `<a class="group transition-colors no-underline …" …>` in HeadingAnchor.
  */
 const linkProperties = {
   className: [
-    'heading-anchor',
+    'group',
+    'transition-colors',
     'no-underline',
     'hover:no-underline',
     'focus-visible:no-underline',
-    'transition-colors',
+    'ml-1.5',
   ],
   ariaLabel: 'Link to this section',
+  tabIndex: -1,
 }
 
-/** The `<span>` content inserted inside each heading anchor link. */
+/**
+ * The inline SVG for the link icon (from src/components/Icon/icons/link.astro).
+ * Rendered with size=6 and color=page-inverse.
+ */
+const linkSvg: Element = {
+  type: 'element',
+  tagName: 'svg',
+  properties: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: ['shrink-0', 'w-6', 'h-6', 'text-page-inverse'],
+    fill: 'none',
+    stroke: 'currentColor',
+    viewBox: '0 0 24 24',
+    ariaHidden: 'true',
+    focusable: 'false',
+  },
+  children: [
+    {
+      type: 'element',
+      tagName: 'path',
+      properties: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: '2',
+        d: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
+      },
+      children: [],
+    },
+  ],
+}
+
+/**
+ * The `<span>` wrapper for the icon, with hover/focus opacity classes.
+ * Mirrors the `<span>` in HeadingAnchor/index.astro.
+ */
 const anchorContent: Element = {
   type: 'element',
   tagName: 'span',
   properties: {
-    className: ['anchor-link', 'text-base', 'sm:text-lg'],
+    className: [
+      'inline-block',
+      'ml-[0.2rem]',
+      'opacity-0',
+      '-translate-x-1',
+      'transition-opacity',
+      'duration-200',
+      'ease-in-out',
+      '[h1:hover_&]:opacity-100',
+      '[h2:hover_&]:opacity-100',
+      '[h3:hover_&]:opacity-100',
+      '[h4:hover_&]:opacity-100',
+      '[h5:hover_&]:opacity-100',
+      '[h6:hover_&]:opacity-100',
+      'group-focus-visible:opacity-100',
+    ],
     ariaHidden: 'true',
   },
-  children: [{ type: 'text', value: '🔗' }],
+  children: [linkSvg],
 }
 
 /**

src/lib/markdown/plugins/rehype-tailwind/index.ts

@@ -175,7 +175,7 @@ export function rehypeTailwindClasses() {
         node.tagName === 'a' &&
         node.properties &&
         !hasClass(node, 'btn') &&
-        !hasClass(node, 'heading-anchor')
+        !hasClass(node, 'group')
       ) {
         node.properties['className'] = ((node.properties['className'] as string[]) || []).concat([
           'focus-visible:outline-none',
@@ -201,6 +201,7 @@ export function rehypeTailwindClasses() {
         node.properties['className'] = ((node.properties['className'] as string[]) || []).concat([
           'relative',
           'my-6',
+          'text-page-inverse',
           /**
            * Remove top margin from first child element of headings since we're
            * controlling bottom margin here.