From 7c31bc194b9a1cc9c3593fc47a1ce8e2d6097241 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 12 Sep 2024 21:08:09 +0530
Subject: [PATCH 1/4] chore(seo): updated the title for diff view

---
 pages/v2/diff.vue  | 37 +++++++++++++++++++++++++++++++++----
 pages/v2/index.vue | 19 +++++++++++++++++--
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index b6e854d..69376e9 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -6,16 +6,40 @@
     <main class="outline-none" tabindex="0">
       <DiffActionBar :diff-navigator="diffNavigator" />
       <section
-        class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
+        class="
+          flex flex-wrap
+          items-stretch
+          w-full
+          gap-4
+          font-mono
+          text-gray-800
+          dark:text-gray-50
+        "
       >
         <div class="flex w-full gap-4 space-around">
           <p
-            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
+            class="
+              flex-grow-0 flex-shrink-0
+              w-1/2
+              text-lg
+              font-bold
+              text-center
+              capitalize
+              break-all
+            "
           >
             <span class="inline-block w-4/5">{{ lhsLabel }}</span>
           </p>
           <p
-            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
+            class="
+              flex-grow-0 flex-shrink-0
+              w-1/2
+              text-lg
+              font-bold
+              text-center
+              capitalize
+              break-all
+            "
           >
             <span class="inline-block w-4/5">{{ rhsLabel }}</span>
           </p>
@@ -30,8 +54,8 @@
 </template>
 
 <script lang="ts">
-import pako from 'pako'
 import loader from '@monaco-editor/loader'
+import pako from 'pako'
 import Vue from 'vue'
 import {
   getMonacoEditorDefaultOptions,
@@ -53,6 +77,11 @@ export default Vue.extend({
       diffNavigator: {},
     }
   },
+  head() {
+    return {
+      title: 'Diff Viewer - Diff view',
+    }
+  },
   computed: {
     onThemeChange() {
       const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 6200a9e..b283ca6 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -1,4 +1,3 @@
-n
 <template>
   <div class="page-contents">
     <Navbar />
@@ -57,7 +56,23 @@ n
         <div class="self-end flex-grow-0 w-full mt-4 text-center">
           <button
             id="submitButton"
-            class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
+            class="
+              inline-flex
+              items-center
+              justify-center
+              w-48
+              px-4
+              py-2
+              transition-transform
+              transform
+              bg-blue-600
+              rounded-md
+              shadow-lg
+              outline-none
+              text-gray-50
+              focus:ring-4
+              active:scale-y-75
+            "
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare

From 4847c836f2ab46dd2b20fc41ceb3f8541181b03f Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 12 Sep 2024 21:51:34 +0530
Subject: [PATCH 2/4] feat(beautify): added buttons to beautify code

---
 pages/v2/index.vue | 70 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index b283ca6..08aec67 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -16,7 +16,7 @@
       </section>
       <form class="flex flex-col w-full gap-4" @submit="checkForm">
         <section class="flex w-full gap-4 editor-wrapper">
-          <div class="flex flex-col w-1/2 gap-4">
+          <div class="relative flex flex-col w-1/2 gap-4">
             <label for="lhsLabel" class="relative">
               <input
                 id="lhsLabel"
@@ -33,8 +33,41 @@
               name="lhs"
               class="h-screen p-2 border border-gray-600 rounded-md editor"
             ></div>
+            <button
+              aria-label="Beautify entered text"
+              type="button"
+              title="Beautify"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
+              @click="
+                lhsEditor.trigger('editor', 'editor.action.formatDocument')
+              "
+            >
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </button>
           </div>
-          <div class="flex flex-col w-1/2 gap-4">
+          <div class="relative flex flex-col w-1/2 gap-4">
             <label for="lhsLabel" class="relative">
               <input
                 id="rhsLabel"
@@ -51,6 +84,39 @@
               name="rhs"
               class="h-screen p-2 border border-gray-600 rounded-md editor"
             ></div>
+            <button
+              aria-label="Beautify entered text"
+              type="button"
+              title="Beautify"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
+              @click="
+                rhsEditor.trigger('editor', 'editor.action.formatDocument')
+              "
+            >
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </button>
           </div>
         </section>
         <div class="self-end flex-grow-0 w-full mt-4 text-center">

From f432f6ccb39f9e06a325d32b7f9986119eb684a8 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Fri, 13 Sep 2024 20:48:52 +0530
Subject: [PATCH 3/4] fix(persist-data): persisting data even if user lands on
 diff view directly

so now user can click on back button and have data in editors in all cases
---
 pages/v2/diff.vue | 36 +++++++++---------------------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index 69376e9..8af4a9d 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -6,40 +6,16 @@
     <main class="outline-none" tabindex="0">
       <DiffActionBar :diff-navigator="diffNavigator" />
       <section
-        class="
-          flex flex-wrap
-          items-stretch
-          w-full
-          gap-4
-          font-mono
-          text-gray-800
-          dark:text-gray-50
-        "
+        class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >
         <div class="flex w-full gap-4 space-around">
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ lhsLabel }}</span>
           </p>
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ rhsLabel }}</span>
           </p>
@@ -132,6 +108,12 @@ export default Vue.extend({
             }
           )
         }
+        this.$store.commit('data/set', {
+          lhs: this.lhs,
+          rhs: this.rhs,
+          lhsLabel: this.lhsLabel,
+          rhsLabel: this.rhsLabel,
+        })
       }
     })
   },

From 27655484d7b6664271fbe67af3d55f523cc2406a Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Fri, 13 Sep 2024 20:49:54 +0530
Subject: [PATCH 4/4] feat(clear): added clear button to clear all inputs in
 one click

---
 pages/v2/index.vue | 89 ++++++++++++++++++++++++----------------------
 1 file changed, 47 insertions(+), 42 deletions(-)

diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 08aec67..a5474fa 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -37,18 +37,7 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="
-                absolute
-                p-2
-                transition-all
-                rounded-sm
-                top-16
-                right-3
-                aspect-square
-                dark:hover:bg-slate-600 dark:bg-slate-600/50
-                hover:bg-slate-300
-                bg-gray-300/50
-              "
+              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
               @click="
                 lhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
@@ -88,18 +77,7 @@
               aria-label="Beautify entered text"
               type="button"
               title="Beautify"
-              class="
-                absolute
-                p-2
-                transition-all
-                rounded-sm
-                top-16
-                right-3
-                aspect-square
-                dark:hover:bg-slate-600 dark:bg-slate-600/50
-                hover:bg-slate-300
-                bg-gray-300/50
-              "
+              class="absolute p-2 transition-all rounded-sm  top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
               @click="
                 rhsEditor.trigger('editor', 'editor.action.formatDocument')
               "
@@ -119,29 +97,52 @@
             </button>
           </div>
         </section>
-        <div class="self-end flex-grow-0 w-full mt-4 text-center">
+        <div
+          class="flex self-end justify-center flex-grow-0 w-full gap-4 mt-4 text-center "
+        >
           <button
             id="submitButton"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              w-48
-              px-4
-              py-2
-              transition-transform
-              transform
-              bg-blue-600
-              rounded-md
-              shadow-lg
-              outline-none
-              text-gray-50
-              focus:ring-4
-              active:scale-y-75
-            "
+            class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
+            <span class="w-4 aspect-square">
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M13.5 7.5l-4-4m4 4l-4 4m4-4H1"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </span>
+          </button>
+          <button
+            id="submitButton"
+            class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 text-gray-800 transition-transform transform bg-yellow-300 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
+            aria-label="Click here to clear all the inputs"
+            type="button"
+            @click="clear"
+          >
+            <span class="w-4 aspect-square">
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M4.5 3V1.5a1 1 0 011-1h4a1 1 0 011 1V3M0 3.5h15m-13.5 0v10a1 1 0 001 1h10a1 1 0 001-1v-10M7.5 7v5m-3-3v3m6-3v3"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </span>
+            Clear
           </button>
         </div>
       </form>
@@ -272,6 +273,10 @@ export default Vue.extend({
         theme: 'error',
       })
     },
+    clear() {
+      this.lhsEditor.getModel().setValue('')
+      this.rhsEditor.getModel().setValue('')
+    },
   },
 })
 </script>