docs: improve layout

Author: mrholek

packages/docs/src/components/Header.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import { DocSearch } from '@docsearch/react'
 
 import CIcon from '@coreui/icons-react'
 import {
@@ -36,13 +37,19 @@ const Header: FC = () => {
           <CHeader className="mb-5" position="sticky">
             <CHeaderToggler
               className="ms-md-3"
-              onClick={() => {
+              aria-label="Close"
+              onClick={() =>
                 context.setSidebarVisible && context.setSidebarVisible(!context.sidebarVisible)
-              }}
+              }
             >
               <CIcon icon={cilMenu} size="lg" />
             </CHeaderToggler>
-            <div className="docs-search" id="docsearch"></div>
+            <DocSearch
+              appId="JIOZIZPLMM"
+              indexName="coreui-react"
+              apiKey="6e3f7692d2589d042bb40426b75df1b7"
+            />
+            {/* <div className="docs-search" id="docsearch"></div> */}
             <CHeaderNav className="ms-auto">
               <CNavItem
                 href="https://github.com/coreui/coreui-react/"
@@ -63,15 +70,20 @@ const Header: FC = () => {
                 <div className="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
                 <hr className="d-lg-none my-2 text-white-50" />
               </li>
-              <CDropdown variant="nav-item" placement="bottom-end">
-                <CDropdownToggle className="nav-link" color="link" caret={false}>
+              <CDropdown placement="bottom-end">
+                <CDropdownToggle
+                  className="nav-link"
+                  color="link"
+                  caret={false}
+                  aria-label="Light/Dark mode switch"
+                >
                   {colorMode === 'dark' ? (
                     <CIcon icon={cilMoon} size="xl" />
-                  ) : (colorMode === 'auto' ? (
+                  ) : colorMode === 'auto' ? (
                     <CIcon icon={cilContrast} size="xl" />
                   ) : (
                     <CIcon icon={cilSun} size="xl" />
-                  ))}
+                  )}
                 </CDropdownToggle>
                 <CDropdownMenu>
                   <CDropdownItem

packages/docs/src/components/Seo.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 import { useStaticQuery, graphql } from 'gatsby'
 
@@ -34,8 +33,11 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
     url: `${siteUrl}${pathname.replace(`${prefix}/`, '')}`,
   }
 
+  const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
+
   return (
-    <Helmet title={seo.title} titleTemplate={titleTemplate}>
+    <>
+      <title>{formattedTitle}</title>
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
 
@@ -78,7 +80,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
           }`}
         </script>
       )}
-    </Helmet>
+    </>
   )
 }
 

packages/docs/src/templates/DefaultLayout.tsx

@@ -1,10 +1,9 @@
 import React, { FC, useState } from 'react'
-import { Footer, Header, Sidebar, Seo } from '../components'
+import { Footer, Header, Sidebar } from '../components'
 import { CContainer } from '@coreui/react/src/'
 import DocsLayout from './DocsLayout'
 
 import { AppContext } from '../AppContext'
-import { Script } from 'gatsby'
 
 interface DefaultLayoutProps {
   children: any // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -16,19 +15,13 @@ interface DefaultLayoutProps {
 
 const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, ___location, 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 : ''
-
   return (
     <AppContext.Provider
       value={{
         sidebarVisible,
         setSidebarVisible,
       }}
     >
-      <Seo title={title} description={description} name={name} />
       <Sidebar />
       <div className="wrapper flex-grow-1">
         <Header />
@@ -41,29 +34,6 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, ___location, pageC
         )}
         <Footer />
       </div>
-      <Script
-        src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"
-        onLoad={() => {
-          const searchElement = document.getElementById('docsearch')
-
-          // @ts-expect-error global variable
-          if (!globalThis.docsearch || !searchElement) {
-            return
-          }
-
-          // @ts-expect-error global variable
-          globalThis.docsearch({
-            appId: 'JIOZIZPLMM',
-            apiKey: '6e3f7692d2589d042bb40426b75df1b7',
-            indexName: 'coreui-react',
-            container: searchElement,
-            // Set debug to `true` if you want to inspect the dropdown
-            debug: true,
-          })
-        }}
-      />
-
-      <script type="text/javascript"></script>
     </AppContext.Provider>
   )
 }

packages/docs/src/templates/MdxLayout.tsx

@@ -6,9 +6,10 @@ import {
   CodeBlock,
   ClassNamesDocs,
   Example,
-  JSXDocs,
   ExampleSnippet,
+  JSXDocs,
   ScssDocs,
+  Seo,
 } from '../components'
 
 import { CalloutProps } from '../components/Callout'
@@ -34,6 +35,14 @@ interface DataProps {
   }
 }
 
+interface PageContextType {
+  frontmatter: {
+    title: string
+    description: string
+    name: string
+  }
+}
+
 interface Toc {
   items: TocItem[]
 }
@@ -85,6 +94,21 @@ MdxLayout.displayName = 'MdxLayout'
 
 export default MdxLayout
 
+export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
+  const { frontmatter } = pageContext
+
+  const title = frontmatter?.title || ''
+  const description = frontmatter?.description || ''
+  const name = frontmatter?.name || ''
+
+  return (
+    <>
+      <html lang="en" />
+      <Seo title={title} description={description} name={name} />
+    </>
+  )
+}
+
 export const pageQuery = graphql`
   query PageQuery($id: String, $regex: String) {
     mdx(id: { eq: $id }) {