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