codeharborhub · ajay-dhangar · Sep 28, 2025 · Sep 28, 2025
@@ -0,0 +1,113 @@
+import React from "react";
+import Head from "@docusaurus/Head";
+import MDXComponents from "../MDXComponents";
+import { MDXProvider } from "@mdx-js/react";
+import {
+  useDoc,
+  useDocsVersion,
+} from "@docusaurus/plugin-content-docs/client";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import DocPaginator from "@theme/DocPaginator";
+import DocVersionBanner from "@theme/DocVersionBanner";
+import TOC from "@theme/TOC";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import DocsInfo from "./DocsInfo";
+import DocsRating from "./DocsRating";
+
+export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
+  const { siteConfig } = useDocusaurusContext();
+  const {
+    metadata,
+    frontMatter: {
+      image: metaImage,
+      keywords,
+      hide_title: hideTitle,
+      hide_table_of_contents: hideTableOfContents,
+    },
+    toc,
+  } = useDoc();
+
+  const { url: siteUrl } = siteConfig;
+  const versionMetadata = useDocsVersion();
+  const {
+    description,
+    title,
+    permalink,
+    editUrl,
+    lastUpdatedAt,
+    lastUpdatedBy,
+    unversionedId,
+  } = metadata;
+
+  const metaImageUrl = useBaseUrl(metaImage, {
+    absolute: true,
+  });
+
+  return (
+    <>
+      <Head>
+        {description && <meta name="description" content={description} />}
+        {description && (
+          <meta property="og:description" content={description} />
+        )}
+        {keywords && keywords.length && (
+          <meta name="keywords" content={keywords.join(",")} />
+        )}
+        {metaImage && <meta property="og:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
+        {metaImage && (
+          <meta name="twitter:image:alt" content={`Image for ${title}`} />
+        )}
+        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
+        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
+      </Head>
+
+      <div className="row">
+        <div
+          className={clsx("col", {
+            [styles.docItemCol]: !hideTableOfContents,
+          })}
+        >
+          {/* <DocVersionBanner versionMetadata={versionMetadata} /> */}
+          <div className={styles.docItemContainer}>
+            <article className="article-content">              
+              {!hideTitle && (
+                <header className="mb-4">
+                  <h1 className={styles.docTitle}>{title}</h1>
+                </header>
+              )}
+              {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
+                <DocsInfo
+                  editUrl={editUrl}
+                  lastUpdatedAt={lastUpdatedAt}
+                  lastUpdatedBy={lastUpdatedBy}
+                  readingTimeInWords={readingTimeInWords}
+                  title={title}
+                />
+              )}
+              <MDXProvider components={MDXComponents}>
+                <div className="markdown" ref={contentRef}>
+                  <Content />
+                </div>
+              </MDXProvider>
+            </article>
+
+            <div className="margin-left--none margin-top--md text--center">
+              <DocsRating label={unversionedId} />
+            </div>
+            <div className="margin-vert--lg">
+              <DocPaginator previous={metadata.previous} next={metadata.next} />
+            </div>
+          </div>
+        </div>
+        {!hideTableOfContents && toc && (
+          <div className="col col--3">
+            <TOC toc={toc} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,89 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import {
+  FiEdit3,
+  FiPrinter,
+  FiAlertCircle,
+  FiClock,
+  FiUser,
+} from "react-icons/fi";
+import styles from "./styles.module.css";
+import ShareButton from "./ShareButton";
+
+function DocsInfo({ docsPluginId, ...props }) {
+  const location = useLocation();
+  const openDocIssueURL =
+    "https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io" +
+    `${location.pathname}`;
+
+  return (
+    <div className={`${styles.docsInfoWrapper} mt-4`}>
+      <div className={`${styles.docsInfoContainer}`}>
+        {/* Left Section – Meta Info */}
+        {(props.lastUpdatedAt || props.lastUpdatedBy) && (
+          <div className={styles.metaInfo}>
+            {props.lastUpdatedAt && (
+              <span className={styles.metaItem}>
+                <FiClock className={styles.icon} />
+                <time dateTime={new Date(props.lastUpdatedAt).toISOString()}>
+                  {new Date(props.lastUpdatedAt).toLocaleDateString()}
+                </time>
+              </span>
+            )}
+            {props.readingTimeInWords && (
+              <span className={styles.metaItem}>
+                ⏱ {props.readingTimeInWords}
+              </span>
+            )}
+            {props.lastUpdatedBy && (
+              <span className={styles.metaItem}>
+                <FiUser className={styles.icon} />
+                {props.lastUpdatedBy}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Right Section – Actions */}
+        <div className={styles.actions}>
+          {props.editUrl && (
+            <a
+              href={props.editUrl}
+              target="_blank"
+              rel="noreferrer noopener"
+              className={styles.actionBtn}
+            >
+              <FiEdit3 className={styles.icon} />
+              Edit
+            </a>
+          )}
+
+          <button
+            onClick={() => window.print()}
+            className={styles.actionBtn}
+            aria-label="Print this page"
+          >
+            <FiPrinter className={styles.icon} />
+            Print
+          </button>
+
+          {openDocIssueURL && (
+            <a
+              href={openDocIssueURL}
+              target="_blank"
+              rel="noreferrer noopener"
+              className={styles.actionBtn}
+            >
+              <FiAlertCircle className={styles.icon} />
+              Report
+            </a>
+          )}
+
+          <ShareButton title={props.title} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DocsInfo;
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+// import { useColorMode } from "@docusaurus/theme-common";
+import { FiThumbsUp, FiThumbsDown } from "react-icons/fi";
+import styles from "./styles.module.css";
+
+const DocsRating = ({ label }) => {
+  if (!ExecutionEnvironment.canUseDOM) return null;
+
+  const location = useLocation();
+  // const { colorMode } = useColorMode();
+  const DiscordInviteURL = "https://discord.gg/8p9Z6jkVru";
+  const openDocIssueURL =
+    `https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io${location.pathname}`;
+  const docEnhancementURL =
+    `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}`;
+
+  const [haveVoted, setHaveVoted] = useState(false);
+  const [liked, setLiked] = useState(false);
+
+  const giveFeedback = (value) => {
+    if (window.ga) {
+      window.ga("send", {
+        hitType: "event",
+        eventCategory: "button",
+        eventAction: "feedback",
+        eventLabel: label,
+        eventValue: value,
+      });
+    }
+    setLiked(value === 1);
+    setHaveVoted(true);
+  };
+
+  return (
+    <div className={`${styles.docsRating} margin-auto margin-top--lg`}>
+      {haveVoted ? (
+        liked ? (
+          <div className={styles.thankYou}>🎉 Thanks for letting us know!</div>
+        ) : (
+          <div className={styles.feedbackLinks}>
+            <p>Thanks for your feedback! Need help or have suggestions?</p>
+            <p>
+              • Ask a question on our{" "}
+              <a href={DiscordInviteURL} target="_blank" rel="noopener noreferrer">
+                Discord Channel
+              </a>
+              <br />
+              • <a href={openDocIssueURL}>Report a problem</a> <br />
+              • <a href={docEnhancementURL}>Suggest an improvement</a>
+            </p>
+          </div>
+        )
+      ) : (
+        <div className="text--center">
+          <h3 className={styles.heading}>Was this topic helpful?</h3>
+          <div className={styles.buttonGroup}>
+            <button
+              className={styles.voteBtn}
+              onClick={() => giveFeedback(1)}
+              aria-label="Yes"
+            >
+              <FiThumbsUp className={styles.icon} />
+              <span>Yes</span>
+            </button>
+            <button
+              className={styles.voteBtn}
+              onClick={() => giveFeedback(0)}
+              aria-label="No"
+            >
+              <FiThumbsDown className={styles.icon} />
+              <span>No</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DocsRating;
@@ -0,0 +1,61 @@
+//Swizzled this component to fix TOC sidebar not showing on small screens
+
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+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 Unlisted from '@theme/Unlisted';
+import styles from './styles.module.css';
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize({ desktopBreakpoint: 1150 });
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({children}) {
+  const docTOC = useDocTOC();
+  const {
+    metadata: {unlisted},
+  } = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        {unlisted && <Unlisted />}
+        <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>
+  );
+}