diff --git a/components/context/ArticleContext.tsx b/components/context/ArticleContext.tsx index bd2d198ebc69..5e314879f5e0 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 a57940365624..dcce66b9904a 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 f3ff4a8cdb0d..24ed4e0a2af9 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 20aae5cbbdef..85fb57059473 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 ( { }} >
-
+ + {item.contents.title} + {item.items && item.items.length > 0 ? (
    {item.items.map(renderTocItem)}
) : null} diff --git a/lib/get-mini-toc-items.js b/lib/get-mini-toc-items.js index cff2a59c6080..4ab4dc63f636 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 tags but leave content $('strong', item).map((i, el) => $(el).replaceWith($(el).contents())) - const contents = isRestPage - ? { href: `${href}`, title: `${$(item).text()}` } - : `${$(item).html()}` + 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 67f83bde1eb9..5b0fa4bc0cf4 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 f24a2cdf673f..54580a791f52 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 cce81b062319..2fc00e4479b6 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 f142e301d794..0bdbe9554e4d 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,