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/README.md b/README.md index 82736f3..a28653b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ -## GitHub Error Solve - A place to find Git related errors & there solutions +# DevToolsArena - Your Ultimate Resource for Git Solutions, Web Tools, and More -![GES](https://user-images.githubusercontent.com/88102392/226684787-087307ac-3c8b-45ca-a22d-ba42665ec481.png) +![DevToolsArena](public/assets/devtoolareabanner.png) -## Why GES? +## Why DevToolsArena? -GitHub Error Solve is a community-driven platform that serves as a hub for finding solutions to various Git-related errors. Git is a powerful and widely-used version control system, but it can sometimes be challenging to navigate its complexities, especially for beginners. +DevToolsArena is your comprehensive platform for not only resolving Git-related issues but also exploring a variety of web development resources, tools, and insights. Whether you're troubleshooting Git errors, seeking valuable tools, or diving into web development topics, DevToolsArena is designed to be your go-to resource. -This platform provides a space where users can ask questions about Git errors they encounter and receive responses from experienced developers who have faced and resolved similar issues before. It also offers a repository of knowledge where users can find previously answered questions and solutions, making it a valuable resource for anyone seeking to enhance their Git skills. +Our platform provides a collaborative space where users can find solutions to common Git errors, discover essential web tools, and access a wealth of web development resources. It’s a valuable destination for both seasoned developers and newcomers looking to enhance their skills and streamline their workflows. -## Tech stack used +## Tech Stack | Language | Badge | | ---------- | ----------------------------------------------------------------------------------------------------------------- | @@ -19,32 +19,28 @@ This platform provides a space where users can ask questions about Git errors th | React | ![React](https://img.shields.io/badge/react-blue?style=for-the-badge&logo=react&logoColor=navyblue) | | Vite | ![Vite](https://img.shields.io/badge/vite-5BB4FF?style=for-the-badge&logo=vite&logoColor=FFC018) | -## Where to contribute? +## How to Contribute -Getting involved in open-source software (OSS) projects can be a gratifying and enriching experience. It not only enables you to acquire new skills but also allows you to make a valuable impact on a project that serves the wider community. +Contributing to DevToolsArena is a great way to get involved and make an impact. Here’s how you can contribute: -> Here the some steps you can take to contribute to this project: +- **Review the [Code of Conduct](/CODE_OF_CONDUCT.md)** to understand our community guidelines. +- **Follow the [Contribution Guidelines](/contributing.md)** to get started. +- **Report issues** or **suggest features** by creating an issue on GitHub. -- Remember to read [Code Of Conduct](/CODE_OF_CONDUCT.md) before contributing. -- Follow the [Contribution Documents](/contributing.md). -- Create an issue to report bugs, and vulnerabilities or add a new feature. +## Join Our Community -## Join our community +Connect with other developers and enthusiasts through our community channels. Joining a community can provide you with valuable insights, support, and networking opportunities. -If you're looking to connect with like-minded individuals who share your interests, passions, and goals, joining a community can be an excellent option. Whether it's a local group that meets in person or an online forum where members from around the world come together virtually, communities provide a sense of belonging and the opportunity to learn and grow alongside others. +[Join our Discord community](https://discord.gg/xwRbDwnbMr) -By joining a community, you can gain access to a wealth of knowledge, resources, and support that can help you achieve your personal and professional aspirations. So if you're ready to connect with others who share your interests and build meaningful relationships, consider joining a community today! +### Acknowledgments -[Discord Link](https://discord.gg/xwRbDwnbMr) +We extend our heartfelt thanks to everyone who has contributed to DevToolsArena. Your support and contributions are invaluable to the success of this project. ❤️ -### Contributors - -We would like to extend our heartfelt gratitude to all the individuals who have contributed to and supported this project. Your time, skills, and knowledge have been indispensable in ensuring the success of this endeavor. Whether you provided code, documentation, testing, or simply gave feedback and suggestions, we are truly grateful for your contributions. ❤️ - - - + + ## License -ProjectsHut is licensed under the [GNU GENERAL PUBLIC LICENSE ](/LICENSE) +DevToolsArena is licensed under the [GNU General Public License](/LICENSE). diff --git a/index.html b/index.html index c6a8435..65a4714 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,50 @@ - - - - - GitHub Error Solve - Opensource Projects - - - - - - - - -
- - - \ No newline at end of file + + + + + + + + DevToolsArena - Opensource Project + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/package.json b/package.json index 611f72d..d70bd66 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,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/assets/devtoolareabanner.png b/public/assets/devtoolareabanner.png new file mode 100644 index 0000000..fe80b6f Binary files /dev/null and b/public/assets/devtoolareabanner.png differ 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..5e21031 --- /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'; // You might need to install this library for pretty JSON output +import 'react-json-pretty/themes/monikai.css'; // Optional: import a theme for JSONPretty +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/Error.jsx b/src/components/Error/Error.jsx index 2aab25b..abcc9c4 100644 --- a/src/components/Error/Error.jsx +++ b/src/components/Error/Error.jsx @@ -38,7 +38,7 @@ const Error = ({ search, type }) => { }} > -
    +
    {filteredErrorByType.length === 0 ? (

    diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx index c630885..e4e2054 100644 --- a/src/components/Error/ErrorCard.jsx +++ b/src/components/Error/ErrorCard.jsx @@ -1,28 +1,22 @@ 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}

    - - +
    + +
    @@ -44,7 +38,7 @@ function ErrorCard({ error }) {
    -
    - {width > 768 ? ( +
    + setOpen(!open)} + className={"text-xl !cursor-pointer"} + /> +
    + { + open && +
    + setOpen(!open)} className="ml-auto mt-5 text-2xl cursor-pointer" />
      {errorType.map((item, i) => (
    • { setSelectedTag(item); setType(item); + setOpen(false) }} > + {selectedTag && selectedTag == item && } {item}
      • ))}
    - ) : ( -
    - - - {!open && ( - -
      - {errorType.map((item, i) => ( -
    • { - setSelectedTag(item); - setType(item); - setOpen(!open); - }} - > - {item} -
      • - ))} -
    -     - )} -     -
    - )} -
    +
    + }
    ); } diff --git a/src/main.jsx b/src/main.jsx index 0d2fae9..6e7b452 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; +import { Toaster } from 'sonner'; import { createBrowserRouter, RouterProvider, @@ -13,6 +14,8 @@ import DocDetail from "./pages/Doc/single doc"; import Resources from "./pages/Resources"; import BlogsList from "./pages/blogs"; import BlogDetail from "./pages/blogs/blog"; +import DevArea from "./pages/DevArea"; +import DevTools from "./pages/DevArea/DevTools"; const router = createBrowserRouter( [ @@ -40,6 +43,14 @@ const router = createBrowserRouter( path: '/resources', element: }, + { + path: '/devarea', + element: + }, + { + path: '/devarea/:tool', + element: + }, { path: '/contributors', element: @@ -55,6 +66,7 @@ const router = createBrowserRouter( ReactDOM.createRoot(document.getElementById("root")).render( + ); diff --git a/src/pages/DevArea/DevTools.jsx b/src/pages/DevArea/DevTools.jsx new file mode 100644 index 0000000..e9e4923 --- /dev/null +++ b/src/pages/DevArea/DevTools.jsx @@ -0,0 +1,18 @@ +import { useParams } from "react-router-dom"; +import Layout from "../../components/Layout/Layout"; +import MarkDownEditor from "../../components/DevAreaTools/MarkDownEditor"; +import JSONFormatter from "../../components/DevAreaTools/JSONFormatter"; + +const DevTools = () => { + const { tool } = useParams(); + + const tools = { + markdown: , + "json-formatter": + } + + + return {tools[tool]}; +}; + +export default DevTools; diff --git a/src/pages/DevArea/index.jsx b/src/pages/DevArea/index.jsx new file mode 100644 index 0000000..6f85c0b --- /dev/null +++ b/src/pages/DevArea/index.jsx @@ -0,0 +1,73 @@ +import { Link } from "react-router-dom"; +import MainTitle from "../../components/Common/MainTitle"; +import Layout from "../../components/Layout/Layout"; +import { FaArrowRight } from "react-icons/fa"; + +const DevArea = () => { + const tools = [ + { + name: "Markdown", + link: "/devarea/markdown", + isAvailable: true + }, + { + name: "JSON Formatter", + link: "/devarea/json-formatter", + isAvailable: true + }, + { + name: "Base64 Encoder/Decoder", + link: "/devarea/base64", + isAvailable: false + }, + { + name: "JWT Decoder", + link: "/devarea/jwt", + isAvailable: false + }, + { + name: "URL Encoder/Decoder", + link: "/devarea/url", + isAvailable: false + }, + { + name: "XML Formatter", + link: "/devarea/xml-formatter", + isAvailable: false + }, + { + name: "YAML Formatter", + link: "/devarea/yaml-formatter", + isAvailable: false + }, + { + name: "CSV Formatter", + link: "/devarea/csv-formatter", + isAvailable: false + }, + ] + return +
    + + +
    + {tools.map((tool, index) => ( + tool.isAvailable ? + + {tool.name} + + + : +
    + {tool.name} +
    + ))} +
    + +
    +     ; +}; + +export default DevArea; diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx index 432217e..794a187 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -74,7 +74,16 @@ const Resources = () => {

    {Object.keys(filteredResources).map((key, index) => ( - + {return $1.toUpperCase()}) + .replace(/([A-Z])/g," $1") + } + resources={filteredResources[key]} + /> ))} diff --git a/yarn.lock b/yarn.lock index 522c0b6..321696e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2767,6 +2767,13 @@ react-is@^18.2.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-json-pretty@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-json-pretty/-/react-json-pretty-2.2.0.tgz#9ba907d2b08d87e90456d87b6025feeceb8f63cf" + integrity sha512-3UMzlAXkJ4R8S4vmkRKtvJHTewG4/rn1Q18n0zqdu/ipZbUPLVZD+QwC7uVcD/IAY3s8iNVHlgR2dMzIUS0n1A== + dependencies: + prop-types "^15.6.2" + react-lifecycles-compat@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"