@fullstackdatasolutions/articles 0.5.1 → 0.7.0

package/src/__tests__/articlesConfig.test.ts

@@ -0,0 +1,57 @@
+import { DEFAULT_PAGE_SIZE, DEFAULT_CATEGORIES_PAGE_SIZE, DEFAULT_LAYOUT } from '../articlesConfig'
+
+describe('articlesConfig constants', () => {
+  describe('DEFAULT_PAGE_SIZE', () => {
+    it('exports DEFAULT_PAGE_SIZE as 6', () => {
+      expect(DEFAULT_PAGE_SIZE).toBe(6)
+    })
+
+    it('is a number', () => {
+      expect(typeof DEFAULT_PAGE_SIZE).toBe('number')
+    })
+  })
+
+  describe('DEFAULT_CATEGORIES_PAGE_SIZE', () => {
+    it('exports DEFAULT_CATEGORIES_PAGE_SIZE as 8', () => {
+      expect(DEFAULT_CATEGORIES_PAGE_SIZE).toBe(8)
+    })
+
+    it('is a number', () => {
+      expect(typeof DEFAULT_CATEGORIES_PAGE_SIZE).toBe('number')
+    })
+  })
+
+  describe('DEFAULT_LAYOUT', () => {
+    it('is an array', () => {
+      expect(Array.isArray(DEFAULT_LAYOUT)).toBe(true)
+    })
+
+    it('contains hero, search, featured, latest, categories in order', () => {
+      expect(DEFAULT_LAYOUT).toEqual(['hero', 'search', 'featured', 'latest', 'categories'])
+    })
+
+    it('has 5 entries', () => {
+      expect(DEFAULT_LAYOUT).toHaveLength(5)
+    })
+
+    it('includes hero', () => {
+      expect(DEFAULT_LAYOUT).toContain('hero')
+    })
+
+    it('includes search', () => {
+      expect(DEFAULT_LAYOUT).toContain('search')
+    })
+
+    it('includes featured', () => {
+      expect(DEFAULT_LAYOUT).toContain('featured')
+    })
+
+    it('includes latest', () => {
+      expect(DEFAULT_LAYOUT).toContain('latest')
+    })
+
+    it('includes categories', () => {
+      expect(DEFAULT_LAYOUT).toContain('categories')
+    })
+  })
+})

package/src/__tests__/markdown.test.ts

@@ -0,0 +1,278 @@
+// All unified-ecosystem packages are ESM-only and cannot be loaded by ts-jest's
+// CommonJS transform. Mock them before importing markdown.ts.
+jest.mock('rehype-prism-plus', () => () => () => {})
+jest.mock('rehype-sanitize', () => () => () => {})
+jest.mock('rehype-slug', () => () => () => {})
+jest.mock('rehype-stringify', () => () => () => {})
+jest.mock('remark-gfm', () => () => () => {})
+jest.mock('remark-github-blockquote-alert', () => () => () => {})
+jest.mock('remark-parse', () => () => () => {})
+jest.mock('remark-rehype', () => () => () => {})
+
+// Mock remark() to return a chainable processor whose .process() resolves to ''
+jest.mock('remark', () => {
+  const makeChain = (): Record<string, unknown> => {
+    const chain: Record<string, unknown> = {
+      use: () => chain,
+      process: async () => ({ toString: () => '' }),
+    }
+    return chain
+  }
+  return { remark: makeChain }
+})
+
+// Provide a real depth-first visit implementation so customRenderer works.
+jest.mock('unist-util-visit', () => ({
+  visit(
+    tree: { children?: unknown[] },
+    type: string,
+    visitor: (node: {
+      type: string
+      tagName?: string
+      properties?: Record<string, unknown>
+      children?: unknown[]
+    }) => void
+  ) {
+    function walk(node: {
+      type: string
+      tagName?: string
+      properties?: Record<string, unknown>
+      children?: unknown[]
+    }) {
+      if (node.type === type) visitor(node)
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          walk(child as typeof node)
+        }
+      }
+    }
+    walk(tree as { type: string; children: unknown[] })
+  },
+}))
+
+import { customRenderer, markdownToHtml, extractToc } from '../markdown'
+
+// ---------------------------------------------------------------------------
+// customRenderer
+// ---------------------------------------------------------------------------
+
+type HastElement = {
+  type: 'element'
+  tagName: string
+  properties: Record<string, unknown>
+  children: HastElement[]
+}
+
+type HastRoot = {
+  type: 'root'
+  children: HastElement[]
+}
+
+function el(
+  tagName: string,
+  properties: Record<string, unknown> = {},
+  children: HastElement[] = []
+): HastElement {
+  return { type: 'element', tagName, properties, children }
+}
+
+function root(...nodes: HastElement[]): HastRoot {
+  return { type: 'root', children: nodes }
+}
+
+function runRenderer(tree: HastRoot) {
+  const transform = (customRenderer as unknown as () => (tree: HastRoot) => void)()
+  transform(tree)
+}
+
+describe('customRenderer', () => {
+  describe('heading styles', () => {
+    it('applies h1 className', () => {
+      const node = el('h1')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-20'
+      )
+    })
+
+    it('applies h2 className', () => {
+      const node = el('h2')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-20'
+      )
+    })
+
+    it('applies h3 className', () => {
+      const node = el('h3')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-xl font-semibold text-foreground mt-4 mb-2 scroll-mt-20'
+      )
+    })
+
+    it('applies h4 className', () => {
+      const node = el('h4')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-lg font-semibold text-foreground mt-3 mb-2 scroll-mt-20'
+      )
+    })
+  })
+
+  it('applies p className', () => {
+    const node = el('p')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('text-muted-foreground leading-relaxed mb-4')
+  })
+
+  it('applies ul className', () => {
+    const node = el('ul')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('list-disc list-inside mb-4 space-y-2 ml-4')
+  })
+
+  it('applies ol className', () => {
+    const node = el('ol')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('list-decimal list-inside mb-4 space-y-2 ml-4')
+  })
+
+  it('applies li className', () => {
+    const node = el('li')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('mb-1')
+  })
+
+  it('applies blockquote className', () => {
+    const node = el('blockquote')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe(
+      'border-l-4 border-primary pl-4 italic my-4 text-muted-foreground'
+    )
+  })
+
+  it('applies pre className', () => {
+    const node = el('pre')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('bg-muted rounded-lg p-4 overflow-x-auto my-4')
+  })
+
+  it('applies img className', () => {
+    const node = el('img')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('rounded-lg my-6 w-full max-w-2xl mx-auto')
+  })
+
+  it('applies table className', () => {
+    const node = el('table')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border-collapse border border-border my-4 w-full')
+  })
+
+  it('applies th className', () => {
+    const node = el('th')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border border-border px-2 py-1 bg-muted font-semibold')
+  })
+
+  it('applies td className', () => {
+    const node = el('td')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('border border-border px-2 py-1')
+  })
+
+  it('applies hr className', () => {
+    const node = el('hr')
+    runRenderer(root(node))
+    expect(node.properties.className).toBe('my-8 border-border')
+  })
+
+  describe('code element', () => {
+    it('appends to existing className', () => {
+      const node = el('code', { className: 'language-js' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'language-js bg-muted px-1 py-0.5 rounded text-sm font-mono'
+      )
+    })
+
+    it('sets className when none exists', () => {
+      const node = el('code')
+      runRenderer(root(node))
+      expect(node.properties.className).toBe('bg-muted px-1 py-0.5 rounded text-sm font-mono')
+    })
+  })
+
+  describe('anchor links', () => {
+    it('adds target="_blank" and rel to external https links', () => {
+      const node = el('a', { href: 'https://example.com' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBe('_blank')
+      expect(node.properties.rel).toBe('noopener noreferrer')
+    })
+
+    it('does NOT add target="_blank" to internal anchor links (#)', () => {
+      const node = el('a', { href: '#section-id' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBeUndefined()
+      expect(node.properties.rel).toBeUndefined()
+    })
+
+    it('does NOT add target="_blank" to any href starting with #', () => {
+      const node = el('a', { href: '#my-heading' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBeUndefined()
+    })
+
+    it('applies link className to external anchors', () => {
+      const node = el('a', { href: 'https://external.com' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-primary hover:underline transition-colors duration-200'
+      )
+    })
+
+    it('applies link className to internal anchors', () => {
+      const node = el('a', { href: '#internal' })
+      runRenderer(root(node))
+      expect(node.properties.className).toBe(
+        'text-primary hover:underline transition-colors duration-200'
+      )
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// markdownToHtml - pipeline is mocked so we only verify the function resolves
+// ---------------------------------------------------------------------------
+
+describe('markdownToHtml', () => {
+  it('returns a string', async () => {
+    const result = await markdownToHtml('# Hello')
+    expect(typeof result).toBe('string')
+  })
+
+  it('resolves without throwing for empty input', async () => {
+    await expect(markdownToHtml('')).resolves.toBeDefined()
+  })
+
+  it('resolves without throwing when articleSlug is provided', async () => {
+    await expect(markdownToHtml('![alt](photo.png)', 'my-article')).resolves.toBeDefined()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// extractToc - pipeline is mocked so we verify it returns an array
+// ---------------------------------------------------------------------------
+
+describe('extractToc', () => {
+  it('returns an array', async () => {
+    const result = await extractToc('## Hello')
+    expect(Array.isArray(result)).toBe(true)
+  })
+
+  it('resolves without throwing for empty input', async () => {
+    await expect(extractToc('')).resolves.toBeDefined()
+  })
+})

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,5 +1,6 @@
 import fs from 'node:fs'
-import { getArticleMetadata } from '../server-articles'
+import path from 'node:path'
+import { getArticleMetadata, getAvailableArticleSlugs } from '../server-articles'
 
 jest.mock('react', () => ({ cache: (fn: Function) => fn }))
 jest.mock('node:fs')
@@ -10,6 +11,14 @@ jest.mock('../markdown', () => ({
 jest.mock('reading-time', () => () => ({ text: '2 min read' }))
 
 const mockedFs = fs as jest.Mocked<typeof fs>
+const articlesDirectory = path.join(process.cwd(), 'public/articles')
+
+function mockDirectory(name: string): fs.Dirent {
+  return {
+    name,
+    isDirectory: () => true,
+  } as fs.Dirent
+}
 
 function setupArticleMock(frontmatter: string, body = 'Article body content.'): void {
   mockedFs.existsSync.mockReturnValue(true)
@@ -96,3 +105,29 @@ describe('getArticleMetadata - frontmatter parsing', () => {
     expect(article!.howTo).toBeUndefined()
   })
 })
+
+describe('getAvailableArticleSlugs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('returns slugs for article directories nested below a grouping directory', () => {
+    mockedFs.existsSync.mockImplementation((target) => {
+      const targetPath = target.toString()
+      return (
+        targetPath === articlesDirectory ||
+        targetPath === path.join(articlesDirectory, 'game-system', 'article-name', 'article.mdx')
+      )
+    })
+    ;(mockedFs.readdirSync as jest.Mock).mockImplementation((target: fs.PathLike) => {
+      const targetPath = target.toString()
+      if (targetPath === articlesDirectory) return [mockDirectory('game-system')]
+      if (targetPath === path.join(articlesDirectory, 'game-system')) {
+        return [mockDirectory('article-name')]
+      }
+      return []
+    })
+
+    expect(getAvailableArticleSlugs()).toEqual(['game-system/article-name'])
+  })
+})

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'