new error (#195)

* test vue

* new error added

* doc indiv new page added

package.json

@@ -31,5 +31,6 @@
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.2.4",
     "vite": "^4.0.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.jsx

@@ -1,20 +1,27 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./index.css";
 import Error from "./components/Error/Error";
 import SearchInput from "./components/Search/SearchInput";
 import Layout from "./components/Layout/Layout";
-import BGShape from "./components/BGShape";
 
 function App() {
   const [search, setSearch] = useState("");
   const [type, setType] = useState("");
+  const [countStar, setCountStar] = useState(0);
 
+  useEffect(() => {
+    fetch("https://api.github.com/repos/devvsakib/github-error-solve")
+      .then((response) => response.json())
+      .then((data) => setCountStar(data.stargazers_count))
+      .catch((error) => console.error("Error fetching GitHub stars:", error));
+  }, []);
+console.log(countStar)
   return (
     <>
-        <Layout>
-          <SearchInput search={search} setSearch={setSearch} setType={setType} />
-          <Error search={search} type={type} />
-        </Layout>
+      <Layout stars={countStar}>
+        <SearchInput search={search} setSearch={setSearch} setType={setType} />
+        <Error search={search} type={type} />
+      </Layout>
     </>
   );
 }

src/components/BGShape.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const BGShape = () => {
   return (
-    <div className='-z-[99999] fixed top-0 left-0 w-full h-full'>
+    <div className='-z-[99999] fixed top-0 left-0 w-full h-full opacity-40'>
       {/* <div className='-z-[999] absolute top-0 left-0 w-full h-full bg-[#44ff15]/20 backdrop-blur-[5px] rounded-lg'></div>*/}
       <div className='-z-[99999999999999] absolute -top-[70%] md:-top-[90%] -left-[50%] md:left-0 w-[800px] md:w-full h-[500px] rounded-full bg-[#16f8d2f3]/30 blur-[100px]'></div>
 

src/components/Doc/DocItem.jsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 
 const DocItem = ({ title, content }) => {
   const [readMore, setReadMore] = useState(false);
 
-  // const value = content.match(/{(.*?)}/g);
-  // var regex = new RegExp(value, "gi");
-  // const b = "<b>"
+  const value = content.match(/{(.*?)}/g);
+  var regex = new RegExp(value, "gi");
   return (
     <div className={`p-4 rounded shadow-lg shadow-[#118d7c22] bg-white/5 backdrop-blur-[10px]`}>
       <h6 className='font-semibold text-dark dark:text-white text-opacity-80 mb-2'>{title}</h6>
@@ -22,7 +22,10 @@ const DocItem = ({ title, content }) => {
           <p key={index}>{content}</p>
         ))}
       </p>
-      {content.length > 100 ? <button onClick={() => { setReadMore(!readMore) }}>{readMore ? 'Hide' : 'Read'} </button> : ''}
+      {content.length > 100 ? <Link
+        to={title.split(" ").join("_").toLowerCase()}
+      // onClick={() => { setReadMore(!readMore) }}
+      >{readMore ? 'Hide' : 'Read'} </Link> : ''}
     </div>
   );
 };

src/components/Header/Header.jsx

@@ -12,7 +12,7 @@ import { HiMoon, HiSun } from "react-icons/hi";
 import { ThemeContext } from "../../context/ThemeContext";
 import { useContext, useState } from "react";
 
-function Header({ notice }) {
+function Header({ countStar, notice }) {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [open, setOpen] = useState(false);
 
@@ -78,8 +78,19 @@ function Header({ notice }) {
             return (
               <div key={`${link.name}-${index}`}>
                 {link?.isExternalURL ? (
-                  <a target="_blank" href={link.link} className="githubBtn">
-                    {link.icon}
+                  <a target="_blank" href={link.link}>
+                    <div className="bg-blue-600/50 shadow font-semibold flex gap-1 p-1 px-2 items-center rounded-full">
+                      <span className="githubBtn">
+                        {link.icon}
+                      </span>
+                      {
+                        countStar && (
+                          <div className="flex items-center gap-1">
+                            {countStar}
+                          </div>
+                        )
+                      }
+                    </div>
                   </a>
                 ) : (
                   <Link className="flex items-center gap-1" to={link.link}>
@@ -90,7 +101,6 @@ function Header({ notice }) {
               </div>
             );
           })}
-
           <div className="text-lg cursor-pointer" onClick={toggleTheme}>
             <HiMoon className="dark:hidden" />
             <HiSun className="hidden dark:inline" />

src/components/Layout/Layout.jsx

@@ -8,17 +8,20 @@ import { ThemeProvider } from '../../context/ThemeContext';
  * prop
  * @returns A div with a header and children.
  */
-const Layout = ({children}) => {
+const Layout = ({ stars, children }) => {
     return (
-        <ThemeProvider>
-          <Header 
-              notice={"Under Construction"}
-          />
-          <div className='relative'>
-              {children}
-          </div>
-          <Footer />
-        </ThemeProvider>
+        <div className='flex flex-col justify-between min-h-screen'>
+            <ThemeProvider>
+                <Header
+                    countStar={stars}
+                    notice={"Under Construction"}
+                />
+                <div className='relative'>
+                    {children}
+                </div>
+                <Footer />
+            </ThemeProvider>
+        </div>
     );
 };
 

src/data/Doc.json

@@ -1,28 +1,44 @@
 {
-    "gettingStarted": [
+    "docs": [
         {
+            "tag": [
+                "gettingStarted"
+            ],
             "title": "Set up Git",
             "description": "Download git by just searching for git on google, you'll find a first link click on it and download it. After downloading, open the file click on install, make your preferences and Vola, git is on your PC."
         },
         {
+            "tag": [
+                "gettingStarted"
+            ],
             "title": "Creating and managing repositories",
             "description": "You can create as many repo's as you want, all you need is a github account and some internet connection. Create a github account, create a repo, you can see how to add files to the repo on our github repo readme file."
         },
         {
+            "tag": [
+                "gettingStarted"
+            ],
             "title": "Basic writing and formatting syntax",
             "description": "You can use prettier a vscode extension, which format's your code in a perfect manner with all the indentation and colour matchings. This will help you understand the syntax that you have written and help you resolving an issue."
         },
         {
+            "tag": [
+                "gettingStarted"
+            ],
             "title": "Adding locally hosted code to Github",
             "description": "`1. Create a new repository on GitHub: Log in to your GitHub account and create a new repository by clicking on the \"+\" icon in the top-right corner of the screen and selecting \"New repository\". Give your repository a name, description, and choose any other desired settings.`2. Initialize a Git repository locally: Navigate to the directory on your local machine where your code is hosted, and initialize a Git repository using the git init command.`3. Add files to the local repository: Use the git add command to add the files you want to track to the local Git repository. For example, to add all files in the current directory and its subdirectories, use the following command: {git add .}`4. Commit changes to the local repository: Use the 'git commit' command to commit the changes you've made to the local repository. Make sure to include a meaningful commit message that describes the changes you've made. For example: {git commit -m \"Initial commit\"}.`5. Add the remote repository: Use the git remote command to add a reference to the remote repository on GitHub. For example, to add a remote called \"origin\" that points to the repository you created in step 1, use the following command: 'git remote add origin https://github.com/username/repo.git'.`6. Push changes to GitHub: Use the git push command to push the changes you've made in the local repository to the remote repository on GitHub. For example, to push the changes to the master branch of the remote repository, use the following command: 'git push -u origin master'.`That's it! Your locally hosted code should now be available on GitHub. Let me know if you have any further questions."
-        }
-    ],
-    "popular": [
+        },
         {
+            "tag": [
+                "popular"
+            ],
             "title": "About pull request",
             "description": "We have many repo's on GitHub. Suppose you want to make some changes to some repo then, you'll fork that repo and make all of your changes. Now, when you create a pull request, it compares what's the difference in your fork and the main project. If owner like's it, he'll approve it."
         },
         {
+            "tag": [
+                "popular"
+            ],
             "title": "Adding locally hosted code to Github",
             "description": "`1. Create a new repository on GitHub: Log in to your GitHub account and create a new repository by clicking on the \"+\" icon in the top-right corner of the screen and selecting \"New repository\". Give your repository a name, description, and choose any other desired settings.`2. Initialize a Git repository locally: Navigate to the directory on your local machine where your code is hosted, and initialize a Git repository using the git init command.`3. Add files to the local repository: Use the git add command to add the files you want to track to the local Git repository. For example, to add all files in the current directory and its subdirectories, use the following command: {git add .}`4. Commit changes to the local repository: Use the 'git commit' command to commit the changes you've made to the local repository. Make sure to include a meaningful commit message that describes the changes you've made. For example: 'git commit -m \"Initial commit\"'.`5. Add the remote repository: Use the git remote command to add a reference to the remote repository on GitHub. For example, to add a remote called \"origin\" that points to the repository you created in step 1, use the following command: 'git remote add origin https://github.com/username/repo.git'.`6. Push changes to GitHub: Use the git push command to push the changes you've made in the local repository to the remote repository on GitHub. For example, to push the changes to the master branch of the remote repository, use the following command: 'git push -u origin master'.`That's it! Your locally hosted code should now be available on GitHub. Let me know if you have any further questions."
         }

src/data/error.json

@@ -12,6 +12,13 @@
       "description": "error: failed to push some refs to 'github.com:user/repo.git'",
       "solutions": "rm -rf .git<git init<git add .<git commit -m \"ges\"<git branch -M main<git remote add origin YOUR_GITHUB_REPO_LINK<git push -u origin main -f"
     },
+
+    {
+      "type": "merge",
+      "title": "fatal: refusing to merge unrelated histories",
+      "description": "Not able to merge in local and online.",
+      "solutions": "git merge majorUpdate --allow-unrelated-histories"
+    },
     {
       "type": "add",
       "title": "fatal: not a valid object name: 'master/main'",

src/main.jsx

@@ -5,10 +5,11 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-import Doc from "./components/Doc/Doc";
 import Contributors from "./components/Contributors/contributors";
 import BGShape from "./components/BGShape";
 import NotFound from "./pages/404";
+import SingleDoc from "./pages/single doc";
+import Doc from "./pages/doc";
 /* Creating a router object that is used to render the correct component based on the url. */
 const router = createBrowserRouter(
   [
@@ -20,6 +21,10 @@ const router = createBrowserRouter(
       path: '/doc',
       element: <Doc />
     },
+    {
+      path: '/doc/:doc_name',
+      element: <SingleDoc />
+    },
     {
       path: '/Contributors',
       element: <Contributors />

src/pages/doc.jsx

@@ -1 +1,46 @@
+import React from 'react';
+import Layout from '../components/Layout/Layout';
+import DocItem from '../components/Doc/DocItem';
+import { docs } from '../data/Doc.json';
+const Doc = () => {
+  console.log(docs)
+  return (
+    <Layout>
+      <div className='w-full md:w-5/6 mx-auto px-4 py-8'>
+        <h3 className='text-3xl text-center mb-20'>Documents</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <h4 className='mb-4'>Getting started</h4>
+            <div className="items grid grid-cols-1 gap-6">
+              {
+                docs.filter(item => item.tag[0] == "popular").map((item, idx) => (
+                  <DocItem
+                    key={idx}
+                    title={item.title}
+                    content={item.description}
+                  />
+                ))
+              }
+            </div>
+          </div>
+          <div>
+            <h4 className='mb-4'>Popular</h4>
+            <div className="items grid grid-cols-1 gap-6">
+              {
+                docs.filter(item => item.tag[0] == "popular").map((item, idx) => (
+                  <DocItem
+                    key={idx}
+                    title={item.title}
+                    content={item.description}
+                  />
+                ))
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
 
+export default Doc;

src/pages/single doc/index.jsx

@@ -0,0 +1,50 @@
+import { useParams } from "react-router-dom";
+import Layout from "../../components/Layout/Layout";
+import { docs } from '../../data/Doc.json';
+import { useEffect, useState } from "react";
+
+const SingleDoc = () => {
+    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 (
+        <Layout>
+            <section className="px-5 md:px-10 min-h-screen">
+                <h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20">
+                    {doc_name.split("_").join(" ")}
+                </h3>
+                {
+                    loading ? <p>Loading...</p>
+                        :
+                        <div className="">
+                            <div>
+                                <div className="">
+                                    {
+                                        doc.tag.map((tag, index) => (
+                                            <span key={index} className="bg-primary text-white px-2 py-1 rounded-lg mr-2">
+                                                {tag}
+                                            </span>
+                                        ))
+                                    }
+                                </div>
+                                <hr className="my-5" />
+                            </div>
+                            <p className="text-justify">{doc.description}</p>
+                        </div>
+                }
+            </section>
+        </Layout>
+    );
+};
+
+export default SingleDoc;