Merge pull request #12107 from github/repo-sync

repo sync

components/article/ArticlePage.tsx

@@ -43,20 +43,16 @@ export const ArticlePage = () => {
   const { t } = useTranslation('pages')
   const currentPath = router.asPath.split('?')[0]
 
-  const RenderHTML = (props: { html: any }) => (
-    <div dangerouslySetInnerHTML={{ __html: props.html }}></div>
-  )
-
   const renderTocItem = (item: MiniTocItem) => {
     return (
       <ActionList.Item
-        as="a"
-        href={item.link}
-        key={item.title}
+        as="div"
+        key={item.contents}
+        className={item.platform}
         sx={{ listStyle: 'none', padding: '2px' }}
       >
-        <div className={cx('lh-condensed', item.platform)}>
-          <RenderHTML html={item.title} />
+        <div className={cx('lh-condensed')}>
+          <div dangerouslySetInnerHTML={{ __html: item.contents }} />
           {item.items && item.items.length > 0 ? (
             <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
           ) : null}
@@ -126,9 +122,10 @@ export const ArticlePage = () => {
                   </Heading>
 
                   <ActionList
-                    items={miniTocItems.map((items, i) => {
+                    key={title}
+                    items={miniTocItems.map((items) => {
                       return {
-                        key: title + i,
+                        key: title,
                         text: title,
                         renderItem: () => <ul>{renderTocItem(items)}</ul>,
                       }

components/context/ArticleContext.tsx

@@ -9,8 +9,7 @@ export type LearningTrack = {
 
 export type MiniTocItem = {
   platform: string
-  title: string
-  link: string
+  contents: string
   items?: MiniTocItem[]
 }
 

lib/get-mini-toc-items.js

@@ -38,8 +38,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
       // remove any <strong> tags but leave content
       $('strong', item).map((i, el) => $(el).replaceWith($(el).contents()))
 
-      const link = href
-      const title = $(item).html()
+      const contents = `<a href="${href}">${$(item).html()}</a>`
       const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
 
       const platform = $(item).parent('.extended-markdown').attr('class') || ''
@@ -49,7 +48,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
         mostImportantHeadingLevel = headingLevel
       }
 
-      return { link, title, headingLevel, platform }
+      return { contents, headingLevel, platform }
     })
     .map((item) => {
       // set the indentation level for each item based on the most important

tests/rendering/server.js

@@ -337,7 +337,7 @@ describe('server', () => {
       )
       expect($('h2#in-this-article').length).toBe(1)
       expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul a div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + div div ul div div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {
@@ -878,15 +878,13 @@ describe('extended Markdown', () => {
   test('renders expected mini TOC headings in platform-specific content', async () => {
     const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
     expect($('h2#in-this-article').length).toBe(1)
+    expect($('h2#in-this-article + div div ul div.extended-markdown.mac').length).toBeGreaterThan(1)
     expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.mac').length
-    ).toBeGreaterThan(1)
-    expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.windows').length
-    ).toBeGreaterThan(1)
-    expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.linux').length
+      $('h2#in-this-article + div div ul div.extended-markdown.windows').length
     ).toBeGreaterThan(1)
+    expect($('h2#in-this-article + div div ul div.extended-markdown.linux').length).toBeGreaterThan(
+      1
+    )
   })
 })