Skip to content

Commit 071c95a

Browse files
authored
make miniToc pure data and no html strings (#28517)
* make miniToc pure data and no html strings * fixups * some types refactoring
1 parent 47c9f87 commit 071c95a

File tree

9 files changed

+17
-22
lines changed

9 files changed

+17
-22
lines changed

components/context/ArticleContext.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ export type LearningTrack = {
99

1010
export type MiniTocItem = {
1111
platform: string
12-
contents: string
12+
contents: {
13+
href: string
14+
title: string
15+
}
1316
items?: MiniTocItem[]
1417
}
1518

components/context/RestContext.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import { createContext, useContext } from 'react'
2-
3-
export type MiniTocItem = {
4-
platform: string
5-
contents: string & { title: string; href: string }
6-
items?: MiniTocItem[]
7-
}
2+
import type { MiniTocItem } from 'components/context/ArticleContext'
83

94
export type RestContextT = {
105
title: string

components/sidebar/RestCollapsibleSection.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { ActionList } from '@primer/react'
77
import { Link } from 'components/Link'
88
import { ProductTreeNode } from 'components/context/MainContext'
99
import { EventType, sendEvent } from 'components/lib/events'
10-
import { MiniTocItem, useRestContext } from 'components/context/RestContext'
10+
import { useRestContext } from 'components/context/RestContext'
11+
import type { MiniTocItem } from 'components/context/ArticleContext'
1112
import styles from './SidebarProduct.module.scss'
1213

1314
type SectionProps = {

components/ui/MiniTocs/MiniTocs.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import cx from 'classnames'
22
import { ActionList, Heading } from '@primer/react'
33

4-
import { MiniTocItem } from 'components/context/ArticleContext'
4+
import type { MiniTocItem } from 'components/context/ArticleContext'
55
import { Link } from 'components/Link'
66
import { useTranslation } from 'components/hooks/useTranslation'
77

@@ -14,7 +14,7 @@ const renderTocItem = (item: MiniTocItem) => {
1414
return (
1515
<ActionList.Item
1616
as="li"
17-
key={item.contents}
17+
key={item.contents.href}
1818
className={item.platform}
1919
sx={{
2020
listStyle: 'none',
@@ -30,7 +30,9 @@ const renderTocItem = (item: MiniTocItem) => {
3030
}}
3131
>
3232
<div className={cx('lh-condensed d-block width-full')}>
33-
<div dangerouslySetInnerHTML={{ __html: item.contents }} />
33+
<a className="d-block width-auto" href={item.contents.href}>
34+
{item.contents.title}
35+
</a>
3436
{item.items && item.items.length > 0 ? (
3537
<ul className="ml-3">{item.items.map(renderTocItem)}</ul>
3638
) : null}

lib/get-mini-toc-items.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@ export default function getMiniTocItems(
4343
// remove any <strong> tags but leave content
4444
$('strong', item).map((i, el) => $(el).replaceWith($(el).contents()))
4545

46-
const contents = isRestPage
47-
? { href: `${href}`, title: `${$(item).text()}` }
48-
: `<a class="d-block width-auto" href="${href}">${$(item).html()}</a>`
46+
const contents = { href, title: $(item).text().trim() }
4947
const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
5048

5149
const platform = $(item).parent('.extended-markdown').attr('class') || ''

lib/rest/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export async function getRestMiniTocItems(
103103
// is needed to generate the toc
104104
const titles = restOperations.map((operation) => `### ${operation.title}\n`).join('')
105105
toc += await renderContent(titles, context)
106-
const restOperationsMiniTocItems = getMiniTocItems(toc, 3, '', true)
106+
const restOperationsMiniTocItems = getMiniTocItems(toc, 3, '')
107107
languageTree.get(version).get(category).set(subCategory, {
108108
restOperationsMiniTocItems,
109109
})

middleware/render-page.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,13 @@ async function buildRenderedPage(req) {
3737
async function buildMiniTocItems(req) {
3838
const { context } = req
3939
const { page } = context
40-
const isRestReferencePage =
41-
page.relativePath.startsWith('rest') &&
42-
!page.relativePath.includes('rest/guides') &&
43-
!page.relativePath.includes('rest/overview')
4440

4541
// get mini TOC items on articles
4642
if (!page.showMiniToc) {
4743
return
4844
}
4945

50-
return getMiniTocItems(context.renderedPage, page.miniTocMaxHeadingLevel, '', isRestReferencePage)
46+
return getMiniTocItems(context.renderedPage, page.miniTocMaxHeadingLevel, '')
5147
}
5248

5349
export default async function renderPage(req, res, next) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
RestContext,
88
RestContextT,
99
getRestContextFromRequest,
10-
MiniTocItem,
1110
} from 'components/context/RestContext'
11+
import type { MiniTocItem } from 'components/context/ArticleContext'
1212

1313
type MinitocItemsT = {
1414
restOperationsMiniTocItems: MiniTocItem[]

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
RestContext,
99
RestContextT,
1010
getRestContextFromRequest,
11-
MiniTocItem,
1211
} from 'components/context/RestContext'
12+
import type { MiniTocItem } from 'components/context/ArticleContext'
1313
import {
1414
getTocLandingContextFromRequest,
1515
TocItem,

0 commit comments

Comments
 (0)