various fix (#205)

* test vue

* new error added

* doc indiv new page added

* major update on doc page

* husky removed

* some minor issue fix

* code clean up + code optimize for color

Author: devvsakib

posts/index.json

@@ -0,0 +1,5 @@
+[
+  {
+    "title": "pull_request_tutorial_for_beginners"
+  }
+]

posts/pull_request_tutorial_for_beginners.md

@@ -0,0 +1,122 @@
+Pull requests (PRs) are a crucial part of collaborative software development, especially in open-source projects. They allow developers to propose changes to a codebase, which can then be reviewed and discussed by others before being merged. This tutorial will guide you through the process of creating a pull request.
+
+## Prerequisites
+
+- Basic knowledge of Git and GitHub.
+- A GitHub account.
+- Git installed on your computer.
+
+## Step 1: Fork the Repository
+
+1. Navigate to the repository you want to contribute to on GitHub.
+2. Click the "Fork" button at the top right of the page. This will create a copy of the repository under your GitHub account.
+
+## Step 2: Clone Your Fork
+
+Clone the forked repository to your local machine:
+
+```bash
+git clone https://github.com/your-username/repository-name.git
+```
+Replace your-username with your GitHub username and repository-name with the name of the repository.
+
+
+## Step 3: Create a New Branch
+
+Navigate into the cloned repository:
+
+```bash
+cd repository-name
+```
+
+Create and switch to a new branch for your changes:
+```bash
+git checkout -b feature-branch-name
+```
+
+Choose a descriptive name for your branch, such as fix-bug-123 or add-feature-xyz.
+
+## Step 4: Make Your Changes
+
+Make the necessary changes to the codebase. You can use any code editor of your choice.
+
+## Step 5: Commit Your Changes
+
+```bash
+git add .
+git commit -m "Brief description of your changes"
+```
+
+Write a clear and concise commit message that describes what you have done.
+
+## Step 6: Push Your Changes
+
+Push your changes to your forked repository:
+
+```bash
+git push origin feature-branch-name
+```
+
+## Step 7: Create a Pull Request
+
+1. Go to your forked repository on GitHub.
+2. You should see a banner suggesting to compare & pull request. Click on it. If not, navigate to the "Pull requests" tab and click "New pull request."
+3. Make sure the base repository is the original repository and the base branch is where you want to merge your changes (usually main or master).
+4. The compare branch should be the branch you pushed your changes to.
+5. Write a title and description for your pull request. Provide details on what changes you made and why.
+6. Click "Create pull request."
+
+## Step 8: Address Feedback
+
+Once your pull request is created, other contributors or maintainers may review it and leave feedback. Be prepared to make additional changes based on this feedback.
+
+**To make changes:**
+    1. Make the required changes on your local branch.
+    2. Commit and push the changes:
+        ```bash
+        git add .
+        git commit -m "Addressed feedback on XYZ"
+        git push origin feature-branch-name
+        ```
+The pull request will automatically update with your new commits.
+
+## Step 9: Merge the Pull Request
+
+Once your pull request has been approved, a maintainer will merge it into the base branch. In some projects, you may have permission to merge it yourself.
+
+## Step 10: Clean Up
+
+After your pull request has been merged, you can clean up your local repository by deleting the branch:
+
+```bash
+git checkout main
+git pull origin main
+git branch -d feature-branch-name
+```
+```javascript
+
+  useEffect(() => {
+        const fetchDocs = async () => {
+            try {
+                const response = await fetch('/posts/index.json');
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setDocs(data);
+            } catch (error) {
+                setError(error.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchDocs();
+    }, []);
+
+```
+You may also delete the branch from your fork on GitHub.
+
+Congratulations! You've successfully created and merged a pull request. This process helps maintain code quality and encourages collaboration among developers.
+
+This tutorial covers the basics of creating a pull request and includes best practices to help beginners understand the process.

src/components/Doc/css/style.css

@@ -13,12 +13,12 @@ function ErrorCard({ error }) {
   const [readMore, setReadMore] = useState(false);
   const [isOpenModal, setOpenModal] = useState(false);
   const [solution, setSolution] = useState("");
-  const colorBorderBox = useColorBorderBox(error)
+  const { errorTypeColor } = useColorBorderBox(error.type)
 
   return (
     <div
       id="main-div"
-      className={colorBorderBox}
+      className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}]`}
     >
       <h3 className="title">{error.title}</h3>
 

src/components/Error/ErrorCard.jsx

@@ -1,21 +1,10 @@
+import useColorBorderBox from "../../hooks/useColorBorderBox";
+
 function ErrorType({ type }) {
+  const { errorTypeColor } = useColorBorderBox(type)
   return (
     <span
-      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative inline-block ${
-        type === "add"
-          ? "before:bg-[#4024e0]"
-          : type === "commit"
-          ? "before:bg-[#1a5ba5]"
-          : type === "merge"
-          ? "before:bg-[#118d7c]"
-          : type === "push"
-          ? "before:bg-[#8d54e1]"
-          : type === "branch"
-          ? "before:bg-[#ff0000]"
-          : type === "cmd"
-          ? "before:bg-[#e100ff]"
-          : "before:bg-[#7e1aa5]"
-      }`}
+      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative block before:bg-[${errorTypeColor}]`}
     >
       <span className="relative text-white text-sm -top-1">{type}</span>
     </span>

src/components/Error/ErrorType.jsx

@@ -9,63 +9,63 @@ import toast from "react-hot-toast";
 Modal.setAppElement("#root");
 
 const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
-  const colorBorderBox = useColorBorderBox(error);
+  const { errorTypeColor } = useColorBorderBox(error.type);
 
-    return (
-      <Modal
-        isOpen={isOpen}
-        shouldCloseOnOverlayClick={true}
-        onRequestClose={
-          () => setOpenModal((prev) => !prev)
-        }
-        contentLabel="Modal solution"
-        className={colorBorderBox + " modal"}
-        id="main-div"
-        style={{
-          overlay: {
-            backgroundColor: "rgba(0, 0 ,0, .6)",
-          },
-          content: {
-            position: "fixed",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%,-50%)",
-            padding: "30px",
-          },
-        }}
-      >
-        <h3 className="title">{error.title}</h3>
+  return (
+    <Modal
+      isOpen={isOpen}
+      shouldCloseOnOverlayClick={true}
+      onRequestClose={
+        () => setOpenModal((prev) => !prev)
+      }
+      contentLabel="Modal solution"
+      className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}] modal`}
+      id="main-div"
+      style={{
+        overlay: {
+          backgroundColor: "rgba(0, 0 ,0, .6)",
+        },
+        content: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%,-50%)",
+          padding: "30px",
+        },
+      }}
+    >
+      <h3 className="title">{error.title}</h3>
 
-        <ErrorType type={error.type} />
+      <ErrorType type={error.type} />
 
-        <div className="bg-primary w-full h-[2px] my-4" />
+      <div className="bg-primary w-full h-[2px] my-4" />
 
-        <ErrorSolutions solutions={error.solutions} />
+      <ErrorSolutions solutions={error.solutions} />
 
-        <div className="bg-primary w-full h-[2px] my-4" />
-        <div className="flex flex-row">
-          <button
-            className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
-            onClick={() => setOpenModal((prev) => !prev)}
-          >
-            <MdKeyboardArrowLeft className="text-lg" />
-            <span className="text-xs">Back</span>
-          </button>
-          <button
-            className="flex mt-8 items-center gap-2 mx-4 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
-            onClick={() => {
-              toast.success("Commands copied to clipboard");
-              navigator.clipboard.writeText(
-                error.solutions.split("<").join(" ")
-              );
-            }}
-          >
-            <MdContentCopy className="text-lg" />
-            <span className="text-xs">Copy</span>
-          </button>
-        </div>
-      </Modal>
-    );
+      <div className="bg-primary w-full h-[2px] my-4" />
+      <div className="flex flex-row">
+        <button
+          className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
+          onClick={() => setOpenModal((prev) => !prev)}
+        >
+          <MdKeyboardArrowLeft className="text-lg" />
+          <span className="text-xs">Back</span>
+        </button>
+        <button
+          className="flex mt-8 items-center gap-2 mx-4 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
+          onClick={() => {
+            toast.success("Commands copied to clipboard");
+            navigator.clipboard.writeText(
+              error.solutions.split("<").join(" ")
+            );
+          }}
+        >
+          <MdContentCopy className="text-lg" />
+          <span className="text-xs">Copy</span>
+        </button>
+      </div>
+    </Modal>
+  );
 };
 
 export default ModalSolutions;

src/components/Error/ModalSolutions.jsx

@@ -22,6 +22,12 @@ h3 {
   border-radius: 10px;
 }
 
+h3{
+  max-width: 100%;
+  overflow-wrap: break-word;
+  font-size: 15px;
+}
+
 .modal {
   width: 400px;
   max-height: 450px; 

src/components/Error/css/style.css

@@ -64,7 +64,7 @@ function SearchInput({ search, setSearch, setType }) {
                           : item === "cmd"
                             ? "bg-[#e100ff]"
                             : item === "branch"
-                              ? "bg-[#ff0000]"
+                              ? "bg-[#099104]"
                               : "bg-[#7e1aa5]"
                 } ${
                   selectedTag === item ? "ring-4 ring-red-500" : ""
@@ -116,7 +116,7 @@ function SearchInput({ search, setSearch, setType }) {
                                   : item === "cmd"
                                     ? "bg-[#40f058a8]"
                                     : item === "branch"
-                                      ? "bg-[#ff0000]"
+                                      ? "bg-[#099104]"
                                       : "bg-[#7e1aa5]"
                         } ${
                           selectedTag === item ? "ring-4 ring-red-500" : ""