Skip to content

Commit f1191a2

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4832 from codeharborhub/dev-5-1
added new features
2 parents 1b480f2 + 8fe35e3 commit f1191a2

19 files changed

+704
-0
lines changed

‎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;

‎src/theme/DocItem/Layout.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
//Swizzled this component to fix TOC sidebar not showing on small screens
2+
3+
import React from 'react';
4+
import clsx from 'clsx';
5+
import {useWindowSize} from '@docusaurus/theme-common';
6+
import {useDoc} from '@docusaurus/plugin-content-docs/client';
7+
import DocItemPaginator from '@theme/DocItem/Paginator';
8+
import DocVersionBanner from '@theme/DocVersionBanner';
9+
import DocVersionBadge from '@theme/DocVersionBadge';
10+
import DocItemFooter from '@theme/DocItem/Footer';
11+
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
12+
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
13+
import DocItemContent from '@theme/DocItem/Content';
14+
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
15+
import Unlisted from '@theme/Unlisted';
16+
import styles from './styles.module.css';
17+
18+
/**
19+
* Decide if the toc should be rendered, on mobile or desktop viewports
20+
*/
21+
function useDocTOC() {
22+
const {frontMatter, toc} = useDoc();
23+
const windowSize = useWindowSize({ desktopBreakpoint: 1150 });
24+
const hidden = frontMatter.hide_table_of_contents;
25+
const canRender = !hidden && toc.length > 0;
26+
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
27+
const desktop =
28+
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
29+
<DocItemTOCDesktop />
30+
) : undefined;
31+
return {
32+
hidden,
33+
mobile,
34+
desktop,
35+
};
36+
}
37+
export default function DocItemLayout({children}) {
38+
const docTOC = useDocTOC();
39+
const {
40+
metadata: {unlisted},
41+
} = useDoc();
42+
return (
43+
<div className="row">
44+
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
45+
{unlisted && <Unlisted />}
46+
<DocVersionBanner />
47+
<div className={styles.docItemContainer}>
48+
<article>
49+
<DocBreadcrumbs />
50+
<DocVersionBadge />
51+
{docTOC.mobile}
52+
<DocItemContent>{children}</DocItemContent>
53+
<DocItemFooter />
54+
</article>
55+
<DocItemPaginator />
56+
</div>
57+
</div>
58+
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
59+
</div>
60+
);
61+
}

0 commit comments

Comments
 (0)