Skip to content

Commit 3901082

Browse files
ajay-dhangarajay-dhangar
committed
added new fatures
1 parent 844b45c commit 3901082

File tree

12 files changed

+677
-7
lines changed

12 files changed

+677
-7
lines changed

‎docs/index.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
---
2+
title: Welcome to CodeHarborHub Tutorials
23
sidebar_label: Welcome to CodeHarborHub
34
sidebar_position: 1
45
slug: /
56
---
67

7-
# Welcome to CodeHarborHub Tutorials
8-
98
Hello, and welcome to CodeHarborHub! Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered.
109

1110
<AdsComponent />

‎docusaurus.config.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ const config = {
4141
editUrl: "https://github.com/codeharborhub/tutorial/edit/main/",
4242
remarkPlugins: [remarkMath],
4343
rehypePlugins: [rehypeKatex],
44+
numberPrefixParser: false,
45+
showLastUpdateAuthor: true,
46+
showLastUpdateTime: true,
4447
},
4548
theme: {
4649
customCss: "./src/css/custom.css",
@@ -124,11 +127,29 @@ const config = {
124127
target: "_self",
125128
},
126129
items: [
127-
// {
128-
// to: "/",
129-
// position: "right",
130-
// label: "Tutorial",
131-
// },
130+
{
131+
type: "dropdown",
132+
html: '<span class="nav-emoji">📚</span> Tutorials',
133+
position: "left",
134+
items: [
135+
{
136+
type: "html",
137+
value: `<div class="dropdown_grid">
138+
<a class="dropbtn" href="#">Tutorials</a>
139+
<div class="dropdown-content">
140+
<a href="#" class="nav__icons"> <img src="/icons/html-5.svg" title="HTML5" alt="HTML" /> </a>
141+
<a href="#" class="nav__icons"> <img src="/icons/css.svg" title="CSS" alt="CSS" /> </a>
142+
<a href="#" class="nav__icons" > <img src="/icons/js.svg" title="JavaScript" alt="JavaScript" /> </a>
143+
<a href="#" class="nav__icons"> <img src="/icons/jsx.svg" title="React.Js" alt="React" /> </a>
144+
<a href="#" class="nav__icons"> <img src="/icons/ts.svg" title="TypeScript" alt="TypeScript" /> </a>
145+
<a href="#" class="nav__icons"> <img src="/icons/py.svg" title="Python" alt="Python" /> </a>
146+
<a href="#" class="nav__icons"> <img src="/icons/tailwind-css.svg" title="Tailwind CSS" alt="Tailwind" /> </a>
147+
<a href="#" class="nav__icons"> <img src="/icons/next-js.svg" title="NextJs" alt="Next" /> </a>
148+
</div>
149+
</div>`,
150+
},
151+
],
152+
},
132153
{
133154
href: "https://github.com/codeharborhub",
134155
position: "right",

‎package-lock.json‎

Lines changed: 6 additions & 0 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
@@ -64,6 +64,7 @@
6464
"react-redux": "^9.1.0",
6565
"react-simple-code-editor": "^0.14.0",
6666
"react-window": "^1.8.10",
67+
"reading-time": "^1.5.0",
6768
"recharts": "^2.12.7",
6869
"redux": "^5.0.1",
6970
"rehype-katex": "^7.0.0",

‎src/theme/DocItem/DocContent.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from "react";
2+
import Head from "@docusaurus/Head";
3+
import MDXComponents from "../MDXComponents";
4+
import { MDXProvider } from "@mdx-js/react";
5+
import {
6+
useDoc,
7+
useDocsVersion,
8+
} from "@docusaurus/plugin-content-docs/client";
9+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
10+
import useBaseUrl from "@docusaurus/useBaseUrl";
11+
import DocPaginator from "@theme/DocPaginator";
12+
// import DocVersionBanner from "@theme/DocVersionBanner";
13+
import TOC from "@theme/TOC";
14+
import clsx from "clsx";
15+
import styles from "./styles.module.css";
16+
import DocsInfo from "./DocsInfo";
17+
import DocsRating from "./DocsRating";
18+
19+
export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
20+
const { siteConfig } = useDocusaurusContext();
21+
const {
22+
metadata,
23+
frontMatter: {
24+
image: metaImage,
25+
keywords,
26+
hide_title: hideTitle,
27+
hide_table_of_contents: hideTableOfContents,
28+
},
29+
toc,
30+
} = useDoc();
31+
32+
const { url: siteUrl } = siteConfig;
33+
// const versionMetadata = useDocsVersion();
34+
const {
35+
description,
36+
title,
37+
permalink,
38+
editUrl,
39+
lastUpdatedAt,
40+
lastUpdatedBy,
41+
unversionedId,
42+
} = metadata;
43+
44+
const metaImageUrl = useBaseUrl(metaImage, {
45+
absolute: true,
46+
});
47+
48+
return (
49+
<>
50+
<Head>
51+
{description && <meta name="description" content={description} />}
52+
{description && (
53+
<meta property="og:description" content={description} />
54+
)}
55+
{keywords && keywords.length && (
56+
<meta name="keywords" content={keywords.join(",")} />
57+
)}
58+
{metaImage && <meta property="og:image" content={metaImageUrl} />}
59+
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
60+
{metaImage && (
61+
<meta name="twitter:image:alt" content={`Image for ${title}`} />
62+
)}
63+
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
64+
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
65+
</Head>
66+
67+
<div className="row">
68+
<div
69+
className={clsx("col", {
70+
[styles.docItemCol]: !hideTableOfContents,
71+
})}
72+
>
73+
{/* <DocVersionBanner versionMetadata={versionMetadata} /> */}
74+
<div className={styles.docItemContainer}>
75+
<article className="article-content">
76+
{!hideTitle && (
77+
<header className="mb-4">
78+
<h1 className={styles.docTitle}>{title}</h1>
79+
</header>
80+
)}
81+
{(editUrl || lastUpdatedAt || lastUpdatedBy) && (
82+
<DocsInfo
83+
editUrl={editUrl}
84+
lastUpdatedAt={lastUpdatedAt}
85+
lastUpdatedBy={lastUpdatedBy}
86+
readingTimeInWords={readingTimeInWords}
87+
title={title}
88+
/>
89+
)}
90+
<MDXProvider components={MDXComponents}>
91+
<div className="markdown" ref={contentRef}>
92+
<Content />
93+
</div>
94+
</MDXProvider>
95+
</article>
96+
97+
<div className="margin-left--none margin-top--md text--center">
98+
<DocsRating label={unversionedId} />
99+
</div>
100+
<div className="margin-vert--lg">
101+
<DocPaginator previous={metadata.previous} next={metadata.next} />
102+
</div>
103+
</div>
104+
</div>
105+
{!hideTableOfContents && toc && (
106+
<div className="col col--3">
107+
<TOC toc={toc} />
108+
</div>
109+
)}
110+
</div>
111+
</>
112+
);
113+
};

‎src/theme/DocItem/DocsInfo.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from "react";
2+
import { useLocation } from "react-router-dom";
3+
import {
4+
FiEdit3,
5+
FiPrinter,
6+
FiAlertCircle,
7+
FiClock,
8+
FiUser,
9+
} from "react-icons/fi";
10+
import styles from "./styles.module.css";
11+
import ShareButton from "./ShareButton";
12+
13+
function DocsInfo({ docsPluginId, ...props }) {
14+
const location = useLocation();
15+
const openDocIssueURL =
16+
"https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io" +
17+
`${location.pathname}`;
18+
19+
return (
20+
<div className={`${styles.docsInfoWrapper} mt-4`}>
21+
<div className={`${styles.docsInfoContainer}`}>
22+
{/* Left Section – Meta Info */}
23+
{(props.lastUpdatedAt || props.lastUpdatedBy) && (
24+
<div className={styles.metaInfo}>
25+
{props.lastUpdatedAt && (
26+
<span className={styles.metaItem}>
27+
<FiClock className={styles.icon} />
28+
<time dateTime={new Date(props.lastUpdatedAt).toISOString()}>
29+
{new Date(props.lastUpdatedAt).toLocaleDateString()}
30+
</time>
31+
</span>
32+
)}
33+
{props.readingTimeInWords && (
34+
<span className={styles.metaItem}>
35+
⏱ {props.readingTimeInWords}
36+
</span>
37+
)}
38+
{props.lastUpdatedBy && (
39+
<span className={styles.metaItem}>
40+
<FiUser className={styles.icon} />
41+
{props.lastUpdatedBy}
42+
</span>
43+
)}
44+
</div>
45+
)}
46+
47+
{/* Right Section – Actions */}
48+
<div className={styles.actions}>
49+
{props.editUrl && (
50+
<a
51+
href={props.editUrl}
52+
target="_blank"
53+
rel="noreferrer noopener"
54+
className={styles.actionBtn}
55+
>
56+
<FiEdit3 className={styles.icon} />
57+
Edit
58+
</a>
59+
)}
60+
61+
<button
62+
onClick={() => window.print()}
63+
className={styles.actionBtn}
64+
aria-label="Print this page"
65+
>
66+
<FiPrinter className={styles.icon} />
67+
Print
68+
</button>
69+
70+
{openDocIssueURL && (
71+
<a
72+
href={openDocIssueURL}
73+
target="_blank"
74+
rel="noreferrer noopener"
75+
className={styles.actionBtn}
76+
>
77+
<FiAlertCircle className={styles.icon} />
78+
Report
79+
</a>
80+
)}
81+
82+
<ShareButton title={props.title} />
83+
</div>
84+
</div>
85+
</div>
86+
);
87+
}
88+
89+
export default DocsInfo;

‎src/theme/DocItem/DocsRating.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { useState } from "react";
2+
import { useLocation } from "react-router-dom";
3+
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
4+
// import { useColorMode } from "@docusaurus/theme-common";
5+
import { FiThumbsUp, FiThumbsDown } from "react-icons/fi";
6+
import styles from "./styles.module.css";
7+
8+
const DocsRating = ({ label }) => {
9+
if (!ExecutionEnvironment.canUseDOM) return null;
10+
11+
const location = useLocation();
12+
// const { colorMode } = useColorMode();
13+
const DiscordInviteURL = "https://discord.gg/8p9Z6jkVru";
14+
const openDocIssueURL =
15+
`https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io${location.pathname}`;
16+
const docEnhancementURL =
17+
`https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-site-enhancement-request.md&title=Doc enhancement request for codeharborhub.github.io${location.pathname}`;
18+
19+
const [haveVoted, setHaveVoted] = useState(false);
20+
const [liked, setLiked] = useState(false);
21+
22+
const giveFeedback = (value) => {
23+
if (window.ga) {
24+
window.ga("send", {
25+
hitType: "event",
26+
eventCategory: "button",
27+
eventAction: "feedback",
28+
eventLabel: label,
29+
eventValue: value,
30+
});
31+
}
32+
setLiked(value === 1);
33+
setHaveVoted(true);
34+
};
35+
36+
return (
37+
<div className={`${styles.docsRating} margin-auto margin-top--lg`}>
38+
{haveVoted ? (
39+
liked ? (
40+
<div className={styles.thankYou}>🎉 Thanks for letting us know!</div>
41+
) : (
42+
<div className={styles.feedbackLinks}>
43+
<p>Thanks for your feedback! Need help or have suggestions?</p>
44+
<p>
45+
• Ask a question on our{" "}
46+
<a href={DiscordInviteURL} target="_blank" rel="noopener noreferrer">
47+
Discord Channel
48+
</a>
49+
<br />
50+
• <a href={openDocIssueURL}>Report a problem</a> <br />
51+
• <a href={docEnhancementURL}>Suggest an improvement</a>
52+
</p>
53+
</div>
54+
)
55+
) : (
56+
<div className="text--center">
57+
<h3 className={styles.heading}>Was this topic helpful?</h3>
58+
<div className={styles.buttonGroup}>
59+
<button
60+
className={styles.voteBtn}
61+
onClick={() => giveFeedback(1)}
62+
aria-label="Yes"
63+
>
64+
<FiThumbsUp className={styles.icon} />
65+
<span>Yes</span>
66+
</button>
67+
<button
68+
className={styles.voteBtn}
69+
onClick={() => giveFeedback(0)}
70+
aria-label="No"
71+
>
72+
<FiThumbsDown className={styles.icon} />
73+
<span>No</span>
74+
</button>
75+
</div>
76+
</div>
77+
)}
78+
</div>
79+
);
80+
};
81+
82+
export default DocsRating;

0 commit comments

Comments
 (0)