[Enhancement]: Add SKIP_TO_TOC_ID constant and update PageElement to include skip link for table of contents
jpg619 committed
Oct 13, 2025 at 10:47 UTC
b798da405c13d530fdb4dffb1c6baadfad26624a
2 files changed
+8
-1
src/constants.js
+2
@@ -10,6 +10,8 @@ export const SKIP_TO_CONTENT_ID = 'skip-to-content'
10
11
export const SKIP_TO_SEARCH_ID = 'search-box-input'
12
13
+export const SKIP_TO_TOC_ID = 'toc-heading'
14
+
15
export const CLI_PATH = '/cli'
16
17
export const Z_INDEX = {
src/page.js
+6
-1
@@ -5,7 +5,7 @@ import Slugger from 'github-slugger'
5
import Header from './components/header'
6
import Sidebar from './components/sidebar'
7
import {SkipBox, SkipLink} from './components/skip-nav'
8
-import {SKIP_TO_CONTENT_ID, SKIP_TO_SEARCH_ID} from './constants'
8
+import {SKIP_TO_CONTENT_ID, SKIP_TO_SEARCH_ID, SKIP_TO_TOC_ID} from './constants'
9
10
import {PageProvider} from './hooks/use-page'
11
import Layout from './layout'
@@ -25,12 +25,17 @@ const PageElement = ({element, props}) => {
25
path: props.location.pathname,
26
slugger: new Slugger(),
27
}
28
+
29
+ // Check if table of contents is available and has items
30
+ const hasTableOfContents = Boolean(props.pageContext?.tableOfContents?.length)
31
+
32
return (
33
<BaseStyles>
34
<GlobalStyles />
35
<SkipBox>
36
<SkipLink href={`#${SKIP_TO_SEARCH_ID}`}>Skip to search</SkipLink>
37
<SkipLink href={`#${SKIP_TO_CONTENT_ID}`}>Skip to content</SkipLink>
38
+ {hasTableOfContents && <SkipLink href={`#${SKIP_TO_TOC_ID}`}>Skip to table of contents</SkipLink>}
39
</SkipBox>
40
<PageProvider value={page}>
41
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>