@@ -64,91 +64,131 @@ const DocDetail = () => {
6464 }
6565 setHeadings ( headings ) ;
6666 } ;
67- if ( loading ) return < div className = "flex justify-center items-center h-screen" > < Spin size = "large" /> </ div > ;
68- if ( error ) return < Alert message = "Error" description = { error } type = "error" /> ;
69- const headingToId = ( children ) => String ( children ) . toLowerCase ( ) . replace ( / \s + / g, '-' ) ;
67+ if ( loading )
7068 return (
71- < Layout >
72- < section className = "container mx-auto p-4 min-h-screen" >
73- < h3 className = "text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold" >
74- { slug . replace ( / _ / g, ' ' ) }
75- </ h3 >
76- < div className = "flex" >
77- < aside className = "sticky top-20 w-1/4 p-4 h-0" >
78- < h2 className = "text-xl font-bold mb-2" > Table of Contents</ h2 >
79- < ul className = 'grid gap-2' >
80- { headings . map ( ( heading , index ) => (
81- < li key = { index } className = { `ml-${ heading . level } ${ activeSection === heading . title . replace ( / \s + / g, '-' ) . toLowerCase ( ) && 'text-green-500 font-semibold' } ` } >
82- < a href = { `#${ heading . title . replace ( / \s + / g, '-' ) . toLowerCase ( ) } ` }
83-
84- onClick = { ( ) => setActiveSection ( heading . title . replace ( / \s + / g, '-' ) ?. toLowerCase ( ) ) }
85- >
86- { heading . title }
87- </ a >
88- </ li >
89- ) ) }
90- </ ul >
91- </ aside >
92- < div className = "prose lg:prose-xl w-3/4" >
93- < ReactMarkdown
94- remarkPlugins = { [ remarkGfm ] }
95- components = { {
96- code ( { node, inline, className, children, ...props } ) {
97- const match = / l a n g u a g e - ( \w + ) / . exec ( className || '' ) ;
98- return ! inline && match ? (
99- < SyntaxHighlighter
100- style = { a11yDark }
101- language = { match [ 1 ] }
102- PreTag = "div"
103- { ...props }
104- >
105- { String ( children ) . replace ( / \n $ / , '' ) }
106- </ SyntaxHighlighter >
107- ) : (
108- < code className = { className } { ...props } >
109- { children }
110- </ code >
111- ) ;
112- } ,
113- h1 ( { node, children } ) {
114- return < h1 className = 'text-xl font-normal mt-10 mb-3' id = { headingToId ( children ) } > { children } </ h1 > ;
115- } ,
116- h2 ( { node, children } ) {
117- return < h2 className = 'text-xl font-normal mt-10 mb-3' id = { headingToId ( children ) } > 🌿 { children } </ h2 > ;
118- } ,
119- h3 ( { node, children } ) {
120- return < h3 className = 'text-xl font-normal mt-10 mb-3' id = { headingToId ( children ) } > 🌿 { children } </ h3 > ;
121- } ,
122- blockquote ( { node, children } ) {
123- return < span className = 'bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray' > { children } </ span > ;
124- } ,
125- table : Table ,
126- tr : TableRow ,
127- td : TableCell ,
128- th : TableHeader ,
129- li ( { node, children } ) {
130- return < li className = 'list-disc ml-4' > { children } </ li > ;
131- } ,
132- ul ( { node, children } ) {
133- return < ul className = 'list-disc ml-4 mb-2' > { children } </ ul > ;
134- } ,
135- ol ( { node, children } ) {
136- return < ul className = 'list-disc ml-4 mb-2' > { children } </ ul > ;
137- } ,
138- img ( { node, src, alt } ) {
139- return < img src = { src } alt = { alt } className = 'mb-4 rounded-md' /> ;
140- }
141-
142- } }
143- >
144- { content }
145- </ ReactMarkdown >
146- </ div >
147- </ div >
148- </ section >
149- </ Layout >
69+ < div className = "flex justify-center items-center h-screen" >
70+ < Spin size = "large" />
71+ </ div >
15072 ) ;
15173 if ( error ) return < Alert message = "Error" description = { error } type = "error" /> ;
74+ const headingToId = ( children ) =>
75+ String ( children ) . toLowerCase ( ) . replace ( / \s + / g, "-" ) ;
76+ return (
77+ < Layout >
78+ < section className = "container mx-auto p-4 min-h-screen" >
79+ < h3 className = "text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold" >
80+ { slug . replace ( / _ / g, " " ) }
81+ </ h3 >
82+ < div className = "flex" >
83+ < aside className = "sticky top-20 w-1/4 p-4 h-0" >
84+ < h2 className = "text-xl font-bold mb-2" > Table of Contents</ h2 >
85+ < ul className = "grid gap-2" >
86+ { headings . map ( ( heading , index ) => (
87+ < li
88+ key = { index }
89+ className = { `ml-${ heading . level } ${ activeSection === heading . title . replace ( / \s + / g, "-" ) . toLowerCase ( ) && "text-green-500 font-semibold" } ` }
90+ >
91+ < a
92+ href = { `#${ heading . title . replace ( / \s + / g, "-" ) . toLowerCase ( ) } ` }
93+ onClick = { ( ) =>
94+ setActiveSection (
95+ heading . title . replace ( / \s + / g, "-" ) ?. toLowerCase ( ) ,
96+ )
97+ }
98+ >
99+ { heading . title }
100+ </ a >
101+ </ li >
102+ ) ) }
103+ </ ul >
104+ </ aside >
105+ < div className = "prose lg:prose-xl w-3/4" >
106+ < ReactMarkdown
107+ remarkPlugins = { [ remarkGfm ] }
108+ components = { {
109+ code ( { node, inline, className, children, ...props } ) {
110+ const match = / l a n g u a g e - ( \w + ) / . exec ( className || "" ) ;
111+ return ! inline && match ? (
112+ < SyntaxHighlighter
113+ style = { a11yDark }
114+ language = { match [ 1 ] }
115+ PreTag = "div"
116+ { ...props }
117+ >
118+ { String ( children ) . replace ( / \n $ / , "" ) }
119+ </ SyntaxHighlighter >
120+ ) : (
121+ < code className = { className } { ...props } >
122+ { children }
123+ </ code >
124+ ) ;
125+ } ,
126+ h1 ( { node, children } ) {
127+ return (
128+ < h1
129+ className = "text-xl font-normal mt-10 mb-3"
130+ id = { headingToId ( children ) }
131+ >
132+ { " " }
133+ { children }
134+ </ h1 >
135+ ) ;
136+ } ,
137+ h2 ( { node, children } ) {
138+ return (
139+ < h2
140+ className = "text-xl font-normal mt-10 mb-3"
141+ id = { headingToId ( children ) }
142+ >
143+ 🌿 { children }
144+ </ h2 >
145+ ) ;
146+ } ,
147+ h3 ( { node, children } ) {
148+ return (
149+ < h3
150+ className = "text-xl font-normal mt-10 mb-3"
151+ id = { headingToId ( children ) }
152+ >
153+ 🌿 { children }
154+ </ h3 >
155+ ) ;
156+ } ,
157+ blockquote ( { node, children } ) {
158+ return (
159+ < span className = "bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray" >
160+ { children }
161+ </ span >
162+ ) ;
163+ } ,
164+ table : Table ,
165+ tr : TableRow ,
166+ td : TableCell ,
167+ th : TableHeader ,
168+ li ( { node, children } ) {
169+ return < li className = "list-disc ml-4" > { children } </ li > ;
170+ } ,
171+ ul ( { node, children } ) {
172+ return < ul className = "list-disc ml-4 mb-2" > { children } </ ul > ;
173+ } ,
174+ ol ( { node, children } ) {
175+ return < ul className = "list-disc ml-4 mb-2" > { children } </ ul > ;
176+ } ,
177+ img ( { node, src, alt } ) {
178+ return (
179+ < img src = { src } alt = { alt } className = "mb-4 rounded-md" />
180+ ) ;
181+ } ,
182+ } }
183+ >
184+ { content }
185+ </ ReactMarkdown >
186+ </ div >
187+ </ div >
188+ </ section >
189+ </ Layout >
190+ ) ;
191+ if ( error ) return < Alert message = "Error" description = { error } type = "error" /> ;
152192
153193 return (
154194 < Layout >
0 commit comments