diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..8238b63 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,11 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +tasks: + - init: yarn install && yarn run build + command: yarn run dev + + diff --git a/contributing.md b/contributing.md index 42ffc97..10e4d4e 100644 --- a/contributing.md +++ b/contributing.md @@ -50,11 +50,11 @@ First Fork the repository Clone the repository. ```console -git clone https://github.com//github-error-solve.git +git clone https://github.com//DevToolsArena.git ``` - Navigate to folder ```console -cd github-error-solve +cd DevToolsArena ``` - Install node dependencies ```console @@ -72,7 +72,7 @@ git checkout -b ``` - Add upstream command ```console -git remote add upstream https://github.com/devvsakib/github-error-solve.git +git remote add upstream https://github.com/devvsakib/DevToolsArena.git ``` - Stage your changes @@ -117,4 +117,4 @@ nothing to commit, working tree clean - Click on that button, this will load a new page, comparing the local branch in your forked repository against the main branch. Click the green `Create Pull Request` button. **Troubleshoot** -Facing problem starting the server or any other problem? Please let us know by raising an Issue \ No newline at end of file +Facing problem starting the server or any other problem? Please let us know by raising an Issue diff --git a/package.json b/package.json index 4567c49..02f2c2e 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-hot-toast": "^2.4.0", "react-icons": "^4.7.1", + "react-json-pretty": "^2.2.0", "react-markdown": "^9.0.1", "react-modal": "^3.16.1", "react-router-dom": "^6.25.1", diff --git a/public/posts/git_and_github_usage.md b/public/posts/git_and_github_usage.md new file mode 100644 index 0000000..02438f2 --- /dev/null +++ b/public/posts/git_and_github_usage.md @@ -0,0 +1,506 @@ +# Git and GitHub Usage Guide + +Welcome to our comprehensive guide on Git and GitHub Usage! This document is divided into two main sections: Local Usage and Remote Usage. We'll walk you through the essentials of version control, collaboration, and maintaining clean code histories. Whether you're a beginner or looking to refine your skills, this guide has something for everyone. Let's dive in! + +## Table of Contents + +1. [Local Usage](#local-usage) + + - [What is Git?](#what-is-git) + - [Why do we need Git?](#why-do-we-need-git) + - [Basic Git Commands](#basic-git-commands) + - [Branching and Merging Strategies](#branching-and-merging-strategies) + - [Handling Merge Conflicts](#handling-merge-conflicts) + - [Maintaining a Clean Commit History](#maintaining-a-clean-commit-history) + +2. [Remote Usage](#remote-usage) + - [What is GitHub?](#what-is-github) + - [Working with Remote Repositories](#working-with-remote-repositories) + - [Using GitHub for Collaboration](#using-github-for-collaboration) + - [Contributing to Open Source](#contributing-to-open-source) + +## Local Usage + +### What is Git? + +Git is a distributed version control system that helps you track changes in your code over time. It's like a time machine for your project, allowing you to view and manage different versions of your files. It was created in 2005 by Linus Torvalds, the founder of Linux, as a more powerful and efficient alternative to existing version control systems. + +### Why do we need Git? + +Imagine you're working on a awesome new feature for your web app, and suddenly things go haywire. Wouldn't it be great if you could just rewind to when everything was working perfectly? That's where Git comes in! Here's why we need it: + +1. **Version Control**: Keep track of all changes made to your project. +2. **Collaboration**: Work seamlessly with others on the same project. +3. **Backup**: Your entire project history is stored, providing a built-in backup system. +4. **Experimentation**: Try out new ideas without fear of breaking your main code. + +### Basic Git Commands + +Let's walk through some essential Git commands using our hypothetical project: "CoolApp", a revolutionary app that tells you if you need a jacket based on the weather. + +#### git init + +To create a new Git repository in your current directory, use: + +```bash +git init +``` + +This command initializes a new Git repository, creating a hidden `.git` directory to store all the version control information. + +Example: + +```bash +mkdir CoolApp +cd CoolApp +git init +``` + +Output: + +``` +Initialized empty Git repository in /path/to/CoolApp/.git/ +``` + +#### git add + +To stage changes for commit, use: + +```bash +git add +``` + +This command adds new or changed files in your working directory to the Git staging area. The staging area is a layer between the working directory and the repository. It's a place where Git stores changes that you indicate (via git add) are ready to be committed to the repository. + +Example: +Let's say we've created a new file called `weather_checker.py`. + +```bash +git add weather_checker.py +``` + +To check which files have been staged, you can use the command: + +```bash +git status +``` + +Output: + +``` +On branch master +Changes to be committed: + (use "git restore --staged ..." to unstage) + new file: weather_checker.py + +``` + +The output indicates that a new file, in this case weather_checker.py, has been staged for commit + +To stage all changes: + +```bash +git add . +``` + +#### git commit + +When you run git commit, Git takes the changes that are in the staging area and saves them into the repository. When you make a commit, it is added to the end of the current latest commit. + +```bash +git commit -m "Your commit message" +``` + +This command records the changes in the repository's history. + +Example: + +```bash +git commit -m "Add initial weather checking functionality" +``` + +Output: + +``` +[main (root-commit) f7fde4a] Add initial weather checking functionality + 1 file changed, 20 insertions(+) + create mode 100644 weather_checker.py +``` + +#### Key Features + +1. Immutability: Each commit is a permanent snapshot of the repository at a given point in time. This snapshot includes references to all the files as they existed at that moment. +2. Unique Identifier: Each commit is identified by a unique SHA-1 hash. This allows tracking and referencing specific commits in the repository history. + +#### Best Practices + +1. Commit related changes together. Avoid including unrelated changes in the same commit. +2. Commit frequently. Smaller, more frequent commits make it easier to identify where and when changes were made. + +### Branching and Merging Strategies + +Branching allows you to diverge from the main line of development and work on different features or experiments without affecting the main codebase. + +#### Creating a branch + +To create a new branch, use: + +```bash +git branch +``` + +This command creates a new branch but doesn't switch to it. + +To switch to the new branch, use: + +```bash +git checkout +``` + +Alternatively, you can create and switch to a new branch in one command: + +```bash +git checkout -b +``` + +Example: + +```bash +git branch feature/temperature-conversion +git checkout feature/temperature-conversion +``` + +Or, using the shorthand: + +```bash +git checkout -b feature/temperature-conversion +``` + +Output: + +``` +Switched to a new branch 'feature/temperature-conversion' +``` + +#### Branching Strategies + +1. Feature Branching: Creating a branch for each new feature or bug fix keeps the work organized and separated until it’s ready to be merged. +2. Release Branching: This involves creating a branch for release preparation, allowing for bug fixes and preparation without disrupting the main development work. +3. Long-Running Branches: Typically, a project has long-running branches like master or develop, which are stable versions of the project at different stages. + +#### Best Practices + +1. Perform regular commits and merges to minimize merge conflicts. +2. Use clear, descriptive names for branches to easily identify their purpose. +3. Delete branches after they are merged to keep the repository clean and manageable. + +#### Some Important Branching Commands + +1. Deleting a branch + +```bash +git branch -d +``` + +2. Rename an existing branch + +```bash +git branch -m +``` + +3. To view all the branches: + +```bash +git branch +``` + +4. To get a visual representation of the branches and the merging history: + +```bash +git log --graph +``` + +#### Merging a branch + +To combine changes from different branches, use: + +```bash +git merge +``` + +This command integrates changes from the specified branch into the current branch. + +Example: +Once you've completed work on your feature branch, you'll want to merge it back into the main branch. + +```bash +git checkout main +git merge feature/temperature-conversion +``` + +Output: + +``` +Updating f7fde4a..3e92c19 +Fast-forward + weather_checker.py | 10 ++++++++++ + 1 file changed, 10 insertions(+) +``` + +Best Practice: Use descriptive branch names like `feature/`, `bugfix/`, or `hotfix/` to keep your repository organized. + +### Handling Merge Conflicts + +Merge conflicts occur when Git can't automatically resolve differences in code between two commits. Don't panic! Here's how to handle them: + +1. Git will mark the conflicting areas in your files. +2. Open the conflicting file(s) in your text editor. +3. Look for the conflict markers: `<<<<<<<`, `=======`, and `>>>>>>>`. +4. Manually edit the file to resolve the conflict. +5. Remove the conflict markers. +6. Stage the resolved files. +7. Commit the changes. + +Example of a conflict in `weather_checker.py`: + +```python +<<<<<<< HEAD +def get_temperature(): + return 25 # Celsius +======= +def get_temperature(): + return 77 # Fahrenheit +>>>>>>> feature/temperature-conversion +``` + +To resolve, you might change it to: + +```python +def get_temperature(unit='C'): + temp_celsius = 25 + if unit.upper() == 'F': + return (temp_celsius * 9/5) + 32 + return temp_celsius +``` + +Then: + +```bash +git add weather_checker.py +git commit -m "Resolve temperature unit conflict" +``` + +#### Different Merging Strategies + +1. **Fast-Forward Merge** + A fast-forward merge in Git is like having a straight road from your feature branch back to the main road. This occurs when there have been no new changes on the main branch since you started your feature branch. If nothing new has been added there, git can simply move the end of the main branch up to the end of your feature branch. There are no conflicts in this case. +2. **3 Way Merge** + A three-way merge happens when there have been other changes on the main branch while you were working on your feature. In this case, your side branch doesn’t directly fit onto the end of the main branch anymore. To merge your changes with the main branch, Git uses a special process. It looks at three points: the tip of your feature branch, the tip of the main branch, and the common commit that both branches share. Git then figures out how to combine these changes. In this case, there can be merge conflicts that you will have to resolve. +3. **Squash Merge** + Squash merging is a way to combine all the changes from a feature branch into a single commit when you merge it into another branch. It's useful for keeping your history clean and organized. Instead of having many small commits from a feature branch, you have one concise commit. + +```bash +git merge --squash +``` + +This combines all changes into a single commit. After this, you'll need to commit these changes manually with git commit. + +### Maintaining a Clean Commit History + +A clean commit history makes it easier to understand the evolution of your project. Here are some techniques: + +#### Rebasing + +Instead of merging, you can use rebase to apply your branch's commits on top of the latest main branch: + +To rebase your current branch onto another branch, use: + +```bash +git rebase +``` + +This command moves the entire `` to begin on the tip of the ``, effectively incorporating all new commits in ``. + +Example: + +```bash +git checkout feature/awesome-feature +git rebase main +``` + +#### Interactive Rebase + +To modify commits in your branch before merging, use: + +```bash +git rebase -i +``` + +This opens an interactive session where you can squash, edit, or drop commits. + +Example: + +```bash +git rebase -i HEAD~3 # Interact with the last 3 commits +``` + +#### Using Branches Effectively + +- Keep your `main` branch stable and deployable. +- Use feature branches for new developments. +- Use release branches for preparing new production releases. +- Hotfix branches for critical bugs in production. + +Best Practice: Always pull the latest changes from the main branch before starting new work to minimize merge conflicts. + +## Remote Usage + +### What is GitHub? + +GitHub is a web-based platform that uses Git for version control. It's like a social network for programmers, allowing you to: + +- Host your Git repositories online +- Collaborate with others on projects +- Contribute to open-source projects +- Track issues and manage projects + +### Working with Remote Repositories + +#### Git Remotes + +Git remotes are repositories that are hosted on the Internet or another network. Think of them as remote locations where your Git repository lives. It could be: + +- A remote Git server: like GitHub, GitLab, or Bitbucket. +- Another developer's local machine. + +#### git clone + +To copy an existing repository to your local machine, use: + +```bash +git clone +``` + +This command creates a local copy of a remote repository, including all its files, branches, and commit history. It also creates a remote `origin`, a reference to the remote repository's url. Cloning a repository is typically only done once, at the beginning of your interaction with a project. + +Example: + +```bash +git clone https://github.com/yourusername/CoolApp.git +``` + +Output: + +``` +Cloning into 'CoolApp'... +remote: Enumerating objects: 3, done. +remote: Counting objects: 100% (3/3), done. +remote: Compressing objects: 100% (2/2), done. +remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 +Unpacking objects: 100% (3/3), done. +``` + +#### git fetch + +To download objects and refs from another repository, use: + +```bash +git fetch +``` + +This command retrieves the latest metadata info from the original (yet doesn't do any file transferring. It's more like just checking to see if there are any changes available). + +Example: + +```bash +git fetch origin +``` + +To merge the changes from origin/main to your local main: + +```bash +git merge origin/main +``` + +#### git pull + +To fetch and merge changes from the remote repository to your current branch, use: + +```bash +git pull +``` + +This command is essentially a `git fetch` followed by a `git merge`. + +Example: + +```bash +git pull origin main +``` + +#### git push + +To upload your local branch commits to the remote repository, use: + +```bash +git push +``` + +This command sends your commits to the remote repository. + +Example: + +```bash +git push origin feature/awesome-feature +``` + +Best Practice: Always pull before you push to avoid conflicts. + +### Using GitHub for Collaboration + +GitHub provides several features to enhance collaboration: + +1. **Issues**: Track bugs, enhancements, and tasks. +2. **Pull Requests**: Propose and discuss changes before merging. +3. **Projects**: Kanban-style boards for project management. +4. **Actions**: Automate your software workflows. + +### Contributing to Open Source + +1. **Fork the Repository**: Click the "Fork" button on the GitHub page of the project you want to contribute to. Fork creates a copy of the project on your GitHub account. + +2. **Clone your Fork**: + + ```bash + git clone https://github.com/yourusername/awesome-project.git + ``` + +3. **Create a Branch**: + + ```bash + git checkout -b feature/my-awesome-contribution + ``` + +4. **Make Changes and Commit**: + + ```bash + git add . + git commit -m "Add awesome new feature" + ``` + +5. **Push to your Fork**: + + ```bash + git push origin feature/my-awesome-contribution + ``` + +6. **Create a Pull Request**: Go to the original repository on GitHub and click "New Pull Request". + +7. **Making Further Changes**: + Maintainers might ask for changes. Make these changes in your local branch. After committing these changes, push them to GitHub. The PR will automatically update. +8. **Final Merging**: + Once your PR is approved, the maintainers of the original repository will merge your changes. Congratulations, your contributions are now part of the project! + +Best Practice: Always read the project's contributing guidelines before making a pull request. + +Remember, the key to successful Git and GitHub usage is clear communication, regular commits, and a good branching strategy. Happy coding! diff --git a/public/posts/index.json b/public/posts/index.json index df2f296..f3dc4b4 100644 --- a/public/posts/index.json +++ b/public/posts/index.json @@ -10,5 +10,8 @@ }, { "title": "getting_started_with_github_issues_and_setup" + }, + { + "title": "git_and_github_usage" } -] \ No newline at end of file +] diff --git a/src/components/DevAreaTools/JSONFormatter.jsx b/src/components/DevAreaTools/JSONFormatter.jsx new file mode 100644 index 0000000..b48e5df --- /dev/null +++ b/src/components/DevAreaTools/JSONFormatter.jsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import { Input, Button, Alert } from 'antd'; +import JSONPretty from 'react-json-pretty'; +import 'react-json-pretty/themes/monikai.css'; +import { toast } from 'sonner'; + +const JSONFormatter = () => { + const [jsonInput, setJsonInput] = useState(''); + const [formattedJson, setFormattedJson] = useState(null); + const [error, setError] = useState(''); + + const handleFormat = () => { + try { + const parsedJson = JSON.parse(jsonInput); + setFormattedJson(parsedJson); + setError(''); + } catch (err) { + setError('Invalid JSON format'); + setFormattedJson(null); + } + }; + + const handleClear = () => { + setJsonInput(''); + setFormattedJson(null); + setError(''); + }; + + const handleCopy = () => { + if (formattedJson) { + navigator.clipboard.writeText(JSON.stringify(formattedJson, null, 2)) + .then(() => { + toast.success('JSON copied to clipboard'); + }) + .catch(err => alert('Failed to copy JSON: ' + err)); + } else { + alert('Nothing to copy'); + } + }; + + return ( +
+

JSON Formatter

+ setJsonInput(e.target.value)} + placeholder="Paste your JSON here" + autoSize={{ minRows: 10 }} + className="mb-4 dark:bg-dark dark:text-white" + /> +
+ + + +
+ {error && } + {formattedJson && ( +
+ navigator.clipboard.writeText(JSON.stringify(data, null, 2))} /> +
+ )} +
+ ); +}; + +export default JSONFormatter; diff --git a/src/components/DevAreaTools/MarkDownEditor.jsx b/src/components/DevAreaTools/MarkDownEditor.jsx new file mode 100644 index 0000000..454fd99 --- /dev/null +++ b/src/components/DevAreaTools/MarkDownEditor.jsx @@ -0,0 +1,104 @@ +import React, { useState } from 'react'; +import ReactMarkdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; +import { Input, Button } from 'antd'; +import Layout from '../Layout/Layout'; + +const MarkDownEditor = () => { + const [content, setContent] = useState(""); + + const handleDownload = () => { + const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = 'document.md'; + link.click(); + URL.revokeObjectURL(url); + }; + + return ( +
+
+ setContent(e.target.value)} + placeholder="Enter markdown here" + autoSize={{ minRows: 20 }} + className='min-h-screen dark:bg-black text-sm md:text-base dark:text-white p-4 !outline-none placeholder:font-semibold' + /> + +
+ +
+ + {String(children).replace(/\n$/, '')} + + ) : ( + + {children} + + ); + }, + blockquote({ node, children }) { + return
{children}
; + }, + li({ node, children }) { + return
  • {children}
    • ; + }, + ul({ node, children }) { + return
      {children}
    ; + }, + ol({ node, children }) { + return
      {children}
    ; + }, + img({ node, src, alt }) { + return {alt}; + }, + h1({ node, children }) { + return

    {children}

    ; + }, + h2({ node, children }) { + return

    {children}

    ; + }, + h3({ node, children }) { + return

    {children}

    ; + }, + h4({ node, children }) { + return

    {children}

    ; + }, + h5({ node, children }) { + return
    {children}
    ; + }, + h6({ node, children }) { + return
    {children}
    ; + } + }} + > + {content} +     +
    +
    + ); +}; + +export default MarkDownEditor; diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx index bf68235..e4e2054 100644 --- a/src/components/Error/ErrorCard.jsx +++ b/src/components/Error/ErrorCard.jsx @@ -1,25 +1,18 @@ import React, { useState } from "react"; -import useColorBorderBox from "../../hooks/useColorBorderBox" -import { - MdOutlineArrowRightAlt, -} from "react-icons/md"; +import useColorBorderBox from "../../hooks/useColorBorderBox"; +import { MdOutlineArrowRightAlt } from "react-icons/md"; import ErrorType from "./ErrorType"; import "./css/style.css"; - import ModalSolutions from "./ModalSolutions"; function ErrorCard({ error }) { - const [readMore, setReadMore] = useState(false); const [isOpenModal, setOpenModal] = useState(false); const [solution, setSolution] = useState(""); - const { borderColor } = useColorBorderBox(error) + const { borderColor } = useColorBorderBox(error); return ( -
    +

    {error.title}

    @@ -45,7 +38,7 @@ function ErrorCard({ error }) {