From c9d40cc38d54e400b223f99d42adc0b0d6585cc3 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 26 Sep 2024 12:14:40 +0530
Subject: [PATCH 1/5] fix: fixed footer for root diff pages

---
 pages/diff.vue | 197 +++++++++++++++++++------------------------------
 1 file changed, 77 insertions(+), 120 deletions(-)

diff --git a/pages/diff.vue b/pages/diff.vue
index 7858320..aa9cca4 100644
--- a/pages/diff.vue
+++ b/pages/diff.vue
@@ -1,133 +1,90 @@
 <template>
-  <div class="page-contents">
-    <Navbar :show-back-button="true">
-      <template #right>
-        <button
-          type="button"
-          class="
-            inline-flex
-            justify-center
-            px-4
-            py-2
-            transition-transform
-            transform
-            rounded-md
-            shadow
-            outline-none
-            copy-uri-button
-            align-center
-            focus:ring-4
-            active:scale-y-75
-          "
-          :class="{
-            'bg-blue-500 text-white': !copied,
-            'bg-green-500 text-gray-800': copied,
-          }"
-          @click="copyUrlToClipboard"
-        >
-          <span v-show="copied" class="inline-flex justify-center">
-            <svg
-              class="inline-block w-6 h-6 ml-[-4px]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-              ></path>
-            </svg>
-            <span class="hidden ml-2 md:inline-block">Copied</span>
-          </span>
-          <span v-show="!copied" class="inline-flex justify-center">
-            <svg
-              class="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-              ></path>
-            </svg>
-            <span class="hidden ml-2 md:inline-block">Copy link</span>
-          </span>
-        </button>
-      </template>
-    </Navbar>
-    <main class="outline-none" tabindex="0">
-      <div
-        class="
-          flex
-          items-stretch
-          w-full
-          gap-4
-          font-mono
-          text-gray-800
-          dark:text-gray-50
-        "
-      >
-        <div
-          class="
-            relative
-            flex-1
-            px-4
-            py-2
-            overflow-y-auto
-            border-2
-            rounded-md
-            dark:border-gray-500
-            max-h-screen--nav
-            line-number-gutter
-            min-h-80
-          "
-        >
-          <RTStickyCopyButton :click-handler="copyTextToClipboard" />
-          <div
-            v-for="(lineDiff, index) in lhsDiff"
-            :key="index"
+  <div class="contents">
+    <div class="page-contents">
+      <Navbar :show-back-button="true">
+        <template #right>
+          <button
+            type="button"
+            class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
             :class="{
-              'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
+              'bg-blue-500 text-white': !copied,
+              'bg-green-500 text-gray-800': copied,
             }"
+            @click="copyUrlToClipboard"
           >
-            <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
-          </div>
-        </div>
+            <span v-show="copied" class="inline-flex justify-center">
+              <svg
+                class="inline-block w-6 h-6 ml-[-4px]"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                ></path>
+              </svg>
+              <span class="hidden ml-2 md:inline-block">Copied</span>
+            </span>
+            <span v-show="!copied" class="inline-flex justify-center">
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                ></path>
+              </svg>
+              <span class="hidden ml-2 md:inline-block">Copy link</span>
+            </span>
+          </button>
+        </template>
+      </Navbar>
+      <main class="outline-none" tabindex="0">
         <div
-          class="
-            relative
-            flex-1
-            px-4
-            py-2
-            overflow-y-auto
-            border-2
-            rounded-md
-            dark:border-gray-500
-            min-h-80
-            line-number-gutter
-            max-h-screen--nav
-          "
+          class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
         >
-          <RTStickyCopyButton :click-handler="copyTextToClipboard" />
           <div
-            v-for="(lineDiff, index) in rhsDiff"
-            :key="index"
-            :class="{
-              'bg-green-200 dark:bg-green-700': lineDiff.includes('isModified'),
-            }"
+            class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
           >
-            <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
+            <RTStickyCopyButton :click-handler="copyTextToClipboard" />
+            <div
+              v-for="(lineDiff, index) in lhsDiff"
+              :key="index"
+              :class="{
+                'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
+              }"
+            >
+              <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
+            </div>
+          </div>
+          <div
+            class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
+          >
+            <RTStickyCopyButton :click-handler="copyTextToClipboard" />
+            <div
+              v-for="(lineDiff, index) in rhsDiff"
+              :key="index"
+              :class="{
+                'bg-green-200 dark:bg-green-700':
+                  lineDiff.includes('isModified'),
+              }"
+            >
+              <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
+            </div>
           </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </div>
     <Footer />
   </div>
 </template>

From 7c6dcf76dddacc892a654fff552db7f68cc225e9 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 26 Sep 2024 12:15:24 +0530
Subject: [PATCH 2/5] chore: skipping prepare-commit-msg for message/amend

---
 .husky/prepare-commit-msg | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
index c19c821..2c9d9b3 100755
--- a/.husky/prepare-commit-msg
+++ b/.husky/prepare-commit-msg
@@ -1,4 +1,14 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+if [ "$2" = "message" ]; then
+  echo "Skipping prepare-commit-msg hook due to message."
+  exit 0
+fi
+
+if [ "$2" = "commit" ]; then
+  echo "Skipping prepare-commit-msg hook due to amend."
+  exit 0
+fi
+
 exec </dev/tty && npx cz --hook || true

From 218eb054c4fb38e279cd4d1b8d42d0392bcebf07 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 26 Sep 2024 14:08:59 +0530
Subject: [PATCH 3/5] chore: ran linter on whole project

---
 components/buttons/copyLink.vue             | 18 +-----
 components/buttons/nextDiff.vue             | 19 +-----
 components/buttons/prevDiff.vue             | 19 +-----
 components/buttons/stickyCopy.vue           | 15 +----
 components/buttons/toggleInSync.vue         |  4 +-
 components/buttons/toggleInlineDiffView.vue | 20 +------
 components/diffActionBar.vue                | 21 ++++++-
 components/footer.vue                       | 11 +---
 components/navbar.vue                       | 28 +--------
 components/singleDiff.vue                   |  2 +-
 components/v2/diffActionBar.vue             |  7 +--
 components/v2/footer.vue                    | 12 +---
 components/v2/navbar.vue                    | 28 +--------
 pages/index.vue                             | 38 ++----------
 pages/v1/diff.vue                           | 10 +---
 pages/v2/diff.vue                           | 30 +---------
 pages/v2/index.vue                          | 65 ++-------------------
 17 files changed, 47 insertions(+), 300 deletions(-)

diff --git a/components/buttons/copyLink.vue b/components/buttons/copyLink.vue
index fdb9735..b56008a 100644
--- a/components/buttons/copyLink.vue
+++ b/components/buttons/copyLink.vue
@@ -3,23 +3,7 @@
     <button
       id="copyLinkButton"
       type="button"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        gap-1
-        p-2
-        text-sm
-        transition-transform
-        transform
-        rounded-md
-        shadow
-        justify-self-end
-        focus-visible:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-        copy-uri-button
-      "
+      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
       aria-label="Click here to copy url to clipboard"
       :class="{
         'bg-blue-500 text-white': !copied,
diff --git a/components/buttons/nextDiff.vue b/components/buttons/nextDiff.vue
index b04b203..54cb927 100644
--- a/components/buttons/nextDiff.vue
+++ b/components/buttons/nextDiff.vue
@@ -2,24 +2,7 @@
   <div id="nextDiffSection" class="inline-flex items-center gap-1">
     <button
       id="nextDiff"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        focus-visible:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
       aria-label="Go to next diff"
       type="button"
       @click="clickHandler"
diff --git a/components/buttons/prevDiff.vue b/components/buttons/prevDiff.vue
index 0f49642..7785e66 100644
--- a/components/buttons/prevDiff.vue
+++ b/components/buttons/prevDiff.vue
@@ -2,24 +2,7 @@
   <div id="prevDiffSection" class="inline-flex items-center gap-1">
     <button
       id="prevDiff"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        focus-visible:ring-4
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
       aria-label="Go to previous diff"
       type="button"
       @click="clickHandler"
diff --git a/components/buttons/stickyCopy.vue b/components/buttons/stickyCopy.vue
index 8d62126..6f5afaf 100644
--- a/components/buttons/stickyCopy.vue
+++ b/components/buttons/stickyCopy.vue
@@ -1,20 +1,7 @@
 <template>
   <div class="sticky top-0 text-right z-1">
     <button
-      class="
-        absolute
-        top-0
-        right-0
-        p-2
-        text-gray-800
-        transition-all
-        transform
-        rounded-full
-        shadow
-        dark:text-gray-50
-        z-1
-        hover:shadow-lg hover:scale-110 hover:rotate-12
-      "
+      class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow  dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
       :class="{
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
diff --git a/components/buttons/toggleInSync.vue b/components/buttons/toggleInSync.vue
index 87539f6..3fd02a2 100644
--- a/components/buttons/toggleInSync.vue
+++ b/components/buttons/toggleInSync.vue
@@ -1,16 +1,16 @@
 <template>
   <div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
     <label
+      id="toggleScrollInSyncLabel"
       for="toggleScrollInSync"
       class="text-gray-800 select-none dark:text-gray-50"
-      id="toggleScrollInSyncLabel"
       aria-controls="toggleScrollInSync"
     >
       Scroll in sync
     </label>
     <input
-      aria-labelledby="toggleScrollInSyncLabel"
       id="toggleScrollInSync"
+      aria-labelledby="toggleScrollInSyncLabel"
       type="checkbox"
       :checked="isEnabled"
       class="form-checkbox"
diff --git a/components/buttons/toggleInlineDiffView.vue b/components/buttons/toggleInlineDiffView.vue
index cfc62a7..8c8db17 100644
--- a/components/buttons/toggleInlineDiffView.vue
+++ b/components/buttons/toggleInlineDiffView.vue
@@ -3,25 +3,7 @@
     <button
       id="toggleInlineDiffView"
       type="button"
-      class="
-        inline-flex
-        items-center
-        justify-center
-        px-1
-        py-1
-        text-sm text-gray-600
-        transition-transform
-        transform
-        bg-gray-300
-        border border-gray-800
-        rounded-sm
-        outline-none
-        dark:border-gray-400 dark:text-white dark:bg-gray-800
-        align-center
-        focus:ring-4
-        active:scale-y-75
-        hover:scale-105 hover:shadow-lg
-      "
+      class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
       @click="toggleInlineDiffView"
     >
       <svg
diff --git a/components/diffActionBar.vue b/components/diffActionBar.vue
index f662b97..a8262f4 100644
--- a/components/diffActionBar.vue
+++ b/components/diffActionBar.vue
@@ -1,6 +1,25 @@
 <template>
   <section
-    class="flex items-center justify-between px-4 py-2 mb-4 sticky top-[70px] dark:bg-gray-700 bg-gray-300 dark:bg-opacity-50 bg-opacity-50 backdrop-blur-sm rounded-md shadow-lg border border-gray-500 w-full z-10"
+    class="
+      flex
+      items-center
+      justify-between
+      px-4
+      py-2
+      mb-4
+      sticky
+      top-[70px]
+      dark:bg-gray-700
+      bg-gray-300
+      dark:bg-opacity-50
+      bg-opacity-50
+      backdrop-blur-sm
+      rounded-md
+      shadow-lg
+      border border-gray-500
+      w-full
+      z-10
+    "
   >
     <div class="flex gap-4">
       <ToggleInSync />
diff --git a/components/footer.vue b/components/footer.vue
index 18ec248..433c996 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -1,15 +1,6 @@
 <template>
   <footer
-    class="
-      sticky
-      py-4
-      mt-4
-      text-center text-gray-800
-      top-full
-      bg-inherit
-      dark:text-gray-50
-      min-h-max
-    "
+    class="sticky py-4 mt-4 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
   >
     Made with &hearts; using
     <a
diff --git a/components/navbar.vue b/components/navbar.vue
index aa3f8fd..0493cef 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -1,17 +1,6 @@
 <template>
   <nav
-    class="
-      sticky
-      top-0
-      left-0
-      right-0
-      z-10
-      text-gray-800
-      shadow-lg
-      dark:shadow-dark
-      bg-gray-50
-      dark:bg-gray-900 dark:text-gray-50
-    "
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -46,20 +35,7 @@
           <slot name="right" />
           <button
             type="button"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              ml-4
-              bg-transparent
-              border-2 border-gray-700
-              rounded-full
-              shadow-lg
-              w-9
-              h-9
-              active:scale-y-75
-              hover:scale-105 hover:shadow-lg
-            "
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
             aria-label="Toggle Dark Mode"
             @click="toggleDarkMode"
           >
diff --git a/components/singleDiff.vue b/components/singleDiff.vue
index ae7cfc5..dab575f 100644
--- a/components/singleDiff.vue
+++ b/components/singleDiff.vue
@@ -5,7 +5,7 @@
     </p>
     <div
       :id="id"
-      class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
+      class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
       :class="{
         'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
       }"
diff --git a/components/v2/diffActionBar.vue b/components/v2/diffActionBar.vue
index 7967c34..c9d0066 100644
--- a/components/v2/diffActionBar.vue
+++ b/components/v2/diffActionBar.vue
@@ -7,18 +7,13 @@
       px-4
       py-2
       mb-4
-      sticky
       top-[70px]
       dark:bg-gray-700
-      bg-gray-300
-      dark:bg-opacity-50
-      bg-opacity-50
-      backdrop-blur-sm
+      bg-gray-300 bg-opacity-50
       rounded-md
       shadow-lg
       border border-gray-500
       w-full
-      z-10
     "
   >
     <div class="flex gap-4">
diff --git a/components/v2/footer.vue b/components/v2/footer.vue
index 06d8eda..eb124a9 100644
--- a/components/v2/footer.vue
+++ b/components/v2/footer.vue
@@ -1,16 +1,6 @@
 <template>
   <footer
-    class="
-      sticky
-      pt-4
-      pb-2
-      mt-2
-      text-center text-gray-800
-      top-full
-      bg-inherit
-      dark:text-gray-50
-      min-h-max
-    "
+    class="sticky pt-4 pb-2 mt-2 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
   >
     Made with &hearts; using
     <a
diff --git a/components/v2/navbar.vue b/components/v2/navbar.vue
index 0c9ee22..1a372c1 100644
--- a/components/v2/navbar.vue
+++ b/components/v2/navbar.vue
@@ -1,17 +1,6 @@
 <template>
   <nav
-    class="
-      sticky
-      top-0
-      left-0
-      right-0
-      z-10
-      text-gray-800
-      shadow-lg
-      dark:shadow-dark
-      bg-gray-50
-      dark:bg-gray-900 dark:text-gray-50
-    "
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -46,20 +35,7 @@
           <slot name="right" />
           <button
             type="button"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              ml-4
-              bg-transparent
-              border-2 border-gray-700
-              rounded-full
-              shadow-lg
-              w-9
-              h-9
-              active:scale-y-75
-              hover:scale-105 hover:shadow-lg
-            "
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
             :aria-label="
               darkMode ? 'Switch to light theme' : 'Switch to dark theme'
             "
diff --git a/pages/index.vue b/pages/index.vue
index a959984..971423e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -30,14 +30,7 @@
               id="lhs"
               rows="28"
               name="lhs"
-              class="
-                flex-1
-                w-full
-                bg-transparent
-                rounded-md
-                resize-none
-                form-textarea
-              "
+              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
               v-html="lhs"
             ></textarea>
           </div>
@@ -57,14 +50,7 @@
               id="rhs"
               rows="28"
               name="rhs"
-              class="
-                flex-1
-                w-full
-                bg-transparent
-                rounded-md
-                resize-none
-                form-textarea
-              "
+              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
               v-html="rhs"
             >
             </textarea>
@@ -72,25 +58,9 @@
         </section>
         <div class="self-end flex-grow-0 w-full text-center">
           <button
-            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"
             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"
+            aria-label="Click here to compare the inputted text blocks"
           >
             Compare
           </button>
diff --git a/pages/v1/diff.vue b/pages/v1/diff.vue
index 1a4adc2..fc3b241 100644
--- a/pages/v1/diff.vue
+++ b/pages/v1/diff.vue
@@ -5,15 +5,7 @@
       <main class="outline-none" tabindex="0">
         <DiffActionBar />
         <section
-          class="
-            flex
-            items-stretch
-            w-full
-            gap-4
-            font-mono
-            text-gray-800
-            dark:text-gray-50
-          "
+          class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
         >
           <SingleDiff
             :id="'lhsDiff'"
diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index 77bf661..e9fd9e8 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -7,40 +7,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>
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 85441d5..6b70178 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')
               "
@@ -77,18 +66,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')
               "
@@ -100,24 +78,7 @@
         <div class="relative flex justify-center flex-grow-0 w-full gap-4 mt-4">
           <button
             id="submitButton"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              w-40
-              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
-            "
+            class="inline-flex items-center justify-center w-40 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
@@ -126,25 +87,7 @@
             </span>
           </button>
           <button
-            class="
-              absolute
-              right-0
-              inline-flex
-              items-center
-              justify-center
-              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
-            "
+            class="absolute right-0 inline-flex items-center justify-center 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"

From 52a0f397009607570c3f209b0f0ed82adceea56c Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 26 Sep 2024 15:09:43 +0530
Subject: [PATCH 4/5] fix(a11y): making theme hidden input sr invisible

---
 pages/v2/diff.vue  | 8 +++++++-
 pages/v2/index.vue | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index e9fd9e8..4f2ea06 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -2,7 +2,13 @@
   <div class="contents">
     <div class="page-contents">
       <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
-      <input type="hidden" inert :value="onThemeChange" />
+      <input
+        type="hidden"
+        class="invisible none"
+        aria-hidden="true"
+        inert
+        :value="onThemeChange"
+      />
       <Navbar :show-back-button="true" />
       <main class="outline-none" tabindex="0">
         <DiffActionBar :diff-navigator="diffNavigator" />
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 6b70178..4f0e6b9 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -2,7 +2,13 @@
   <div class="page-contents">
     <Navbar />
     <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
-    <input type="hidden" inert :value="onThemeChange" />
+    <input
+      type="hidden"
+      inert
+      :value="onThemeChange"
+      class="invisible none"
+      aria-hidden="true"
+    />
     <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>

From cc196e31f2948d197ae42673753a386266595e3a Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Thu, 26 Sep 2024 15:37:27 +0530
Subject: [PATCH 5/5] feat(diff fashion): added ability to see inline/side by
 side diff

---
 components/buttons/copyLink.vue  | 50 +++++++++++++++---------------
 components/buttons/diffStyle.vue | 53 ++++++++++++++++++++++++++++++++
 components/icons/diffStyle.vue   | 26 ++++++++++++++++
 components/v2/diffActionBar.vue  | 14 ++++++++-
 helpers/types.ts                 |  1 +
 pages/v2/diff.vue                | 19 ++++++++++--
 6 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 components/buttons/diffStyle.vue
 create mode 100644 components/icons/diffStyle.vue

diff --git a/components/buttons/copyLink.vue b/components/buttons/copyLink.vue
index b56008a..9fe85ea 100644
--- a/components/buttons/copyLink.vue
+++ b/components/buttons/copyLink.vue
@@ -1,32 +1,30 @@
 <template>
-  <div>
-    <button
-      id="copyLinkButton"
-      type="button"
-      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
-      aria-label="Click here to copy url to clipboard"
-      :class="{
-        'bg-blue-500 text-white': !copied,
-        'bg-green-500 text-gray-800': copied,
-      }"
-      @click="clickHandler"
+  <button
+    id="copyLinkButton"
+    type="button"
+    class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
+    aria-label="Click here to copy url to clipboard"
+    :class="{
+      'bg-blue-500 text-white': !copied,
+      'bg-green-500 text-gray-800': copied,
+    }"
+    @click="clickHandler"
+  >
+    <span
+      class="inline-flex items-center justify-center gap-1"
+      aria-live="assertive"
+      role="status"
     >
-      <span
-        class="inline-flex items-center justify-center gap-1"
-        aria-live="assertive"
-        role="status"
-      >
-        <span v-show="copied" class="inline" aria-hidden="true">
-          <Copied />
-        </span>
-        <span v-show="copied" class="hidden md:inline-block">Copied</span>
-        <span v-show="!copied" class="inline" aria-hidden="true">
-          <Link />
-        </span>
-        <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+      <span v-show="copied" class="inline" aria-hidden="true">
+        <Copied />
       </span>
-    </button>
-  </div>
+      <span v-show="copied" class="hidden md:inline-block">Copied</span>
+      <span v-show="!copied" class="inline" aria-hidden="true">
+        <Link />
+      </span>
+      <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+    </span>
+  </button>
 </template>
 <script lang="ts">
 import Vue from 'vue'
diff --git a/components/buttons/diffStyle.vue b/components/buttons/diffStyle.vue
new file mode 100644
index 0000000..5bc6271
--- /dev/null
+++ b/components/buttons/diffStyle.vue
@@ -0,0 +1,53 @@
+<template>
+  <button
+    class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75"
+    role="button"
+    :aria-label="label"
+    :title="label"
+    @click="handleClick"
+  >
+    <span
+      aria-live="assertive"
+      role="status"
+      :class="{
+        'inline-block transition-transform bg-gray-100': true,
+        'rotate-90': sideBySide,
+      }"
+    >
+      <DiffStyle class="w-6 h-6" />
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import DiffStyle from '~/components/icons/diffStyle.vue'
+export default Vue.extend({
+  components: { DiffStyle },
+  props: {
+    clickHandler: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sideBySide: true,
+    }
+  },
+  computed: {
+    label() {
+      if (this.sideBySide) {
+        return 'Switch unified diff layout'
+      }
+      return 'Switch to split diff layout'
+    },
+  },
+  methods: {
+    handleClick() {
+      this.sideBySide = !this.sideBySide
+      this.clickHandler(this.sideBySide === true)
+    },
+  },
+})
+</script>
diff --git a/components/icons/diffStyle.vue b/components/icons/diffStyle.vue
new file mode 100644
index 0000000..f5c9f7b
--- /dev/null
+++ b/components/icons/diffStyle.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    id="Layer_1"
+    viewBox="0 0 122.742 122.881"
+    enable-background="new 0 0 122.742 122.881"
+    stroke="currentColor"
+    :class="className"
+  >
+    <g>
+      <path
+        d="M5.709,23.974h47.709V5.691c0-1.581,0.643-3.015,1.679-4.05C56.108,0.629,57.492,0,59,0h58.163 c1.508,0,2.891,0.628,3.902,1.641c1.035,1.036,1.678,2.469,1.678,4.05v87.524c0,1.582-0.643,3.016-1.678,4.051 c-1.012,1.012-2.395,1.641-3.902,1.641H69.453v18.283c0,1.582-0.645,3.016-1.68,4.051c-1.012,1.012-2.395,1.641-3.902,1.641H5.709 c-1.509,0-2.891-0.629-3.903-1.641c-1.036-1.035-1.679-2.469-1.679-4.051V74.389C0.044,74.082,0,73.76,0,73.428 c0-0.334,0.044-0.656,0.127-0.963V29.666c0-1.582,0.643-3.016,1.679-4.051C2.818,24.603,4.2,23.974,5.709,23.974L5.709,23.974z M94.113,29.137c1.395-1.468,3.717-1.525,5.184-0.129c1.469,1.396,1.525,3.718,0.129,5.185L88.514,45.609h27.131V7.319H60.517 v16.655h3.354c1.508,0,2.891,0.628,3.902,1.641c1.035,1.035,1.68,2.469,1.68,4.051v61.922h46.191V52.963h-27.15l10.932,11.476 c1.396,1.469,1.34,3.789-0.129,5.186c-1.467,1.396-3.789,1.338-5.184-0.129L77.27,51.815c-1.34-1.407-1.354-3.634,0-5.057 L94.113,29.137L94.113,29.137z M22.943,58.333c-1.396-1.468-1.338-3.789,0.129-5.185c1.468-1.396,3.789-1.338,5.185,0.129 L45.1,70.898c1.354,1.424,1.34,3.65-0.001,5.057L28.257,93.637c-1.396,1.467-3.717,1.525-5.185,0.129 c-1.467-1.395-1.525-3.717-0.129-5.184l10.932-11.479H7.227v38.459h55.127v-84.27H7.227V69.75h26.628L22.943,58.333L22.943,58.333z"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    className: {
+      type: String,
+      required: false,
+    },
+  },
+})
+</script>
diff --git a/components/v2/diffActionBar.vue b/components/v2/diffActionBar.vue
index c9d0066..ea49b9f 100644
--- a/components/v2/diffActionBar.vue
+++ b/components/v2/diffActionBar.vue
@@ -20,7 +20,10 @@
       <NextDiff :click-handler="goToNextDiff" />
       <PrevDiff :click-handler="goToPreviousDiff" />
     </div>
-    <CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
+    <div class="flex items-center gap-4">
+      <DiffStyle :click-handler="toggleDiffFashion" />
+      <CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
+    </div>
   </section>
 </template>
 
@@ -29,6 +32,7 @@ import Vue from 'vue'
 import PrevDiff from '../buttons/prevDiff.vue'
 import NextDiff from '../buttons/nextDiff.vue'
 import CopyLink from '../buttons/copyLink.vue'
+import DiffStyle from '../buttons/diffStyle.vue'
 import { putToClipboard } from '~/helpers/utils'
 import { DiffActionBarData } from '~/helpers/types'
 export default Vue.extend({
@@ -36,12 +40,17 @@ export default Vue.extend({
     PrevDiff,
     NextDiff,
     CopyLink,
+    DiffStyle,
   },
   props: {
     diffNavigator: {
       type: Object,
       required: true,
     },
+    onDiffFashion: {
+      type: Function,
+      required: true,
+    },
   },
   data(): DiffActionBarData {
     return {
@@ -88,6 +97,9 @@ export default Vue.extend({
     goToPreviousDiff() {
       this.diffNavigator.previous()
     },
+    toggleDiffFashion(value: boolean) {
+      this.onDiffFashion(value)
+    },
   },
 })
 </script>
diff --git a/helpers/types.ts b/helpers/types.ts
index 343875b..ca42340 100644
--- a/helpers/types.ts
+++ b/helpers/types.ts
@@ -45,4 +45,5 @@ export interface v2DiffData {
   lhsLabel: string
   monacoDiffEditor: any
   diffNavigator: any
+  isSideBySideDiff: boolean
 }
diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index 4f2ea06..313e961 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -11,11 +11,19 @@
       />
       <Navbar :show-back-button="true" />
       <main class="outline-none" tabindex="0">
-        <DiffActionBar :diff-navigator="diffNavigator" />
+        <DiffActionBar
+          :diff-navigator="diffNavigator"
+          :on-diff-fashion="toggleDiffFashion"
+        />
         <section
           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">
+          <div
+            :class="{
+              'flex w-full gap-4 space-around transition-opacity': true,
+              'opacity-0': !isSideBySideDiff,
+            }"
+          >
             <p
               class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
             >
@@ -61,6 +69,7 @@ export default Vue.extend({
       lhsLabel: '',
       monacoDiffEditor: {},
       diffNavigator: {},
+      isSideBySideDiff: true,
     }
   },
   head() {
@@ -127,6 +136,12 @@ export default Vue.extend({
       }
     })
   },
+  methods: {
+    toggleDiffFashion(value: boolean) {
+      this.monacoDiffEditor?.updateOptions?.({ renderSideBySide: value })
+      this.isSideBySideDiff = value
+    },
+  },
 })
 </script>