added new fatures

docs/index.mdx

@@ -1,11 +1,10 @@
 ---
+title: Welcome to CodeHarborHub Tutorials
 sidebar_label: Welcome to CodeHarborHub
 sidebar_position: 1
 slug: /
 ---
 
-# Welcome to CodeHarborHub Tutorials
-
 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.
 
 <AdsComponent />

docusaurus.config.js

@@ -41,6 +41,9 @@ const config = {
           editUrl: "https://github.com/codeharborhub/tutorial/edit/main/",
           remarkPlugins: [remarkMath],
           rehypePlugins: [rehypeKatex],
+          numberPrefixParser: false,
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
         },
         theme: {
           customCss: "./src/css/custom.css",
@@ -124,11 +127,29 @@ const config = {
           target: "_self",
         },
         items: [
-          // {
-          //   to: "/",
-          //   position: "right",
-          //   label: "Tutorial",
-          // },
+          {
+            type: "dropdown",
+            html: '<span class="nav-emoji">📚</span> Tutorials',
+            position: "left",
+            items: [
+              {
+                type: "html",
+                value: `<div class="dropdown_grid">
+                <a class="dropbtn" href="#">Tutorials</a>
+                <div class="dropdown-content">
+                  <a href="#" class="nav__icons"> <img src="/icons/html-5.svg" title="HTML5" alt="HTML" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/css.svg" title="CSS" alt="CSS" /> </a>
+                  <a href="#" class="nav__icons" > <img src="/icons/js.svg" title="JavaScript" alt="JavaScript" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/jsx.svg" title="React.Js" alt="React" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/ts.svg" title="TypeScript" alt="TypeScript" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/py.svg" title="Python" alt="Python" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/tailwind-css.svg" title="Tailwind CSS" alt="Tailwind" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/icons/next-js.svg" title="NextJs" alt="Next" /> </a>
+                </div>
+              </div>`,
+              },
+            ],
+          },
           {
             href: "https://github.com/codeharborhub",
             position: "right",

package.json

@@ -64,6 +64,7 @@
     "react-redux": "^9.1.0",
     "react-simple-code-editor": "^0.14.0",
     "react-window": "^1.8.10",
+    "reading-time": "^1.5.0",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",
     "rehype-katex": "^7.0.0",

src/theme/DocItem/DocContent.js

@@ -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>
+    </>
+  );
+};

src/theme/DocItem/DocsInfo.js

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

src/theme/DocItem/DocsRating.js

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