@fullstackdatasolutions/articles 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstackdatasolutions/articles",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "private": false,
   "license": "MIT",
   "funding": {

package/src/ArticleDetailHero.tsx

@@ -22,6 +22,16 @@ function toSlug(cat: string): string {
     .replaceAll(/[^a-z0-9-]/g, '')
 }
 
+function resolveAvatarUrl(author: AuthorProfile, config?: ArticlesConfig): string | null {
+  if (!author.avatar) return null
+  if (author.avatar.startsWith('http://') || author.avatar.startsWith('https://')) {
+    return author.avatar
+  }
+  if (!config?.siteUrl) return null
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  return `${siteUrl}/articles/authors/${author.slug}/${author.avatar.replace(/^\/+/, '')}`
+}
+
 export function ArticleDetailHero({
   article,
   categoryBasePath = '/articles/category',
@@ -128,25 +138,40 @@ export function ArticleDetailHero({
             <Clock className="h-4 w-4" />
             <span>{article.readTime}</span>
           </div>
-          {showConfiguredAuthors && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <User className="h-4 w-4" />
-              <span>
-                By{' '}
-                {authors.map((author, index) => (
-                  <Fragment key={author.slug}>
-                    {index > 0 && ', '}
-                    <Link
-                      href={`/articles/authors/${author.slug}`}
-                      className="font-medium text-white underline-offset-4 hover:underline"
-                    >
-                      {author.name}
-                    </Link>
-                  </Fragment>
-                ))}
-              </span>
-            </div>
-          )}
+          {showConfiguredAuthors &&
+            (() => {
+              const singleAvatarUrl =
+                authors.length === 1 ? resolveAvatarUrl(authors[0], config) : null
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  {singleAvatarUrl ? (
+                    <Image
+                      src={singleAvatarUrl}
+                      alt=""
+                      width={20}
+                      height={20}
+                      className="h-5 w-5 rounded-full object-cover"
+                    />
+                  ) : (
+                    <User className="h-4 w-4" />
+                  )}
+                  <span>
+                    By{' '}
+                    {authors.map((author, index) => (
+                      <Fragment key={author.slug}>
+                        {index > 0 && ', '}
+                        <Link
+                          href={`/articles/authors/${author.slug}`}
+                          className="font-medium text-white underline-offset-4 hover:underline"
+                        >
+                          {author.name}
+                        </Link>
+                      </Fragment>
+                    ))}
+                  </span>
+                </div>
+              )
+            })()}
           {showLegacyAuthor && (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
               <User className="h-4 w-4" />

package/src/Breadcrumb.tsx

@@ -4,6 +4,8 @@ import type { BreadcrumbItem } from './articleTypes'
 type BreadcrumbProps = Readonly<{
   items: BreadcrumbItem[]
   className?: string
+  /** Max-width utility class applied to the breadcrumb list. Default: 'max-w-7xl'. */
+  containerClassName?: string
   showSchema?: boolean
   separator?: string
 }>
@@ -29,6 +31,7 @@ function getDisplayItems(items: readonly BreadcrumbItem[]): BreadcrumbItem[] {
 export function Breadcrumb({
   items,
   className = '',
+  containerClassName = 'max-w-7xl',
   showSchema = true,
   separator = '>',
 }: BreadcrumbProps) {
@@ -42,7 +45,7 @@ export function Breadcrumb({
         aria-label="Breadcrumb"
         className={`border-b border-border bg-background/80 px-4 py-3 text-sm text-muted-foreground ${className}`}
       >
-        <ol className="mx-auto flex max-w-7xl items-center gap-2 overflow-hidden">
+        <ol className={`mx-auto flex items-center gap-2 overflow-hidden ${containerClassName}`}>
           {displayItems.map((item, index) => {
             const isLast = index === displayItems.length - 1
             const key = `${item.name}-${index}`

package/src/__tests__/ArticleDetailHero.test.tsx

@@ -193,4 +193,61 @@ describe('ArticleDetailHero', () => {
       ).not.toBeInTheDocument()
     })
   })
+
+  describe('byline author avatar', () => {
+    const authorWithAvatar: AuthorProfile = { ...configuredAuthor, avatar: 'andrew-blase.webp' }
+
+    it('renders the resolved avatar image for a single configured author with an avatar and config.siteUrl', () => {
+      const { container } = render(
+        <ArticleDetailHero
+          article={baseArticle}
+          authors={[authorWithAvatar]}
+          config={{ siteUrl: 'https://example.com', siteName: 'Test Site' }}
+        />
+      )
+      const img = container.querySelector('img.rounded-full')
+      expect(img).toHaveAttribute(
+        'src',
+        'https://example.com/articles/authors/andrew-blase/andrew-blase.webp'
+      )
+    })
+
+    it('renders an already-absolute avatar URL unchanged, without needing config', () => {
+      const authorWithAbsoluteAvatar: AuthorProfile = {
+        ...configuredAuthor,
+        avatar: 'https://cdn.example.com/andrew-blase.webp',
+      }
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[authorWithAbsoluteAvatar]} />
+      )
+      const img = container.querySelector('img.rounded-full')
+      expect(img).toHaveAttribute('src', 'https://cdn.example.com/andrew-blase.webp')
+    })
+
+    it('falls back to the icon when the author has no avatar', () => {
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[configuredAuthor]} />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the icon when a relative avatar is set but config.siteUrl is missing', () => {
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[authorWithAvatar]} />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the icon when multiple authors are configured, even if one has an avatar', () => {
+      const secondAuthor: AuthorProfile = { name: 'Jamie Rivera', slug: 'jamie-rivera', bio: '' }
+      const { container } = render(
+        <ArticleDetailHero
+          article={baseArticle}
+          authors={[authorWithAvatar, secondAuthor]}
+          config={{ siteUrl: 'https://example.com', siteName: 'Test Site' }}
+        />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+  })
 })

package/src/markdown.ts

@@ -362,7 +362,9 @@ export async function markdownToHtml(
       processor = processor.use(rehypeProcessImages, { articleSlug })
     }
 
-    const result = await processor.use(rehypeStringify).process(markdown)
+    const result = await processor
+      .use(rehypeStringify)
+      .process(stripInlineTagsFromHeadings(markdown))
 
     return result.toString()
   } catch (error) {
@@ -377,8 +379,51 @@ export async function markdownToHtml(
   }
 }
 
+/**
+ * Strips inline HTML/JSX tags from heading lines only, keeping their inner
+ * text, before the markdown reaches a plain (non-MDX) remark parse.
+ *
+ * Article headings commonly carry a reader-facing rating dot written as JSX,
+ * e.g. `### Rage <span style={{ color: '#3b82f6' }}>●</span>`. `renderMdxSource`
+ * (real MDX compilation via `@mdx-js/mdx`) parses that correctly and renders
+ * a real `<span>` element. But `extractToc` and `markdownToHtml` both run
+ * headings through plain `remark-parse` with no MDX support, and CommonMark's
+ * raw-inline-HTML grammar does not accept a JSX object-literal attribute
+ * expression like `style={{ ... }}` - remark's HTML tokenizer fails to match
+ * it as a tag and falls back to treating the whole thing as literal text.
+ * That garbled text then (a) becomes the visible TOC label, and (b) feeds
+ * `rehype-slug`, producing a slug built from the raw markup instead of the
+ * heading's real words - which does not match the id `renderMdxSource`'s
+ * correctly-parsed pipeline assigns to the same heading in the live page, so
+ * the TOC entry silently links to an id that does not exist in the DOM.
+ *
+ * Stripping tags (not their inner content) from heading lines before parsing
+ * keeps the extracted text and generated slug consistent with what the real
+ * MDX render puts in the page, for any heading-level inline markup - not
+ * only the rating-dot convention that surfaced the bug.
+ */
+function stripInlineTagsFromHeadings(markdown: string): string {
+  return markdown.replace(/^(#{1,6}[ \t].*)$/gm, (line) =>
+    line.replace(/<\/?[a-zA-Z][^<>\n]*>/g, '')
+  )
+}
+
+/**
+ * Recursively extracts a node's text content, including text nested inside
+ * child elements (for example a markdown link's `<a>Dwarf</a>` inside a
+ * heading like `### [Dwarf](/link)`). A shallow, direct-children-only check
+ * here previously dropped link text from every heading that used a link as
+ * part of its heading text - a distinct bug from the JSX-in-heading garbling
+ * `stripInlineTagsFromHeadings` fixes, but with a worse symptom: the heading
+ * was silently omitted from the TOC entirely (both `id` and `text` came back
+ * empty, so `extractHeadingItem` returned `null`) rather than merely garbled.
+ */
 function nodeTextValue(c: ElementContent): string {
-  return c.type === 'text' ? (c as { value: string }).value : ''
+  if (c.type === 'text') return (c as { value: string }).value
+  if (c.type === 'element' && 'children' in c) {
+    return (c as Element).children.map(nodeTextValue).join('')
+  }
+  return ''
 }
 
 function extractHeadingItem(node: Element): TocItem | null {
@@ -446,6 +491,6 @@ export async function extractToc(markdown: string): Promise<TocItem[]> {
     .use(rehypeSlug)
     .use(collectHeadings)
     .use(rehypeStringify)
-    .process(markdown)
+    .process(stripInlineTagsFromHeadings(markdown))
   return headings
 }