From b038eef922909b06092e3545e7e3dfb8c886b7e0 Mon Sep 17 00:00:00 2001
From: Priyank Kumar Mishra <priyank.21gcebit016@galgotiacollege.edu>
Date: Thu, 31 Oct 2024 20:32:30 +0530
Subject: [PATCH 1/2] Added raw code view

---
 components/pages/CreateProjectReadmePage.tsx | 41 ++++++++++++++++++--
 package-lock.json                            | 10 +++++
 package.json                                 |  1 +
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/components/pages/CreateProjectReadmePage.tsx b/components/pages/CreateProjectReadmePage.tsx
index 7c97750..dd62b86 100644
--- a/components/pages/CreateProjectReadmePage.tsx
+++ b/components/pages/CreateProjectReadmePage.tsx
@@ -6,10 +6,11 @@ import { useToast } from "../ui/use-toast";
 import { projectReadmeFormData } from "@/types";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { Button } from "../ui/button";
-import { Check, CopyIcon } from "lucide-react";
+import { Check, CopyIcon, GripVertical } from "lucide-react";
 import RenderMarkdown from "../RenderMarkdown";
 import CreateProjectReadmeForm from "../CreateProejctReadme";
 import { GenerateContentWithAI } from "@/actions/AIGeneration";
+import {Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 type Props = {
   themeFiles: string[];
@@ -29,6 +30,7 @@ const CreateProjectReadmePage = ({ themeFiles, markdownPath }: Props) => {
   });
   const [themeContent, setThemeContent] = useState("");
   const [isCopied, setIsCopied] = useState(false);
+  const [isRawMode, setIsRawMode] = useState(false);
   const [generating, setGenerating] = useState(false);
 
   const getThemeData = async () => {
@@ -56,6 +58,10 @@ const CreateProjectReadmePage = ({ themeFiles, markdownPath }: Props) => {
       setIsCopied(false);
     }, 2000)
   }
+  
+  const handleMarkdownChange = (e:React.ChangeEvent<HTMLTextAreaElement>)=>{
+    setThemeContent(e.target.value);
+  }
 
   const getAIText = async () => {
     setGenerating(true);
@@ -68,7 +74,7 @@ const CreateProjectReadmePage = ({ themeFiles, markdownPath }: Props) => {
   return (
     <div className='w-full p-4 min-h-screen h-auto bg-gray-50 dark:bg-gray-900'>
       <CreateProjectReadmeForm formData={formData} setFormData={setFormData} handleButtonClick={handleButtonClick} getAIText={getAIText} isAIGenerating={generating} />
-      <div className="w-full shadow-lg rounded-lg h-full bg-background dark:shadow-gray-600">
+      <div className="w-full pb-2 shadow-lg rounded-lg h-full bg-background dark:shadow-gray-600">
         <div className="flex gap-4 w-full justify-end p-2">
           <Button variant={"outline"} className={`h-[40px] w-[40px] p-0 ${isCopied && "bg-green-300 hover:bg-green-300"}`} onClick={handleContentCopy}>
             {!isCopied ?
@@ -76,6 +82,9 @@ const CreateProjectReadmePage = ({ themeFiles, markdownPath }: Props) => {
               : <Check />
             }
           </Button>
+          <Button variant={'outline'} className={`h-[40px] w-32 p-0`} onClick={()=>setIsRawMode(!isRawMode)}>
+            {isRawMode ? 'Raw + Preview': 'Preview only'}
+          </Button>
           <Select onValueChange={(value) => setSelectedTheme(value)}>
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder={themeFiles[0].split(".")[0]} defaultValue={themeFiles[0]} />
@@ -87,8 +96,32 @@ const CreateProjectReadmePage = ({ themeFiles, markdownPath }: Props) => {
             </SelectContent>
           </Select>
         </div>
-
-        <RenderMarkdown themeContent={themeContent} />
+        <PanelGroup direction="horizontal">
+          <Panel id="preview" order={1} defaultSize={isRawMode ? 49 : 100}>
+            <div>
+            <RenderMarkdown themeContent={themeContent} />
+            </div>
+          </Panel>
+          {isRawMode ? (
+            <>
+              <PanelResizeHandle className="flex justify-center items-center w-px mx-4 bg-slate-600">
+                <div className="z-10 flex h-full w-6 items-center justify-center rounded">
+                  <GripVertical className="bg-white dark:bg-background" />
+                </div>
+              </PanelResizeHandle>
+              <Panel id="raw" order={2} defaultSize={51}>
+                <div className="h-full mr-2">
+                <textarea 
+                  value={themeContent} 
+                  onChange={handleMarkdownChange}
+                  className="w-full h-full p-4 rounded-lg text-gray-600 bg-gray-100 dark:bg-gray-800 dark:text-white"
+                />
+                </div>
+              </Panel>
+            </>
+          ) : (<></>)
+        } 
+        </PanelGroup>
       </div>
     </div>
   )
diff --git a/package-lock.json b/package-lock.json
index e43262b..c9b5cf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-markdown": "^9.0.1",
+        "react-resizable-panels": "^2.1.6",
         "rehype-raw": "^7.0.0",
         "tailwind-merge": "^2.5.3",
         "tailwindcss-animate": "^1.0.7"
@@ -3050,6 +3051,15 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.6.tgz",
+      "integrity": "sha512-oIqo/7pp2TsR+Dp1qZMr1l4RBDV4Zz/0HEG5zxliBJoHqqFnG0MbmFbk+5Q1VMGfPQ4uhXxefunLC1o7v38PDQ==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index cf9cb2e..58ecd9a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.6",
     "rehype-raw": "^7.0.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"

From 5f7b91c73107a665be48d4919aab9b5786714b07 Mon Sep 17 00:00:00 2001
From: Priyank Kumar Mishra <priyank.21gcebit016@galgotiacollege.edu>
Date: Thu, 31 Oct 2024 22:22:31 +0530
Subject: [PATCH 2/2] Added raw code view for all files

---
 components/pages/CreateCodeOfConductPage.tsx | 40 ++++++++++++++++++--
 components/pages/CreateGuidelinesPage.tsx    | 40 ++++++++++++++++++--
 components/pages/CreateReadmePage.tsx        | 40 ++++++++++++++++++--
 3 files changed, 111 insertions(+), 9 deletions(-)

diff --git a/components/pages/CreateCodeOfConductPage.tsx b/components/pages/CreateCodeOfConductPage.tsx
index 7d81930..897afa8 100644
--- a/components/pages/CreateCodeOfConductPage.tsx
+++ b/components/pages/CreateCodeOfConductPage.tsx
@@ -6,10 +6,11 @@ import { useToast } from "../ui/use-toast";
 import { conductFormData } from "@/types";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { Button } from "../ui/button";
-import { Check, CopyIcon } from "lucide-react";
+import { Check, CopyIcon, GripVertical } from "lucide-react";
 import RenderMarkdown from "../RenderMarkdown";
 import CreateCodeOfConductForm from "../CreateCodeOfConductForm";
 import { GenerateContentWithAI } from "@/actions/AIGeneration";
+import {Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 type Props = {
     themeFiles: string[];
@@ -25,6 +26,7 @@ const CreateCodeOfConductPage = ({ themeFiles, markdownPath }: Props) => {
     });
     const [themeContent, setThemeContent] = useState("");
     const [isCopied, setIsCopied] = useState(false);
+    const [isRawMode, setIsRawMode] = useState(false);
     const [generating, setGenerating] = useState(false);
 
     const getThemeData = async () => {
@@ -53,6 +55,10 @@ const CreateCodeOfConductPage = ({ themeFiles, markdownPath }: Props) => {
         }, 2000)
     }
 
+    const handleMarkdownChange = (e:React.ChangeEvent<HTMLTextAreaElement>)=>{
+        setThemeContent(e.target.value);
+    }
+    
     const getAIText = async () => {
         setGenerating(true);
         const systemPrompt = "You are an AI that can write SEO friendly README for github Projects. Write the content for the description section of this REAMDE in about 100 words. Use emojis, bullet points and make the README as attractive as possible.";
@@ -64,7 +70,7 @@ const CreateCodeOfConductPage = ({ themeFiles, markdownPath }: Props) => {
     return (
         <div className='w-full p-4 min-h-screen h-auto bg-gray-50 dark:bg-zinc-900'>
             <CreateCodeOfConductForm formData={formData} setFormData={setFormData} handleButtonClick={handleButtonClick} getAIText={getAIText} isAIGenerating={generating} />
-            <div className="w-full shadow-lg rounded-lg h-full bg-background dark:shadow-zinc-600">
+            <div className="w-full pb-2 shadow-lg rounded-lg h-full bg-background dark:shadow-zinc-600">
                 <div className="flex gap-4 w-full justify-end p-2">
                     <Button variant={"outline"} className={`h-[40px] w-[40px] p-0 ${isCopied && "bg-green-300 hover:bg-green-300"}`} onClick={handleContentCopy}>
                         {!isCopied ?
@@ -72,6 +78,9 @@ const CreateCodeOfConductPage = ({ themeFiles, markdownPath }: Props) => {
                             : <Check />
                         }
                     </Button>
+                    <Button variant={'outline'} className={`h-[40px] w-32 p-0`} onClick={()=>setIsRawMode(!isRawMode)}>
+                        {isRawMode ? 'Raw + Preview': 'Preview only'}
+                    </Button>
                     <Select onValueChange={(value) => setSelectedTheme(value)}>
                         <SelectTrigger className="w-[180px]">
                             <SelectValue placeholder={themeFiles[0].split(".")[0]} defaultValue={themeFiles[0]} />
@@ -84,7 +93,32 @@ const CreateCodeOfConductPage = ({ themeFiles, markdownPath }: Props) => {
                     </Select>
                 </div>
 
-                <RenderMarkdown themeContent={themeContent} />
+                <PanelGroup direction="horizontal">
+                    <Panel id="preview" order={1} defaultSize={isRawMode ? 49 : 100}>
+                        <div>
+                        <RenderMarkdown themeContent={themeContent} />
+                        </div>
+                    </Panel>
+                    {isRawMode ? (
+                        <>
+                            <PanelResizeHandle className="flex justify-center items-center w-px mx-4 bg-slate-600">
+                                <div className="z-10 flex h-full w-6 items-center justify-center rounded">
+                                    <GripVertical className="bg-white dark:bg-background" />
+                                </div>
+                            </PanelResizeHandle>
+                            <Panel id="raw" order={2} defaultSize={51}>
+                                <div className="h-full mr-2">
+                                <textarea 
+                                    value={themeContent} 
+                                    onChange={handleMarkdownChange}
+                                    className="w-full h-full p-4 rounded-lg text-gray-600 bg-gray-100 dark:bg-gray-800 dark:text-white"
+                                />
+                                </div>
+                            </Panel>
+                        </>
+                    ) : (<></>)
+                } 
+                </PanelGroup>
             </div>
         </div>
     )
diff --git a/components/pages/CreateGuidelinesPage.tsx b/components/pages/CreateGuidelinesPage.tsx
index 14429e1..a7bf9cb 100644
--- a/components/pages/CreateGuidelinesPage.tsx
+++ b/components/pages/CreateGuidelinesPage.tsx
@@ -6,10 +6,11 @@ import { useToast } from "../ui/use-toast";
 import { guidelinesFormData } from "@/types";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { Button } from "../ui/button";
-import { Check, CopyIcon } from "lucide-react";
+import { Check, CopyIcon, GripVertical } from "lucide-react";
 import CreateGuidelinesForm from "../CreateGuidelinesForm";
 import RenderMarkdown from "../RenderMarkdown";
 import { GenerateContentWithAI } from "@/actions/AIGeneration";
+import {Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 type Props = {
     themeFiles: string[];
@@ -25,6 +26,7 @@ const CreateGuidelinesPage = ({ themeFiles, markdownPath }: Props) => {
     });
     const [themeContent, setThemeContent] = useState("");
     const [isCopied, setIsCopied] = useState(false);
+    const [isRawMode, setIsRawMode] = useState(false);
     const [generating, setGenerating] = useState(false);
 
     const getThemeData = async () => {
@@ -53,6 +55,10 @@ const CreateGuidelinesPage = ({ themeFiles, markdownPath }: Props) => {
         }, 2000)
     }
 
+    const handleMarkdownChange = (e:React.ChangeEvent<HTMLTextAreaElement>)=>{
+        setThemeContent(e.target.value);
+    }
+    
     const getAIText = async () => {
         setGenerating(true);
         const systemPrompt = "You are an AI that can write SEO friendly README for github Projects. Write the content for the description section of this REAMDE in about 100 words. Use emojis, bullet points and make the README as attractive as possible.";
@@ -64,7 +70,7 @@ const CreateGuidelinesPage = ({ themeFiles, markdownPath }: Props) => {
     return (
         <div className='w-full p-4 min-h-screen h-auto bg-gray-50 dark:bg-zinc-900'>
             <CreateGuidelinesForm formData={formData} setFormData={setFormData} handleButtonClick={handleButtonClick} getAIText={getAIText} isAIGenerating={generating} />
-            <div className="w-full shadow-lg rounded-lg h-full bg-background dark:shadow-zinc-600">
+            <div className="w-full pb-2 shadow-lg rounded-lg h-full bg-background dark:shadow-zinc-600">
                 <div className="flex gap-4 w-full justify-end p-2">
                     <Button variant={"outline"} className={`h-[40px] w-[40px] p-0 ${isCopied && "bg-green-300 hover:bg-green-300"}`} onClick={handleContentCopy}>
                         {!isCopied ?
@@ -72,6 +78,9 @@ const CreateGuidelinesPage = ({ themeFiles, markdownPath }: Props) => {
                             : <Check />
                         }
                     </Button>
+                    <Button variant={'outline'} className={`h-[40px] w-32 p-0`} onClick={()=>setIsRawMode(!isRawMode)}>
+                        {isRawMode ? 'Raw + Preview': 'Preview only'}
+                    </Button>
                     <Select onValueChange={(value) => setSelectedTheme(value)}>
                         <SelectTrigger className="w-[180px]">
                             <SelectValue placeholder={themeFiles[0].split(".")[0]} defaultValue={themeFiles[0]} />
@@ -84,7 +93,32 @@ const CreateGuidelinesPage = ({ themeFiles, markdownPath }: Props) => {
                     </Select>
                 </div>
 
-                <RenderMarkdown themeContent={themeContent} />
+                <PanelGroup direction="horizontal">
+                    <Panel id="preview" order={1} defaultSize={isRawMode ? 49 : 100}>
+                        <div>
+                        <RenderMarkdown themeContent={themeContent} />
+                        </div>
+                    </Panel>
+                    {isRawMode ? (
+                        <>
+                            <PanelResizeHandle className="flex justify-center items-center w-px mx-4 bg-slate-600">
+                                <div className="z-10 flex h-full w-6 items-center justify-center rounded">
+                                    <GripVertical className="bg-white dark:bg-background" />
+                                </div>
+                            </PanelResizeHandle>
+                            <Panel id="raw" order={2} defaultSize={51}>
+                                <div className="h-full mr-2">
+                                <textarea 
+                                    value={themeContent} 
+                                    onChange={handleMarkdownChange}
+                                    className="w-full h-full p-4 rounded-lg text-gray-600 bg-gray-100 dark:bg-gray-800 dark:text-white"
+                                />
+                                </div>
+                            </Panel>
+                        </>
+                    ) : (<></>)
+                } 
+                </PanelGroup>
             </div>
         </div>
     )
diff --git a/components/pages/CreateReadmePage.tsx b/components/pages/CreateReadmePage.tsx
index fa0c0bf..41ac53a 100644
--- a/components/pages/CreateReadmePage.tsx
+++ b/components/pages/CreateReadmePage.tsx
@@ -7,10 +7,11 @@ import React, { useEffect, useState } from 'react';
 import RenderMarkdown from '../RenderMarkdown';
 import { FormatReadmeThemeData } from '@/actions/themeDataFormat';
 import { Button } from '../ui/button';
-import { Check, CopyIcon } from 'lucide-react';
+import { Check, CopyIcon, GripVertical } from 'lucide-react';
 import { useToast } from '../ui/use-toast';
 import { allLanguages } from '@/constants';
 import { GenerateContentWithAI } from '@/actions/AIGeneration';
+import {Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 type Props = {
     themeFiles: string[];
@@ -34,6 +35,7 @@ const CreateReadmePage = ({ themeFiles, markdownPath }: Props) => {
     });
     const [themeContent, setThemeContent] = useState("");
     const [isCopied, setIsCopied] = useState(false);
+    const [isRawMode, setIsRawMode] = useState(false);
     const [generating, setGenerating] = useState(false);
 
     const getThemeData = async () => {
@@ -61,6 +63,10 @@ const CreateReadmePage = ({ themeFiles, markdownPath }: Props) => {
             setIsCopied(false);
         }, 2000)
     }
+    
+    const handleMarkdownChange = (e:React.ChangeEvent<HTMLTextAreaElement>)=>{
+        setThemeContent(e.target.value);
+    }
 
     const getAIText = async () => {
         setGenerating(true);
@@ -73,7 +79,7 @@ const CreateReadmePage = ({ themeFiles, markdownPath }: Props) => {
     return (
         <div className='w-full p-4 min-h-screen h-auto bg-gray-50 dark:bg-gray-900'>
             <CreateReadmeForm formData={formData} setFormData={setFormData} handleButtonClick={handleButtonClick} getAIText={getAIText} isAIGenerating={generating} />
-            <div className="w-full shadow-lg rounded-lg h-full bg-card dark:shadow-gray-800">
+            <div className="w-full pb-2 shadow-lg rounded-lg h-full bg-card dark:shadow-gray-800">
                 <div className="flex gap-4 w-full justify-end p-2">
                     <Button variant={"outline"} className={`h-[40px] w-[40px] p-0 ${isCopied && "bg-green-300 hover:bg-green-300"}`} onClick={handleContentCopy}>
                         {!isCopied ?
@@ -81,6 +87,9 @@ const CreateReadmePage = ({ themeFiles, markdownPath }: Props) => {
                             : <Check />
                         }
                     </Button>
+                    <Button variant={'outline'} className={`h-[40px] w-32 p-0`} onClick={()=>setIsRawMode(!isRawMode)}>
+                        {isRawMode ? 'Raw + Preview': 'Preview only'}
+                    </Button>
                     <Select onValueChange={(value) => setSelectedTheme(value)}>
                         <SelectTrigger className="w-[180px]">
                             <SelectValue placeholder={themeFiles[0].split(".")[0]} defaultValue={themeFiles[0]} />
@@ -93,7 +102,32 @@ const CreateReadmePage = ({ themeFiles, markdownPath }: Props) => {
                     </Select>
                 </div>
 
-                <RenderMarkdown themeContent={themeContent} />
+                <PanelGroup direction="horizontal">
+                    <Panel id="preview" order={1} defaultSize={isRawMode ? 49 : 100}>
+                        <div>
+                        <RenderMarkdown themeContent={themeContent} />
+                        </div>
+                    </Panel>
+                    {isRawMode ? (
+                        <>
+                            <PanelResizeHandle className="flex justify-center items-center w-px mx-4 bg-slate-600">
+                                <div className="z-10 flex h-full w-6 items-center justify-center rounded">
+                                    <GripVertical className="bg-white dark:bg-background" />
+                                </div>
+                            </PanelResizeHandle>
+                            <Panel id="raw" order={2} defaultSize={51}>
+                                <div className="h-full mr-2">
+                                <textarea 
+                                    value={themeContent} 
+                                    onChange={handleMarkdownChange}
+                                    className="w-full h-full p-4 rounded-lg text-gray-600 bg-gray-100 dark:bg-gray-800 dark:text-white"
+                                />
+                                </div>
+                            </Panel>
+                        </>
+                    ) : (<></>)
+                } 
+                </PanelGroup>
             </div>
         </div>
     )