From 1fc545066241d367e5126de7a2b3544b4606e622 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <6815560+technikhil314@users.noreply.github.com>
Date: Thu, 26 Sep 2024 20:47:28 +0530
Subject: [PATCH 1/4] fix(a11y): fixed typo in diff style button

---
 components/buttons/diffStyle.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/buttons/diffStyle.vue b/components/buttons/diffStyle.vue
index 5bc6271..d51a88a 100644
--- a/components/buttons/diffStyle.vue
+++ b/components/buttons/diffStyle.vue
@@ -1,6 +1,6 @@
 <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"
+    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"
@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import DiffStyle from '~/components/icons/diffStyle.vue'
+import Vue from "vue";
+import DiffStyle from "~/components/icons/diffStyle.vue";
 export default Vue.extend({
   components: { DiffStyle },
   props: {
@@ -33,21 +33,21 @@ export default Vue.extend({
   data() {
     return {
       sideBySide: true,
-    }
+    };
   },
   computed: {
     label() {
       if (this.sideBySide) {
-        return 'Switch unified diff layout'
+        return "Switch to unified diff layout";
       }
-      return 'Switch to split diff layout'
+      return "Switch to split diff layout";
     },
   },
   methods: {
     handleClick() {
-      this.sideBySide = !this.sideBySide
-      this.clickHandler(this.sideBySide === true)
+      this.sideBySide = !this.sideBySide;
+      this.clickHandler(this.sideBySide === true);
     },
   },
-})
+});
 </script>

From 9ce31b90bd4718c7fd79953a0735b04ad01e8e60 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Mon, 30 Sep 2024 18:59:41 +0530
Subject: [PATCH 2/4] chore: moving to BSD license

---
 LICENSE | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/LICENSE b/LICENSE
index 4ecf451..bc2ee33 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,14 @@
-MIT License
+Copyright (c) 2022 Nikhil Mehta. All rights reserved.
 
-Copyright (c) 2023 Nikhil Mehta
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+3. All advertising materials mentioning features or use of this software must display the following acknowledgement:
+   This product includes software developed by Nikhil Mehta.
+
+4. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY COPYRIGHT HOLDER "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

From 5bbc1c04f5a25670ddfa5124807e4cfd42afa294 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Tue, 1 Oct 2024 21:05:07 +0530
Subject: [PATCH 3/4] chore: added micro animation to compare and clear buttons

---
 components/icons/prettyCode.vue | 12 ++++--
 pages/v2/index.vue              | 75 +++++++++++++++++++++++++++++----
 tailwind.config.js              | 41 +++++++++++++-----
 3 files changed, 107 insertions(+), 21 deletions(-)

diff --git a/components/icons/prettyCode.vue b/components/icons/prettyCode.vue
index 8ec1ff5..426da09 100644
--- a/components/icons/prettyCode.vue
+++ b/components/icons/prettyCode.vue
@@ -3,8 +3,7 @@
     viewBox="0 0 15 15"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    width="15"
-    height="15"
+    :class="className"
   >
     <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"
@@ -14,5 +13,12 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  props: {
+    className: {
+      type: String,
+      required: false,
+    },
+  },
+})
 </script>
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 4f0e6b9..99f70f4 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -43,12 +43,23 @@
               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')
               "
             >
-              <PrettyCode />
+              <PrettyCode class="w-4 h-4" />
             </button>
           </div>
           <div class="relative flex flex-col w-1/2 gap-4">
@@ -72,33 +83,81 @@
               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')
               "
             >
-              <PrettyCode />
+              <PrettyCode class="w-4 h-4" />
             </button>
           </div>
         </section>
         <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
+              group
+            "
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
-            <span class="w-4 aspect-square">
+            <span class="w-4 aspect-square group-hover:animate-linear-bounce">
               <Forward />
             </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
+              group
+            "
             aria-label="Click here to clear all the inputs"
             type="button"
             @click="clear"
           >
-            <span class="w-4 aspect-square">
+            <span class="w-4 aspect-square group-hover:animate-wiggle">
               <Bin />
             </span>
             Clear
diff --git a/tailwind.config.js b/tailwind.config.js
index 2b60f23..d292984 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,30 +3,53 @@ module.exports = {
   darkMode: 'class',
   variants: {
     extend: {
-      boxShadow: ['dark']
+      boxShadow: ['dark'],
     },
   },
   theme: {
+    extend: {
+      keyframes: {
+        'linear-bounce': {
+          '0%, 100%': {
+            transform: 'translateX(25%)',
+            'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateX(0)',
+            'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+          },
+        },
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-10deg)' },
+          '50%': { transform: 'rotate(10deg)' },
+        },
+      },
+    },
     maxHeight: {
       'screen--nav': 'calc(100vh - 7rem)',
     },
     container: {
       center: true,
     },
+    animation: {
+      'linear-bounce': 'linear-bounce 1s linear infinite',
+      wiggle: 'wiggle 1s linear infinite',
+    },
     zIndex: {
-      '1': 1,
-      '2': 2,
-      '10': 10,
-      '11': 11
+      1: 1,
+      2: 2,
+      10: 10,
+      11: 11,
     },
     minHeight: {
-      '80': '20rem'
+      80: '20rem',
     },
     translate: {
       '-screen': '-100vh',
     },
     boxShadow: {
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      DEFAULT:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
@@ -37,7 +60,5 @@ module.exports = {
       none: 'none',
     },
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-  ]
+  plugins: [require('@tailwindcss/forms')],
 }

From 03f176b2456a2cc50335a88b76c254e154d84d77 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Tue, 1 Oct 2024 21:21:15 +0530
Subject: [PATCH 4/4] chore: added google ad sense

---
 nuxt.config.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 8fa127b..a5bbaaa 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -76,6 +76,10 @@ export default {
         property: 'og:url',
         content: `${BASE_URL}/128x128.png`,
       },
+      {
+        name: 'google-adsense-account',
+        content: 'ca-pub-4467877923505914',
+      },
     ],
     link: [
       { rel: 'manifest', href: '/manifest.json' },
@@ -284,5 +288,5 @@ export default {
         config.devtool = 'source-map'
       }
     },
-  }
+  },
 }