docs: update layout

mrholek · mrholek · commit 7ad6008230d7 · 2024-12-18T13:53:35.000+01:00
diff --git a/packages/docs/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx
@@ -1,8 +1,13 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
+import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
 
-export const wrapPageElement = ({ element, props }) => {
-  return <DefaultLayout {...props}>{element}</DefaultLayout>
+export const wrapRootElement = ({ element }: { element: ReactNode }) => {
+  return <DefaultLayout>{element}</DefaultLayout>
+}
+
+export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx
@@ -1,8 +1,13 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
+import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
 
-export const wrapPageElement = ({ element, props }) => {
-  return <DefaultLayout {...props}>{element}</DefaultLayout>
+export const wrapRootElement = ({ element }: { element: ReactNode }) => {
+  return <DefaultLayout>{element}</DefaultLayout>
+}
+
+export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
@@ -40,27 +40,16 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
       <title>{formattedTitle}</title>
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
-
       {seo.url && <meta property="og:url" content={seo.url.replace('docs//', 'docs/')} />}
-
       {(article ? true : null) && <meta property="og:type" content="article" />}
-
       {seo.title && <meta property="og:title" content={seo.title} />}
-
       {seo.description && <meta property="og:description" content={seo.description} />}
-
       {seo.image && <meta property="og:image" content={seo.image} />}
-
       <meta name="twitter:card" content="summary_large_image" />
-
       {twitterUsername && <meta name="twitter:creator" content={twitterUsername} />}
-
       {seo.title && <meta name="twitter:title" content={seo.title} />}
-
       {seo.description && <meta name="twitter:description" content={seo.description} />}
-
       {seo.image && <meta name="twitter:image" content={seo.image} />}
-
       {seo.name && (
         <script type="application/ld+json">
           {`{
diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx
@@ -23,9 +23,9 @@ const Sidebar: FC = () => {
           position="fixed"
           size="lg"
           visible={context.sidebarVisible}
-          onVisibleChange={(value: boolean) => {
+          onVisibleChange={(value: boolean) =>
             context.setSidebarVisible && context.setSidebarVisible(value)
-          }}
+          }
         >
           <CSidebarBrand className="justify-content-start ps-3">
             <svg
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
@@ -1,19 +1,11 @@
-import React, { FC, useState } from 'react'
-import { Footer, Header, Sidebar } from '../components'
-import { CContainer } from '@coreui/react/src/'
-import DocsLayout from './DocsLayout'
-
+import React, { FC, ReactNode, useState } from 'react'
 import { AppContext } from '../AppContext'
 
 interface DefaultLayoutProps {
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  location: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  path: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  children: ReactNode
 }
 
-const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageContext, path }) => {
+const DefaultLayout: FC<DefaultLayoutProps> = ({ children }) => {
   const [sidebarVisible, setSidebarVisible] = useState()
   return (
     <AppContext.Provider
@@ -22,18 +14,7 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageC
         setSidebarVisible,
       }}
     >
-      <Sidebar />
-      <div className="wrapper flex-grow-1">
-        <Header />
-        {path === '/404/' ? (
-          <CContainer lg>{children}</CContainer>
-        ) : (
-          <DocsLayout data={data} location={location} pageContext={pageContext}>
-            {children}
-          </DocsLayout>
-        )}
-        <Footer />
-      </div>
+      {children}
     </AppContext.Provider>
   )
 }
diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useMemo } from 'react'
-import { Ads, Banner, Seo, Toc } from '../components'
+import { Ads, Banner, Footer, Header, Sidebar, Toc } from '../components'
 import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
 // @ts-expect-error json file
 import jsonData from './../data/other_frameworks.json'
@@ -11,6 +11,7 @@ interface DocsLayoutProps {
   data: DocsData
   location: Location
   pageContext: PageContext
+  path: string
 }
 
 interface DocsData {
@@ -144,7 +145,7 @@ const DocsNav: FC<{
   )
 }
 
-const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
+const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext, path }) => {
   const frontmatter = pageContext.frontmatter || {}
 
   const {
@@ -164,58 +165,69 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
 
   return (
     <>
-      <Seo title={title} description={description} name={name} />
-      <CContainer lg className="my-md-4 flex-grow-1">
-        <main className="docs-main order-1">
-          {hasNav && (
-            <DocsNav locationPathname={location.pathname} nodes={data?.allMdx?.edges as Item[]} />
-          )}
-          <div className="docs-intro ps-lg-4">
-            {name && name !== title ? (
-              <div className="d-flex flex-column">
-                <h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
-                  {title}
-                </h1>
-                <h2 className="docs-title order-1 h1">{name}</h2>
+      <Sidebar />
+      <div className="wrapper flex-grow-1">
+        <Header />
+        {path === '/404/' ? (
+          <CContainer lg>{children}</CContainer>
+        ) : (
+          <CContainer lg className="my-md-4 flex-grow-1">
+            <main className="docs-main order-1">
+              {hasNav && (
+                <DocsNav
+                  locationPathname={location.pathname}
+                  nodes={data?.allMdx?.edges as Item[]}
+                />
+              )}
+              <div className="docs-intro ps-lg-4">
+                {name && name !== title ? (
+                  <div className="d-flex flex-column">
+                    <h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
+                      {title}
+                    </h1>
+                    <h2 className="docs-title order-1 h1">{name}</h2>
+                  </div>
+                ) : (
+                  <h1 className="docs-title" id="content">
+                    {title}
+                  </h1>
+                )}
+                <Banner pro={proComponent} />
+                <p className="docs-lead">{description}</p>
+                <Ads code="CEAICKJY" location={route} placement="coreuiio" />
+                {frameworks.length > 0 && (
+                  <>
+                    <h2>Other Frameworks</h2>
+                    <p>
+                      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and
+                      Vue components. To learn more please visit the following pages.
+                    </p>
+                    <ul>
+                      {frameworks.map((item) => (
+                        <React.Fragment key={item}>
+                          {Object.entries(otherFrameworks[item] || {})
+                            .filter(([key]) => key !== 'react')
+                            .map(([framework, url]) => (
+                              <li key={framework}>
+                                <a href={url}>
+                                  {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
+                                  {humanize(item)}
+                                </a>
+                              </li>
+                            ))}
+                        </React.Fragment>
+                      ))}
+                    </ul>
+                  </>
+                )}
               </div>
-            ) : (
-              <h1 className="docs-title" id="content">
-                {title}
-              </h1>
-            )}
-            <Banner pro={proComponent} />
-            <p className="docs-lead">{description}</p>
-            <Ads code="CEAICKJY" location={route} placement="coreuiio" />
-            {frameworks.length > 0 && (
-              <>
-                <h2>Other Frameworks</h2>
-                <p>
-                  CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue
-                  components. To learn more please visit the following pages.
-                </p>
-                <ul>
-                  {frameworks.map((item) => (
-                    <React.Fragment key={item}>
-                      {Object.entries(otherFrameworks[item] || {})
-                        .filter(([key]) => key !== 'react')
-                        .map(([framework, url]) => (
-                          <li key={framework}>
-                            <a href={url}>
-                              {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
-                              {humanize(item)}
-                            </a>
-                          </li>
-                        ))}
-                    </React.Fragment>
-                  ))}
-                </ul>
-              </>
-            )}
-          </div>
-          {data?.mdx && <Toc items={data.mdx.tableOfContents.items} />}
-          <div className="docs-content ps-lg-4">{children}</div>
-        </main>
-      </CContainer>
+              {data?.mdx && <Toc items={data.mdx.tableOfContents.items} />}
+              <div className="docs-content ps-lg-4">{children}</div>
+            </main>
+          </CContainer>
+        )}
+        <Footer />
+      </div>
     </>
   )
 }
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useMemo } from 'react'
 import { graphql, PageProps } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
 import {
@@ -48,46 +48,44 @@ interface Toc {
 }
 
 const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
-  return (
-    <MDXProvider
-      components={{
-        Callout: (props: CalloutProps) => {
-          const { children, title, ...rest } = props
-          return (
-            <Callout {...rest}>
-              {title && <h5>{title}</h5>}
-              {children}
-            </Callout>
-          )
-        },
-        ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
-        Example: (props: ExampleProps) => {
-          const { children, ...rest } = props
-          return (
-            <Example {...rest}>
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child)
-                }
-                return
-              })}
-            </Example>
-          )
-        },
-        ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
-        JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
-        ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
-        pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
-        table: (props) => (
-          <div className="table-responsive table-docs border rounded mb-3">
-            <table className="table table-docs" {...props} />
-          </div>
-        ),
-      }}
-    >
-      {children}
-    </MDXProvider>
+  const components = useMemo(
+    () => ({
+      Callout: (props: CalloutProps) => {
+        const { children, title, ...rest } = props
+        return (
+          <Callout {...rest}>
+            {title && <h5>{title}</h5>}
+            {children}
+          </Callout>
+        )
+      },
+      ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
+      Example: (props: ExampleProps) => {
+        const { children, ...rest } = props
+        return (
+          <Example {...rest}>
+            {React.Children.map(children, (child) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child)
+              }
+              return
+            })}
+          </Example>
+        )
+      },
+      ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
+      JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
+      ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
+      pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
+      table: (props) => (
+        <div className="table-responsive table-docs border rounded mb-3">
+          <table className="table table-docs" {...props} />
+        </div>
+      ),
+    }),
+    [],
   )
+  return <MDXProvider components={components}>{children}</MDXProvider>
 }
 
 MdxLayout.displayName = 'MdxLayout'
