repo sync

components/context/ArticleContext.tsx

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

components/context/RestContext.tsx

@@ -1,10 +1,5 @@
 import { createContext, useContext } from 'react'
-
-export type MiniTocItem = {
-  platform: string
-  contents: string & { title: string; href: string }
-  items?: MiniTocItem[]
-}
+import type { MiniTocItem } from 'components/context/ArticleContext'
 
 export type RestContextT = {
   title: string

components/sidebar/RestCollapsibleSection.tsx

@@ -7,7 +7,8 @@ import { ActionList } from '@primer/react'
 import { Link } from 'components/Link'
 import { ProductTreeNode } from 'components/context/MainContext'
 import { EventType, sendEvent } from 'components/lib/events'
-import { MiniTocItem, useRestContext } from 'components/context/RestContext'
+import { useRestContext } from 'components/context/RestContext'
+import type { MiniTocItem } from 'components/context/ArticleContext'
 import styles from './SidebarProduct.module.scss'
 
 type SectionProps = {

components/ui/MiniTocs/MiniTocs.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { ActionList, Heading } from '@primer/react'
 
-import { MiniTocItem } from 'components/context/ArticleContext'
+import type { MiniTocItem } from 'components/context/ArticleContext'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 
@@ -14,7 +14,7 @@ const renderTocItem = (item: MiniTocItem) => {
   return (
     <ActionList.Item
       as="li"
-      key={item.contents}
+      key={item.contents.href}
       className={item.platform}
       sx={{
         listStyle: 'none',
@@ -30,7 +30,9 @@ const renderTocItem = (item: MiniTocItem) => {
       }}
     >
       <div className={cx('lh-condensed d-block width-full')}>
-        <div dangerouslySetInnerHTML={{ __html: item.contents }} />
+        <a className="d-block width-auto" href={item.contents.href}>
+          {item.contents.title}
+        </a>
         {item.items && item.items.length > 0 ? (
           <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
         ) : null}

lib/get-mini-toc-items.js

@@ -43,9 +43,7 @@ export default function getMiniTocItems(
       // remove any <strong> tags but leave content
       $('strong', item).map((i, el) => $(el).replaceWith($(el).contents()))
 
-      const contents = isRestPage
-        ? { href: `${href}`, title: `${$(item).text()}` }
-        : `<a class="d-block width-auto" href="${href}">${$(item).html()}</a>`
+      const contents = { href, title: $(item).text().trim() }
       const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
 
       const platform = $(item).parent('.extended-markdown').attr('class') || ''

lib/rest/index.js

@@ -103,7 +103,7 @@ export async function getRestMiniTocItems(
     // is needed to generate the toc
     const titles = restOperations.map((operation) => `### ${operation.title}\n`).join('')
     toc += await renderContent(titles, context)
-    const restOperationsMiniTocItems = getMiniTocItems(toc, 3, '', true)
+    const restOperationsMiniTocItems = getMiniTocItems(toc, 3, '')
     languageTree.get(version).get(category).set(subCategory, {
       restOperationsMiniTocItems,
     })

middleware/render-page.js

@@ -37,17 +37,13 @@ async function buildRenderedPage(req) {
 async function buildMiniTocItems(req) {
   const { context } = req
   const { page } = context
-  const isRestReferencePage =
-    page.relativePath.startsWith('rest') &&
-    !page.relativePath.includes('rest/guides') &&
-    !page.relativePath.includes('rest/overview')
 
   // get mini TOC items on articles
   if (!page.showMiniToc) {
     return
   }
 
-  return getMiniTocItems(context.renderedPage, page.miniTocMaxHeadingLevel, '', isRestReferencePage)
+  return getMiniTocItems(context.renderedPage, page.miniTocMaxHeadingLevel, '')
 }
 
 export default async function renderPage(req, res, next) {

pages/[versionId]/rest/[category]/[subcategory].tsx

@@ -7,8 +7,8 @@ import {
   RestContext,
   RestContextT,
   getRestContextFromRequest,
-  MiniTocItem,
 } from 'components/context/RestContext'
+import type { MiniTocItem } from 'components/context/ArticleContext'
 
 type MinitocItemsT = {
   restOperationsMiniTocItems: MiniTocItem[]

pages/[versionId]/rest/[category]/index.tsx

@@ -8,8 +8,8 @@ import {
   RestContext,
   RestContextT,
   getRestContextFromRequest,
-  MiniTocItem,
 } from 'components/context/RestContext'
+import type { MiniTocItem } from 'components/context/ArticleContext'
 import {
   getTocLandingContextFromRequest,
   TocItem,