chore: upgrade docusaurus and adjust

docs/components/button/Button.mdx

@@ -3,6 +3,7 @@ sidebar_position: 4
 ---
 
 import { Button } from "technotic";
+import Configuration from '../../configuration/Configuration.mdx';
 
 <br/>
 
@@ -193,7 +194,6 @@ from react u can redirect link to another page domain by using:
 
 <br/>
 
-import { Configuration } from '../../configuration/Configuration.mdx';
 <span style={{fontWeight: 'bold'}}>b. if u want to redirect link to another page in same domain <span  style={{color: 'red'}}>without reloading</span> by using:</span>
 
 from react u can redirect link to another page in same domain, like this one:

docs/components/color system/Color System.mdx

@@ -1,10 +1,7 @@
 import ColorPalette from '@site/src/components/ColorPalette';
 
-<p
-    style={{
-        fontSize: "24px",
-    }}
-> Modifying the project's default color scheme
+<p style={{fontSize: "24px"}}>
+  Modifying the project's default color scheme
 </p>
 
 Color System is a set of colors that represents a specific visual spectrum.

docs/deployment/Deployment.mdx

@@ -52,8 +52,4 @@ It will be commited in production branch as <b> Automated Bump Version (updated
 
 Last step is to <b> merge manually from the production branch to the master branch </b> by creating a pull request, which will update the master branch to the latest commit
 ![Deployment](/img/Deployment6.png)
-<b>
-  {" "}
-  Check the version of Technotic at
-  <a href="https://www.npmjs.com/package/technotic"> npm </a>
-</b> If the version has been updated, it means the deployment was successful
+<b>&nbsp;Check the version of Technotic at <a href="https://www.npmjs.com/package/technotic"> npm </a></b> If the version has been updated, it means the deployment was successful

docusaurus.config.js

@@ -1,8 +1,10 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+import { themes } from "prism-react-renderer";
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -22,7 +24,7 @@ const config = {
     organizationName: "BNCC", // Usually your GitHub org/user name.
     projectName: "technotic", // Usually your repo name.
 
-    onBrokenLinks: "throw",
+    onBrokenLinks: "warn",
     onBrokenMarkdownLinks: "warn",
 
     // Even if you don't use internalization, you can use this field to set useful

package.json

@@ -14,17 +14,17 @@
         "write-heading-ids": "docusaurus write-heading-ids"
     },
     "dependencies": {
-        "@docusaurus/core": "2.4.0",
-        "@docusaurus/preset-classic": "2.4.0",
-        "@mdx-js/react": "^1.6.22",
+        "@docusaurus/core": "^3.0.0",
+        "@docusaurus/preset-classic": "^3.0.0",
+        "@mdx-js/react": "^3.0.0",
         "clsx": "^1.2.1",
-        "prism-react-renderer": "^1.3.5",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "prism-react-renderer": "^2.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.3.0",
         "technotic": "^0.33.0"
     },
     "devDependencies": {
-        "@docusaurus/module-type-aliases": "2.3.1"
+        "@docusaurus/module-type-aliases": "^3.0.0"
     },
     "browserslist": {
         "production": [
@@ -39,6 +39,6 @@
         ]
     },
     "engines": {
-        "node": ">=16.14"
+        "node": ">=18.0"
     }
 }

src/components/ColorPalette/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { PALETTES, HEXCODES } from "./constants/colors";
 import useCopyToClipboard from "./hooks/useCopyToClipboard";
 
-import "./styles.colorpalette.css";
+import "./ColorPalette.css";
 
 const ColorPalette = () => {
     const { copy, tooltip, visible, tooltipVisibility } = useCopyToClipboard();

src/components/Contributors/styles.contributors.css → src/components/Contributors/Contributors.css

@@ -1,13 +1,12 @@
 .contributors {
-    margin: 64px 0;
+    margin-bottom: 50px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    gap: 70px;
+    gap: 20px;
 }
 
 .contributor-card {
-    padding: 5px 30px;
     text-align: center;
 }
 
@@ -20,7 +19,7 @@
 .container .contributor-card-content {
     background: rgba(253, 253, 253, 0.808);
     border-radius: 10px;
-    padding: 35px 20px;
+    padding: 30px 15px;
     min-width: 225px;
     min-height: 315px;
     max-height: 370px;

src/components/Contributors/index.js

@@ -2,12 +2,14 @@ import React from "react";
 
 import useContributors from "./hooks/useContributors";
 
+import "./Contributors.css"
+
 const Contributors = () => {
     const { contributors } = useContributors();
 
     return (
         <div className="contributors">
-            {contributors.map(({ id, login, htmlUrl, avatarUrl }) => (
+            {contributors.filter(({login}) => login!== "github-actions[bot]").map(({ id, login, htmlUrl, avatarUrl }) => (
                 <section className="contributor-card" key={id}>
                     <div className="contributor-card-content">
                         <img

src/components/HomepageFeatures/index.js

@@ -1,7 +1,6 @@
 import React from "react";
-import styles from "./styles.module.css";
-import Contributors from "../Contributors/index";
-import ContributorStyle from "../Contributors/styles.contributors.css";
+import styles from "./HomepageFeatures.module.css";
+import Contributors from "../Contributors";
 
 const FeaturesList = [
     {
@@ -90,7 +89,7 @@ export default function HomepageFeatures() {
                 <div className="container">
                     <h1 className="text--center">Contributors</h1>
                     <div className={styles.contributors_item}>
-                        <Contributors className={ContributorStyle} />
+                        <Contributors />
                     </div>
                 </div>
             </section>