Skip to content

Commit c7f03e5

Browse files
author
Dimitri POSTOLOV
authoredSep 12, 2023
[V3] remove toc.headingComponent, rename pageOpts.headings to toc (#2292)
·
nextra-theme-docs@4.0.0-rc.0nextra@3.0.0-alpha.1
1 parent a52a869 commit c7f03e5

File tree

25 files changed

+72
-164
lines changed

25 files changed

+72
-164
lines changed
 

‎.changeset/chilled-kids-fetch.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'nextra-theme-docs': major
3+
---
4+
5+
remove `toc.headingComponent`

‎.changeset/fuzzy-meals-care.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'nextra': minor
3+
---
4+
5+
should not add virtual `_meta` file if missing

‎.changeset/wet-years-serve.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'nextra-theme-blog': major
3+
'nextra-theme-docs': major
4+
'nextra': major
5+
---
6+
7+
rename `pageOpts.headings` to `toc`

‎docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"license": "MIT",
55
"private": true,
66
"scripts": {
7-
"build": "next build",
7+
"build": "rm -rf .next && next build",
88
"dev": "next",
99
"start": "next start"
1010
},

‎docs/pages/docs/custom-theme.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import Head from 'next/head'
8080
import type { NextraThemeLayoutProps } from 'nextra'
8181

8282
export default function Layout({ children, pageOpts }: NextraThemeLayoutProps) {
83-
const { title, frontMatter, headings } = pageOpts
83+
const { title, frontMatter, toc } = pageOpts
8484

8585
return (
8686
<div>
@@ -91,7 +91,7 @@ export default function Layout({ children, pageOpts }: NextraThemeLayoutProps) {
9191
<h1>My Theme</h1>
9292
Table of Contents:
9393
<ul>
94-
{headings.map(heading => (
94+
{toc.map(heading => (
9595
<li key={heading.value}>{heading.value}</li>
9696
))}
9797
</ul>

‎docs/pages/docs/docs-theme/theme-configuration.mdx

-5
Original file line numberDiff line numberDiff line change
@@ -589,11 +589,6 @@ navigating between headings.
589589
'React.ReactNode | React.FC',
590590
'Title of the TOC sidebar. By default it’s “On This Page”.'
591591
],
592-
[
593-
'toc.headingComponent',
594-
'React.FC<{ id: string, children: string }>',
595-
'Custom renderer of TOC headings.'
596-
],
597592
['toc.backToTop', 'boolean', 'Add `Scroll to top` link.']
598593
]}
599594
/>

‎examples/swr-site/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"private": true,
77
"scripts": {
88
"analyze": "ANALYZE=true pnpm build",
9-
"build": "next build",
9+
"build": "rm -rf .next && next build",
1010
"clean": "rimraf .next .turbo",
1111
"debug": "NODE_OPTIONS='--inspect' next dev",
1212
"dev": "next",

‎examples/swr-site/theme.config.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -195,15 +195,7 @@ const config: DocsThemeConfig = {
195195
// eslint-disable-next-line @next/next/no-img-element -- ignore since url is external and dynamic
196196
<img alt="placeholder cat" src="https://placekitten.com/g/300/200" />
197197
),
198-
float: true,
199-
headingComponent: function Heading({ id, children }) {
200-
return (
201-
<>
202-
{children}
203-
{id === 'installation' && ' 💿'}
204-
</>
205-
)
206-
}
198+
float: true
207199
},
208200
useNextSeoProps() {
209201
const { locale } = useRouter()

‎packages/nextra-theme-blog/__test__/__fixture__/pageMap.ts

+3-20
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,7 @@ export const indexOpts: BlogPageOpts = {
5959
}
6060
],
6161
title: 'Nextra',
62-
headings: [
63-
{
64-
depth: 1,
65-
value: 'Nextra',
66-
id: 'nextra'
67-
}
68-
]
62+
toc: []
6963
}
7064

7165
export const postsOpts: BlogPageOpts = {
@@ -127,13 +121,7 @@ export const postsOpts: BlogPageOpts = {
127121
}
128122
],
129123
title: 'Random Thoughts',
130-
headings: [
131-
{
132-
depth: 1,
133-
value: 'Random Thoughts',
134-
id: 'random-thoughts'
135-
}
136-
]
124+
toc: []
137125
}
138126

139127
export const articleOpts: BlogPageOpts = {
@@ -198,12 +186,7 @@ export const articleOpts: BlogPageOpts = {
198186
}
199187
],
200188
title: 'Notes on A Programmable Web by Aaron Swartz',
201-
headings: [
202-
{
203-
depth: 1,
204-
value: 'Notes on A Programmable Web by Aaron Swartz',
205-
id: 'notes-on-a-programmable-web-by-aaron-swartz'
206-
},
189+
toc: [
207190
{
208191
depth: 2,
209192
value: 'Quotes About WWW',

‎packages/nextra-theme-docs/src/components/sidebar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -325,15 +325,15 @@ interface SideBarProps {
325325
docsDirectories: PageItem[]
326326
fullDirectories: Item[]
327327
asPopover?: boolean
328-
headings: Heading[]
328+
toc: Heading[]
329329
includePlaceholder: boolean
330330
}
331331

332332
export function Sidebar({
333333
docsDirectories,
334334
fullDirectories,
335335
asPopover = false,
336-
headings,
336+
toc,
337337
includePlaceholder
338338
}: SideBarProps): ReactElement {
339339
const config = useConfig()
@@ -343,7 +343,7 @@ export function Sidebar({
343343
const [showSidebar, setSidebar] = useState(true)
344344
const [showToggleAnimation, setToggleAnimation] = useState(false)
345345

346-
const anchors = useMemo(() => headings.filter(v => v.depth === 2), [headings])
346+
const anchors = useMemo(() => toc.filter(v => v.depth === 2), [toc])
347347
const sidebarRef = useRef<HTMLDivElement>(null)
348348
const containerRef = useRef<HTMLDivElement>(null)
349349
const mounted = useMounted()

‎packages/nextra-theme-docs/src/components/toc.tsx

+9-17
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import cn from 'clsx'
22
import type { Heading } from 'nextra'
33
import type { ReactElement } from 'react'
4-
import { useEffect, useMemo, useRef } from 'react'
4+
import { useEffect, useRef } from 'react'
55
import scrollIntoView from 'scroll-into-view-if-needed'
66
import { useActiveAnchor, useConfig } from '../contexts'
77
import { renderComponent } from '../utils'
88
import { Anchor } from './anchor'
99
import { BackToTop } from './back-to-top'
1010

1111
export type TOCProps = {
12-
headings: Heading[]
12+
toc: Heading[]
1313
filePath: string
1414
}
1515

@@ -18,17 +18,12 @@ const linkClassName = cn(
1818
'contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50'
1919
)
2020

21-
export function TOC({ headings, filePath }: TOCProps): ReactElement {
21+
export function TOC({ toc, filePath }: TOCProps): ReactElement {
2222
const activeAnchor = useActiveAnchor()
2323
const config = useConfig()
2424
const tocRef = useRef<HTMLDivElement>(null)
2525

26-
const items = useMemo(
27-
() => headings.filter(heading => heading.depth > 1),
28-
[headings]
29-
)
30-
31-
const hasHeadings = items.length > 0
26+
const hasHeadings = toc.length > 0
3227
const hasMetaInfo = Boolean(
3328
config.feedback.content ||
3429
config.editLink.component ||
@@ -70,7 +65,7 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
7065
{renderComponent(config.toc.title)}
7166
</p>
7267
<ul>
73-
{items.map(({ id, value, depth }) => (
68+
{toc.map(({ id, value, depth }) => (
7469
<li className="nx-my-2 nx-scroll-my-6 nx-scroll-py-6" key={id}>
7570
<a
7671
href={`#${id}`}
@@ -81,18 +76,15 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
8176
4: 'ltr:nx-pl-8 rtl:nx-pr-8',
8277
5: 'ltr:nx-pl-12 rtl:nx-pr-12',
8378
6: 'ltr:nx-pl-16 rtl:nx-pr-16'
84-
}[depth as Exclude<typeof depth, 1>],
85-
'nx-inline-block',
79+
}[depth],
80+
'nx-inline-block nx-transition-colors nx-subpixel-antialiased',
8681
activeAnchor[id]?.isActive
87-
? 'nx-text-primary-600 nx-subpixel-antialiased contrast-more:!nx-text-primary-600'
82+
? 'nx-text-primary-600 contrast-more:!nx-text-primary-600'
8883
: 'nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300',
8984
'contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words'
9085
)}
9186
>
92-
{config.toc.headingComponent?.({
93-
id,
94-
children: value
95-
}) ?? value}
87+
{value}
9688
</a>
9789
</li>
9890
))}

‎packages/nextra-theme-docs/src/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function InnerLayout({
110110
filePath,
111111
pageMap,
112112
frontMatter,
113-
headings,
113+
toc,
114114
timestamp,
115115
children
116116
}: PageOpts & { children: ReactNode }): ReactElement {
@@ -152,7 +152,7 @@ function InnerLayout({
152152
aria-label="table of contents"
153153
>
154154
{renderComponent(config.toc.component, {
155-
headings: config.toc.float ? headings : [],
155+
toc: config.toc.float ? toc : [],
156156
filePath
157157
})}
158158
</nav>
@@ -191,7 +191,7 @@ function InnerLayout({
191191
<Sidebar
192192
docsDirectories={docsDirectories}
193193
fullDirectories={directories}
194-
headings={headings}
194+
toc={toc}
195195
asPopover={hideSidebar}
196196
includePlaceholder={themeContext.layout === 'default'}
197197
/>

‎packages/nextra-theme-docs/src/schemas.ts

-3
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,6 @@ export const themeSchema = /* @__PURE__ */ (() =>
143143
component: z.custom<ReactNode | FC<TOCProps>>(...reactNode),
144144
extraContent: z.custom<ReactNode | FC>(...reactNode),
145145
float: z.boolean(),
146-
headingComponent: z
147-
.custom<FC<{ id: string; children: string }>>(...fc)
148-
.optional(),
149146
title: z.custom<ReactNode | FC>(...reactNode)
150147
}),
151148
useNextSeoProps: z.custom<() => NextSeoProps | void>(isFunction)

‎packages/nextra/__test__/__snapshots__/compile.test.ts.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Process heading > code-h1 1`] = `
66
"result": "/*@jsxRuntime automatic @jsxImportSource react*/
77
import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
88
export const frontMatter = {};
9-
export const __toc = [];
9+
export const toc = [];
1010
function _createMdxContent(props) {
1111
const _components = Object.assign({
1212
h1: \\"h1\\",
@@ -30,7 +30,7 @@ exports[`Process heading > code-with-text-h1 1`] = `
3030
"result": "/*@jsxRuntime automatic @jsxImportSource react*/
3131
import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
3232
export const frontMatter = {};
33-
export const __toc = [];
33+
export const toc = [];
3434
function _createMdxContent(props) {
3535
const _components = Object.assign({
3636
h1: \\"h1\\",
@@ -60,7 +60,7 @@ export const TagName = () => {
6060
const {tag} = useRouter().query;
6161
return tag || null;
6262
};
63-
export const __toc = [];
63+
export const toc = [];
6464
function _createMdxContent(props) {
6565
const _components = Object.assign({
6666
h1: \\"h1\\"
@@ -83,7 +83,7 @@ exports[`Process heading > no-h1 1`] = `
8383
"result": "/*@jsxRuntime automatic @jsxImportSource react*/
8484
import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
8585
export const frontMatter = {};
86-
export const __toc = [{
86+
export const toc = [{
8787
depth: 2,
8888
value: \\"H2\\",
8989
id: \\"h2\\"
@@ -109,7 +109,7 @@ exports[`Process heading > static-h1 1`] = `
109109
"result": "/*@jsxRuntime automatic @jsxImportSource react*/
110110
import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
111111
export const frontMatter = {};
112-
export const __toc = [];
112+
export const toc = [];
113113
function _createMdxContent(props) {
114114
const _components = Object.assign({
115115
h1: \\"h1\\"

‎packages/nextra/__test__/__snapshots__/page-map.test.ts.snap

-19
Original file line numberDiff line numberDiff line change
@@ -265,12 +265,6 @@ exports[`Page Process > should match i18n site page maps 1`] = `
265265
},
266266
{
267267
"children": [
268-
{
269-
"data": {
270-
"loooooooooooooooooooong-title": "Loooooooooooooooooooong Title",
271-
"tree": "Tree",
272-
},
273-
},
274268
{
275269
"frontMatter": {
276270
"sidebar_label": "Loooooooooooooooooooong Title",
@@ -280,13 +274,6 @@ exports[`Page Process > should match i18n site page maps 1`] = `
280274
},
281275
{
282276
"children": [
283-
{
284-
"data": {
285-
"one": "One",
286-
"three": "Three",
287-
"two": "Two",
288-
},
289-
},
290277
{
291278
"frontMatter": {
292279
"sidebar_label": "One",
@@ -596,12 +583,6 @@ exports[`Page Process > should match i18n site page maps 1`] = `
596583
},
597584
{
598585
"children": [
599-
{
600-
"data": {
601-
"graphql-eslint": "GraphQL Eslint",
602-
"graphql-yoga": "GraphQL Yoga",
603-
},
604-
},
605586
{
606587
"children": [
607588
{

‎packages/nextra/__test__/compile.test.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -97,19 +97,19 @@ import Last from './three.mdx'
9797
"/*@jsxRuntime automatic @jsxImportSource react*/
9898
import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
9999
export const frontMatter = {};
100-
import FromMdx, {__toc as __toc0} from './one.mdx';
101-
import FromMarkdown, {__toc as __toc1} from './two.md';
100+
import FromMdx, {toc as toc0} from './one.mdx';
101+
import FromMarkdown, {toc as toc1} from './two.md';
102102
import IgnoreMe from './foo';
103-
import Last, {__toc as __toc2} from './three.mdx';
104-
export const __toc = [{
103+
import Last, {toc as toc2} from './three.mdx';
104+
export const toc = [{
105105
depth: 2,
106106
value: \\"❤️\\",
107107
id: \\"️\\"
108-
}, ...__toc0, {
108+
}, ...toc0, {
109109
depth: 2,
110110
value: \\"✅\\",
111111
id: \\"\\"
112-
}, ...__toc1, ...__toc2, {
112+
}, ...toc1, ...toc2, {
113113
depth: 2,
114114
value: \\"👋\\",
115115
id: \\"-1\\"
@@ -142,7 +142,7 @@ import Last from './three.mdx'
142142
`,
143143
{ mdxOptions }
144144
)
145-
expect(result).toMatch('export const __toc = [];')
145+
expect(result).toMatch('export const toc = [];')
146146
expect(result).not.toMatch('id="custom-id"')
147147
})
148148
})

0 commit comments

Comments
 (0)
Please sign in to comment.