Update styles on heading anchor links

Author: webstackdev

_TODO.md

@@ -128,16 +128,19 @@ Need a tooltip component for consistency. List to add tooltips to:
 
 ## Support Pages to Style
 
-- /offline
+- /
 - /404
-- Bug reporter modal
-- /search
+- /about
 - /consent
+- /contact
+- /downloads/[slug]
+- /newsletter/confirm/[token]
+- /offline
 - /privacy
+- /privacy/my-data
+- /search
 - /tags/[tag]
-- /about
-- /contact
-- /
+- Bug reporter modal
 
 ## Image generation models
 

src/components/Layout/Markdown/Tags/index.astro

@@ -58,7 +58,7 @@ const resolveTagMeta = (rawTag: string) => {
             href={href}
             rel="tag"
             itemprop="keywords"
-            class="uppercase inline-block pr-2 sm:pr-3 py-0.5 text-xs sm:text-sm no-underline transition-colors hover:text-secondary focus:bg-spotlight focus:text-secondary"
+            class="uppercase inline-block pr-2 sm:pr-3 py-0.5 text-xs sm:text-sm no-underline transition-colors hover:text-secondary focus-visible:px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight focus-visible:text-secondary"
           >
             {label}
           </a>

src/components/Test/Demo.mdx

@@ -5,4 +5,4 @@
  */
 ---
 
-Just some included text.
+And a [link]('/about') to included text.

src/content/articles/demo/index.mdx

@@ -13,7 +13,7 @@ import Demo from '@components/Test/Demo.mdx'
 
 ## Components
 
-### Includes from other Markdown files
+### Includes from [other Markdown]('/articles/demo') files
 
 ```markdown
 import Demo from '@components/Test/Demo.mdx'
@@ -23,12 +23,6 @@ import Demo from '@components/Test/Demo.mdx'
 
 <Demo />
 
-### Search
-
-import SearchBar from '@components/Search/SearchBar/index.astro'
-
-<SearchBar />
-
 ### Avatar Component
 
 ```markdown

src/lib/config/markdown.ts

@@ -186,11 +186,24 @@ export const rehypeMermaidConfig = {
 /** rehype-autolink-headings plugin */
 export const rehypeAutolinkHeadingsConfig: RehypeAutolinkHeadingsOptions = {
   behavior: 'append',
+  /**
+   * Set explicit classes on the injected <a> so we can style heading anchors
+   * independently from the generic <a> handling in rehypeTailwindClasses.
+   */
+  properties: {
+    className: [
+      'heading-anchor',
+      'no-underline',
+      'hover:no-underline',
+      'focus-visible:no-underline',
+      'transition-colors',
+    ],
+  },
   content: {
     type: 'element',
     tagName: 'span',
     properties: {
-      className: 'anchor-link',
+      className: ['anchor-link', 'text-md', 'sm:text-lg'],
       ariaHidden: 'true',
     },
     children: [

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

@@ -23,7 +23,8 @@ 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="anchor-link')
+      expect(html).toContain('class="heading-anchor')
       expect(html).toContain('<table')
     })
 
@@ -118,7 +119,7 @@ Content[^1]
         stage: 'rehype',
       })
 
-      const anchorCount = (html.match(/class="anchor-link"/g) || []).length
+      const anchorCount = (html.match(/class="anchor-link\b/g) || []).length
       expect(anchorCount).toBe(4) // All 4 headings should have anchors
     })
 

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

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { rehypeTailwindClasses } from '@lib/markdown/plugins/rehype-tailwind'
-import { processWithAstroSettings } from '@lib/markdown/helpers/processors'
+import { processWithAstroSettings, processWithFullPipeline } from '@lib/markdown/helpers/processors'
 
 describe('rehype-tailwind-classes (Layer 2: With Astro Pipeline)', () => {
   describe('Tailwind classes with GFM', () => {
@@ -63,6 +63,8 @@ describe('rehype-tailwind-classes (Layer 2: With Astro Pipeline)', () => {
 
       expect(html).toContain('<a')
       expect(html).toContain('https://example.com')
+      expect(html).toContain('hover:decoration-content-active')
+      expect(html).toContain('focus-visible:outline-none')
     })
   })
 
@@ -151,5 +153,21 @@ Content text
       expect(html).toContain('<h1')
       expect(html).toContain('Content text')
     })
+
+    it('should not apply generic link classes to heading anchors', async () => {
+      const markdown = `
+## Components
+
+Paragraph with a [regular link](https://example.com)
+      `.trim()
+
+      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.
+      expect(html).toContain('href="https://example.com"')
+      expect(html).not.toMatch(/href="https:\/\/example\.com"[^>]*class="[^"]*heading-anchor/)
+    })
   })
 })

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

@@ -33,7 +33,8 @@ describe('rehype-autolink-headings (Layer 1: Isolated)', () => {
       })
 
       expect(html).toContain('🔗')
-      expect(html).toContain('class="anchor-link"')
+      expect(html).toContain('class="anchor-link')
+      expect(html).toContain('class="heading-anchor')
     })
 
     it('should add aria-hidden to anchor content', async () => {
@@ -74,7 +75,7 @@ describe('rehype-autolink-headings (Layer 1: Isolated)', () => {
       expect(html).toContain('<h6')
 
       // Should have anchor links for each
-      const anchorCount = (html.match(/class="anchor-link"/g) || []).length
+      const anchorCount = (html.match(/class="anchor-link\b/g) || []).length
       expect(anchorCount).toBe(6)
     })
   })