Skip to content

Commit 8ed9fb7

Browse files
ajay-dhangarajay-dhangar
committed
added Ads prop/Compo
1 parent 3663ed6 commit 8ed9fb7

File tree

10 files changed

+674
-2
lines changed

10 files changed

+674
-2
lines changed

‎package-lock.json‎

Lines changed: 352 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@docusaurus/preset-classic": "^3.3.2",
2929
"@docusaurus/remark-plugin-npm2yarn": "^3.4.0",
3030
"@docusaurus/theme-classic": "^3.4.0",
31+
"@docusaurus/theme-common": "^3.9.1",
3132
"@docusaurus/theme-live-codeblock": "^3.3.2",
3233
"@docusaurus/theme-mermaid": "^3.3.2",
3334
"@docusaurus/theme-search-algolia": "^3.3.2",

‎src/components/Ads/index.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { useEffect, useState } from 'react';
2+
import BrowserOnly from '@docusaurus/BrowserOnly';
3+
import clsx from 'clsx';
4+
import styles from './styles.module.css';
5+
6+
const AD_REFRESH_RATE = 20 * 1000;
7+
8+
// ====== ✅ Ad Variants ======
9+
function CodeHarborHubIntro({ position }) {
10+
return (
11+
<a
12+
className={clsx(styles.container, styles.backgroundIntro)}
13+
href="https://codeharborhub.github.io/tutorial/"
14+
target="_blank"
15+
rel="noopener"
16+
onClick={() => window.gtag?.('event', `codeharborhub.intro.${position}.click`)}>
17+
<p className={styles.tagline}>
18+
<strong className={styles.title}>🚀 Learn. Build. Grow.</strong>
19+
Join <u>CodeHarborHub</u> to explore free tech roadmaps, advanced tutorials,
20+
and career-ready projects. <u>Start your journey today!</u>
21+
</p>
22+
</a>
23+
);
24+
}
25+
26+
function CodeHarborHubCourses({ position }) {
27+
return (
28+
<a
29+
className={clsx(styles.container, styles.backgroundCourses)}
30+
href="https://codeharborhub.github.io/courses/"
31+
target="_blank"
32+
rel="noopener"
33+
onClick={() => window.gtag?.('event', `codeharborhub.courses.${position}.click`)}>
34+
<p className={styles.tagline}>
35+
<strong className={styles.title}>🎯 Master Web Development</strong>
36+
Beginner to advanced courses in <u>HTML, CSS, JS, React & AI</u> with hands-on
37+
projects. <u>Learn at your own pace!</u>
38+
</p>
39+
</a>
40+
);
41+
}
42+
43+
function CodeHarborHubCommunity({ position }) {
44+
return (
45+
<a
46+
className={clsx(styles.container, styles.backgroundCommunity)}
47+
href="https://discord.gg/rGCZYcaHk7"
48+
target="_blank"
49+
rel="noopener"
50+
onClick={() => window.gtag?.('event', `codeharborhub.community.${position}.click`)}>
51+
<p className={styles.tagline}>
52+
<strong className={styles.title}>🤝 Join Our Community</strong>
53+
Connect with developers, get help on projects, and collaborate on open-source.
54+
<u>Join our Discord now!</u>
55+
</p>
56+
</a>
57+
);
58+
}
59+
60+
// ====== ✅ Main Rotating Ad Component ======
61+
export default React.memo(function SidebarAd({ position }) {
62+
const [counter, setCounter] = useState(0);
63+
64+
useEffect(() => {
65+
const timer = setTimeout(() => setCounter((c) => c + 1), AD_REFRESH_RATE);
66+
return () => clearTimeout(timer);
67+
}, [counter]);
68+
69+
return (
70+
<BrowserOnly key={counter}>
71+
{() => {
72+
const rand = Math.random();
73+
const path = window.location.pathname;
74+
75+
// Dynamic placement based on page
76+
if (path.includes('roadmap')) {
77+
return rand < 0.5
78+
? <CodeHarborHubCourses key={Math.random()} position={position} />
79+
: <CodeHarborHubIntro key={Math.random()} position={position} />;
80+
}
81+
82+
if (path.includes('community')) {
83+
return <CodeHarborHubCommunity key={Math.random()} position={position} />;
84+
}
85+
86+
// Default Rotation
87+
if (rand < 0.33) return <CodeHarborHubIntro key={Math.random()} position={position} />;
88+
if (rand < 0.66) return <CodeHarborHubCourses key={Math.random()} position={position} />;
89+
return <CodeHarborHubCommunity key={Math.random()} position={position} />;
90+
}}
91+
</BrowserOnly>
92+
);
93+
});

‎src/components/Ads/styles.module.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.container {
2+
display: block;
3+
border-radius: var(--ifm-global-radius);
4+
padding: 1rem;
5+
color: #fff;
6+
background-size: cover;
7+
background-position: center;
8+
text-decoration: none;
9+
opacity: 0.92;
10+
transition: opacity 0.3s ease, transform 0.3s ease;
11+
}
12+
13+
.container:hover {
14+
opacity: 1;
15+
transform: translateY(-3px);
16+
text-decoration: none;
17+
color: #fff;
18+
}
19+
20+
/* === Gradient Backgrounds (CodeHarborHub Theme) === */
21+
.backgroundIntro {
22+
background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
23+
}
24+
25+
.backgroundCourses {
26+
background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
27+
}
28+
29+
.backgroundCommunity {
30+
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
31+
}
32+
33+
/* Text Styles */
34+
.tagline {
35+
font-size: 0.8rem;
36+
margin-bottom: 0;
37+
line-height: 1.4;
38+
}
39+
40+
.title {
41+
display: block;
42+
font-weight: 700;
43+
font-size: 0.9rem;
44+
margin-bottom: 0.3rem;
45+
}

‎src/css/custom.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,4 +330,12 @@ mark {
330330
[data-theme="dark"] .navbar {
331331
background: rgba(15, 23, 42, 0.862);
332332
border-bottom: 1px solid #4e8da0db;
333+
}
334+
335+
.shoutout {
336+
padding: 2px;
337+
}
338+
339+
.shoutout:hover{
340+
text-decoration: none;
333341
}

‎src/theme/DocCategoryGeneratedIndexPage/index.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React, { type ReactNode } from "react";
9+
import { useLayoutDoc } from "@docusaurus/plugin-content-docs/client";
10+
import Link from "@docusaurus/Link";
11+
import Translate from "@docusaurus/Translate";
12+
import DocCategoryGeneratedIndexPage from "@theme-original/DocCategoryGeneratedIndexPage";
13+
import type { Props } from "@theme/DocCategoryGeneratedIndexPage";
14+
import styles from "./styles.module.css";
15+
16+
function HintFooter() {
17+
const docPath = useLayoutDoc("guides/docs/sidebar/items", undefined)?.path;
18+
return (
19+
<p className={styles.footerTip}>
20+
<Translate
21+
values={{
22+
guideLink: (
23+
<Link to={`${docPath}#category-link`}>
24+
<Translate>the generated index page guide</Translate>
25+
</Link>
26+
),
27+
}}
28+
>
29+
{"Want to implement the same page? Read {guideLink} to find out!"}
30+
</Translate>
31+
</p>
32+
);
33+
}
34+
35+
export default function DocCategoryGeneratedIndexPageWrapper(
36+
props: Props
37+
): ReactNode {
38+
return (
39+
<>
40+
<div className="margin-bottom--lg bg-yellow-50 p-4 rounded">
41+
<a
42+
className="shoutout"
43+
href="https://www.linkedin.com/in/ajay-dhangar"
44+
target="_blank"
45+
>
46+
👋 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.
47+
</a>
48+
</div>
49+
<DocCategoryGeneratedIndexPage {...props} />
50+
<HintFooter />
51+
</>
52+
);
53+
}

‎src/theme/DocCategoryGeneratedIndexPage/styles.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
.footerTip {
9+
font-size: 0.8rem;
10+
margin-top: var(--ifm-paragraph-margin-bottom);
11+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {useLocation} from '@docusaurus/router';
3+
import Content from '@theme-original/DocSidebar/Desktop/Content';
4+
import AdsComponent from "@site/src/components/AdsComponent";
5+
6+
function SidebarAd() {
7+
return (
8+
// eslint-disable-next-line @docusaurus/no-untranslated-text
9+
<div style={{border: 'solid thin gray', padding: 10, textAlign: 'center', marginTop: 10}}>
10+
<AdsComponent />
11+
</div>
12+
);
13+
}
14+
15+
export default function ContentWrapper(props) {
16+
const {pathname} = useLocation();
17+
const shouldShowSidebarAd = pathname.includes('/');
18+
return (
19+
<>
20+
{/* {shouldShowSidebarAd && <SidebarAd />} */}
21+
<Content {...props} />
22+
{shouldShowSidebarAd && <SidebarAd />}
23+
</>
24+
);
25+
}

‎src/theme/TOC/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react";
2+
// import { useLocation } from "@docusaurus/router";
3+
import clsx from "clsx";
4+
import TOCItems from "@theme/TOCItems";
5+
import styles from "./styles.module.css";
6+
import Ads from "../../components/Ads";
7+
8+
const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
9+
const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";
10+
11+
// import AdsComponent from "@site/src/components/AdsComponent";
12+
13+
// function SidebarAd() {
14+
// return (
15+
// <div
16+
// style={{
17+
// border: "solid thin gray",
18+
// padding: 10,
19+
// textAlign: "center",
20+
// marginTop: 10,
21+
// }}
22+
// >
23+
// <AdsComponent />
24+
// </div>
25+
// );
26+
// }
27+
28+
function TOC({ className, ...props }) {
29+
// const { pathname } = useLocation();
30+
// const shouldShowSidebarAd = pathname.includes("/");
31+
return (
32+
<div className={clsx(styles.tableOfContents, "thin-scrollbar", className)}>
33+
<div className="margin--md">
34+
<Ads position="table_of_contents" />
35+
</div>
36+
<h3
37+
className="padding-left--md padding-top--md margin-bottom--none"
38+
style={{
39+
textTransform: "uppercase",
40+
fontSize: "0.75em",
41+
color: "var(--ifm-color-emphasis-700)",
42+
letterSpacing: "0.5px",
43+
}}
44+
>
45+
Table of Contents
46+
</h3>
47+
<TOCItems
48+
{...props}
49+
linkClassName={LINK_CLASS_NAME}
50+
linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
51+
/>
52+
{/* {shouldShowSidebarAd && <SidebarAd />} */}
53+
</div>
54+
);
55+
}
56+
57+
export default TOC;

‎src/theme/TOC/styles.module.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.tableOfContents {
2+
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
3+
overflow-y: auto;
4+
position: sticky;
5+
top: calc(var(--ifm-navbar-height) + 1rem);
6+
}
7+
8+
@media (max-width: 996px) {
9+
.tableOfContents {
10+
display: none;
11+
}
12+
13+
.docItemContainer {
14+
padding: 0 0.3rem;
15+
}
16+
}
17+
18+
.socialLinksContainer {
19+
background-color: var(--ifm-color-emphasis-100);
20+
border-radius: var(--ifm-global-radius);
21+
}
22+
23+
.socialLinks {
24+
align-items: center;
25+
display: flex;
26+
font-size: 0.9rem;
27+
justify-content: center;
28+
gap: 1rem;
29+
}

0 commit comments

Comments
 (0)