docs: update theme

Author: mrholek

gatsby-config.js

@@ -1,25 +1,39 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const pkg = require('./package.json')
+const pkg = require(`./package.json`)
 
 module.exports = {
+  pathPrefix: `react/docs/${pkg.config.version_short}/`,
   siteMetadata: {
     title: `CoreUI for React.js`,
-    titleTemplate: '%s · React UI Components · CoreUI ',
+    titleTemplate: `%s · React UI Components · CoreUI `,
     description: `CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project.`,
     url: `https://coreui.io/react/docs/${pkg.config.version_short}/`,
-    image: '', // Path to your image you placed in the 'static' folder
-    twitterUsername: '@coreui_io',
+    siteUrl: `https://coreui.io/react/docs/${pkg.config.version_short}/`,
+    image: ``, // Path to your image you placed in the `static` folder
+    twitterUsername: `@coreui_io`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        icon: `${__dirname}/src/docs/assets/images/brand/icon.png`,
+        name: `CoreUI for React.js`,
+        short_name: `CoreUI for React.js`,
+        start_url: `https://coreui.io/react/`,
+        background_color: `#fff`,
+        theme_color: `#321fdb`,
+        display: `standalone`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
         defaultLayouts: {
-          docs: require.resolve('./src/docs/templates/Docs.tsx'),
+          docs: require.resolve(`./src/docs/templates/Docs.tsx`),
         },
         gatsbyRemarkPlugins: [
           {
-            resolve: require.resolve('./src/docs/plugins/gatsby-remark-embed-markdown'),
+            resolve: require.resolve(`./src/docs/plugins/gatsby-remark-embed-markdown`),
             options: {
               directory: `${__dirname}/docs/${pkg.config.version_short}/api/`,
             },
@@ -39,11 +53,11 @@ module.exports = {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `docs`,
-        path: `${__dirname}/docs/`,
+        path: `${__dirname}/docs/${pkg.config.version_short}/`,
       },
     },
-    'gatsby-plugin-sass',
-    'gatsby-plugin-typescript',
+    `gatsby-plugin-sass`,
+    `gatsby-plugin-typescript`,
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
@@ -55,7 +69,7 @@ module.exports = {
       options: {
         // You can add multiple tracking ids and a pageview event will be fired for all of them.
         trackingIds: [
-          'UA-118965717-1', // Google Analytics / GA
+          `UA-118965717-1`, // Google Analytics / GA
         ],
       },
     },

package.json

@@ -18,7 +18,8 @@
   "scripts": {
     "build": "rollup -c",
     "docs:api": "rimraf \"content/docs/$npm_package_config_version_short/api/*\" & node build/api.js",
-    "docs:build": "run-s docs:api gatsby build",
+    "docs:build": "gatsby build --prefix-paths",
+    "docs:dist": "run-s docs:api docs:build",
     "docs:dev": "gatsby develop",
     "docs:serve": "gatsby serve",
     "lint": "eslint \"src/components/**/*.{js,ts,tsx}\"",
@@ -61,6 +62,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "gatsby": "^3.12.0",
     "gatsby-plugin-google-gtag": "3",
+    "gatsby-plugin-manifest": "^3.12.0",
     "gatsby-plugin-mdx": "^2.12.0",
     "gatsby-plugin-sass": "4",
     "gatsby-plugin-sitemap": "4",

src/docs/components/Footer.tsx

@@ -17,16 +17,17 @@ const Footer: FC = ({ ...props }) => {
           <li className="d-inline-block ms-3">
             <a href="https://community.coreui.io/">Community</a>
           </li>
+          <li className="d-inline-block ms-3 ps-3 border-start border-2">
+            <a href="https://coreui.io/">CoreUI (Vanilla)</a>
+          </li>
+          <li className="d-inline-block ms-3">
+            <a href="https://coreui.io/angular/">CoreUI for Angular</a>
+          </li>
+          <li className="d-inline-block ms-3">
+            <a href="https://coreui.io/vue/">CoreUI for Vue.js</a>
+          </li>
         </ul>
-        <p className="mb-0">
-          CoreUI is designed as the extension of <a href="https://getbootstrap.com">Bootstrap</a>.
-          Special thanks for{' '}
-          <a href="https://getbootstrap.com/docs/5.0/about/team/">Bootstrap team</a> and{' '}
-          <a href="https://github.com/twbs/bootstrap/graphs/contributors">
-            Bootstrap&#39;s contributors
-          </a>
-          .
-        </p>
+        <p className="mb-0">CoreUI for React is Open Source UI Components Library for React.</p>
         <p className="mb-0">
           Currently v{pkg.version}. Code licensed{' '}
           <a

src/docs/components/Header.tsx

@@ -29,7 +29,7 @@ const Header: FC = ({ ...props }) => {
           <CButton
             className="d-lg-inline-block my-2 my-md-0 ms-md-3"
             color="primary"
-            href="#"
+            href="https://coreui.io/react/#compare"
             variant="outline"
           >
             <CIcon icon={cilCloudDownload} /> Download

src/docs/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import PropTypes from 'prop-types'
 
 import { CSidebar, CSidebarBrand, CImage } from '../../index'
 import { SidebarNav } from '.'
@@ -8,7 +9,11 @@ import { myContext } from './../templates/Docs'
 import items from './../nav'
 import logo from './../assets/coreui-react.svg'
 
-const Sidebar: FC = ({ ...props }) => {
+interface SidebarProps {
+  currentRoute: string
+}
+
+const Sidebar: FC<SidebarProps> = ({ ...props }) => {
   return (
     <myContext.Consumer>
       {(context) => (
@@ -22,13 +27,17 @@ const Sidebar: FC = ({ ...props }) => {
           <CSidebarBrand className="justify-content-start ps-3">
             <CImage className="d-block mt-4 mb-5" src={logo} height={50} />
           </CSidebarBrand>
-          <SidebarNav items={items} />
+          <SidebarNav items={items} currentRoute={props.currentRoute} />
         </CSidebar>
       )}
     </myContext.Consumer>
   )
 }
 
+Sidebar.propTypes = {
+  currentRoute: PropTypes.string.isRequired,
+}
+
 Sidebar.displayName = 'Sidebar'
 
 export default Sidebar

src/docs/components/SidebarNav.tsx

@@ -11,7 +11,6 @@ export type Badge = {
 }
 
 export type NavItem = {
-  component: string | ElementType
   name: string | JSX.Element
   icon?: string | JSX.Element
   badge?: Badge
@@ -21,9 +20,10 @@ export type NavItem = {
 
 interface SidebarNavProps {
   items: NavItem[]
+  currentRoute: string
 }
 
-export const SidebarNav = ({ items }: SidebarNavProps) => {
+export const SidebarNav = ({ items, currentRoute }: SidebarNavProps) => {
   const navLink = (name: string | JSX.Element, icon: string | ReactNode, badge?: Badge) => {
     return (
       <>
@@ -52,7 +52,7 @@ export const SidebarNav = ({ items }: SidebarNavProps) => {
       <CNavGroup
         compact
         toggler={navLink(name, icon)}
-        visible={location.pathname.startsWith(to)}
+        visible={to.startsWith(currentRoute)}
         idx={String(index)}
         key={index}
         {...rest}
@@ -76,4 +76,5 @@ export const SidebarNav = ({ items }: SidebarNavProps) => {
 
 SidebarNav.propTypes = {
   items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  currentRoute: PropTypes.string.isRequired,
 }

src/docs/components/Toc.tsx

@@ -5,21 +5,24 @@ const Toc: FC = (props) => {
   const { items } = props
 
   const toc = (items) => {
-    return items.map((item, index) => {
-      if (Array.isArray(item.items)) {
+    return (
+      items &&
+      items.map((item, index) => {
+        if (Array.isArray(item.items)) {
+          return (
+            <li key={index}>
+              <a href={item.url}>{item.title}</a>
+              <ul>{toc(item.items)}</ul>
+            </li>
+          )
+        }
         return (
           <li key={index}>
             <a href={item.url}>{item.title}</a>
-            <ul>{toc(item.items)}</ul>
           </li>
         )
-      }
-      return (
-        <li key={index}>
-          <a href={item.url}>{item.title}</a>
-        </li>
-      )
-    })
+      })
+    )
   }
 
   return (