added Ads prop/Compo

package.json

@@ -28,6 +28,7 @@
     "@docusaurus/preset-classic": "^3.3.2",
     "@docusaurus/remark-plugin-npm2yarn": "^3.4.0",
     "@docusaurus/theme-classic": "^3.4.0",
+    "@docusaurus/theme-common": "^3.9.1",
     "@docusaurus/theme-live-codeblock": "^3.3.2",
     "@docusaurus/theme-mermaid": "^3.3.2",
     "@docusaurus/theme-search-algolia": "^3.3.2",

src/components/Ads/index.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+const AD_REFRESH_RATE = 20 * 1000;
+
+// ====== ✅ Ad Variants ======
+function CodeHarborHubIntro({ position }) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundIntro)}
+      href="https://codeharborhub.github.io/tutorial/"
+      target="_blank"
+      rel="noopener"
+      onClick={() => window.gtag?.('event', `codeharborhub.intro.${position}.click`)}>
+      <p className={styles.tagline}>
+        <strong className={styles.title}>🚀 Learn. Build. Grow.</strong>
+        Join <u>CodeHarborHub</u> to explore free tech roadmaps, advanced tutorials,
+        and career-ready projects. <u>Start your journey today!</u>
+      </p>
+    </a>
+  );
+}
+
+function CodeHarborHubCourses({ position }) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundCourses)}
+      href="https://codeharborhub.github.io/courses/"
+      target="_blank"
+      rel="noopener"
+      onClick={() => window.gtag?.('event', `codeharborhub.courses.${position}.click`)}>
+      <p className={styles.tagline}>
+        <strong className={styles.title}>🎯 Master Web Development</strong>
+        Beginner to advanced courses in <u>HTML, CSS, JS, React & AI</u> with hands-on
+        projects. <u>Learn at your own pace!</u>
+      </p>
+    </a>
+  );
+}
+
+function CodeHarborHubCommunity({ position }) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundCommunity)}
+      href="https://discord.gg/rGCZYcaHk7"
+      target="_blank"
+      rel="noopener"
+      onClick={() => window.gtag?.('event', `codeharborhub.community.${position}.click`)}>
+      <p className={styles.tagline}>
+        <strong className={styles.title}>🤝 Join Our Community</strong>
+        Connect with developers, get help on projects, and collaborate on open-source.
+        <u>Join our Discord now!</u>
+      </p>
+    </a>
+  );
+}
+
+// ====== ✅ Main Rotating Ad Component ======
+export default React.memo(function SidebarAd({ position }) {
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setCounter((c) => c + 1), AD_REFRESH_RATE);
+    return () => clearTimeout(timer);
+  }, [counter]);
+
+  return (
+    <BrowserOnly key={counter}>
+      {() => {
+        const rand = Math.random();
+        const path = window.location.pathname;
+
+        // Dynamic placement based on page
+        if (path.includes('roadmap')) {
+          return rand < 0.5
+            ? <CodeHarborHubCourses key={Math.random()} position={position} />
+            : <CodeHarborHubIntro key={Math.random()} position={position} />;
+        }
+
+        if (path.includes('community')) {
+          return <CodeHarborHubCommunity key={Math.random()} position={position} />;
+        }
+
+        // Default Rotation
+        if (rand < 0.33) return <CodeHarborHubIntro key={Math.random()} position={position} />;
+        if (rand < 0.66) return <CodeHarborHubCourses key={Math.random()} position={position} />;
+        return <CodeHarborHubCommunity key={Math.random()} position={position} />;
+      }}
+    </BrowserOnly>
+  );
+});

src/components/Ads/styles.module.css

@@ -0,0 +1,45 @@
+.container {
+  display: block;
+  border-radius: var(--ifm-global-radius);
+  padding: 1rem;
+  color: #fff;
+  background-size: cover;
+  background-position: center;
+  text-decoration: none;
+  opacity: 0.92;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.container:hover {
+  opacity: 1;
+  transform: translateY(-3px);
+  text-decoration: none;
+  color: #fff;
+}
+
+/* === Gradient Backgrounds (CodeHarborHub Theme) === */
+.backgroundIntro {
+  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
+}
+
+.backgroundCourses {
+  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
+}
+
+.backgroundCommunity {
+  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+}
+
+/* Text Styles */
+.tagline {
+  font-size: 0.8rem;
+  margin-bottom: 0;
+  line-height: 1.4;
+}
+
+.title {
+  display: block;
+  font-weight: 700;
+  font-size: 0.9rem;
+  margin-bottom: 0.3rem;
+}

src/css/custom.css

@@ -330,4 +330,12 @@ mark {
 [data-theme="dark"] .navbar {
   background: rgba(15, 23, 42, 0.862);
   border-bottom: 1px solid #4e8da0db;
+}
+
+.shoutout {
+  padding: 2px;  
+}
+
+.shoutout:hover{
+  text-decoration: none;
 }

src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { type ReactNode } from "react";
+import { useLayoutDoc } from "@docusaurus/plugin-content-docs/client";
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import DocCategoryGeneratedIndexPage from "@theme-original/DocCategoryGeneratedIndexPage";
+import type { Props } from "@theme/DocCategoryGeneratedIndexPage";
+import styles from "./styles.module.css";
+
+function HintFooter() {
+  const docPath = useLayoutDoc("guides/docs/sidebar/items", undefined)?.path;
+  return (
+    <p className={styles.footerTip}>
+      <Translate
+        values={{
+          guideLink: (
+            <Link to={`${docPath}#category-link`}>
+              <Translate>the generated index page guide</Translate>
+            </Link>
+          ),
+        }}
+      >
+        {"Want to implement the same page? Read {guideLink} to find out!"}
+      </Translate>
+    </p>
+  );
+}
+
+export default function DocCategoryGeneratedIndexPageWrapper(
+  props: Props
+): ReactNode {
+  return (
+    <>
+      <div className="margin-bottom--lg bg-yellow-50 p-4 rounded">
+        <a
+          className="shoutout"
+          href="https://www.linkedin.com/in/ajay-dhangar"
+          target="_blank"
+        >
+          👋 Hi there, I'm Ajay, an Aspiring Full Stack Developer and software engineer specialized in the MERN stack with problem solving skills and a passion for clean, efficient code. I turn ideas into solutions through curiosity and collaboration.
+        </a>
+      </div>
+      <DocCategoryGeneratedIndexPage {...props} />
+      <HintFooter />
+    </>
+  );
+}

src/theme/DocCategoryGeneratedIndexPage/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.footerTip {
+  font-size: 0.8rem;
+  margin-top: var(--ifm-paragraph-margin-bottom);
+}

src/theme/DocSidebar/Desktop/Content/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {useLocation} from '@docusaurus/router';
+import Content from '@theme-original/DocSidebar/Desktop/Content';
+import AdsComponent from "@site/src/components/AdsComponent";
+
+function SidebarAd() {
+  return (
+    // eslint-disable-next-line @docusaurus/no-untranslated-text
+    <div style={{border: 'solid thin gray', padding: 10, textAlign: 'center', marginTop: 10}}>
+      <AdsComponent />
+    </div>
+  );
+}
+
+export default function ContentWrapper(props) {
+  const {pathname} = useLocation();
+  const shouldShowSidebarAd = pathname.includes('/');
+  return (
+    <>
+      {/* {shouldShowSidebarAd && <SidebarAd />} */}
+      <Content {...props} />
+      {shouldShowSidebarAd && <SidebarAd />}
+    </>
+  );
+}

src/theme/TOC/index.js

@@ -0,0 +1,57 @@
+import React from "react";
+// import { useLocation } from "@docusaurus/router";
+import clsx from "clsx";
+import TOCItems from "@theme/TOCItems";
+import styles from "./styles.module.css";
+import Ads from "../../components/Ads";
+
+const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
+const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";
+
+// import AdsComponent from "@site/src/components/AdsComponent";
+
+// function SidebarAd() {
+//   return (
+//     <div
+//       style={{
+//         border: "solid thin gray",
+//         padding: 10,
+//         textAlign: "center",
+//         marginTop: 10,
+//       }}
+//     >
+//       <AdsComponent />
+//     </div>
+//   );
+// }
+
+function TOC({ className, ...props }) {
+  // const { pathname } = useLocation();
+  // const shouldShowSidebarAd = pathname.includes("/");
+  return (
+    <div className={clsx(styles.tableOfContents, "thin-scrollbar", className)}>
+      <div className="margin--md">
+        <Ads position="table_of_contents" />
+      </div>
+      <h3
+        className="padding-left--md padding-top--md margin-bottom--none"
+        style={{
+          textTransform: "uppercase",
+          fontSize: "0.75em",
+          color: "var(--ifm-color-emphasis-700)",
+          letterSpacing: "0.5px",
+        }}
+      >
+        Table of Contents
+      </h3>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+      {/* {shouldShowSidebarAd && <SidebarAd />} */}
+    </div>
+  );
+}
+
+export default TOC;

src/theme/TOC/styles.module.css

@@ -0,0 +1,29 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.socialLinksContainer {
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: var(--ifm-global-radius);
+}
+
+.socialLinks {
+  align-items: center;
+  display: flex;
+  font-size: 0.9rem;
+  justify-content: center;
+  gap: 1rem;
+}