1- import { CodeBlock , InlineCode } from "@/components/Document/Code" ;
1+ import { CodeBlock } from "@/components/Document/Code" ;
22import { DocLink } from "@/components/Document/DocLink" ;
33import { Heading } from "@/components/Document/Heading" ;
44import { OrderedList , UnorderedList } from "@/components/Document/List" ;
@@ -8,97 +8,98 @@ import { TBody, Table, Td, Th, Tr } from "@/components/Document/Table";
88import GithubSlugger from "github-slugger" ;
99import type { MDXComponents } from "mdx/types" ;
1010import type { BuiltinLanguage } from "shiki" ;
11+ import { InlineCode } from "./src/components/Document" ;
1112
1213export function useMDXComponents ( components : MDXComponents ) : MDXComponents {
13- const slugger = new GithubSlugger ( ) ;
14+ const slugger = new GithubSlugger ( ) ;
1415
15- function nameToLink ( name : React . ReactNode ) {
16- if ( typeof name !== "string" ) {
17- return undefined ;
18- }
16+ function nameToLink ( name : React . ReactNode ) {
17+ if ( typeof name !== "string" ) {
18+ return undefined ;
19+ }
1920
20- return slugger . slug ( name ) ;
21- }
21+ return slugger . slug ( name ) ;
22+ }
2223
23- function getHeading (
24- depth : number ,
25- props : {
26- children ?: React . ReactNode ;
27- id ?: string ;
28- } ,
29- ) {
30- return (
31- < Heading level = { depth } id = { props . id || nameToLink ( props . children ) || "" } >
32- { props . children }
33- </ Heading >
34- ) ;
35- }
24+ function getHeading (
25+ depth : number ,
26+ props : {
27+ children ?: React . ReactNode ;
28+ id ?: string ;
29+ } ,
30+ ) {
31+ return (
32+ < Heading level = { depth } id = { props . id || nameToLink ( props . children ) || "" } >
33+ { props . children }
34+ </ Heading >
35+ ) ;
36+ }
3637
37- return {
38- ...components ,
39- a ( props ) {
40- const { href, children } = props ;
41- return < DocLink href = { href || "" } > { children } </ DocLink > ;
42- } ,
43- h1 ( props ) {
44- return getHeading ( 1 , props ) ;
45- } ,
46- h2 ( props ) {
47- return getHeading ( 2 , props ) ;
48- } ,
49- h3 ( props ) {
50- return getHeading ( 3 , props ) ;
51- } ,
52- h4 ( props ) {
53- return getHeading ( 4 , props ) ;
54- } ,
55- h5 ( props ) {
56- return getHeading ( 5 , props ) ;
57- } ,
58- h6 ( props ) {
59- return getHeading ( 6 , props ) ;
60- } ,
61- code ( props ) {
62- const code = props . children ;
63- const lang = props . className ?. replace ( "language-" , "" ) ;
38+ return {
39+ ...components ,
40+ a ( props ) {
41+ const { href, children } = props ;
42+ return < DocLink href = { href || "" } > { children } </ DocLink > ;
43+ } ,
44+ h1 ( props ) {
45+ return getHeading ( 1 , props ) ;
46+ } ,
47+ h2 ( props ) {
48+ return getHeading ( 2 , props ) ;
49+ } ,
50+ h3 ( props ) {
51+ return getHeading ( 3 , props ) ;
52+ } ,
53+ h4 ( props ) {
54+ return getHeading ( 4 , props ) ;
55+ } ,
56+ h5 ( props ) {
57+ return getHeading ( 5 , props ) ;
58+ } ,
59+ h6 ( props ) {
60+ return getHeading ( 6 , props ) ;
61+ } ,
62+ code ( props ) {
63+ const code = props . children ;
64+ const lang = props . className ?. replace ( "language-" , "" ) ;
6465
65- if ( ! props . className ) {
66- return < InlineCode code = { typeof code === "string" ? code : "" } /> ;
67- }
66+ if ( ! props . className ) {
67+ return < InlineCode code = { typeof code === "string" ? code : "" } /> ;
68+ }
6869
69- return (
70- < CodeBlock
71- lang = { lang as BuiltinLanguage }
72- code = { typeof code === "string" ? code : "" }
73- />
74- ) ;
75- } ,
76- p ( props ) {
77- return < Paragraph > { props . children } </ Paragraph > ;
78- } ,
79- ul ( props ) {
80- return < UnorderedList > { props . children } </ UnorderedList > ;
81- } ,
82- ol ( props ) {
83- return < OrderedList > { props . children } </ OrderedList > ;
84- } ,
85- hr ( ) {
86- return < Separator /> ;
87- } ,
88- table ( props ) {
89- return < Table > { props . children } </ Table > ;
90- } ,
91- th ( props ) {
92- return < Th > { props . children } </ Th > ;
93- } ,
94- td ( props ) {
95- return < Td > { props . children } </ Td > ;
96- } ,
97- tr ( props ) {
98- return < Tr > { props . children } </ Tr > ;
99- } ,
100- tbody ( props ) {
101- return < TBody > { props . children } </ TBody > ;
102- } ,
103- } ;
70+ return (
71+ < CodeBlock
72+ lang = { lang as BuiltinLanguage }
73+ code = { typeof code === "string" ? code : "" }
74+ />
75+ ) ;
76+ } ,
77+ p ( props ) {
78+ return < Paragraph > { props . children } </ Paragraph > ;
79+ } ,
80+ ul ( props ) {
81+ return < UnorderedList > { props . children } </ UnorderedList > ;
82+ } ,
83+ ol ( props ) {
84+ return < OrderedList > { props . children } </ OrderedList > ;
85+ } ,
86+ hr ( ) {
87+ return < Separator /> ;
88+ } ,
89+ table ( props ) {
90+ return < Table > { props . children } </ Table > ;
91+ } ,
92+ th ( props ) {
93+ return < Th > { props . children } </ Th > ;
94+ } ,
95+ td ( props ) {
96+ return < Td > { props . children } </ Td > ;
97+ } ,
98+ tr ( props ) {
99+ return < Tr > { props . children } </ Tr > ;
100+ } ,
101+ tbody ( props ) {
102+ return < TBody > { props . children } </ TBody > ;
103+ } ,
104+ } ;
104105}
0 commit comments