docs: improve performance of theme

Author: mrholek

packages/docs/content/api/CTableCaption.api.mdx

@@ -1 +1,7 @@
+import React from 'react'
+import DefaultLayout from './src/templates/DefaultLayout'
 import './src/styles/styles.scss'
+
+export const wrapPageElement = ({ element, props }) => {
+  return <DefaultLayout {...props}>{element}</DefaultLayout>
+}

packages/docs/gatsby-browser.js

@@ -3,66 +3,50 @@ const { createFilePath } = require('gatsby-source-filesystem')
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
-
-  // you only want to operate on `Mdx` nodes. If you had content from a
-  // remote CMS you could also check to see if the parent node was a
-  // `File` node here
   if (node.internal.type === 'Mdx') {
-    const value = createFilePath({ node, getNode })
+    const slug = createFilePath({ node, getNode })
 
     createNodeField({
-      // Name of the field you are adding
       name: 'slug',
-      // Individual MDX node
       node,
-      // Generated value based on filepath with "blog" prefix. you
-      // don't need a separating "/" before the value because
-      // createFilePath returns a path with the leading "/".
-      value: `${value}`,
+      value: `${slug}`,
     })
   }
 }
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
-  // Destructure the createPage function from the actions object
   const { createPage, createRedirect } = actions
   const result = await graphql(`
     query {
       allMdx {
-        edges {
-          node {
-            id
-            fields {
-              slug
-            }
-            tableOfContents(maxDepth: 10)
-            internal {
-              contentFilePath
-            }
+        nodes {
+          id
+          fields {
+            slug
+          }
+          internal {
+            contentFilePath
           }
+          tableOfContents(maxDepth: 3)
         }
       }
     }
   `)
+
   if (result.errors) {
-    reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query')
+    reporter.panicOnBuild('Error loading MDX result', result.errors)
   }
-  // Create blog post pages.
-  const posts = result.data.allMdx.edges
-  const docsTemplate = path.resolve(`./src/templates/Docs.tsx`)
-  // you'll call `createPage` for each result
-  posts.forEach(({ node }, index) => {
-    !node.internal.contentFilePath.includes('api') &&
-      createPage({
-        // This is the slug you created before
-        // (or `node.frontmatter.slug`)
-        path: node.fields.slug,
-        // This component will wrap our MDX content
-        component: `${docsTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
-        // You can use the values in this context in
-        // our page layout component
-        context: { id: node.id },
-      })
+
+  const posts = result.data.allMdx.nodes
+
+  posts.forEach((node) => {
+    createPage({
+      path: node.fields.slug,
+      component: `${path.resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${
+        node.internal.contentFilePath
+      }`,
+      context: { id: node.id },
+    })
   })
   createRedirect({
     fromPath: `/`,

packages/docs/gatsby-node.js

@@ -1,7 +1,7 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/ssr-apis/
- */
+import React from 'react'
+import DefaultLayout from './src/templates/DefaultLayout'
+import './src/styles/styles.scss'
 
-// You can delete this file if you're not using it
+export const wrapPageElement = ({ element, props }) => {
+  return <DefaultLayout {...props}>{element}</DefaultLayout>
+}

packages/docs/gatsby-ssr.js

@@ -2,10 +2,11 @@ import React, { FC, useEffect, useRef } from 'react'
 
 interface AdsProps {
   code: string
+  location: string
   placement: string
 }
 
-export const Ads: FC<AdsProps> = ({ code, placement }) => {
+export const Ads: FC<AdsProps> = ({ code, location, placement }) => {
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -16,7 +17,7 @@ export const Ads: FC<AdsProps> = ({ code, placement }) => {
       s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
       ref.current.appendChild(s)
     }
-  }, [])
+  }, [location])
 
   return <div ref={ref} />
 }

packages/docs/src/components/Ads.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react'
-import PropTypes from 'prop-types'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 
 interface CodeBlockProps {
@@ -32,10 +31,6 @@ const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
   )
 }
 
-CodeBlock.propTypes = {
-  children: PropTypes.any,
-}
-
 CodeBlock.displayName = 'CodeBlock'
 
 export default CodeBlock

packages/docs/src/components/CodeBlock.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react'
 
 import { CContainer, CFooter } from '@coreui/react/src/index'
+
+// @ts-expect-error json file
 import pkg from './../../package.json'
 
 const Footer: FC = () => {

packages/docs/src/components/Footer.tsx

@@ -2,8 +2,8 @@ import React, { FC } from 'react'
 
 import CIcon from '@coreui/icons-react'
 import { cibGithub, cibOpenCollective, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
-import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src'
 
+import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src'
 import { AppContext } from './../AppContext'
 
 const Header: FC = () => {

packages/docs/src/components/Header.tsx

@@ -1,22 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 import { useStaticQuery, graphql } from 'gatsby'
 
-const SEO = ({
-  title,
-  description,
-  name,
-  image,
-  article,
-}: {
-  title: string
-  description: string
-  name: string
-  image: string
-  article: string
-}) => {
+interface SEOProps {
+  title?: string
+  description?: string
+  name?: string
+  image?: string
+  article?: string
+}
+
+const SEO = ({ title, description, name, image, article }: SEOProps) => {
   const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
@@ -87,22 +82,6 @@ const SEO = ({
 
 export default SEO
 
-SEO.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  name: PropTypes.string,
-  image: PropTypes.string,
-  article: PropTypes.bool,
-}
-
-SEO.defaultProps = {
-  title: null,
-  description: null,
-  name: null,
-  image: null,
-  article: false,
-}
-
 const query = graphql`
   query SEO {
     site {

packages/docs/src/components/Seo.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react'
-import PropTypes from 'prop-types'
 
 import {
   CDropdown,
@@ -62,10 +61,6 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
   )
 }
 
-Sidebar.propTypes = {
-  currentRoute: PropTypes.string.isRequired,
-}
-
 Sidebar.displayName = 'Sidebar'
 
 export default Sidebar

packages/docs/src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 
 import { CBadge, CNavGroup, CNavItem, CSidebarNav } from '@coreui/react/src/index'
@@ -46,6 +45,7 @@ export const SidebarNav = ({ items, currentRoute }: SidebarNavProps) => {
       </CNavItem>
     )
   }
+
   const navGroup = (item: NavItem, index: number) => {
     const { name, icon, to, ...rest } = item
     return (
@@ -73,8 +73,3 @@ export const SidebarNav = ({ items, currentRoute }: SidebarNavProps) => {
     </CSidebarNav>
   )
 }
-
-SidebarNav.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.any).isRequired,
-  currentRoute: PropTypes.string.isRequired,
-}

packages/docs/src/components/SidebarNav.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
+import { CButton } from '@coreui/react/src/index'
 
-import DefaultLayout from './../templates/Layout'
 import Seo from './../components/Seo'
-import { CButton } from '@coreui/react/src/index'
 
 const NotFoundPage = () => {
   const { site } = useStaticQuery(query)
   const { siteUrl } = site.siteMetadata
   return (
-    <DefaultLayout>
+    <>
       <Seo title="404: Not found" />
       <h1>404: Not Found</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
       <CButton href={siteUrl}>Go to documentation</CButton>
-    </DefaultLayout>
+    </>
   )
 }
 

packages/docs/src/pages/404.tsx

@@ -0,0 +1,51 @@
+import React, { FC, useState } from 'react'
+import { Footer, Header, Sidebar, Seo } from '../components'
+import { CContainer } from '@coreui/react/src/'
+import DocsLayout from './DocsLayout'
+
+import { AppContext } from '../AppContext'
+
+interface DefaultLayoutProps {
+  children: any
+  data: any
+  pageContext: any
+  path: any
+}
+
+const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, path }) => {
+  const [sidebarVisible, setSidebarVisible] = useState()
+
+  const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
+  const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
+  const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
+  const route = pageContext.frontmatter ? pageContext.frontmatter.route : ''
+
+  return (
+    <AppContext.Provider
+      value={{
+        sidebarVisible,
+        setSidebarVisible,
+      }}
+    >
+      <Seo title={title} description={description} name={name} />
+      <Sidebar currentRoute={route} />
+      <div className="wrapper d-flex flex-column min-vh-100">
+        <Header />
+        <div className="body flex-grow-1 px-3">
+          {path === '/404/' ? (
+            <CContainer lg>{children}</CContainer>
+          ) : (
+            <DocsLayout data={data} pageContext={pageContext}>
+              {children}
+            </DocsLayout>
+          )}
+        </div>
+        <Footer />
+      </div>
+    </AppContext.Provider>
+  )
+}
+
+DefaultLayout.displayName = 'DefaultLayout'
+
+export default DefaultLayout