@@ -33,6 +33,7 @@ import Head from "next/head";
33
33
import NextLink from "next/link" ;
34
34
import { useRouter } from "next/router" ;
35
35
import path from "path" ;
36
+ import { ReactNode } from "react" ;
36
37
import { MdMenu } from "react-icons/md" ;
37
38
import ReactMarkdown from "react-markdown" ;
38
39
import rehypeRaw from "rehype-raw" ;
@@ -256,7 +257,7 @@ const SidebarNavItem: React.FC<{ item: NavItem; nav: Nav }> = ({
256
257
257
258
return (
258
259
< Box >
259
- < NextLink href = { "/" + item . path } passHref >
260
+ < NextLink href = { "/" + item . path } passHref legacyBehavior >
260
261
< Link
261
262
fontWeight = { isActive ? 600 : 400 }
262
263
color = { isActive ? "gray.900" : "gray.700" }
@@ -351,8 +352,12 @@ const MobileNavbar: React.FC<{ nav: Nav; version: string }> = ({
351
352
) ;
352
353
} ;
353
354
354
- const slugifyTitle = ( title : string ) => {
355
- return _ . kebabCase ( title . toLowerCase ( ) ) ;
355
+ const slugifyTitle = ( titleSource : ReactNode ) => {
356
+ if ( Array . isArray ( titleSource ) && typeof titleSource [ 0 ] === "string" ) {
357
+ return _ . kebabCase ( titleSource [ 0 ] . toLowerCase ( ) ) ;
358
+ }
359
+
360
+ return undefined ;
356
361
} ;
357
362
358
363
const getImageUrl = ( src : string | undefined ) => {
@@ -411,29 +416,31 @@ const DocsPage: NextPage<{
411
416
>
412
417
{ route . title }
413
418
</ Heading >
419
+
414
420
< ReactMarkdown
415
421
rehypePlugins = { [ rehypeRaw ] }
416
422
remarkPlugins = { [ remarkGfm ] }
417
- transformLinkUri = { transformLinkUriSource ( route . path ) }
423
+ urlTransform = { transformLinkUriSource ( route . path ) }
418
424
components = { {
419
425
h1 : ( { children } ) => (
420
426
< Heading
421
427
as = "h1"
422
428
fontSize = "4xl"
423
429
pt = { 10 }
424
430
pb = { 2 }
425
- id = { slugifyTitle ( children [ 0 ] as string ) }
431
+ id = { slugifyTitle ( children ) }
426
432
>
427
433
{ children }
428
434
</ Heading >
429
435
) ,
436
+
430
437
h2 : ( { children } ) => (
431
438
< Heading
432
439
as = "h2"
433
440
fontSize = "3xl"
434
441
pt = { 10 }
435
442
pb = { 2 }
436
- id = { slugifyTitle ( children [ 0 ] as string ) }
443
+ id = { slugifyTitle ( children ) }
437
444
>
438
445
{ children }
439
446
</ Heading >
@@ -444,7 +451,7 @@ const DocsPage: NextPage<{
444
451
fontSize = "2xl"
445
452
pt = { 10 }
446
453
pb = { 2 }
447
- id = { slugifyTitle ( children [ 0 ] as string ) }
454
+ id = { slugifyTitle ( children ) }
448
455
>
449
456
{ children }
450
457
</ Heading >
0 commit comments