From 8fb63979f5666416c6fbce112d4ecabf5cc999ae Mon Sep 17 00:00:00 2001 From: Sakib Ahmed Date: Sun, 28 Jul 2024 11:22:05 +0600 Subject: [PATCH] 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 --- posts/index.json | 5 + posts/pull_request_tutorial_for_beginners.md | 122 +++++++++++++++++++ src/components/Doc/css/style.css | 0 src/components/Error/ErrorCard.jsx | 4 +- src/components/Error/ErrorType.jsx | 19 +-- src/components/Error/ModalSolutions.jsx | 104 ++++++++-------- src/components/Error/css/style.css | 6 + src/components/Error/css/style.css.map | 1 - src/components/Error/css/style.scss | 6 - src/components/Search/SearchInput.jsx | 4 +- src/hooks/useColorBorderBox.js | 59 ++++----- src/main.jsx | 9 +- src/pages/{404.jsx => NotFound.jsx} | 4 +- src/pages/single doc/index.jsx | 50 -------- 14 files changed, 217 insertions(+), 176 deletions(-) create mode 100644 posts/index.json create mode 100644 posts/pull_request_tutorial_for_beginners.md delete mode 100644 src/components/Doc/css/style.css delete mode 100644 src/components/Error/css/style.css.map delete mode 100644 src/components/Error/css/style.scss rename src/pages/{404.jsx => NotFound.jsx} (74%) delete mode 100644 src/pages/single doc/index.jsx diff --git a/posts/index.json b/posts/index.json new file mode 100644 index 0000000..cb6e4f4 --- /dev/null +++ b/posts/index.json @@ -0,0 +1,5 @@ +[ + { + "title": "pull_request_tutorial_for_beginners" + } +] \ No newline at end of file diff --git a/posts/pull_request_tutorial_for_beginners.md b/posts/pull_request_tutorial_for_beginners.md new file mode 100644 index 0000000..579a08e --- /dev/null +++ b/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. \ No newline at end of file diff --git a/src/components/Doc/css/style.css b/src/components/Doc/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx index f888762..cebe658 100644 --- a/src/components/Error/ErrorCard.jsx +++ b/src/components/Error/ErrorCard.jsx @@ -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 (

{error.title}

diff --git a/src/components/Error/ErrorType.jsx b/src/components/Error/ErrorType.jsx index 5df219d..6370afc 100644 --- a/src/components/Error/ErrorType.jsx +++ b/src/components/Error/ErrorType.jsx @@ -1,21 +1,10 @@ +import useColorBorderBox from "../../hooks/useColorBorderBox"; + function ErrorType({ type }) { + const { errorTypeColor } = useColorBorderBox(type) return ( {type} diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx index 48eb7d2..2e1a185 100644 --- a/src/components/Error/ModalSolutions.jsx +++ b/src/components/Error/ModalSolutions.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 ( - 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", - }, - }} - > -

{error.title}

+ return ( + 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", + }, + }} + > +

{error.title}

- + -
+
- + -
-
- - -
- - ); +
+
+ + +
+ + ); }; export default ModalSolutions; diff --git a/src/components/Error/css/style.css b/src/components/Error/css/style.css index 623f0d6..cd7b97a 100644 --- a/src/components/Error/css/style.css +++ b/src/components/Error/css/style.css @@ -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; diff --git a/src/components/Error/css/style.css.map b/src/components/Error/css/style.css.map deleted file mode 100644 index 9efd591..0000000 --- a/src/components/Error/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACE,eAAA;EACA,yBAAA;EACA,eAAA;ACAF","file":"style.css"} \ No newline at end of file diff --git a/src/components/Error/css/style.scss b/src/components/Error/css/style.scss deleted file mode 100644 index 47c41d0..0000000 --- a/src/components/Error/css/style.scss +++ /dev/null @@ -1,6 +0,0 @@ - -h3{ - max-width: 100%; - overflow-wrap: break-word; - font-size: 15px; -} \ No newline at end of file diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx index f8ed636..ec3469e 100644 --- a/src/components/Search/SearchInput.jsx +++ b/src/components/Search/SearchInput.jsx @@ -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" : "" diff --git a/src/hooks/useColorBorderBox.js b/src/hooks/useColorBorderBox.js index 6580a84..4e050c4 100644 --- a/src/hooks/useColorBorderBox.js +++ b/src/hooks/useColorBorderBox.js @@ -1,46 +1,29 @@ import { useState, useEffect } from "react"; -const useColorBorderBox = (error = "") => { - const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5"); - - useEffect(() => { - if (error.type == "add") { - return setErrorTypeColor("#4024e0"); - } - if (error.type == "branch") { - return setErrorTypeColor("#ff0000"); - } - if (error.type == "push") { - return setErrorTypeColor("#8d54e1"); - } - if (error.type == "merge") { - return setErrorTypeColor("#118d7c"); - } - if (error.type == "commit") { - return setErrorTypeColor("#1a5ba5"); - } - return setErrorTypeColor("#7e1aa5"); - }, [errorTypeColor]); +const useColorBorderBox = (errorType = "") => { + const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5"); - let item = error.type; + useEffect(() => { + if (errorType == "add") { + return setErrorTypeColor("#4024e0"); + } + if (errorType == "branch") { + return setErrorTypeColor("#099104"); + } + if (errorType == "push") { + return setErrorTypeColor("#8d54e1"); + } + if (errorType == "merge") { + return setErrorTypeColor("#118d7c"); + } + if (errorType == "commit") { + return setErrorTypeColor("#1a5ba5"); + } + return setErrorTypeColor("#7e1aa5"); + }, [errorType]); - let response = `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 ${ - item === "add" - ? "border-[#4024e0]" - : item === "commit" - ? "border-[#1a5ba5]" - : item === "merge" - ? "border-[#118d7c]" - : item === "push" - ? "border-[#8d54e1]" - : item === "cmd" - ? "border-[#e100ff]" - : item === "branch" - ? "border-[#ff0000]" - : "border-[#7e1aa5]" - }` - return response + return { errorTypeColor, setErrorTypeColor }; } export default useColorBorderBox; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 5ca8014..0402dc5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,12 +7,9 @@ import { } from "react-router-dom"; import Contributors from "./components/Contributors/contributors"; import BGShape from "./components/BGShape"; -import NotFound from "./pages/404"; -import SingleDoc from "./pages/single doc"; +import NotFound from "./pages/NotFound"; import DocList from "./pages/Doc"; import DocDetail from "./pages/Doc/single doc"; -import 'antd/dist/reset.css'; // Import Ant Design styles -import 'tailwindcss/tailwind.css'; // Import Tailwind CSS styles const router = createBrowserRouter( [ @@ -28,10 +25,6 @@ const router = createBrowserRouter( path: '/doc/:slug', element: }, - { - path: '/doc/:doc_name', - element: - }, { path: '/Contributors', element: diff --git a/src/pages/404.jsx b/src/pages/NotFound.jsx similarity index 74% rename from src/pages/404.jsx rename to src/pages/NotFound.jsx index 5c50ddf..687cc3d 100644 --- a/src/pages/404.jsx +++ b/src/pages/NotFound.jsx @@ -4,8 +4,8 @@ export default function NotFound() { return (
-             

Not found

-                          {" "} +

Not found

+ {" "} { - const { doc_name } = useParams(); - const [doc, setDoc] = useState({}); - const [loading, setLoading] = useState(true); - - useEffect(() => { - setLoading(true); - const doc = docs.find(item => item.title.toLowerCase() === doc_name.split("_").join(" ")); - setDoc(doc); - setTimeout(() => { - setLoading(false); - }, 300); - }, [doc_name]); - - return ( - -
-

- {doc_name.split("_").join(" ")} -

- { - loading ?

Loading...

- : -
-
-
- { - doc.tag.map((tag, index) => ( - - {tag} - - )) - } -
-
-
-

{doc.description}

-
- } -
- - ); -}; - -export default SingleDoc;