1
- import React , { useState , useEffect } from 'react' ;
1
+ import React , { useState , useEffect , useMemo } from 'react' ;
2
2
import { Helmet } from 'react-helmet' ;
3
3
import useSiteMetadata from '../hooks/use-sitemetadata' ;
4
4
import {
@@ -24,8 +24,6 @@ const Layout = ({
24
24
const { baseUrl, imageUrl, title : siteTitle } = useSiteMetadata ( ) ;
25
25
const meta = pageMeta || { } ;
26
26
const url = meta . path ? baseUrl + meta . path : baseUrl ;
27
- // console.log(url);
28
-
29
27
const title = meta . title ? `EDB Docs - ${ meta . title } ` : siteTitle ;
30
28
31
29
const [ dark , setDark ] = useState ( false ) ;
@@ -45,6 +43,46 @@ const Layout = ({
45
43
}
46
44
} , [ setDark ] ) ;
47
45
46
+ const mdxComponents = useMemo (
47
+ ( ) => ( {
48
+ a : ( { href, ...rest } ) => (
49
+ < Link
50
+ to = { href }
51
+ pageUrl = { meta . path }
52
+ pageIsIndex = { meta . isIndexPage }
53
+ { ...rest }
54
+ />
55
+ ) ,
56
+ table : ( props ) => (
57
+ < div className = "table-with-scroll" >
58
+ < table { ...props } className = "table" />
59
+ </ div >
60
+ ) ,
61
+ pre : ( props ) => (
62
+ < CodeBlock
63
+ { ...props }
64
+ codeLanguages = { katacodaPanelData ?. codelanguages }
65
+ />
66
+ ) ,
67
+ h2 : ( props ) => < h2 { ...props } className = "mt-5" /> , // eslint-disable-line jsx-a11y/heading-has-content
68
+ h3 : ( props ) => < h3 { ...props } className = "mt-4-5" /> , // eslint-disable-line jsx-a11y/heading-has-content
69
+ img : ( props ) => < img { ...props } className = "mw-100" /> , // eslint-disable-line jsx-a11y/alt-text
70
+ blockquote : ( props ) => (
71
+ < blockquote
72
+ { ...props }
73
+ className = "pl-3 border-left border-top-0 border-bottom-0 border-right-0 border-5"
74
+ > </ blockquote >
75
+ ) ,
76
+ KatacodaPanel : ( ) => (
77
+ < KatacodaPanel katacodaPanelData = { katacodaPanelData } />
78
+ ) ,
79
+ KatacodaPageLink,
80
+ Icon,
81
+ StubCards,
82
+ } ) ,
83
+ [ katacodaPanelData , meta ] ,
84
+ ) ;
85
+
48
86
return (
49
87
< LayoutContext . Provider
50
88
value = { {
@@ -72,43 +110,7 @@ const Layout = ({
72
110
< meta name = "twitter:card" content = "summary_large_image" />
73
111
< body className = { `bg-${ background } fixed-container` } />
74
112
</ Helmet >
75
- < MDXProvider
76
- components = { {
77
- a : ( { href, ...rest } ) => (
78
- < Link
79
- to = { href }
80
- pageUrl = { meta . path }
81
- pageIsIndex = { meta . isIndexPage }
82
- { ...rest }
83
- />
84
- ) ,
85
- table : ( props ) => (
86
- < div className = "table-with-scroll" >
87
- < table { ...props } className = "table" />
88
- </ div >
89
- ) ,
90
- pre : ( props ) => (
91
- < CodeBlock { ...props } katacodaPanelData = { katacodaPanelData } />
92
- ) ,
93
- h2 : ( props ) => < h2 { ...props } className = "mt-5" /> , // eslint-disable-line jsx-a11y/heading-has-content
94
- h3 : ( props ) => < h3 { ...props } className = "mt-4-5" /> , // eslint-disable-line jsx-a11y/heading-has-content
95
- img : ( props ) => < img { ...props } className = "mw-100" /> , // eslint-disable-line jsx-a11y/alt-text
96
- blockquote : ( props ) => (
97
- < blockquote
98
- { ...props }
99
- className = "pl-3 border-left border-top-0 border-bottom-0 border-right-0 border-5"
100
- > </ blockquote >
101
- ) ,
102
- KatacodaPanel : ( props ) => (
103
- < KatacodaPanel { ...props } katacodaPanelData = { katacodaPanelData } />
104
- ) ,
105
- KatacodaPageLink,
106
- Icon,
107
- StubCards,
108
- } }
109
- >
110
- { children }
111
- </ MDXProvider >
113
+ < MDXProvider components = { mdxComponents } > { children } </ MDXProvider >
112
114
< TextBalancer />
113
115
</ LayoutContext . Provider >
114
116
) ;
0 commit comments