Merge pull request #183 from technikhil314/develop

Adsense, microanimations, license change

Author: technikhil314

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.

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>

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>

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'
       }
     },
-  }
+  },
 }

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

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')],
 }