From 071c95a91c92a21ea407a1dcdd2ca6451cdc0fa2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Wed, 15 Jun 2022 14:31:36 -0400
Subject: [PATCH] make miniToc pure data and no html strings (#28517)

* make miniToc pure data and no html strings

* fixups

* some types refactoring
---
 components/context/ArticleContext.tsx               | 5 ++++-
 components/context/RestContext.tsx                  | 7 +------
 components/sidebar/RestCollapsibleSection.tsx       | 3 ++-
 components/ui/MiniTocs/MiniTocs.tsx                 | 8 +++++---
 lib/get-mini-toc-items.js                           | 4 +---
 lib/rest/index.js                                   | 2 +-
 middleware/render-page.js                           | 6 +-----
 pages/[versionId]/rest/[category]/[subcategory].tsx | 2 +-
 pages/[versionId]/rest/[category]/index.tsx         | 2 +-
 9 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/components/context/ArticleContext.tsx b/components/context/ArticleContext.tsx
index bd2d198ebc..5e314879f5 100644
--- a/components/context/ArticleContext.tsx
+++ b/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[]
 }
 
diff --git a/components/context/RestContext.tsx b/components/context/RestContext.tsx
index a579403656..dcce66b990 100644
--- a/components/context/RestContext.tsx
+++ b/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
diff --git a/components/sidebar/RestCollapsibleSection.tsx b/components/sidebar/RestCollapsibleSection.tsx
index f3ff4a8cdb..24ed4e0a2a 100644
--- a/components/sidebar/RestCollapsibleSection.tsx
+++ b/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 = {
diff --git a/components/ui/MiniTocs/MiniTocs.tsx b/components/ui/MiniTocs/MiniTocs.tsx
index 20aae5cbbd..85fb570594 100644
--- a/components/ui/MiniTocs/MiniTocs.tsx
+++ b/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}
diff --git a/lib/get-mini-toc-items.js b/lib/get-mini-toc-items.js
index cff2a59c60..4ab4dc63f6 100644
--- a/lib/get-mini-toc-items.js
+++ b/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') || ''
diff --git a/lib/rest/index.js b/lib/rest/index.js
index 67f83bde1e..5b0fa4bc0c 100644
--- a/lib/rest/index.js
+++ b/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,
     })
diff --git a/middleware/render-page.js b/middleware/render-page.js
index f24a2cdf67..54580a791f 100644
--- a/middleware/render-page.js
+++ b/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) {
diff --git a/pages/[versionId]/rest/[category]/[subcategory].tsx b/pages/[versionId]/rest/[category]/[subcategory].tsx
index cce81b0623..2fc00e4479 100644
--- a/pages/[versionId]/rest/[category]/[subcategory].tsx
+++ b/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[]
diff --git a/pages/[versionId]/rest/[category]/index.tsx b/pages/[versionId]/rest/[category]/index.tsx
index f142e301d7..0bdbe9554e 100644
--- a/pages/[versionId]/rest/[category]/index.tsx
+++ b/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,