How to a Sponsor Banner under Table of Contents in Docusuarus?

[Chetan11-dev]

I want add banner similar to show in image. Could you share doc link where the how to is written?

Thanks for Help.

[Josh-Cena]

Please see https://docusaurus.io/docs/swizzling#wrapping. You can try to wrap TOC and add an extra component at the bottom.

[Chetan11-dev]

Hey @Josh-Cena, I really appreciate your help! For those who are interested in knowing how to do it, here are the steps:

1. Run npm run swizzle to eject DocItem/Layout and TOC.
2. Open DocItem/Layout/index.js and make the following modifications:

// Import necessary components and modules
import React from 'react';
import clsx from 'clsx';
import { useWindowSize } from '@docusaurus/theme-common';
import { useDoc } from '@docusaurus/theme-common/internal';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
import DocItemFooter from '@theme/DocItem/Footer';
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocItemContent from '@theme/DocItem/Content';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import styles from './styles.module.css';

// Function to decide whether to render the TOC on mobile or desktop
function useDocTOC() {
  const { frontMatter, toc } = useDoc();
  const windowSize = useWindowSize();
  const hidden = frontMatter.hide_table_of_contents;
  const canRender = !hidden && toc.length > 0;
  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
  const desktop = (windowSize === 'desktop' || windowSize === 'ssr') ? <DocItemTOCDesktop /> : undefined;
  
  return {
    hidden,
    mobile,
    desktop,
  };
}

// Modified DocItemLayout component
export default function DocItemLayout({ children }) {
  const docTOC = useDocTOC();
  
  return (
    <div className="row">
      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
        <DocVersionBanner />
        <div className={styles.docItemContainer}>
          <article>
            <DocBreadcrumbs />
            <DocVersionBadge />
            {docTOC.mobile}
            <DocItemContent>{children}</DocItemContent>
            <DocItemFooter />
          </article>
          <DocItemPaginator />
        </div>
      </div>
      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
    </div>
  );
}

3. Open TOC/index.js and make the following modifications:

// Import necessary components and modules
import React from "react";
import clsx from "clsx";
import TOCItems from "@theme/TOCItems";
import styles from "./styles.module.css";

// Define custom classNames
const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";

// Modified TOC component
export default function TOC({ className, ...props }) {
  return (
    <div className={clsx(styles.tableOfContents, "thin-scrollbar", className)}>
      <TOCItems
        {...props}
        linkClassName={LINK_CLASS_NAME}
        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
      />
      <ul className="table-of-contents table-of-contents__left-border">
        <li>
          <strong>Sponsors</strong>
        </li>
        <li>
          <a
            href="https://www.omkar.cloud/l/bright-data/"
            className="table-of-contents__link toc-highlight"
          >
            <img src="https://www.omkar.cloud/images/bright-data-banner.png" />
          </a>
        </li>
      </ul>
    </div>
  );
}

The result should look like this:

Thank you again, @Josh-Cena, for your assistance!