@fullstackdatasolutions/articles 0.6.0 → 0.7.1

package/src/__tests__/renderMdx.test.tsx

@@ -0,0 +1,280 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+const mockEvaluate = jest.fn()
+
+jest.mock('@mdx-js/mdx', () => ({
+  evaluate: mockEvaluate,
+}))
+
+jest.mock('rehype-slug', () => () => () => {})
+jest.mock('rehype-prism-plus', () => () => () => {})
+jest.mock('remark-gfm', () => () => () => {})
+jest.mock('remark-github-blockquote-alert', () => () => () => {})
+jest.mock('../markdown', () => ({ customRenderer: () => () => {} }))
+
+const originalNodeEnv = process.env.NODE_ENV
+
+describe('renderMdxSource', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    mockEvaluate.mockReset()
+  })
+
+  afterEach(() => {
+    Object.defineProperty(process.env, 'NODE_ENV', { value: originalNodeEnv, writable: true })
+  })
+
+  it('renders an MDX article in production mode', async () => {
+    mockEvaluate.mockResolvedValue({
+      default: () => React.createElement('p', null, 'Hello MDX'),
+    })
+    Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+    const { renderMdxSource } = await import('../renderMdx')
+    const el = await renderMdxSource('# Hello')
+    const { container } = render(el as React.ReactElement)
+
+    expect(container.querySelector('p')).not.toBeNull()
+    expect(container.querySelector('p')?.textContent).toBe('Hello MDX')
+    expect(mockEvaluate).toHaveBeenCalledWith(
+      '# Hello',
+      expect.objectContaining({ development: false })
+    )
+  })
+
+  it('renders an MDX article in development mode without React dev runtime errors', async () => {
+    mockEvaluate.mockResolvedValue({
+      default: () => React.createElement('p', null, 'Hello Dev MDX'),
+    })
+    Object.defineProperty(process.env, 'NODE_ENV', { value: 'development', writable: true })
+
+    const { renderMdxSource } = await import('../renderMdx')
+    const el = await renderMdxSource('# Hello Dev')
+    const { container } = render(el as React.ReactElement)
+
+    expect(container.querySelector('p')).not.toBeNull()
+    expect(container.querySelector('p')?.textContent).toBe('Hello Dev MDX')
+    expect(mockEvaluate).toHaveBeenCalledWith(
+      '# Hello Dev',
+      expect.objectContaining({ development: true })
+    )
+  })
+
+  it('passes production runtime (jsx/jsxs) when NODE_ENV is production', async () => {
+    mockEvaluate.mockResolvedValue({ default: () => React.createElement('span', null) })
+    Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+    const { renderMdxSource } = await import('../renderMdx')
+    await renderMdxSource('# Test')
+
+    const callArgs = mockEvaluate.mock.calls[0][1]
+    expect(callArgs).not.toHaveProperty('jsxDEV')
+    expect(callArgs).toHaveProperty('jsx')
+  })
+
+  it('passes dev runtime (jsxDEV) when NODE_ENV is development', async () => {
+    mockEvaluate.mockResolvedValue({ default: () => React.createElement('span', null) })
+    Object.defineProperty(process.env, 'NODE_ENV', { value: 'development', writable: true })
+
+    const { renderMdxSource } = await import('../renderMdx')
+    await renderMdxSource('# Test')
+
+    const callArgs = mockEvaluate.mock.calls[0][1]
+    expect(callArgs).toHaveProperty('jsxDEV')
+    expect(callArgs).not.toHaveProperty('jsx')
+  })
+
+  describe('inline JSX style rendering', () => {
+    it('renders inline color style on a JSX heading', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: () => React.createElement('h2', { style: { color: 'red' } }, 'Colored Heading'),
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource('<h2 style={{ color: "red" }}>Colored Heading</h2>')
+      const { container } = render(el as React.ReactElement)
+
+      const h2 = container.querySelector('h2')
+      expect(h2).not.toBeNull()
+      expect(h2?.style.color).toBe('red')
+      expect(h2?.textContent).toBe('Colored Heading')
+    })
+
+    it('preserves multiple inline style properties', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: () =>
+          React.createElement(
+            'h3',
+            { style: { color: 'blue', fontWeight: 'bold' } },
+            'Styled Heading'
+          ),
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource(
+        '<h3 style={{ color: "blue", fontWeight: "bold" }}>Styled Heading</h3>'
+      )
+      const { container } = render(el as React.ReactElement)
+
+      const h3 = container.querySelector('h3')
+      expect(h3?.style.color).toBe('blue')
+      expect(h3?.style.fontWeight).toBe('bold')
+    })
+  })
+
+  describe('anchor link rendering', () => {
+    it('renders heading with id for internal anchor navigation', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: () =>
+          React.createElement(
+            'div',
+            null,
+            React.createElement('h2', { id: 'my-heading' }, 'My Heading'),
+            React.createElement('a', { href: '#my-heading' }, 'Jump to heading')
+          ),
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource('## My Heading\n\n[Jump to heading](#my-heading)')
+      const { container } = render(el as React.ReactElement)
+
+      const heading = container.querySelector('h2#my-heading')
+      expect(heading).not.toBeNull()
+      expect(heading?.textContent).toBe('My Heading')
+
+      const link = container.querySelector('a[href="#my-heading"]')
+      expect(link).not.toBeNull()
+      expect(link?.textContent).toBe('Jump to heading')
+    })
+
+    it('supports multiple headings with unique ids for in-page navigation', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: () =>
+          React.createElement(
+            'div',
+            null,
+            React.createElement('h2', { id: 'section-one' }, 'Section One'),
+            React.createElement('h2', { id: 'section-two' }, 'Section Two'),
+            React.createElement('a', { href: '#section-one' }, 'Go to one'),
+            React.createElement('a', { href: '#section-two' }, 'Go to two')
+          ),
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource(
+        '## Section One\n\n## Section Two\n\n[Go to one](#section-one) [Go to two](#section-two)'
+      )
+      const { container } = render(el as React.ReactElement)
+
+      expect(container.querySelector('h2#section-one')).not.toBeNull()
+      expect(container.querySelector('h2#section-two')).not.toBeNull()
+      expect(container.querySelector('a[href="#section-one"]')).not.toBeNull()
+      expect(container.querySelector('a[href="#section-two"]')).not.toBeNull()
+    })
+  })
+
+  describe('basePath image resolution', () => {
+    it('resolves relative img src to absolute path when basePath is provided', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: ({
+          components,
+        }: {
+          components?: Record<string, React.ComponentType<unknown>>
+        }) => {
+          const Img = components?.img as React.ComponentType<
+            React.ImgHTMLAttributes<HTMLImageElement>
+          >
+          return Img
+            ? React.createElement(Img, { src: 'photo.png', alt: 'test' })
+            : React.createElement('img', { src: 'photo.png', alt: 'test' })
+        },
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource('![test](photo.png)', '/articles/my-article')
+      const { container } = render(el as React.ReactElement)
+
+      const img = container.querySelector('img')
+      expect(img).not.toBeNull()
+      expect(img?.getAttribute('src')).toBe('/articles/my-article/photo.png')
+    })
+
+    it('does not modify absolute src when basePath is provided', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: ({
+          components,
+        }: {
+          components?: Record<string, React.ComponentType<unknown>>
+        }) => {
+          const Img = components?.img as React.ComponentType<
+            React.ImgHTMLAttributes<HTMLImageElement>
+          >
+          return Img
+            ? React.createElement(Img, { src: '/already/absolute.png', alt: 'test' })
+            : React.createElement('img', { src: '/already/absolute.png', alt: 'test' })
+        },
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource('![test](/already/absolute.png)', '/articles/my-article')
+      const { container } = render(el as React.ReactElement)
+
+      const img = container.querySelector('img')
+      expect(img?.getAttribute('src')).toBe('/already/absolute.png')
+    })
+
+    it('does not modify http src when basePath is provided', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: ({
+          components,
+        }: {
+          components?: Record<string, React.ComponentType<unknown>>
+        }) => {
+          const Img = components?.img as React.ComponentType<
+            React.ImgHTMLAttributes<HTMLImageElement>
+          >
+          return Img
+            ? React.createElement(Img, { src: 'https://example.com/img.png', alt: 'test' })
+            : React.createElement('img', { src: 'https://example.com/img.png', alt: 'test' })
+        },
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource(
+        '![test](https://example.com/img.png)',
+        '/articles/my-article'
+      )
+      const { container } = render(el as React.ReactElement)
+
+      const img = container.querySelector('img')
+      expect(img?.getAttribute('src')).toBe('https://example.com/img.png')
+    })
+
+    it('does not inject img component when basePath is not provided', async () => {
+      let capturedComponents: Record<string, unknown> | undefined
+      mockEvaluate.mockResolvedValue({
+        default: ({ components }: { components?: Record<string, unknown> }) => {
+          capturedComponents = components
+          return React.createElement('span', null)
+        },
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      await renderMdxSource('# Test')
+
+      expect(capturedComponents).toBeUndefined()
+    })
+  })
+})

package/src/__tests__/server-articles.test.ts

@@ -1,6 +1,16 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import { getArticleMetadata, getAvailableArticleSlugs } from '../server-articles'
+import {
+  categoryToSlug,
+  getAdjacentArticles,
+  getAllArticles,
+  getAllCategories,
+  getArticleMetadata,
+  getArticlesByCategory,
+  getAvailableArticleSlugs,
+  sanitizeImagePath,
+  searchArticles,
+} from '../server-articles'
 
 jest.mock('react', () => ({ cache: (fn: Function) => fn }))
 jest.mock('node:fs')
@@ -28,6 +38,58 @@ function setupArticleMock(frontmatter: string, body = 'Article body content.'):
   ;(mockedFs.readdirSync as jest.Mock).mockReturnValue([])
 }
 
+interface MockArticle {
+  readonly slug: string
+  readonly frontmatter: string
+  readonly body?: string
+  readonly contentType?: 'md' | 'mdx'
+  readonly files?: readonly string[]
+}
+
+function setupArticleTreeMock(articles: readonly MockArticle[]): void {
+  const articleMap = new Map(articles.map((article) => [article.slug, article]))
+  const directoryChildren = new Map<string, Set<string>>()
+  const articleFilePaths = new Map<string, MockArticle>()
+
+  directoryChildren.set(articlesDirectory, new Set())
+
+  for (const article of articles) {
+    const segments = article.slug.split('/')
+    let currentDir = articlesDirectory
+    segments.forEach((segment, index) => {
+      if (!directoryChildren.has(currentDir)) directoryChildren.set(currentDir, new Set())
+      directoryChildren.get(currentDir)!.add(segment)
+      currentDir = path.join(currentDir, segment)
+      if (index < segments.length - 1 && !directoryChildren.has(currentDir)) {
+        directoryChildren.set(currentDir, new Set())
+      }
+    })
+
+    const extension = article.contentType === 'mdx' ? 'article.mdx' : 'article.md'
+    articleFilePaths.set(path.join(articlesDirectory, article.slug, extension), article)
+  }
+
+  mockedFs.existsSync.mockImplementation((target) => {
+    const targetPath = target.toString()
+    return targetPath === articlesDirectory || articleFilePaths.has(targetPath)
+  })
+
+  mockedFs.readFileSync.mockImplementation((target) => {
+    const article = articleFilePaths.get(target.toString())
+    if (!article) throw new Error(`Unexpected file read: ${target.toString()}`)
+    return `---\ntitle: ${article.slug}\nexcerpt: Excerpt for ${article.slug}\nauthor: Test Author\n${article.frontmatter}---\n\n${article.body ?? 'Article body content.'}`
+  })
+  ;(mockedFs.readdirSync as jest.Mock).mockImplementation((target: fs.PathLike) => {
+    const targetPath = target.toString()
+    const children = directoryChildren.get(targetPath)
+    if (!children) {
+      const slug = path.relative(articlesDirectory, targetPath)
+      return articleMap.get(slug)?.files ?? []
+    }
+    return Array.from(children).map(mockDirectory)
+  })
+}
+
 describe('getArticleMetadata - frontmatter parsing', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -130,4 +192,251 @@ describe('getAvailableArticleSlugs', () => {
 
     expect(getAvailableArticleSlugs()).toEqual(['game-system/article-name'])
   })
+
+  it('continues walking inside directories that are also articles', () => {
+    mockedFs.existsSync.mockImplementation((target) => {
+      const targetPath = target.toString()
+      return (
+        targetPath === articlesDirectory ||
+        targetPath === path.join(articlesDirectory, 'tov', 'article.md') ||
+        targetPath ===
+          path.join(articlesDirectory, 'tov', 'subdirectory', 'article-name', 'article.md')
+      )
+    })
+    ;(mockedFs.readdirSync as jest.Mock).mockImplementation((target: fs.PathLike) => {
+      const targetPath = target.toString()
+      if (targetPath === articlesDirectory) return [mockDirectory('tov')]
+      if (targetPath === path.join(articlesDirectory, 'tov')) {
+        return [mockDirectory('subdirectory')]
+      }
+      if (targetPath === path.join(articlesDirectory, 'tov', 'subdirectory')) {
+        return [mockDirectory('article-name')]
+      }
+      return []
+    })
+
+    expect(getAvailableArticleSlugs()).toEqual(['tov', 'tov/subdirectory/article-name'])
+  })
+
+  it('returns an empty list when the articles directory is missing', () => {
+    mockedFs.existsSync.mockReturnValue(false)
+
+    expect(getAvailableArticleSlugs()).toEqual([])
+  })
+})
+
+describe('article collection utilities', () => {
+  const originalEnv = process.env.NODE_ENV
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'test',
+      configurable: true,
+    })
+  })
+
+  afterAll(() => {
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: originalEnv,
+      configurable: true,
+    })
+  })
+
+  it('loads articles, resolves metadata defaults, filters future articles, and sorts by date', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'first',
+        frontmatter: 'date: 2025-01-02\ntags:\n  - Civic Tech\nfeaturedImage: hero.png\n',
+        files: ['hero.png'],
+      },
+      {
+        slug: 'second',
+        frontmatter: 'date: 2025-01-03\ntags:\n  - Campaigns\n',
+        files: ['cover.webp'],
+      },
+      {
+        slug: 'future',
+        frontmatter: 'date: 2999-01-01\ntags:\n  - Future\n',
+      },
+    ])
+
+    const articles = await getAllArticles()
+
+    expect(articles.map((article) => article.slug)).toEqual(['second', 'first'])
+    expect(articles[0]).toEqual(
+      expect.objectContaining({
+        title: 'second',
+        date: '2025-01-03',
+        author: 'Test Author',
+        category: 'Campaigns',
+        categories: ['Campaigns'],
+        featuredImage: '/articles/second/cover.webp',
+        contentType: 'md',
+        draft: false,
+      })
+    )
+    expect(articles[1].featuredImage).toBe('/articles/first/hero.png')
+  })
+
+  it('keeps draft articles outside production and filters them in production', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'draft',
+        frontmatter: 'date: 2025-01-01\ndraft: true\n',
+      },
+    ])
+
+    await expect(getAllArticles()).resolves.toHaveLength(1)
+
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'production',
+      configurable: true,
+    })
+
+    await expect(getAllArticles()).resolves.toEqual([])
+  })
+
+  it('returns adjacent articles based on sorted article order', async () => {
+    setupArticleTreeMock([
+      { slug: 'oldest', frontmatter: 'date: 2025-01-01\n' },
+      { slug: 'middle', frontmatter: 'date: 2025-01-02\n' },
+      { slug: 'newest', frontmatter: 'date: 2025-01-03\n' },
+    ])
+
+    await expect(getAdjacentArticles('middle')).resolves.toEqual({
+      previous: expect.objectContaining({ slug: 'oldest' }),
+      next: expect.objectContaining({ slug: 'newest' }),
+    })
+    await expect(getAdjacentArticles('missing')).resolves.toEqual({ previous: null, next: null })
+  })
+
+  it('searches articles by title, excerpt, author, category, and tag', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'civic-article',
+        frontmatter: 'date: 2025-01-01\ntags:\n  - Civic Tech\n  - voting-tools\n',
+        body: 'Civic body',
+      },
+      {
+        slug: 'organizing-article',
+        frontmatter: 'date: 2025-01-02\ntags:\n  - Field Ops\n',
+        body: 'Organizing body',
+      },
+    ])
+
+    await expect(searchArticles('')).resolves.toHaveLength(2)
+    await expect(searchArticles('civic')).resolves.toEqual([
+      expect.objectContaining({ slug: 'civic-article' }),
+    ])
+    await expect(searchArticles('field ops')).resolves.toEqual([
+      expect.objectContaining({ slug: 'organizing-article' }),
+    ])
+    await expect(searchArticles('voting-tools')).resolves.toEqual([
+      expect.objectContaining({ slug: 'civic-article' }),
+    ])
+  })
+
+  it('groups categories and filters articles by category slug', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'one',
+        frontmatter: 'date: 2025-01-01\ntags:\n  - Civic Tech\n',
+        files: ['one.jpg'],
+      },
+      {
+        slug: 'two',
+        frontmatter: 'date: 2025-01-02\ntags:\n  - Civic Tech\n  - Field Ops\n',
+      },
+    ])
+
+    await expect(getAllCategories()).resolves.toEqual([
+      expect.objectContaining({ name: 'Civic Tech', slug: 'civic-tech', count: 2 }),
+      expect.objectContaining({ name: 'Field Ops', slug: 'field-ops', count: 1 }),
+    ])
+    await expect(getArticlesByCategory('field-ops')).resolves.toEqual([
+      expect.objectContaining({ slug: 'two' }),
+    ])
+  })
+})
+
+describe('getArticleMetadata - content handling', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('loads markdown articles with rendered html content and toc', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'markdown-article',
+        frontmatter:
+          'date: 2025-01-01\nlastmod: 2025-01-05\ntags:\n  - Civic Tech\nfeaturedImage: nested/hero.png\n',
+        body: '## Heading\n\nMarkdown body',
+      },
+    ])
+
+    const article = await getArticleMetadata('markdown-article')
+
+    expect(article).toEqual(
+      expect.objectContaining({
+        slug: 'markdown-article',
+        htmlContent: '<p>content</p>',
+        mdxSource: undefined,
+        date: '2025-01-01',
+        lastmod: '2025-01-05',
+        featuredImage: '/articles/markdown-article/nested/hero.png',
+        toc: [],
+      })
+    )
+  })
+
+  it('loads mdx articles as source instead of rendered html', async () => {
+    setupArticleTreeMock([
+      {
+        slug: 'mdx-article',
+        contentType: 'mdx',
+        frontmatter: 'date: 2025-01-01\n',
+        body: '<Component />',
+      },
+    ])
+
+    const article = await getArticleMetadata('mdx-article')
+
+    expect(article).toEqual(
+      expect.objectContaining({
+        slug: 'mdx-article',
+        contentType: 'mdx',
+        htmlContent: undefined,
+      })
+    )
+    expect(article?.mdxSource?.trim()).toBe('<Component />')
+  })
+
+  it('returns null when article file loading fails', async () => {
+    mockedFs.existsSync.mockReturnValue(true)
+    mockedFs.readFileSync.mockImplementation(() => {
+      throw new Error('read failed')
+    })
+
+    await expect(getArticleMetadata('broken')).resolves.toBeNull()
+  })
+})
+
+describe('article path helpers', () => {
+  it('sanitizes image paths and rejects unsafe values', () => {
+    expect(sanitizeImagePath('image.png', 'article')).toBe('/articles/article/image.png')
+    expect(sanitizeImagePath('nested/image.png', 'article')).toBe(
+      '/articles/article/nested/image.png'
+    )
+    expect(sanitizeImagePath('https://example.com/image.png', 'article')).toBe(
+      'https://example.com/image.png'
+    )
+    expect(sanitizeImagePath('../secret.png', 'article')).toBeNull()
+    expect(sanitizeImagePath('/secret.png', 'article')).toBeNull()
+    expect(sanitizeImagePath('bad image.png', 'article')).toBeNull()
+  })
+
+  it('creates normalized category slugs', () => {
+    expect(categoryToSlug('Civic Tech & Field Ops')).toBe('civic-tech--field-ops')
+  })
 })

package/src/articlesConfig.ts

@@ -98,6 +98,8 @@ export interface ArticlesConfig {
   description?: string
   /** Set to false to hide the table of contents on article detail pages. Default: true. */
   showToc?: boolean
+  /** Set to false to hide the "Back to Articles" navigation link on article detail pages. Default: true. */
+  showBackToArticles?: boolean
 }
 
 export const DEFAULT_PAGE_SIZE = 6

package/src/index.ts

@@ -21,6 +21,7 @@ export {
 
 export { ArticleSocialShare } from './ArticleSocialShare'
 export { ArticleNavigation } from './ArticleNavigation'
+export { ArticleBackLink } from './ArticleBackLink'
 export { ArticleTOC } from './ArticleTOC'
 export { ScrollToTop } from './ScrollToTop'
 

package/src/markdown.ts

@@ -1,5 +1,4 @@
 import type { Element, Root, ElementContent } from 'hast'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrism from 'rehype-prism-plus'
 import rehypeSanitize from 'rehype-sanitize'
 import rehypeSlug from 'rehype-slug'
@@ -157,7 +156,7 @@ function processFootnotesSection(node: Element): void {
   if (node.properties) node.properties.className = undefined
 }
 
-const customRenderer: Plugin<[], Root> = () => {
+export const customRenderer: Plugin<[], Root> = () => {
   return (tree: Root) => {
     // First pass: Apply general styles
     visit(tree, 'element', (node: Element) => {
@@ -180,11 +179,15 @@ const customRenderer: Plugin<[], Root> = () => {
           case 'p':
             props.className = 'text-muted-foreground leading-relaxed mb-4'
             break
-          case 'a':
+          case 'a': {
             props.className = 'text-primary hover:underline transition-colors duration-200'
-            props.target = '_blank'
-            props.rel = 'noopener noreferrer'
+            const href = typeof props.href === 'string' ? props.href : ''
+            if (!href.startsWith('#')) {
+              props.target = '_blank'
+              props.rel = 'noopener noreferrer'
+            }
             break
+          }
           case 'ul':
             props.className = 'list-disc list-inside mb-4 space-y-2 ml-4'
             break
@@ -268,7 +271,6 @@ export async function markdownToHtml(markdown: string, articleSlug?: string) {
       .use(remarkRehype)
       .use(customRenderer)
       .use(rehypeSlug)
-      .use(rehypeAutolinkHeadings, { behavior: 'wrap' })
       // @ts-ignore
       .use(rehypePrism)
       .use(rehypeSanitize, {