refactor: better typing + remove unnecessary eslint-disable (#5335)

* Initial work

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix a few errors

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Restore default value

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update docs

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Use custom route config

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Address a few suggestions

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Revert logo change

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Restore key

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Oops

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove use of any

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove eslint-disable

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Put type reference back

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import Head from '@docusaurus/Head';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import {useTitleFormatter} from '@docusaurus/theme-common';
+import {useTitleFormatter, useThemeConfig} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
@@ -18,12 +18,9 @@ import Footer from '@theme/Footer';
 import type {Props} from '@theme/Layout';
 
 function Layout(props: Props): JSX.Element {
-  const {siteConfig = {}} = useDocusaurusContext();
-  const {
-    favicon,
-    themeConfig: {image: defaultImage, metadatas},
-    url: siteUrl,
-  } = siteConfig;
+  const {siteConfig} = useDocusaurusContext();
+  const {favicon, url: siteUrl} = siteConfig;
+  const {image: defaultImage, metadatas} = useThemeConfig();
   const {
     children,
     title,

packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx

@@ -15,7 +15,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import {Props} from '@theme/DocItem';
 
 function DocItem(props: Props): JSX.Element {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const {siteConfig = {url: ''}} = useDocusaurusContext();
   const {url: siteUrl} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;

packages/docusaurus-theme-bootstrap/src/theme/Footer/index.tsx

@@ -6,11 +6,20 @@
  */
 
 import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
-function FooterLink({to, href, label, ...props}) {
+function FooterLink({
+  to,
+  href,
+  label,
+  ...props
+}: {
+  to?: string;
+  href?: string;
+  label?: string;
+}) {
   const toUrl = useBaseUrl(to);
 
   return (
@@ -31,12 +40,9 @@ function FooterLink({to, href, label, ...props}) {
 }
 
 function Footer(): JSX.Element {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-  const {themeConfig = {}} = siteConfig;
-  const {footer} = themeConfig;
+  const {footer} = useThemeConfig();
 
-  const {links} = footer || {};
+  const {links = []} = footer || {};
 
   return (
     <footer className="container-fluid p-0 align-self-end">

packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import Navbar from '@theme/Navbar';
@@ -18,12 +19,7 @@ import type {Props} from '@theme/Layout';
 
 function Layout(props: Props): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
-  const {
-    favicon,
-    title: siteTitle,
-    themeConfig: {image: defaultImage, metadatas},
-    url: siteUrl,
-  } = siteConfig;
+  const {favicon, title: siteTitle, url: siteUrl} = siteConfig;
   const {
     children,
     title,
@@ -33,6 +29,7 @@ function Layout(props: Props): JSX.Element {
     keywords,
     permalink,
   } = props;
+  const {image: defaultImage, metadatas} = useThemeConfig();
   const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
 
   const metaImage = image || defaultImage;

packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.tsx

@@ -7,7 +7,7 @@
 
 import React, {useState, useCallback} from 'react';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useLogo from '@theme/hooks/useLogo';
 import {
@@ -18,6 +18,16 @@ import {
   NavItem as NavItemBase,
 } from 'reactstrap';
 
+interface NavItemProps {
+  activeBasePath?: string;
+  activeBaseRegex?: RegExp;
+  href?: string;
+  label?: string;
+  to?: string;
+  activeClassName?: string;
+  prependBaseUrlToHref?: boolean;
+}
+
 function NavItem({
   activeBasePath,
   activeBaseRegex,
@@ -27,7 +37,7 @@ function NavItem({
   activeClassName = 'nav-link text-info',
   prependBaseUrlToHref,
   ...props
-}) {
+}: NavItemProps) {
   const toUrl = useBaseUrl(to);
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
@@ -63,12 +73,7 @@ function NavItem({
 }
 
 function Navbar(): JSX.Element {
-  const {
-    siteConfig: {
-      themeConfig: {navbar: {title = '', items: links = []} = {}},
-    },
-    isClient,
-  } = useDocusaurusContext();
+  const {navbar: {title = '', items: links = []} = {}} = useThemeConfig();
 
   const [navbarShown, setNavbarShown] = useState(false);
   const handleNavbarToggle = useCallback(() => {
@@ -86,7 +91,6 @@ function Navbar(): JSX.Element {
       <Link to={logoLink} {...logoLinkProps}>
         {logoImageUrl != null && (
           <img
-            key={isClient}
             width="50"
             height="50"
             style={{

packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.ts

@@ -5,19 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import type {LogoLinkProps, useLogoReturns} from '@theme/hooks/useLogo';
 
 const useLogo = (): useLogoReturns => {
   const {
-    siteConfig: {themeConfig: {navbar: {logo = {}} = {}} = {}} = {},
-  } = useDocusaurusContext();
-  const logoLink = useBaseUrl(logo.href || '/');
+    navbar: {logo},
+  } = useThemeConfig();
+  const logoLink = useBaseUrl(logo?.href || '/');
   let logoLinkProps: LogoLinkProps = {};
 
-  if (logo.target) {
+  if (logo?.target) {
     logoLinkProps = {target: logo.target};
   } else if (!isInternalUrl(logoLink)) {
     logoLinkProps = {
@@ -25,13 +25,13 @@ const useLogo = (): useLogoReturns => {
       target: '_blank',
     };
   }
-  const logoImageUrl = useBaseUrl(logo.src);
+  const logoImageUrl = useBaseUrl(logo?.src);
 
   return {
     logoLink,
     logoLinkProps,
     logoImageUrl,
-    logoAlt: logo.alt,
+    logoAlt: logo?.alt ?? '',
   };
 };