├── src
    ├── App.css
    ├── index.css
    ├── main.jsx
    ├── components
    │   ├── Navbar.css
    │   ├── EditableOutput.jsx
    │   ├── FAQ.jsx
    │   ├── StarFork.jsx
    │   ├── Home.jsx
    │   ├── Navbar.jsx
    │   ├── OutputDisplay.jsx
    │   ├── ProfileForm.jsx
    │   ├── MarkdownToolbar.jsx
    │   └── InputForm.jsx
    ├── data
    │   └── faqData.json
    ├── App.jsx
    └── hooks
    │   ├── useReadmeGenerator.jsx
    │   └── GitHubProfileGenerator.jsx
├── .dockerignore
├── docker-compose.yml
├── postcss.config.js
├── Dockerfile.dev
├── vite.config.js
├── Dockerfile
├── .gitignore
├── tailwind.config.js
├── index.html
├── .eslintrc.cjs
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── custom_issue_template.md
    │   ├── feature_request_template.md
    │   └── bug_report_template.md
    └── workflows
    │   └── deploy.yml
├── LICENSE
├── package.json
├── public
    └── vite.svg
├── README.md
├── CODE_OF_CONDUCT.md
└── CONTRIBUTING.md


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .dockerignore
4 | .git
5 | .gitignore
6 | Dockerfile.dev


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.8"
2 | services:
3 |   react-app:
4 |     build: .
5 |     ports:
6 |       - "3000:80"
7 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/Dockerfile.dev:
--------------------------------------------------------------------------------
 1 | FROM node:lts-alpine
 2 | WORKDIR '/app'
 3 | 
 4 | # Copy package.json file to the container
 5 | COPY package*.json .
 6 | RUN npm install
 7 | 
 8 | COPY . .
 9 | 
10 | CMD ["npm", "run", "dev"]


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [react()],
 6 |   server: {
 7 |     port:3000,
 8 |     host:true,
 9 |   }
10 | })


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:lts-alpine AS builder
 2 | WORKDIR '/app'
 3 | COPY package*.json ./
 4 | RUN npm install
 5 | COPY . .
 6 | RUN npm run build
 7 | 
 8 | 
 9 | FROM nginx:alpine
10 | EXPOSE 80
11 | COPY --from=builder /app/dist /usr/share/nginx/html


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | .env
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./src/**/*.{js,jsx,ts,tsx}",
 4 |   ],
 5 |   theme: {
 6 |     extend: {
 7 |       typography: (theme) => ({
 8 |         invert: {
 9 |           css: {
10 |             '--tw-prose-body': theme('colors.gray[300]'),
11 |             '--tw-prose-headings': theme('colors.gray[200]'),
12 |             '--tw-prose-links': theme('colors.purple[400]'),
13 |             // ... other prose styles
14 |           },
15 |         },
16 |       }),
17 |     },
18 |   },
19 |   plugins: [
20 |     require('@tailwindcss/typography'),
21 |   ],
22 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <title>READMEasy</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <div id="root"></div>
12 |   <script type="module" src="/src/main.jsx"></script>
13 |   <script>
14 |     window.embeddedChatbotConfig = {
15 |       chatbotId: "O9l7GvpZM3F9CZoiyROwI",
16 |       domain: "www.chatbase.co"
17 |     }
18 |   </script>
19 |   <script src="https://www.chatbase.co/embed.min.js" chatbotId="O9l7GvpZM3F9CZoiyROwI" domain="www.chatbase.co" defer>
20 |   </script>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/custom_issue_template.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "💡 Custom Issue"
 3 | about: "Create a custom issue related to the READMEasy-Website."
 4 | title: "[Custom]: "
 5 | labels: enhancement, discussion
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | # 💡 Custom Issue
11 | 
12 | ### 📝 Description
13 | <!-- Provide a detailed explanation of your issue or request. -->
14 | 
15 | ### 🔍 Steps to Reproduce (if applicable)
16 | 1. 
17 | 2. 
18 | 3. 
19 | 
20 | ### 🎯 Expected Outcome
21 | <!-- Describe what you expect to happen. -->
22 | 
23 | ### 📸 Screenshots or Additional Information
24 | <!-- Add screenshots, logs, or any additional information if applicable. -->
25 | 
26 | 


--------------------------------------------------------------------------------
/src/components/Navbar.css:
--------------------------------------------------------------------------------
 1 | .nav-link {
 2 |     position: relative;
 3 |     padding-bottom: 2px; /* Adjust this to create space for the underline */
 4 |     transition: color 0.3s ease;
 5 |   }
 6 |   
 7 |   .nav-link::after {
 8 |     content: "";
 9 |     position: absolute;
10 |     width: 0;
11 |     height: 2px; /* Thickness of the underline */
12 |     left: 0;
13 |     bottom: 0;
14 |     background-color: #a855f7; /* Purple color for the underline */
15 |     transition: width 0.3s ease;
16 |   }
17 |   
18 |   .nav-link:hover::after {
19 |     width: 100%; /* Animate underline on hover */
20 |   }
21 |   
22 |   .underline-active::after {
23 |     width: 100%; /* Keep underline for active nav item */
24 |   }
25 |   


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request_template.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "🚀 Feature Request"
 3 | about: "Suggest a new feature or enhancement for the READMEasy-Webiste."
 4 | title: "[Feature]: "
 5 | labels: enhancement, feature request
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | # 🚀 Feature Request
11 | 
12 | ### 📝 Feature Description
13 | <!-- A clear and concise description of the feature you're requesting. -->
14 | 
15 | ### 🔧 How Will This Enhance the App?
16 | <!-- Explain how the requested feature will improve the user experience or functionality. -->
17 | 
18 | ### 🎯 Use Cases
19 | <!-- If applicable, provide use cases that illustrate the need for the feature. -->
20 | 
21 | ### 📦 Suggested Implementation
22 | <!-- If you have suggestions on how to implement this feature, describe them here. -->
23 | 
24 | ### 📸 Additional Context
25 | <!-- Add any other context, screenshots, or details that will help support your request. -->
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report_template.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "🐞 Bug Report"
 3 | about: "Report a bug in the READMEasy-Website."
 4 | title: "[Bug]: "
 5 | labels: bug
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | # 🐞 Bug Report
11 | 
12 | ### 📋 Description
13 | <!-- A clear and concise description of what the bug is. -->
14 | 
15 | ### ⚙️ Steps to Reproduce
16 | Steps to reproduce the behavior:
17 | 1. 
18 | 2. 
19 | 3. 
20 | 
21 | ### ✔️ Expected Behavior
22 | <!-- A clear description of what you expected to happen. -->
23 | 
24 | ### ❌ Actual Behavior
25 | <!-- A clear description of what actually happens. -->
26 | 
27 | ### 📷 Screenshots
28 | <!-- If applicable, add screenshots to help explain your problem. -->
29 | 
30 | ### 🖥️ Environment (if applicable):
31 | - **OS**: (e.g., Windows, macOS, Linux)
32 | - **Browser**: (e.g., Chrome, Safari, Firefox)
33 | - **Version**: (if relevant)
34 | 
35 | ### 🔧 Additional Information
36 | <!-- Include any other details that may help diagnose the issue. -->
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Bama Charan Chhandogi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to AWS EC2
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout Repository
14 |         uses: actions/checkout@v3
15 | 
16 |       - name: Set up SSH Key
17 |         run: |
18 |           mkdir -p ~/.ssh
19 |           echo "${{ secrets.EC2_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
20 |           chmod 600 ~/.ssh/id_rsa
21 |           ssh-keyscan -H ${{ secrets.EC2_HOST }} >> ~/.ssh/known_hosts
22 | 
23 |       - name: Copy Files to EC2
24 |         run: |
25 |           scp -i ~/.ssh/id_rsa -r * ec2-user@${{ secrets.EC2_HOST }}:/home/ec2-user/app
26 | 
27 |       - name: Deploy on EC2
28 |         run: |
29 |           ssh -i ~/.ssh/id_rsa ec2-user@${{ secrets.EC2_HOST }} << 'EOF'
30 |             cd /home/ec2-user/app
31 |             sudo docker stop my-react-app || true
32 |             sudo docker rm my-react-app || true
33 |             sudo docker rmi my-react-app || true
34 |             sudo docker build -t my-react-app .
35 |             sudo docker run -d -p 80:80 --name my-react-app my-react-app
36 |           EOF
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "readmefilegenerater",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@emoji-mart/data": "^1.2.1",
14 |     "@emoji-mart/react": "^1.1.1",
15 |     "@google/generative-ai": "^0.14.1",
16 |     "axios": "^1.7.7",
17 |     "emoji-mart": "^5.6.0",
18 |     "lucide-react": "^0.453.0",
19 |     "react": "^18.3.1",
20 |     "react-dom": "^18.3.1",
21 |     "react-icons": "^5.3.0",
22 |     "react-markdown": "^9.0.1",
23 |     "react-router-dom": "^6.24.1",
24 |     "rehype-raw": "^7.0.0",
25 |     "rehype-sanitize": "^6.0.0",
26 |     "remark-gfm": "^4.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "@tailwindcss/typography": "^0.5.13",
30 |     "@types/react": "^18.3.3",
31 |     "@types/react-dom": "^18.3.0",
32 |     "@vitejs/plugin-react": "^4.3.1",
33 |     "autoprefixer": "^10.4.19",
34 |     "eslint": "^8.57.0",
35 |     "eslint-plugin-react": "^7.34.2",
36 |     "eslint-plugin-react-hooks": "^4.6.2",
37 |     "eslint-plugin-react-refresh": "^0.4.7",
38 |     "postcss": "^8.4.39",
39 |     "tailwindcss": "^3.4.4",
40 |     "vite": "^5.3.1"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/data/faqData.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |       "question": "What is READMEasy?",
 4 |       "answer": "READMEasy is a user-friendly web platform that empowers you to generate comprehensive and engaging README files for your software projects. Powered by advanced AI models, ReadMeister effortlessly tailors your README content based on your project's unique details."
 5 |     },
 6 |     {
 7 |       "question": "How do I get started?",
 8 |       "answer": "To get started, simply fill out the README Generator form and integrate it into your project."
 9 |     },
10 |     {
11 |       "question": "How do I contribute to this project?",
12 |       "answer": "We welcome contributions from the community! You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository. Join our community discussions and help us improve READMEasy together!"
13 |     },
14 |     {
15 |       "question": "Is READMEasy free to use?",
16 |       "answer": "Yes, READMEasy is completely free for personal and open-source projects. We also offer premium features for enterprise users requiring advanced functionality."
17 |     },
18 |     {
19 |       "question": "Can I customize the output of the README file?",
20 |       "answer": "Absolutely! READMEasy allows you to customize various sections of the generated README, including project descriptions, usage instructions, and more, so it perfectly fits your needs."
21 |     }
22 |   ]
23 |   


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/EditableOutput.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef } from 'react';
 2 | import MarkdownToolbar from './MarkdownToolbar';
 3 | 
 4 | const EditableOutput = ({ content, onSave }) => {
 5 |   const [editableContent, setEditableContent] = useState(content);
 6 |   const [isEditing, setIsEditing] = useState(false);
 7 |   const textareaRef = useRef(null);
 8 | 
 9 |   const handleEdit = () => {
10 |     setIsEditing(true);
11 |   };
12 | 
13 |   const handleSave = () => {
14 |     onSave(editableContent);
15 |     setIsEditing(false);
16 |   };
17 | 
18 |   const handleCancel = () => {
19 |     onSave(content);
20 |     setIsEditing(false);
21 |   };
22 | 
23 |   return (
24 |     <>
25 |       <MarkdownToolbar textareaRef={textareaRef} />
26 |       <textarea
27 |         ref={textareaRef}
28 |         value={editableContent}
29 |         onChange={(e) => setEditableContent(e.target.value)}
30 |         className="w-full h-96 p-2 bg-gray-800 text-white border border-gray-600 rounded-b-md resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
31 |       />
32 |       <div className="flex justify-end mt-4 space-x-4">
33 |         <button
34 |           onClick={handleSave}
35 |           className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-300"
36 |         >
37 |           Save
38 |         </button>
39 |         <button
40 |           onClick={handleCancel}
41 |           className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300"
42 |         >
43 |           Cancel
44 |         </button>
45 |       </div>
46 |     </>
47 |   );
48 | };
49 | 
50 | export default EditableOutput;


--------------------------------------------------------------------------------
/src/components/FAQ.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import faqData from "../data/faqData.json";
 3 | 
 4 | function FAQ () {
 5 |   const [openQuestion, setOpenQuestion] = useState(null);
 6 | 
 7 |   const toggleQuestion = (index) => {
 8 |     setOpenQuestion(openQuestion === index ? null : index);
 9 |   };
10 | 
11 |   return (
12 |     <section id="faq" className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 py-12">
13 |       <div className="mx-auto w-full max-w-5xl px-45">
14 |         <h2 className="text-5xl font-bold text-[rgb(147,51,234)] mb-8 text-center">Frequently Asked Questions</h2>
15 |         <div className="space-y-4">
16 |           {faqData.map((faq, index) => (
17 |             <div key={index} className="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg overflow-hidden border border-[rgb(147,51,234)] transition-all duration-300 hover:border-gray-600">
18 |               <button
19 |                 className="flex justify-between items-center w-full text-left px-5 py-4"
20 |                 onClick={() => toggleQuestion(index)}
21 |               >
22 |                 <span className="font-medium text-[white] text-lg">{faq.question}</span>
23 |                 <svg
24 |                   className={`w-5 h-5 text-gray-400 transform transition-transform duration-200 ${openQuestion === index ? 'rotate-180' : ''}`}
25 |                   fill="none"
26 |                   viewBox="0 0 24 24"
27 |                   stroke="currentColor"
28 |                 >
29 |                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
30 |                 </svg>
31 |               </button>
32 |               <div 
33 |                 className={`px-5 py-3 bg-gray-700 bg-opacity-50 transition-all duration-200 ease-in-out ${
34 |                   openQuestion === index ? 'max-h-56 opacity-100' : 'max-h-0 opacity-0'
35 |                 }`}
36 |               >
37 |                 <p className=" text-gray-300 text-center text-base leading-relaxed font-semibold">{faq.answer}</p>
38 | 
39 |               </div>
40 |             </div>
41 |           ))}
42 |         </div>
43 |       </div>
44 |     </section>
45 |   );
46 | }
47 | 
48 | export default FAQ;


--------------------------------------------------------------------------------
/src/components/StarFork.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Github } from 'lucide-react';
 3 | import axios from 'axios';
 4 | 
 5 | export default function GitHubStarButton() {
 6 |   const [stars, setStars] = useState(0);
 7 |   const [loading, setLoading] = useState(true);
 8 |   const [error, setError] = useState(null);
 9 | 
10 |   useEffect(() => {
11 |     const fetchRepoData = async () => {
12 |       try {
13 |         const tokenId=import.meta.env.VITE_GITHUB_TOKEN;
14 |         const response = await axios.get('https://api.github.com/repos/BamaCharanChhandogi/READMEasy',{
15 |           headers: {
16 |             Authorization: `token ${tokenId}`,
17 |           },
18 |         });
19 |         setStars(response.data.stargazers_count);
20 |         setLoading(false);
21 |       } catch (err) {
22 |         console.error('Error fetching GitHub repo data:', err);
23 |         setError('Failed to load repository data');
24 |         setLoading(false);
25 |       }
26 |     };
27 | 
28 |     fetchRepoData();
29 |   }, []);
30 | 
31 |   const handleStarClick = () => {
32 |     window.open('https://github.com/BamaCharanChhandogi/READMEasy/stargazers', '_blank');
33 |   };
34 | 
35 |   if (loading) {
36 |     return <div className="text-center text-gray-500">Loading...</div>;
37 |   }
38 | 
39 |   if (error) {
40 |     return <div className="text-center text-red-500">{error}</div>;
41 |   }
42 | 
43 |   return (
44 |     <div className="flex justify-center">
45 |       <button
46 |         onClick={handleStarClick}
47 |         className="flex items-center bg-opacity-50 bg-[#21262d] backdrop-blur-lg text-white text-sm font-semibold  rounded-xl shadow-md hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 hover:bg-opacity-75 hover:border border-purple-400"
48 |         style={{
49 |           border: '1px solid rgba(192, 132, 252, 1)',
50 |           boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
51 |         }}
52 |         
53 |       >
54 |         <div className="flex items-center space-x-2 px-3 py-1 border-r border-gray-600">
55 |           <Github size={16} color='#ffdf00' />
56 |           <span>Star</span>
57 |         </div>
58 |         <div className="px-3 py-1">
59 |           {stars.toLocaleString()}
60 |         </div>
61 |       </button>
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Suspense, lazy, memo, useState, useEffect } from "react";
 2 | import {
 3 |   BrowserRouter as Router,
 4 |   Route,
 5 |   Routes,
 6 |   Link,
 7 |   NavLink,
 8 | } from "react-router-dom";
 9 | import { FaGithub, FaChevronUp } from "react-icons/fa";
10 | import Navbar from "./components/Navbar";
11 | 
12 | const Home = lazy(() => import("./components/Home"));
13 | const FAQ = lazy(() => import("./components/FAQ"));
14 | const GitHubProfileGenerator = lazy(() =>
15 |   import("./hooks/GitHubProfileGenerator")
16 | );
17 | 
18 | const MemoizedHome = memo(Home);
19 | const MemoizedFAQ = memo(FAQ);
20 | const MemoizedGitHubProfileGenerator = memo(GitHubProfileGenerator);
21 | 
22 | const getNavLinkClass = ({ isActive }) =>
23 |   isActive
24 |     ? "text-purple-400 font-semibold"
25 |     : "text-gray-300 hover:text-purple-400 transition duration-300";
26 | 
27 | function App() {
28 |   const [showScrollToTop, setShowScrollToTop] = useState(false);
29 | 
30 |   // Handle scroll to top button visibility
31 |   useEffect(() => {
32 |     const handleScroll = () => {
33 |       setShowScrollToTop(window.scrollY > 300);
34 |     };
35 | 
36 |     window.addEventListener("scroll", handleScroll);
37 |     return () => window.removeEventListener("scroll", handleScroll);
38 |   }, []);
39 | 
40 |   // Scroll to top function
41 |   const scrollToTop = () => {
42 |     window.scrollTo({ top: 0, behavior: "smooth" });
43 |   };
44 | 
45 |   return (
46 |     <Router>
47 |       <div className="min-h-screen bg-gray-900 text-white">
48 |         <Navbar />
49 |         <div className="container mx-auto px-4 py-12">
50 |           <Suspense fallback={<div>Loading...</div>}>
51 |             <Routes>
52 |               <Route path="/" element={<MemoizedHome />} />
53 |               <Route path="/faq" element={<MemoizedFAQ />} />
54 |               <Route
55 |                 path="/profileGenerator"
56 |                 element={<MemoizedGitHubProfileGenerator />}
57 |               />
58 |             </Routes>
59 |           </Suspense>
60 |         </div>
61 | 
62 |         {/* Scroll to Top Button */}
63 |         {showScrollToTop && (
64 |           <button
65 |             id="back-to-top"
66 |             onClick={scrollToTop}
67 |             className="fixed bottom-[80px] right-6 p-3 bg-purple-500 text-white rounded-full shadow-lg hover:bg-purple-600 transition duration-300"
68 |           >
69 |             <FaChevronUp className="text-xl" />
70 |           </button>
71 |         )}
72 |       </div>
73 |     </Router>
74 |   );
75 | }
76 | 
77 | export default App;
78 | 


--------------------------------------------------------------------------------
/src/hooks/useReadmeGenerator.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { GoogleGenerativeAI } from "@google/generative-ai";
 3 | 
 4 | const useReadmeGenerator = ({ projectName, description, image, features, installation, usage, contributing, license }) => {
 5 |   const [readmeContent, setReadmeContent] = useState("");
 6 |   const [isLoading, setIsLoading] = useState(false);
 7 |   const [error, setError] = useState(null);
 8 |   const [viewMode, setViewMode] = useState('markdown');
 9 |   const MODEL_NAME = import.meta.env.VITE_MODEL_NAME;
10 |   const API_KEY = import.meta.env.VITE_API_KEY;
11 | 
12 |   useEffect(() => {
13 |     if (!projectName || !description) {
14 |       return;
15 |     }
16 | 
17 |     const generateReadme = async () => {
18 |       setReadmeContent("");
19 |       setIsLoading(true);
20 |       setError(null);
21 | 
22 |       if (!API_KEY) {
23 |         setError("API key is missing. Please check your environment variables.");
24 |         setIsLoading(false);
25 |         return;
26 |       }
27 | 
28 |       if (!MODEL_NAME) {
29 |         setError("Model name is missing. Please check your environment variables.");
30 |         setIsLoading(false);
31 |         return;
32 |       }
33 | 
34 |       try {
35 |         const genAI = new GoogleGenerativeAI(API_KEY);
36 |         const model = genAI.getGenerativeModel({ model: MODEL_NAME });
37 | 
38 |         let prompt = `Generate a comprehensive README.md file for a project named "${projectName}" with the following description: "${description}". Include sections for introduction, features, installation, usage, and contribution guidelines.`;
39 | 
40 |         if (image) {
41 |           prompt += ` Include the following image in the README: ${image}`;
42 |         }
43 | 
44 |         if (features) prompt += ` The features are: ${features}`;
45 |         if (installation) prompt += ` The installation instructions are: ${installation}`;
46 |         if (usage) prompt += ` The usage instructions are: ${usage}`;
47 |         if (contributing) prompt += ` The contribution guidelines are: ${contributing}`;
48 |         if (license) prompt += ` The license is: ${license}`;
49 | 
50 |         const result = await model.generateContent(prompt);
51 |         
52 |         const response = await result.response;
53 |         setReadmeContent(response.text());
54 |       } catch (error) {
55 |         setError("Error generating README: " + error.message);
56 |         console.error("Error generating README:", error);
57 |       } finally {
58 |         setIsLoading(false);
59 |       }
60 |     };
61 | 
62 |     generateReadme();
63 |   }, [projectName, description, image, features, installation, usage, contributing, license]);
64 | 
65 |   const toggleViewMode = () => {
66 |     setViewMode(prevMode => prevMode === 'markdown' ? 'rendered' : 'markdown');
67 |   };
68 | 
69 |   return { formattedReadme: readmeContent, isLoading, error, viewMode, toggleViewMode };
70 | };
71 | 
72 | export default useReadmeGenerator;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # READMEasy: AI-Powered README Generator
 2 | 
 3 | ## Introduction
 4 | 
 5 | READMEasy is a user-friendly web platform that empowers you to generate comprehensive and engaging README files for your software projects. Powered by advanced AI models, ReadMeister effortlessly tailors your README content based on your project's unique details.
 6 | 
 7 | ## 📈 GitHub Repository Stats
 8 | | 🌟 **Stars** | 🍴 **Forks** | 🐛 **Issues** | 🔔 **Open PRs** | 🔕 **Closed PRs** | 🛠️ **Languages** | ✅ **Contributors** |
 9 | |--------------|--------------|---------------|-----------------|------------------|------------------|------------------|
10 | | ![GitHub stars](https://img.shields.io/github/stars/BamaCharanChhandogi/READMEasy) | ![forks](https://img.shields.io/github/forks/BamaCharanChhandogi/READMEasy) | ![issues](https://img.shields.io/github/issues/BamaCharanChhandogi/READMEasy?color=32CD32) | ![pull requests](https://img.shields.io/github/issues-pr/BamaCharanChhandogi/READMEasy?color=FFFF8F) | ![Closed PRs](https://img.shields.io/github/issues-pr-closed/BamaCharanChhandogi/READMEasy?color=20B2AA) | ![Languages](https://img.shields.io/github/languages/count/BamaCharanChhandogi/READMEasy?color=20B2AA) | ![Contributors](https://img.shields.io/github/contributors/BamaCharanChhandogi/READMEasy?color=00FA9A) |
11 | 
12 | ## Features
13 | 
14 | - **AI-Powered Content Generation**: Unleash the power of AI to create compelling README content that showcases your project's value and functionality.
15 | - **Interactive Form**: A seamless input form guides you through the process of providing essential project information.
16 | - **Real-time Preview**: Switch seamlessly between Markdown and rendered views, allowing you to visualize your README as you create it.
17 | - **Optional Sections**: Tailor your README to your project's needs by selecting or deselecting sections such as Features, Installation Instructions, Usage Guidelines, and more.
18 | - **Image Support**: Add a splash of personality to your README by including a project image or logo.
19 | - **Copy to Clipboard**: With a single click, copy your generated README and effortlessly paste it into your project repository.
20 | - **Responsive Design**: Enjoy a seamless user experience on any device, as ReadMeister's web interface is fully responsive.
21 | 
22 | ## Installation
23 | 
24 | ReadMeister is a web-based platform and does not require any installation. Simply visit our website to get started.
25 | 
26 | ## Usage
27 | 
28 | To generate a README using ReadMeister:
29 | 
30 | 1. Visit our website at [readm-easy](https://readm-easy.vercel.app/).
31 | 2. Fill out the interactive form with your project details.
32 | 3. Choose which sections you want to include in your README.
33 | 4. Preview your README in Markdown or rendered view.
34 | 5. Click the "Copy to Clipboard" button.
35 | 6. Paste your generated README into your project repository.
36 | 
37 | ## Contribution Guidelines
38 | 
39 | ReadMeister is an open-source project, and contributions are welcome! If you have any suggestions or improvements, please refer to our contribution guidelines at [CONTRIBUTING.md](CONTRIBUTING.md).
40 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import InputForm from './InputForm';
 3 | import OutputDisplay from './OutputDisplay';
 4 | import EditableOutput from './EditableOutput';
 5 | import useReadmeGenerator from '../hooks/useReadmeGenerator';
 6 | 
 7 | function Home() {
 8 |   const [projectInfo, setProjectInfo] = useState({
 9 |     projectName: '',
10 |     description: '',
11 |     features: '',
12 |     installation: '',
13 |     usage: '',
14 |     contributing: '',
15 |     license: '',
16 |   });
17 | 
18 |   const { formattedReadme, isLoading, error, viewMode, toggleViewMode } = useReadmeGenerator(projectInfo);
19 |   const [editedReadme, setEditedReadme] = useState('');
20 |   const [isEditing, setIsEditing] = useState(false);
21 | 
22 |   const handleSubmit = (info) => {
23 |     setProjectInfo(info);
24 |     setEditedReadme(''); // Reset edited content when generating new README
25 |     setIsEditing(false); // Exit edit mode when generating new README
26 |   };
27 | 
28 |   const handleSaveEdit = (newContent) => {
29 |     setEditedReadme(newContent);
30 |     setIsEditing(false);
31 |   };
32 | 
33 |   const handleStartEditing = () => {
34 |     setIsEditing(true);
35 |   };
36 | 
37 |   return (
38 |     <>
39 |       <div className="bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
40 |         <h2 className="text-2xl font-bold text-purple-400 mb-7 inline-block relative overflow-hidden group">
41 |           README Generator for Project
42 |           <span className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 transform origin-left scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
43 |         </h2>
44 |         <InputForm onSubmit={handleSubmit} />
45 |       </div>
46 |       {isLoading && (
47 |         <div className="text-center my-8">
48 |           <div className="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-purple-500"></div>
49 |           <p className="mt-2 text-purple-400">Generating README...</p>
50 |         </div>
51 |       )}
52 |       {error && <p className="text-red-400 text-center my-4 bg-red-900 py-2 px-4 rounded">{error}</p>}
53 |       {(formattedReadme || editedReadme) && (
54 |         <div className="bg-gray-800 rounded-lg shadow-lg p-8 mt-8">
55 |           <div className="flex justify-between items-center mb-6">
56 |             <h2 className="text-3xl font-semibold text-purple-400">Generated README</h2>
57 |             <div className="space-x-4">
58 |               {!isEditing && (
59 |                 <button
60 |                   onClick={handleStartEditing}
61 |                   className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300"
62 |                 >
63 |                   Edit
64 |                 </button>
65 |               )}
66 |               {!isEditing && (<button
67 |                 onClick={toggleViewMode}
68 |                 className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300"
69 |               >
70 |                 Switch to {viewMode === 'markdown' ? 'Rendered' : 'Markdown'} View
71 |               </button>)}
72 |             </div>
73 |           </div>
74 |           {isEditing ? (
75 |             <EditableOutput 
76 |               content={editedReadme || formattedReadme} 
77 |               onSave={handleSaveEdit} 
78 |             />
79 |           ) : (
80 |             <OutputDisplay 
81 |               content={editedReadme || formattedReadme} 
82 |               viewMode={viewMode} 
83 |             />
84 |           )}
85 |         </div>
86 |       )}
87 |     </>
88 |   );
89 | }
90 | 
91 | export default Home;


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # READMEasy Code of Conduct
 2 | 
 3 | ## Introduction
 4 | 
 5 | READMEasy is an comprehensive platform that connects students, educators, and professionals to resources such as scholarships, job opportunities, and community discussions. By participating in this community, you agree to contribute positively and respectfully, fostering an environment that promotes inclusivity, learning, and collaboration.
 6 | 
 7 | ## Our Commitment
 8 | 
 9 | We are dedicated to maintaining a welcoming, respectful, and harassment-free community. Everyone, regardless of background, is encouraged to participate, contribute, and share. All interactions should promote learning and be free of discrimination.
10 | 
11 | ## Our Values
12 | 
13 | 1. **Respect and Empathy**  
14 |    All users and contributors are expected to engage with others respectfully. Harassment, discrimination, or offensive behavior of any kind will not be tolerated. We believe respect is the foundation for growth and collaboration.
15 | 
16 | 2. **Collaboration and Knowledge Sharing**  
17 |    READMEasy thrives on collaboration. We encourage members to help one another, share knowledge, and contribute to the platform's growth. Whether it’s code, advice, or feedback, working together makes us stronger.
18 | 
19 | 3. **Constructive Feedback**  
20 |    Feedback is essential to improving READMEasy. When giving feedback, focus on constructive suggestions that help improve the platform. We expect all feedback to be respectful and aimed at helping others grow.
21 | 
22 | 4. **Inclusivity and Diversity**  
23 |    READMEasy is for everyone. We value diverse perspectives and welcome contributions from individuals of all backgrounds and experiences. Everyone should feel empowered to share their thoughts and ideas.
24 | 
25 | 5. **Professionalism**  
26 |    All interactions in READMEasy should be conducted in a professional and courteous manner. Whether you’re reporting an issue, submitting a pull request, or discussing in forums, professionalism is key to maintaining a positive community.
27 | 
28 | ## Expected Behavior
29 | 
30 | - Be respectful and considerate of others.
31 | - Embrace diversity and be inclusive in all interactions.
32 | - Provide constructive and kind feedback.
33 | - Collaborate to improve the platform for everyone.
34 | - Offer help and be patient, especially with newcomers.
35 | 
36 | ## Unacceptable Behavior
37 | 
38 | - Discrimination, harassment, or any form of abuse.
39 | - Personal attacks, trolling, or inflammatory behavior.
40 | - Use of inappropriate language, sexualized content, or offensive imagery.
41 | - Disrupting contributions or discussions.
42 | - Threatening or bullying others.
43 | 
44 | ## Spammy Contribution Rules
45 | 
46 | To ensure meaningful contributions, READMEasy has established guidelines to avoid spammy submissions:
47 | 
48 | - Pull Requests (PRs) should address open issues or provide meaningful improvements.
49 | - Avoid trivial changes unless they significantly enhance the platform.
50 | - Contributions made during events (e.g., Hacktoberfest) should focus on solving real problems, not superficial changes.
51 | - PRs failing to adhere to these guidelines may be flagged as spam.
52 | 
53 | ## Reporting Issues
54 | 
55 | If you experience or witness unacceptable behavior, please report it to the project maintainers. All reports will be treated confidentially and with care to maintain the safety of the community.
56 | 
57 | ## Enforcement
58 | 
59 | Any violations of this Code of Conduct may result in actions by project maintainers, including warnings, temporary bans, or permanent removal from the platform.
60 | 
61 | ## Conclusion
62 | 
63 | By contributing to READMEasy, you agree to abide by this Code of Conduct. Let’s work together to create a community that fosters growth, inclusivity, and collaboration.
64 | 
65 | ---
66 | 
67 | Thank you for being a part of READMEasy!
68 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { FaGithub, FaBars, FaTimes } from "react-icons/fa";
  3 | import { Link, NavLink } from "react-router-dom";
  4 | import StarForkButton from "./StarFork";
  5 | import "./Navbar.css";
  6 | 
  7 | export default function Navbar() {
  8 |   const [isOpen, setIsOpen] = useState(false);
  9 | 
 10 |   const toggleMenu = () => {
 11 |     setIsOpen(!isOpen);
 12 |   };
 13 | 
 14 |   return (
 15 |     <nav className="bg-gray-800 shadow-lg">
 16 |       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
 17 |         <Link
 18 |           to="/"
 19 |           className="text-3xl font-bold text-purple-400 hover:text-purple-300 hover:scale-105 hover:shadow-lg transition duration-300 ease-in-out"
 20 |         >
 21 |           READMEasy
 22 |         </Link>
 23 | 
 24 |         {/* Mobile Menu Button */}
 25 |         <div className="md:hidden">
 26 |           <button
 27 |             onClick={toggleMenu}
 28 |             className="text-gray-300 hover:text-purple-400 transition duration-300"
 29 |           >
 30 |             {isOpen ? (
 31 |               <FaTimes className="w-7 h-7" />
 32 |             ) : (
 33 |               <FaBars className="w-7 h-7" />
 34 |             )}
 35 |           </button>
 36 |         </div>
 37 | 
 38 |         {/* Links for larger screens */}
 39 |         <div className="hidden md:flex items-center space-x-8">
 40 |           <div className="flex space-x-6">
 41 |             <NavLink
 42 |               to="/"
 43 |               className={({ isActive }) =>
 44 |                 isActive
 45 |                   ? "text-purple-400 font-semibold nav-link underline-active"
 46 |                   : "text-gray-300 hover:text-purple-400 nav-link"
 47 |               }
 48 |             >
 49 |               Home
 50 |             </NavLink>
 51 |             <NavLink
 52 |               to="/profileGenerator"
 53 |               className={({ isActive }) =>
 54 |                 isActive
 55 |                   ? "text-purple-400 font-semibold nav-link underline-active"
 56 |                   : "text-gray-300 hover:text-purple-400 nav-link"
 57 |               }
 58 |             >
 59 |               Profile Generator
 60 |             </NavLink>
 61 |             <NavLink
 62 |               to="/faq"
 63 |               className={({ isActive }) =>
 64 |                 isActive
 65 |                   ? "text-purple-400 font-semibold nav-link underline-active"
 66 |                   : "text-gray-300 hover:text-purple-400 nav-link"
 67 |               }
 68 |             >
 69 |               FAQ
 70 |             </NavLink>
 71 |           </div>
 72 | 
 73 |           <div className="hidden md:block">
 74 |             <StarForkButton />
 75 |           </div>
 76 |         </div>
 77 |       </div>
 78 | 
 79 |       {/* Mobile Links */}
 80 |       {isOpen && (
 81 |         <div className="md:hidden bg-gray-800 px-6 pb-4">
 82 |           <div className="flex flex-col space-y-4">
 83 |             <NavLink
 84 |               to="/"
 85 |               onClick={() => setIsOpen(false)}
 86 |               className="text-gray-300 hover:text-purple-400 transition duration-300"
 87 |             >
 88 |               Home
 89 |             </NavLink>
 90 |             <NavLink
 91 |               to="/profileGenerator"
 92 |               onClick={() => setIsOpen(false)}
 93 |               className="text-gray-300 hover:text-purple-400 transition duration-300"
 94 |             >
 95 |               Profile Generator
 96 |             </NavLink>
 97 |             <a
 98 |               href="https://github.com/BamaCharanChhandogi/READMEasy"
 99 |               target="_blank"
100 |               rel="noopener noreferrer"
101 |               className="text-gray-300 hover:text-purple-400 transition duration-300"
102 |             >
103 |               <FaGithub className="w-7 h-7" />
104 |             </a>
105 |           </div>
106 |         </div>
107 |       )}
108 |     </nav>
109 |   );
110 | }
111 | 


--------------------------------------------------------------------------------
/src/components/OutputDisplay.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactMarkdown from 'react-markdown';
  3 | import rehypeRaw from 'rehype-raw';
  4 | import rehypeSanitize from 'rehype-sanitize';
  5 | import remarkGfm from 'remark-gfm';
  6 | import { Copy, Check } from 'lucide-react';
  7 | 
  8 | function OutputDisplay({ content, viewMode }) {
  9 |   const [copied, setCopied] = React.useState(false);
 10 | 
 11 |   if (!content) return null;
 12 | 
 13 |   const copyToClipboard = () => {
 14 |     navigator.clipboard.writeText(content)
 15 |       .then(() => {
 16 |         setCopied(true);
 17 |         setTimeout(() => setCopied(false), 2000);
 18 |       })
 19 |       .catch(err => console.error('Failed to copy: ', err));
 20 |   };
 21 |   
 22 |   // Custom components for markdown rendering
 23 |   const components = {
 24 |     // Handle code blocks with syntax highlighting
 25 |     code: ({node, inline, className, children, ...props}) => {
 26 |       const match = /language-(\w+)/.exec(className || '');
 27 |       return (
 28 |         <pre className={`${match ? `language-${match[1]}` : ''} bg-gray-800 p-4 rounded-md overflow-x-auto`}>
 29 |           <code className={className} {...props}>
 30 |             {children}
 31 |           </code>
 32 |         </pre>
 33 |       );
 34 |     },
 35 |     // Handle images with proper sizing and alt text
 36 |     img: ({node, ...props}) => (
 37 |       <img 
 38 |         {...props} 
 39 |         className="max-w-full h-auto rounded-lg shadow-lg" 
 40 |         loading="lazy"
 41 |       />
 42 |     ),
 43 |     // Style links
 44 |     a: ({node, children, ...props}) => (
 45 |       <a 
 46 |         {...props} 
 47 |         className="text-blue-400 hover:text-blue-300 underline"
 48 |         target="_blank"
 49 |         rel="noopener noreferrer"
 50 |       >
 51 |         {children}
 52 |       </a>
 53 |     ),
 54 |     // Style tables
 55 |     table: ({node, children, ...props}) => (
 56 |       <div className="overflow-x-auto my-4">
 57 |         <table className="min-w-full divide-y divide-gray-600" {...props}>
 58 |           {children}
 59 |         </table>
 60 |       </div>
 61 |     ),
 62 |     // Style table headers
 63 |     th: ({node, children, ...props}) => (
 64 |       <th 
 65 |         className="px-6 py-3 bg-gray-800 text-left text-xs font-medium text-gray-300 uppercase tracking-wider" 
 66 |         {...props}
 67 |       >
 68 |         {children}
 69 |       </th>
 70 |     ),
 71 |     // Style table cells
 72 |     td: ({node, children, ...props}) => (
 73 |       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300" {...props}>
 74 |         {children}
 75 |       </td>
 76 |     ),
 77 |     // Style blockquotes
 78 |     blockquote: ({node, children, ...props}) => (
 79 |       <blockquote 
 80 |         className="border-l-4 border-gray-500 pl-4 my-4 italic text-gray-300"
 81 |         {...props}
 82 |       >
 83 |         {children}
 84 |       </blockquote>
 85 |     )
 86 |   };
 87 | 
 88 |   return (
 89 |     <div className="relative">
 90 |       <div className="flex justify-end mb-2">
 91 |         <button 
 92 |           onClick={copyToClipboard}
 93 |           className="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center gap-2"
 94 |           disabled={copied}
 95 |         >
 96 |           {copied ? (
 97 |             <>
 98 |               <Check size={16} className="text-green-500" />
 99 |               <span>Copied!</span>
100 |             </>
101 |           ) : (
102 |             <>
103 |               <Copy size={16} />
104 |               <span>Copy to Clipboard</span>
105 |             </>
106 |           )}
107 |         </button>
108 |       </div>
109 |       <div className={`bg-gray-800 p-6 rounded-lg shadow-md ${
110 |         viewMode === 'rendered' 
111 |           ? 'prose prose-invert prose-headings:text-gray-100 prose-a:text-blue-400 prose-code:text-pink-300 prose-pre:bg-gray-900 prose-pre:p-0 prose-pre:my-0 max-w-none'
112 |           : ''
113 |       }`}>
114 |         {viewMode === 'markdown' ? (
115 |           <pre className="whitespace-pre-wrap text-gray-300 font-mono text-sm overflow-x-auto">
116 |             {content}
117 |           </pre>
118 |         ) : (
119 |           <ReactMarkdown 
120 |             remarkPlugins={[remarkGfm]} // Adds support for tables, strikethrough, task lists, etc.
121 |             rehypePlugins={[
122 |               rehypeRaw, // Allows raw HTML
123 |               rehypeSanitize // Sanitizes HTML to prevent XSS
124 |             ]}
125 |             components={components}
126 |             className="text-gray-200"
127 |           >
128 |             {content}
129 |           </ReactMarkdown>
130 |         )}
131 |       </div>
132 |     </div>
133 |   );
134 | }
135 | 
136 | export default OutputDisplay;


--------------------------------------------------------------------------------
/src/components/ProfileForm.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import Picker from '@emoji-mart/react';
  3 | import data from '@emoji-mart/data';
  4 | 
  5 | function ProfileForm({ profileInfo, handleChange }) {
  6 |   const [showPicker, setShowPicker] = useState(false);
  7 |   const [currentField, setCurrentField] = useState(null);
  8 |   const [hoveredField, setHoveredField] = useState(null);
  9 |   const [imageLink, setImageLink] = useState('');
 10 |   const [imageHeight, setImageHeight] = useState('');
 11 |   const [alignment, setAlignment] = useState('left');
 12 | 
 13 |   const emojis = {
 14 |     name: ["😊", "😄", "😁", "😎"],
 15 |     title: ["🌟", "✨", "🎯", "💥"],
 16 |     currentWork: ["💻", "📱", "🖥️", "🖨️"],
 17 |     learning: ["🚀", "📚", "💡", "🧠"],
 18 |     email: ["📧", "✉️", "💌", "📩"],
 19 |     askMeAbout: ["💬", "🗣️", "🧩", "💭"],
 20 |   };
 21 | 
 22 |   const [emojiIndex, setEmojiIndex] = useState({
 23 |     name: 0,
 24 |     title: 0,
 25 |     currentWork: 0,
 26 |     learning: 0,
 27 |     email: 0,
 28 |     askMeAbout: 0,
 29 |   });
 30 | 
 31 |   const openEmojiPicker = (field) => {
 32 |     setCurrentField(field);
 33 |     setShowPicker((prev) => !prev);
 34 |   };
 35 | 
 36 |   const handleEmojiSelect = (emoji) => {
 37 |     if (currentField) {
 38 |       handleChange({
 39 |         target: {
 40 |           name: currentField,
 41 |           value: profileInfo[currentField] + emoji.native,
 42 |         },
 43 |       });
 44 |       setShowPicker(false);
 45 |     }
 46 |   };
 47 | 
 48 |   const renderInputField = (label, id, placeholder, type = "text", isTextArea = false, rows = 1, withEmoji = true) => (
 49 |     <div className='col-span-1'>
 50 |       <label htmlFor={id} className="block text-sm font-medium text-purple-300 mb-1">
 51 |         {label}
 52 |       </label>
 53 |       <div className="flex items-center relative">
 54 |         {withEmoji && (
 55 |           <div
 56 |             onClick={() => openEmojiPicker(id)}
 57 |             onMouseEnter={() => {
 58 |               setHoveredField(id); 
 59 |               setEmojiIndex((prev) => {
 60 |                 const nextIndex = (prev[id] + 1) % emojis[id].length;
 61 |                 return { ...prev, [id]: nextIndex };
 62 |               });
 63 |             }}
 64 |             onMouseLeave={() => setHoveredField(null)}
 65 |             className="bg-gray-700 border border-gray-600 text-white px-3 py-2 flex items-center justify-center cursor-pointer"
 66 |             style={{ height: '100%', width: '50px', borderRadius: '0.375rem 0 0 0.375rem' }} // Rounded left side
 67 |           >
 68 |             {/* Show the emoji based on the index */}
 69 |             {emojis[id][emojiIndex[id]]}
 70 |           </div>
 71 |         )}
 72 |         {isTextArea ? (
 73 |           <textarea
 74 |             id={id}
 75 |             name={id}
 76 |             value={profileInfo[id]}
 77 |             onChange={handleChange}
 78 |             placeholder={placeholder}
 79 |             className="w-full px-3 py-2 bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 text-white placeholder-gray-400"
 80 |             rows={rows}
 81 |             style={withEmoji ? { borderRadius: '0 0.375rem 0.375rem 0' } : { borderRadius: '0.375rem' }} // Rounded right side or full for non-emoji
 82 |           />
 83 |         ) : (
 84 |           <input
 85 |             type={type}
 86 |             id={id}
 87 |             name={id}
 88 |             value={profileInfo[id]}
 89 |             onChange={handleChange}
 90 |             placeholder={placeholder}
 91 |             className="w-full px-3 py-2 bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 text-white placeholder-gray-400"
 92 |             style={withEmoji ? { borderRadius: '0 0.375rem 0.375rem 0' } : { borderRadius: '0.375rem' }} // Rounded right side or full for non-emoji
 93 |           />
 94 |         )}
 95 |         {showPicker && currentField === id && (
 96 |           <div className="absolute top-full mt-2 z-10">
 97 |             <Picker data={data} onEmojiSelect={handleEmojiSelect} />
 98 |           </div>
 99 |         )}
100 |       </div>
101 |     </div>
102 |   );
103 | 
104 |   const handleImageLinkChange = (e) => {
105 |     setImageLink(e.target.value);
106 |   };
107 | 
108 |   const handleImageHeightChange = (e) => {
109 |     setImageHeight(e.target.value);
110 |   };
111 | 
112 |   const handleAlignmentChange = (e) => {
113 |     setAlignment(e.target.value);
114 |   };
115 | 
116 |   return (
117 |     <form>
118 |       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
119 |         {renderInputField("Name", "name", "e.g. John Doe")}
120 |         {renderInputField("Title (tagline)", "title", "e.g. A passionate web developer")}
121 |         {renderInputField("Current Work (intern/fulltime)", "currentWork", "e.g. TechCorp (fulltime)", "text", false, 1, false)}
122 |         {renderInputField("Currently Learning", "learning", "e.g. GraphQL, Docker")}
123 |         {renderInputField("Email", "email", "your.email@example.com", "email")}
124 |         {renderInputField("Ask Me About", "askMeAbout", "e.g. Web development, JavaScript, React")}
125 |         {renderInputField("LinkedIn", "linkedin", "https://www.linkedin.com/in/yourprofile", "url", false, 1, false)}
126 |         {renderInputField("Portfolio", "portfolio", "https://yourportfolio.com", "url", false, 1, false)}
127 |         {renderInputField("GitHub Username", "githubUsername", "your-github-username", "text", false, 1, false)}
128 |       </div>
129 | 
130 |       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
131 |         {renderInputField("Languages", "languages", "e.g. javascript,python,java", "text", true, 3, false)}
132 |         {renderInputField("Frameworks", "frameworks", "e.g. react,nodejs,express", "text", true, 3, false)}
133 |         {renderInputField("Tools", "tools", "e.g. git,docker,vscode", "text", true, 3, false)}
134 |       </div>
135 |     </form>
136 |   );
137 | }
138 | 
139 | export default ProfileForm;
140 | 


--------------------------------------------------------------------------------
/src/hooks/GitHubProfileGenerator.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { GoogleGenerativeAI } from "@google/generative-ai";
  3 | import ProfileForm from "../components/ProfileForm";
  4 | import EditableOutput from "../components/EditableOutput";
  5 | import OutputDisplay from "../components/OutputDisplay";
  6 | 
  7 | function GitHubProfileGenerator() {
  8 |   const [profileInfo, setProfileInfo] = useState({
  9 |     name: "",
 10 |     title: "",
 11 |     currentWork: "",
 12 |     learning: "",
 13 |     askMeAbout: "",
 14 |     email: "",
 15 |     linkedin: "",
 16 |     portfolio: "",
 17 |     githubUsername: "",
 18 |     languages: "",
 19 |     frameworks: "",
 20 |     tools: "",
 21 |   });
 22 | 
 23 |   const [hasQuineAccount, setHasQuineAccount] = useState(false);
 24 |   const [generatedProfile, setGeneratedProfile] = useState("");
 25 |   const [isLoading, setIsLoading] = useState(false);
 26 |   const [error, setError] = useState(null);
 27 |   const [copied, setCopied] = useState(false);
 28 |   const [isEditing, setIsEditing] = useState(false);
 29 |   const [viewMode, setViewMode] = useState('markdown');
 30 | 
 31 |   const handleChange = (e) => {
 32 |     setProfileInfo({ ...profileInfo, [e.target.name]: e.target.value });
 33 |   };
 34 | 
 35 |   const generateProfile = async () => {
 36 |     setGeneratedProfile("");
 37 |     setIsLoading(true);
 38 |     setError(null);
 39 | 
 40 |     const API_KEY = import.meta.env.VITE_API_KEY;
 41 |     const MODEL_NAME = import.meta.env.VITE_MODEL_NAME;
 42 | 
 43 |     if (!API_KEY) {
 44 |       setError("API key is missing. Please check your environment variables.");
 45 |       setIsLoading(false);
 46 |       return;
 47 |     }
 48 | 
 49 |     try {
 50 |       const genAI = new GoogleGenerativeAI(API_KEY);
 51 |       const model = genAI.getGenerativeModel({ model: MODEL_NAME });
 52 | 
 53 |       const template = `
 54 | <img align="right" src="https://visitor-badge.laobi.icu/badge?page_id=${
 55 |         profileInfo.githubUsername
 56 |       }.${profileInfo.githubUsername}" />
 57 | <div align="center">
 58 |   <img src="https://readme-typing-svg.herokuapp.com/?font=Righteous&size=35&center=true&vCenter=true&width=500&height=70&duration=4000&lines=Hi+There!+👋;I'm+${encodeURIComponent(
 59 |     profileInfo.name
 60 |   )}!;" />
 61 | </div>
 62 | <h3 align="center">${profileInfo.title}</h3>
 63 | <br/>
 64 | <div align="center">
 65 |  
 66 |  🔭 I'm currently working in **${profileInfo.currentWork}**
 67 |  
 68 |  🌱 I'm currently learning **${profileInfo.learning}**
 69 | 
 70 | 💬 Ask me about **${profileInfo.askMeAbout}**
 71 |  </div>
 72 |  
 73 | <div align="center"> 
 74 |   <a href="mailto:${profileInfo.email}">
 75 |     <img src="https://img.shields.io/badge/Gmail-333333?style=for-the-badge&logo=gmail&logoColor=red" />
 76 |   </a>
 77 |   <a href="${profileInfo.linkedin}" target="_blank">
 78 |     <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" target="_blank" />
 79 |   </a>
 80 |   <a href="${profileInfo.portfolio}" target="_blank">
 81 |      <img src="https://img.shields.io/badge/Portfolio-FF5722?style=for-the-badge&logo=todoist&logoColor=white" target="_blank" />
 82 |   </a>
 83 | </div>
 84 |  <hr/>
 85 |  
 86 | <h2 align="center">⚒️ Languages-Frameworks-Tools ⚒️</h2>
 87 | <div align="center">
 88 |     <img src="https://skillicons.dev/icons?i=${profileInfo.languages},${
 89 |         profileInfo.frameworks
 90 |       },${profileInfo.tools}" />
 91 | </div>
 92 | <hr/>
 93 | 
 94 | <h2 align="center">⚡ Stats ⚡</h2>
 95 | <br>
 96 | <div align=center>
 97 |   <img width=390 src="https://streak-stats.demolab.com?user=${
 98 |     profileInfo.githubUsername
 99 |   }&theme=react&border_radius=10" alt="streak stats"/>
100 |   <img width=390 src="https://github-readme-stats.vercel.app/api?username=${
101 |     profileInfo.githubUsername
102 |   }&show_icons=true&theme=react&rank_icon=github&border_radius=10" alt="readme stats" />
103 |   <br/>
104 |   <img width=325 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=${
105 |     profileInfo.githubUsername
106 |   }&hide=HTML&langs_count=8&layout=compact&theme=react&border_radius=10&size_weight=0.5&count_weight=0.5&exclude_repo=github-readme-stats" alt="top langs" />
107 | </div>
108 | <hr/>
109 | ${
110 |   hasQuineAccount
111 |     ? `
112 | <div align=center>
113 |   <img width=390 src="https://stats.quine.sh/${profileInfo.githubUsername}/dependencies?theme=dark" alt="dependencies graph"/>
114 | </div>
115 | <br>
116 | `
117 |     : ""
118 | }
119 | <img src="https://github-readme-activity-graph.vercel.app/graph?username=${
120 |         profileInfo.githubUsername
121 |       }&theme=merko" alt="${profileInfo.name}'s github activity graph"/>
122 | <hr/>
123 | <br/>
124 |       `;
125 | 
126 |       const prompt = `Generate a GitHub Profile README using the following template and information:
127 |   
128 |   ${template}
129 |   
130 |   Please fill in the template with the provided information. Do not add any additional sections. Stick strictly to the provided template structure.`;
131 | 
132 |   const result = await model.generateContent(prompt);
133 |   const response = await result.response;
134 |   setGeneratedProfile(response.text());
135 |   setIsEditing(false);
136 | } catch (error) {
137 |   setError("Error generating profile README: " + error.message);
138 |   console.error("Error generating profile README:", error);
139 | } finally {
140 |   setIsLoading(false);
141 | }
142 | };
143 | 
144 | const handleSaveEdit = (newContent) => {
145 | setGeneratedProfile(newContent);
146 | setIsEditing(false);
147 | };
148 | 
149 | const toggleViewMode = () => {
150 | setViewMode(prevMode => prevMode === 'markdown' ? 'rendered' : 'markdown');
151 | };
152 | 
153 | return (
154 | <div className="bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
155 |   <h2 className="text-2xl font-bold text-purple-400 mb-7 inline-block relative overflow-hidden group">
156 |     GitHub Profile README Generator
157 |     <span className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 transform origin-left scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
158 |   </h2>
159 |   <ProfileForm profileInfo={profileInfo} handleChange={handleChange} />
160 |   <div className="flex items-center my-5">
161 |     <label
162 |       htmlFor="hasQuineAccount"
163 |       className="text-sm font-medium text-purple-300 mr-2"
164 |     >
165 |       Do you have a Quine account? (for dependencies graph)
166 |     </label>
167 |     <select
168 |       id="hasQuineAccount"
169 |       value={hasQuineAccount ? "yes" : "no"}
170 |       onChange={(e) => setHasQuineAccount(e.target.value === "yes")}
171 |       className="bg-gray-700 border border-gray-600 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 px-2 py-1"
172 |     >
173 |       <option value="no">No</option>
174 |       <option value="yes">Yes</option>
175 |     </select>
176 |   </div>
177 |   <button
178 |     type="button"
179 |     onClick={generateProfile}
180 |     className="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300"
181 |   >
182 |     Generate Profile README
183 |   </button>
184 |   {isLoading && (
185 |     <p className="text-purple-400 mt-4">Generating profile README...</p>
186 |   )}
187 |   {error && <p className="text-red-400 mt-4">{error}</p>}
188 |   {generatedProfile && (
189 |     <div className="mt-8 relative">
190 |       <div className="flex justify-between items-center mb-4">
191 |         <h3 className="text-xl font-bold text-purple-400">
192 |           Generated Profile README
193 |         </h3>
194 |         <div className="space-x-4">
195 |           {!isEditing && (
196 |             <button
197 |               onClick={() => setIsEditing(true)}
198 |               className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300"
199 |             >
200 |               Edit
201 |             </button>
202 |           )}
203 |           {!isEditing && (<button
204 |             onClick={toggleViewMode}
205 |             className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300"
206 |           >
207 |             Switch to {viewMode === 'markdown' ? 'Rendered' : 'Markdown'} View
208 |           </button>)}
209 |         </div>
210 |       </div>
211 |       {isEditing ? (
212 |         <EditableOutput 
213 |           content={generatedProfile} 
214 |           onSave={handleSaveEdit} 
215 |         />
216 |       ) : (
217 |         <OutputDisplay 
218 |           content={generatedProfile} 
219 |           viewMode={viewMode} 
220 |         />
221 |       )}
222 |     </div>
223 |   )}
224 | </div>
225 | );
226 | }
227 | 
228 | export default GitHubProfileGenerator;
229 | 
230 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <h1 align="center">✨ Contributors Guide ✨</h1>
  3 | <h3 align="center">Welcome to my READMEasy📝 project! <br> We appreciate your interest in contributing.😊 <br>This guide will help you get started with the project and make your first contribution.</h3>
  4 | 
  5 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
  6 | 
  7 | ## What you can  Contribute?
  8 | 
  9 | **🐞Bug Fixing :**
 10 | Contributors can help by reviewing and confirming reported issues. This includes verifying bugs, providing additional details, and prioritizing tasks for the development team.
 11 | 
 12 | **✨Enhancements :**
 13 | Contributors can enhance the project by implementing new features or improvements suggested by users. This involves understanding requirements, designing solutions, and extending the functionality of the travel website. 🚀
 14 | 
 15 | **📝 Documentation :**
 16 | High-quality documentation is essential for the success of the project. Contributions to the documentation help ensure that users and contributors can understand and use the travel website effectively.
 17 | 
 18 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
 19 | 
 20 | ## 🧾 General Guidelines
 21 | 
 22 | - **Communication**:  If you're unsure about a fix or feature, please open an issue or ask questions in the issue’s thread before proceeding.
 23 | 
 24 | - **Documentation**:  Make sure to update or add relevant documentation, including comments in the code, if you’re working on a feature.
 25 | 
 26 | - **Testing**:  Run tests after implementing your changes and write new ones if necessary. The project uses [testing tool/framework] for verification.
 27 | 
 28 | - **Code Style**: Follow the coding standards outlined in the [style guide](https://docs.github.com/en/contributing/style-guide-and-content-model/style-guide).
 29 | 
 30 | - **Reporting Bugs**:
 31 |   If you encounter any bugs, feel free to report them. 
 32 | 
 33 | - **Suggesting Features or Enhancements**:
 34 |   We welcome new ideas and suggestions! 
 35 | 
 36 | - **Submitting Code**:
 37 |   Keep your pull requests focused on a single change to make reviews easier.
 38 | 
 39 | - **Commit Message Format**:
 40 |   Use meaningful and descriptive commit messages.
 41 | 
 42 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
 43 | 
 44 | ## Community Guidelines 🤝
 45 | 
 46 | Please follow these guidelines while contributing:
 47 | 
 48 | - Be respectful and considerate towards others.
 49 | - Use inclusive language and foster a welcoming environment.
 50 | - Avoid personal attacks, harassment, or discrimination.
 51 | - Keep discussions focused on constructive topics.
 52 | 
 53 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
 54 | 
 55 | ## Important Guidelines ⚡
 56 | 
 57 | - Contributors should only work on issues that have been assigned to them.
 58 | - Each pull request should be associated with one issue only.
 59 | - No minor text edits should be submitted unless necessary.
 60 | - Unethical behavior, tampering with files, or harassment will result in disqualification.
 61 | - Follow the community guidelines while contributing to ensure a healthy collaborative environment.
 62 | 
 63 |   ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
 64 | 
 65 | 
 66 | ## Getting Started
 67 | 
 68 | ### Prerequisites
 69 | 
 70 | - [Node.js](https://nodejs.org/) (LTS version recommended)
 71 | 
 72 | 
 73 | ### Fork the Repository
 74 | 
 75 | 1. Navigate to the main repository on GitHub.
 76 | 2. Click the **Fork** button at the top right to create a copy of the repository on your GitHub account.
 77 | 
 78 | ### Clone Your Fork
 79 | 
 80 | Clone the forked repository to your local machine:
 81 | 
 82 | ```bash
 83 | git clone https://github.com/<your-username>/<repository-name>.git
 84 | cd <repository-name>
 85 | ```
 86 | 
 87 | ### Install Dependencies
 88 | 
 89 | Install the necessary dependencies using npm or yarn:
 90 | 
 91 | ```bash
 92 | # Using npm
 93 | npm install
 94 | 
 95 | # Using yarn
 96 | yarn install
 97 | ```
 98 | 
 99 | ### Run the Development Server
100 | 
101 | Start the development server to ensure everything is set up correctly:
102 | 
103 | ```bash
104 | 
105 | # Using yarn
106 | yarn dev
107 | ```
108 | 
109 | Open your browser and navigate to `http://localhost:5173` (or the port specified) to see the app running.
110 | 
111 | ## Making Changes
112 | 
113 | ### Create a New Branch
114 | 
115 | Before making any changes, create a new branch:
116 | 
117 | ```bash
118 | git checkout -b feature/your-feature-name
119 | ```
120 | 
121 | ### Make Your Changes
122 | 
123 | Make the desired changes to the codebase using your preferred code editor.
124 | 
125 | ### Test Your Changes
126 | 
127 | Ensure that your changes do not break existing functionality:
128 | 
129 | ```bash
130 | # Run tests (if available)
131 | npm test
132 | # or
133 | yarn test
134 | ```
135 | 
136 | ### Build the Project (Optional)
137 | 
138 | To test the production build:
139 | 
140 | ```bash
141 | # Using npm
142 | npm run build
143 | 
144 | # Using yarn
145 | yarn build
146 | ```
147 | 
148 | ## Submitting a Pull Request
149 | 
150 | ### Commit Your Changes
151 | 
152 | Add and commit your changes with a descriptive message:
153 | 
154 | ```bash
155 | git add .
156 | git commit -m "Add feature: description of feature"
157 | ```
158 | 
159 | ### Push to Your Fork
160 | 
161 | Push the changes to your forked repository:
162 | 
163 | ```bash
164 | git push origin feature/your-feature-name
165 | ```
166 | 
167 | ### Create a Pull Request
168 | 
169 | 1. Navigate to your fork on GitHub.
170 | 2. Click the **Compare & pull request** button.
171 | 3. Ensure the base fork is the original repository and the base branch is `main` (or the appropriate branch).
172 | 4. Provide a clear and descriptive title for your pull request.
173 | 5. In the description, explain the changes you've made and any relevant context.
174 | 6. Submit the pull request.
175 | 
176 | ## Code Review and Merging
177 | 
178 | - **Review Process**: Your pull request will be reviewed by maintainers. Please be responsive to any feedback and make necessary changes.
179 | - **Merging**: Once approved, your pull request will be merged into the main codebase.
180 | - **Delete Branch**: After merging, you can safely delete your branch:
181 | 
182 |   ```bash
183 |   git checkout main
184 |   git pull upstream main
185 |   git branch -d feature/your-feature-name
186 |   ```
187 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
188 | 
189 |  ## Summary
190 | - Drop a Star ⭐ in this repo
191 | - Take a look at the existing [**Issues**](https://github.com/BamaCharanChhandogi/READMEasy/issues). 
192 | - Fork the Repo & create a branch for any issue that you are working on and commit your work.
193 | - At first raise an issue in which you want to work
194 | - Then after assigning only then work on that issue & make a PR 
195 | - Create a [**Pull Request**](https://github.com/BamaCharanChhandogi/READMEasy/pulls), which will be promptly reviewed and given suggestions for improvements by the community.
196 | - **REMINDER: Don't raise more than 2 `Issue` at a time**
197 | - **IMPORTANT: Don't make any type of `Pull Request` until & unless you get assigned to an `Issue`**
198 | - Add screenshots or screen captures to your `Pull Request` to help us understand the effects of the changes that are included in your commits.
199 | 
200 | Thank you for your contribution!!
201 | 
202 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
203 | 
204 | ## Development Workflow 📈
205 | 
206 | When contributing to this project, please follow these guidelines:
207 | 
208 | - Always work on a new branch for each issue or feature.
209 | - Keep your branch updated with the main repository's master branch.
210 | - Write clear and concise commit messages.
211 | - Test your changes thoroughly before submitting a pull request.
212 | - Keep discussions respectful and constructive.
213 | 
214 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
215 | 
216 | ## Issue Report Process 🚩
217 | 
218 | - Go to the project's issues section.
219 | - Choose the appropriate template for your issue.
220 | - Provide a clear description of the issue.
221 | - Wait for someone to look into it before working on it.
222 | - Work on the issue only after it has been assigned to you.
223 | 
224 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
225 | 
226 | ## Pull Request Process 🚀
227 | 
228 | - Ensure that your code is self-reviewed before submitting.
229 | - Provide a detailed description of the functionality or changes made.
230 | - Add relevant comments in your code, especially for complex sections.
231 | - Submit your PR using the appropriate PR template.
232 | 
233 | ![Line](https://user-images.githubusercontent.com/85225156/171937799-8fc9e255-9889-4642-9c92-6df85fb86e82.gif)
234 | 
235 | <h2 align="center">Need more help? 🤔</h1>
236 | <p align="center">
237 |   You can refer to the following articles on basics of Git and Github and also contact the Project Mentors, in case you are stuck: <br>
238 |   <a href="https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request">How to create a Issue</a> <br>
239 |   <a href="https://help.github.com/en/github/getting-started-with-github/fork-a-repo">Forking a Repo</a> <br>
240 |   <a href="https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository">Cloning a Repo</a> <br>
241 |   <a href="https://opensource.com/article/19/7/create-pull-request-github">How to create a Pull Request</a> <br>
242 |   <a href="https://docs.github.com/get-started">Getting started with Git and GitHub</a> <br>
243 | </p>
244 | 
245 | <h2 align="center">Tip from us 😇</h1>
246 | <p align="center">It always takes time to understand and learn. So, don't worry at all. We know <b>you have got this</b>! 💪</p>
247 | <h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3># Contributing to the READMEasy
248 | 


--------------------------------------------------------------------------------
/src/components/MarkdownToolbar.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import { 
  3 |   Bold, 
  4 |   Italic, 
  5 |   Link, 
  6 |   Image, 
  7 |   List, 
  8 |   ListOrdered, 
  9 |   Table, 
 10 |   Code,
 11 |   CheckSquare,
 12 |   Heading1,
 13 |   Heading2,
 14 |   Heading3
 15 | } from 'lucide-react';
 16 | 
 17 | const MarkdownToolbar = ({ textareaRef }) => {
 18 |   const [urlModalOpen, setUrlModalOpen] = useState(false);
 19 |   const [modalType, setModalType] = useState(null);
 20 |   const [urlValue, setUrlValue] = useState('');
 21 |   const [textValue, setTextValue] = useState('');
 22 |   const [lastSelection, setLastSelection] = useState(null);
 23 |   const [lastScrollPosition, setLastScrollPosition] = useState(null);
 24 |   const [storeTextRef, setTextRef] = useState(textareaRef.current);
 25 | 
 26 |   const tools = [
 27 |     { icon: Bold, action: 'bold', wrapper: '**', shortcut: 'Ctrl+B' },
 28 |     { icon: Italic, action: 'italic', wrapper: '_', shortcut: 'Ctrl+I' },
 29 |     { icon: Heading1, action: 'h1', prefix: '# ', shortcut: 'Ctrl+1' },
 30 |     { icon: Heading2, action: 'h2', prefix: '## ', shortcut: 'Ctrl+2' },
 31 |     { icon: Heading3, action: 'h3', prefix: '### ', shortcut: 'Ctrl+3' },
 32 |     { icon: Link, action: 'link', template: '[text](url)', shortcut: 'Ctrl+K', needsUrl: true },
 33 |     { icon: Image, action: 'image', template: '![text](url)', shortcut: 'Ctrl+Shift+I', needsUrl: true },
 34 |     { icon: List, action: 'unordered-list', template: '- item\n- item\n- item', shortcut: 'Ctrl+U' },
 35 |     { icon: ListOrdered, action: 'ordered-list', template: '1. item\n2. item\n3. item', shortcut: 'Ctrl+O' },
 36 |     { icon: CheckSquare, action: 'checklist', template: '- [ ] task\n- [ ] task\n- [x] completed task', shortcut: 'Ctrl+Shift+C' },
 37 |     { icon: Table, action: 'table', template: '| Header | Header |\n|--------|--------|\n| Cell   | Cell   |', shortcut: 'Ctrl+T' },
 38 |     { icon: Code, action: 'code', wrapper: '```', multiline: true, shortcut: 'Ctrl+Shift+K' }
 39 |   ];
 40 | 
 41 |   const saveState = () => {
 42 |     const textarea = storeTextRef;
 43 |     if (!textarea) return;
 44 |     
 45 |     setLastSelection({
 46 |       start: textarea.selectionStart,
 47 |       end: textarea.selectionEnd,
 48 |       text: textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
 49 |     });
 50 |     
 51 |     setLastScrollPosition(textarea.scrollTop);
 52 |   };
 53 | 
 54 |   const restoreState = (newStart = null, newEnd = null) => {
 55 |     const textarea = storeTextRef;
 56 |     if (!textarea) return;
 57 | 
 58 |     // Restore scroll position
 59 |     if (lastScrollPosition !== null) {
 60 |       textarea.scrollTop = lastScrollPosition;
 61 |     }
 62 | 
 63 |     // Restore selection
 64 |     textarea.focus();
 65 |     if (newStart !== null && newEnd !== null) {
 66 |       textarea.setSelectionRange(newStart, newEnd);
 67 |     } else if (lastSelection) {
 68 |       textarea.setSelectionRange(lastSelection.start, lastSelection.end);
 69 |     }
 70 |   };
 71 | 
 72 |   const insertText = (text, start, end, selectInserted = false) => {
 73 |     const textarea = textareaRef.current;
 74 |     if (!textarea) return;
 75 | 
 76 |     saveState();
 77 |     
 78 |     const value = textarea.value;
 79 |     const newValue = value.substring(0, start) + text + value.substring(end);
 80 |     
 81 |     // Calculate new selection positions
 82 |     const newStart = selectInserted ? start : start + text.length;
 83 |     const newEnd = selectInserted ? start + text.length : start + text.length;
 84 | 
 85 |     // Update textarea value
 86 |     textarea.value = newValue;
 87 |     
 88 |     // Trigger React's onChange event
 89 |     const event = new Event('input', { bubbles: true });
 90 |     Object.defineProperty(event, 'target', { 
 91 |       value: textarea,
 92 |       writable: true 
 93 |     });
 94 |     textarea.dispatchEvent(event);
 95 | 
 96 |     // Use requestAnimationFrame to ensure DOM updates are complete
 97 |     requestAnimationFrame(() => {
 98 |       textarea.focus();
 99 |       textarea.setSelectionRange(newStart, newEnd);
100 |       if (lastScrollPosition !== null) {
101 |         textarea.scrollTop = lastScrollPosition;
102 |       }
103 |     });
104 |   };
105 | 
106 |   const handleUrlSubmit = (e) => {
107 |     e.preventDefault();
108 |     const textarea = textareaRef.current;
109 |     const tool = tools.find(t => t.action === modalType);
110 |     
111 |     if (tool) {
112 |       const text = textValue || lastSelection?.text || 'text';
113 |       const formattedText = tool.template
114 |         .replace('text', text)
115 |         .replace('url', urlValue);
116 |       
117 |       const insertStart = lastSelection?.start || textarea.selectionStart;
118 |       const insertEnd = lastSelection?.end || textarea.selectionEnd;
119 |       
120 |       insertText(formattedText, insertStart, insertEnd, true);
121 |     }
122 |     
123 |     setUrlModalOpen(false);
124 |     setUrlValue('');
125 |     setTextValue('');
126 |     setModalType(null);
127 |   };
128 | 
129 |   const handleAction = (tool) => {
130 |     const textarea = textareaRef.current;
131 |     if (!textarea) return;
132 | 
133 |     saveState();
134 | 
135 |     if (tool.needsUrl) {
136 |       setModalType(tool.action);
137 |       setUrlModalOpen(true);
138 |       if (lastSelection?.text) {
139 |         setTextValue(lastSelection.text);
140 |       }
141 |       return;
142 |     }
143 | 
144 |     const start = textarea.selectionStart;
145 |     const end = textarea.selectionEnd;
146 |     const selectedText = textarea.value.substring(start, end);
147 |     
148 |     if (tool.wrapper) {
149 |       const isWrapped = selectedText.startsWith(tool.wrapper) && selectedText.endsWith(tool.wrapper);
150 |       if (isWrapped) {
151 |         // Remove wrapper
152 |         const unwrappedText = selectedText.substring(tool.wrapper.length, selectedText.length - tool.wrapper.length);
153 |         insertText(unwrappedText, start, end, true);
154 |       } else {
155 |         // Add wrapper
156 |         const wrappedText = tool.multiline 
157 |           ? `${tool.wrapper}\n${selectedText}\n${tool.wrapper}`
158 |           : `${tool.wrapper}${selectedText}${tool.wrapper}`;
159 |         insertText(wrappedText, start, end, true);
160 |       }
161 |     } else if (tool.prefix) {
162 |       const lineStart = textarea.value.lastIndexOf('\n', start - 1) + 1;
163 |       const currentLine = textarea.value.substring(lineStart, end);
164 |       const hasPrefix = currentLine.startsWith(tool.prefix);
165 |       
166 |       if (hasPrefix) {
167 |         insertText(currentLine.substring(tool.prefix.length), lineStart, end, true);
168 |       } else {
169 |         insertText(tool.prefix + currentLine, lineStart, end, true);
170 |       }
171 |     } else if (tool.template) {
172 |       insertText(tool.template, start, end, true);
173 |     }
174 |   };
175 | 
176 |   useEffect(() => {
177 |     const handleKeyDown = (e) => {
178 |       if (!textareaRef.current) return;
179 |       if (e.ctrlKey) {
180 |         const tool = tools.find(t => {
181 |           const shortcutKey = t.shortcut.split('+').pop().toLowerCase();
182 |           return e.key.toLowerCase() === shortcutKey && 
183 |                  t.shortcut.includes('Shift') === e.shiftKey;
184 |         });
185 | 
186 |         if (tool) {
187 |           e.preventDefault();
188 |           handleAction(tool);
189 |         }
190 |       }
191 |     };
192 | 
193 |     document.addEventListener('keydown', handleKeyDown);
194 |     return () => document.removeEventListener('keydown', handleKeyDown);
195 |   }, [textareaRef]);
196 | 
197 |   return (
198 |     <>
199 |       <div className="flex flex-wrap gap-2 p-2 bg-gray-700 rounded-t-md border-b border-gray-600">
200 |         {tools.map((tool) => (
201 |           <button
202 |             key={tool.action}
203 |             onClick={() => handleAction(tool)}
204 |             className="p-1.5 text-gray-300 hover:text-white hover:bg-gray-600 rounded transition-colors group relative"
205 |             title={`${tool.action.charAt(0).toUpperCase() + tool.action.slice(1).replace('-', ' ')} (${tool.shortcut})`}
206 |           >
207 |             <tool.icon size={20} />
208 |             <span className="absolute hidden group-hover:block bg-black text-white text-xs px-2 py-1 rounded -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap z-10">
209 |               {tool.shortcut}
210 |             </span>
211 |           </button>
212 |         ))}
213 |       </div>
214 | 
215 |       {urlModalOpen && (
216 |         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
217 |           <div className="bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full">
218 |             <form onSubmit={handleUrlSubmit} className="space-y-4">
219 |               <div>
220 |                 <label className="block text-sm font-medium text-gray-200 mb-1">
221 |                   Text
222 |                 </label>
223 |                 <input
224 |                   type="text"
225 |                   value={textValue}
226 |                   onChange={(e) => setTextValue(e.target.value)}
227 |                   className="w-full p-2 bg-gray-700 border border-gray-600 rounded text-white"
228 |                   placeholder="Enter text"
229 |                 />
230 |               </div>
231 |               <div>
232 |                 <label className="block text-sm font-medium text-gray-200 mb-1">
233 |                   URL
234 |                 </label>
235 |                 <input
236 |                   type="text"
237 |                   value={urlValue}
238 |                   onChange={(e) => setUrlValue(e.target.value)}
239 |                   className="w-full p-2 bg-gray-700 border border-gray-600 rounded text-white"
240 |                   placeholder="Enter URL"
241 |                   required
242 |                 />
243 |               </div>
244 |               <div className="flex justify-end space-x-2">
245 |                 <button
246 |                   type="button"
247 |                   onClick={() => {
248 |                     setUrlModalOpen(false);
249 |                     setUrlValue('');
250 |                     setTextValue('');
251 |                     setModalType(null);
252 |                     restoreState();
253 |                   }}
254 |                   className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-500"
255 |                 >
256 |                   Cancel
257 |                 </button>
258 |                 <button
259 |                   type="submit"
260 |                   className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-500"
261 |                 >
262 |                   Insert
263 |                 </button>
264 |               </div>
265 |             </form>
266 |           </div>
267 |         </div>
268 |       )}
269 |     </>
270 |   );
271 | };
272 | 
273 | export default MarkdownToolbar;


--------------------------------------------------------------------------------
/src/components/InputForm.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | 
  3 | const stacks = {
  4 |   python: {
  5 |     installation: '1. Clone the repository\n2. Create a virtual environment: `python -m venv venv`\n3. Activate the virtual environment:\n   - Windows: `venv\\Scripts\\activate`\n   - macOS/Linux: `source venv/bin/activate`\n4. Install dependencies: `pip install -r requirements.txt`\n5. Run the project: `python main.py`',
  6 |     usage: 'To use this Python project:\n1. Ensure all dependencies are installed\n2. Run `python main.py`\n3. Follow the on-screen prompts or refer to the documentation for specific commands and features\n4. For API usage (if applicable), check the `/docs` endpoint for Swagger UI documentation',
  7 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
  8 |   },
  9 |   mern: {
 10 |     installation: '1. Clone the repository\n2. Install server dependencies: `npm install` in the root directory\n3. Install client dependencies: `cd client && npm install`\n4. Create a `.env` file in the root directory and add your MongoDB URI and other environment variables\n5. Run the full stack app: `npm run dev` in the root directory',
 11 |     usage: 'To use this MERN stack project:\n1. Access the frontend at `http://localhost:3000`\n2. The backend API is available at `http://localhost:5000`\n3. Use tools like Postman to test API endpoints\n4. Refer to the API documentation (typically found at `/api-docs`) for available routes and request/response formats',
 12 |     contributing: 'Contributions are welcome! To contribute:\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/AmazingFeature`\n3. Commit your changes: `git commit -m "Add some AmazingFeature"`\n4. Push to the branch: `git push origin feature/AmazingFeature`\n5. Open a pull request\n6. Ensure your code follows the project\'s coding standards and passes all tests',
 13 |   },
 14 |   django: {
 15 |     installation: '1. Clone the repository\n2. Create a virtual environment: `python -m venv venv`\n3. Activate the virtual environment:\n   - Windows: `venv\\Scripts\\activate`\n   - macOS/Linux: `source venv/bin/activate`\n4. Install dependencies: `pip install -r requirements.txt`\n5. Run migrations: `python manage.py migrate`\n6. Start the server: `python manage.py runserver`',
 16 |     usage: 'To use this Django project:\n1. Ensure all dependencies are installed\n2. Run `python manage.py runserver`\n3. Access the application at `http://localhost:8000`\n4. For API usage (if applicable), check the `/api/docs` endpoint for Swagger UI documentation',
 17 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 18 |   },
 19 |   react: {
 20 |     installation: '1. Clone the repository\n2. Run `npm install` to install dependencies\n3. Run `npm start` to launch the development server',
 21 |     usage: 'To use this React project:\n1. Ensure all dependencies are installed\n2. Run `npm start`\n3. Access the application at `http://localhost:3000`\n4. Follow the on-screen prompts or refer to the documentation for specific features',
 22 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 23 |   },
 24 |   flask: {
 25 |     installation: '1. Clone the repository\n2. Create a virtual environment: `python -m venv venv`\n3. Activate the virtual environment:\n   - Windows: `venv\\Scripts\\activate`\n   - macOS/Linux: `source venv/bin/activate`\n4. Install dependencies: `pip install -r requirements.txt`\n5. Run the project: `flask run`',
 26 |     usage: 'To use this Flask project:\n1. Ensure all dependencies are installed\n2. Run `flask run`\n3. Access the application at `http://localhost:5000`\n4. Follow the on-screen prompts or refer to the documentation for specific features',
 27 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 28 |   },
 29 |   angular: {
 30 |     installation: '1. Clone the repository\n2. Run `npm install` to install dependencies\n3. Run `ng serve` to launch the development server',
 31 |     usage: 'To use this Angular project:\n1. Ensure all dependencies are installed\n2. Run `ng serve`\n3. Access the application at `http://localhost:4200`\n4. Follow the on-screen prompts or refer to the documentation for specific features',
 32 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 33 |   },
 34 |   vue: {
 35 |     installation: '1. Clone the repository\n2. Run `npm install` to install dependencies\n3. Run `npm run serve` to launch the development server',
 36 |     usage: 'To use this Vue project:\n1. Ensure all dependencies are installed\n2. Run `npm run serve`\n3. Access the application at `http://localhost:8080`\n4. Follow the on-screen prompts or refer to the documentation for specific features',
 37 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 38 |   },
 39 |   laravel: {
 40 |     installation: '1. Clone the repository\n2. Run `composer install` to install dependencies\n3. Copy `.env.example` to `.env` and configure your environment variables\n4. Run `php artisan key:generate`\n5. Run migrations: `php artisan migrate`\n6. Start the server: `php artisan serve`',
 41 |     usage: 'To use this Laravel project:\n1. Ensure all dependencies are installed\n2. Run `php artisan serve`\n3. Access the application at `http://localhost:8000`\n4. Follow the on-screen prompts or refer to the documentation for specific features',
 42 |     contributing: 'We welcome contributions! To contribute:\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature-branch-name`\n3. Make your changes and commit them: `git commit -m "Add some feature"`\n4. Push to the branch: `git push origin feature-branch-name`\n5. Create a pull request with a detailed description of your changes',
 43 |   },
 44 | };
 45 | 
 46 | function InputForm({ onSubmit }) {
 47 |   const [projectInfo, setProjectInfo] = useState({
 48 |     projectName: '',
 49 |     description: '',
 50 |     features: '',
 51 |     installation: '',
 52 |     usage: '',
 53 |     contributing: '',
 54 |     license: '',
 55 |   });
 56 |   const [errors, setErrors] = useState({});
 57 |   const [selectedStack, setSelectedStack] = useState('');
 58 | 
 59 |   const handleChange = (e) => {
 60 |     setProjectInfo({ ...projectInfo, [e.target.name]: e.target.value });
 61 |     setErrors({ ...errors, [e.target.name]: '' });
 62 |   };
 63 | 
 64 |   const handleStackChange = (e) => {
 65 |     setSelectedStack(e.target.value);
 66 |   };
 67 | 
 68 |   const handlePreFill = () => {
 69 |     if (selectedStack && stacks[selectedStack]) {
 70 |       setProjectInfo(prevInfo => ({
 71 |         ...prevInfo,
 72 |         installation: stacks[selectedStack].installation || '',
 73 |         usage: stacks[selectedStack].usage || '',
 74 |         contributing: stacks[selectedStack].contributing || '',
 75 |       }));
 76 |       setErrors({});
 77 |     }
 78 |   };
 79 | 
 80 |   const handleSubmit = (e) => {
 81 |     e.preventDefault();
 82 |     const newErrors = {};
 83 |     if (!projectInfo.projectName) newErrors.projectName = 'Project Name is required';
 84 |     if (!projectInfo.description) newErrors.description = 'Description is required';
 85 |     if (Object.keys(newErrors).length) {
 86 |       setErrors(newErrors);
 87 |       return;
 88 |     }
 89 |     onSubmit(projectInfo);
 90 |   };
 91 | 
 92 |   return (
 93 |     <form onSubmit={handleSubmit} className="space-y-6">
 94 |       <div className="flex space-x-4 items-end">
 95 |         <div className="flex-grow">
 96 |           <label htmlFor="stack" className="block text-sm font-medium text-purple-300 mb-1">
 97 |             Select Stack
 98 |           </label>
 99 |           <div className="relative">
100 |             <select
101 |               id="stack"
102 |               value={selectedStack}
103 |               onChange={handleStackChange}
104 |               className="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition duration-300 ease-in-out appearance-none"
105 |             >
106 |               <option value="" disabled>
107 |                 Choose a stack
108 |               </option>
109 |               {Object.keys(stacks).map((stack) => (
110 |                 <option key={stack} value={stack} className="text-white-700">
111 |                   {stack.charAt(0).toUpperCase() + stack.slice(1)}
112 |                 </option>
113 |               ))}
114 |             </select>
115 |             <div className="absolute right-3 top-2.5 pointer-events-none">
116 |               <svg
117 |                 xmlns="http://www.w3.org/2000/svg"
118 |                 className="h-5 w-5 text-white-300"
119 |                 viewBox="0 0 20 20"
120 |                 fill="currentColor"
121 |               >
122 |                 <path
123 |                   fillRule="evenodd"
124 |                   d="M5.293 7.707a1 1 0 011.414 0L10 11.414l3.293-3.707a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
125 |                   clipRule="evenodd"
126 |                 />
127 |               </svg>
128 |             </div>
129 |           </div>
130 |         </div>
131 | 
132 |         <button
133 |           type="button"
134 |           onClick={handlePreFill}
135 |           className="bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300"
136 |           disabled={!selectedStack}
137 |         >
138 |           Pre-fill Installation, Usage & Contributing
139 |         </button>
140 |       </div>
141 | 
142 |       {Object.entries(projectInfo).map(([key, value]) => (
143 |         <div key={key}>
144 |           <label htmlFor={key} className="block text-sm font-medium text-purple-300 mb-1 capitalize">
145 |             {key.replace(/([A-Z])/g, ' $1').trim()} {key !== 'projectName' && key !== 'description' ? '(Optional)' : ''}
146 |           </label>
147 |           {key === 'description' || key === 'features' || key === 'installation' || key === 'usage' || key === 'contributing' ? (
148 |             <textarea
149 |               id={key}
150 |               name={key}
151 |               value={value}
152 |               onChange={handleChange}
153 |               placeholder={`Enter ${key}`}
154 |               className="w-full h-28 px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 text-white placeholder-gray-400 resize-none"
155 |               rows="4"
156 |             />
157 |           ) : (
158 |             <input
159 |               type="text"
160 |               id={key}
161 |               name={key}
162 |               value={value}
163 |               onChange={handleChange}
164 |               placeholder={`Enter ${key}`}
165 |               className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 text-white placeholder-gray-400"
166 |             />
167 |           )}
168 |           {errors[key] && <p className="text-red-500 text-sm mt-1">{errors[key]}</p>}
169 |         </div>
170 |       ))}
171 | 
172 |       <button
173 |         type="submit"
174 |         className="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300"
175 |       >
176 |         Generate README
177 |       </button>
178 |     </form>
179 |   );
180 | }
181 | 
182 | export default InputForm;


--------------------------------------------------------------------------------