@fullstackdatasolutions/articles 1.2.0 → 1.2.2

package/package.json

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

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

@@ -358,9 +358,10 @@ describe('getArticleMetadata - frontmatter parsing', () => {
     })
     expect(article).not.toBeNull()
     expect(article!.authorSlug).toBe('andrew-blase')
-    expect(article!.authorAvatar).toBe(
-      'https://example.com/articles/authors/andrew-blase/avatar.jpg'
-    )
+    // Relative, not absolute: authorAvatar is only ever rendered as an
+    // <img src>, never used for JSON-LD (which resolves its own absolute
+    // URL separately via getAuthorAvatar(author, config) at render time).
+    expect(article!.authorAvatar).toBe('/articles/authors/andrew-blase/avatar.jpg')
   })
 
   it('leaves authorSlug and authorAvatar unset when no config is passed', async () => {

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
 }

package/src/server-articles.ts

@@ -296,9 +296,7 @@ async function getArticleSummary(slug: string, config?: ArticlesConfig): Promise
       author,
       authors,
       authorSlug: primaryAuthorProfile?.slug,
-      authorAvatar: primaryAuthorProfile
-        ? getAuthorAvatar(primaryAuthorProfile, config)
-        : undefined,
+      authorAvatar: primaryAuthorProfile ? getAuthorAvatar(primaryAuthorProfile) : undefined,
       category: categories[0],
       categories,
       readTime,