Merge pull request #20 from technikhil314/develop

Develop

Author: technikhil314

pages/diff.vue

@@ -60,7 +60,7 @@
             v-for="(lineDiff, index) in lhsDiff"
             :key="index"
             :class="{
-              'bg-red-100 dark:bg-yellow-700': lineDiff.includes('isModified'),
+              'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
             }"
           >
             <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
@@ -74,7 +74,7 @@
             v-for="(lineDiff, index) in rhsDiff"
             :key="index"
             :class="{
-              'bg-green-100 dark:bg-green-700': lineDiff.includes('isModified'),
+              'bg-green-200 dark:bg-green-700': lineDiff.includes('isModified'),
             }"
           >
             <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
@@ -89,9 +89,9 @@
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
-import footer from '~/components/footer.vue'
+import Footer from '~/components/footer.vue'
 export default {
-  components: { footer },
+  components: { Footer },
   layout: 'main',
   data() {
     return {
@@ -100,9 +100,6 @@ export default {
       copied: false,
     }
   },
-  asyncData() {
-    return { name: 'World' }
-  },
   mounted() {
     const _diff = this.$route.hash
     const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
@@ -112,7 +109,7 @@ export default {
         const hunkState = item[0]
         if (hunkState === -1 || hunkState === 0) {
           const className =
-            hunkState === -1 ? 'isModified bg-red-300 dark:bg-yellow-900' : ''
+            hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
             item[1]
           )}</span>`
@@ -127,7 +124,7 @@ export default {
         const hunkState = item[0]
         if (hunkState === 1 || hunkState === 0) {
           const className =
-            hunkState === 1 ? 'isModified bg-green-300 dark:bg-green-900' : ''
+            hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
             item[1]
           )}</span>`
@@ -191,6 +188,9 @@ export default {
 </script>
 
 <style lang="scss">
+::selection {
+  @apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
+}
 .copy-uri-button:hover {
   @apply shadow-lg;
   svg {
@@ -206,31 +206,24 @@ export default {
   &::before {
     content: '';
     width: var(--line-number-gutter-width);
-    @apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
+    @apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
   }
   @apply relative;
   p {
     padding-left: calc(var(--line-number-gutter-width) - 10px);
     line-height: 1.65;
     @apply relative;
     &:hover {
-      @apply bg-gray-200 dark:bg-gray-700;
+      @apply bg-gray-200 dark:bg-gray-600;
+      span {
+        @apply dark:mix-blend-hard-light dark:bg-blend-multiply;
+      }
     }
     &::before {
       counter-increment: line-numbers;
       content: counter(line-numbers);
       width: var(--line-number-gutter-width);
-      @apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
-    }
-    &:first-of-type {
-      &::before {
-        @apply -mt-2 pt-2;
-      }
-    }
-    &:last-of-type {
-      &::before {
-        @apply -mb-2 pb-2;
-      }
+      @apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
     }
   }
 }

pages/index.vue

@@ -12,25 +12,47 @@
           </h2>
         </header>
       </section>
-      <form class="w-full" @submit="checkForm">
-        <div class="flex flex-wrap w-full gap-4">
-          <textarea
-            rows="28"
-            id="lhs"
-            class="flex-1 bg-transparent rounded-md resize-none form-textarea"
-          ></textarea>
-          <textarea
-            id="rhs"
-            rows="28"
-            class="flex-1 bg-transparent rounded-md resize-none form-textarea"
-          ></textarea>
-          <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"
-            >
-              Compare
-            </button>
+      <form class="flex flex-col w-full gap-4" @submit="checkForm">
+        <section class="flex w-full gap-4">
+          <div class="flex flex-col flex-wrap w-1/2 gap-4">
+            <label for="lhsLabel" class="relative">
+              <input
+                id="lhsLabel"
+                name="lhsLabel"
+                type="text"
+                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md  material-input"
+                placeholder="Add label to this text block"
+              />
+            </label>
+            <textarea
+              id="lhs"
+              rows="28"
+              name="lhs"
+              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
+            ></textarea>
+          </div>
+          <div class="flex flex-col flex-wrap w-1/2 gap-4">
+            <input
+              id="rhsLabel"
+              name="rhsLabel"
+              type="text"
+              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md  material-input"
+              placeholder="Add label to this text block"
+            />
+            <textarea
+              id="rhs"
+              rows="28"
+              name="rhs"
+              class="flex-1 w-full bg-transparent rounded-md resize-none  form-textarea"
+            ></textarea>
           </div>
+        </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"
+          >
+            Compare
+          </button>
         </div>
       </form>
     </main>
@@ -49,14 +71,12 @@ export default Vue.extend({
   methods: {
     checkForm(e: Event) {
       e.preventDefault()
-      const lhsTextArea: HTMLTextAreaElement = document.getElementById(
-        'lhs'
-      ) as HTMLTextAreaElement
-      const lhs: string = lhsTextArea?.value || ''
-      const rhsTextArea: HTMLTextAreaElement = document.getElementById(
-        'rhs'
-      ) as HTMLTextAreaElement
-      const rhs: string = rhsTextArea?.value || ''
+      const formData = new FormData(e.currentTarget as HTMLFormElement)
+      // const formDataJson = Object.fromEntries(formData.entries())
+      const lhs = formData.get('lhs')
+      const rhs = formData.get('rhs')
+      const lhsLabel = formData.get('lhsLabel')
+      const rhsLabel = formData.get('rhsLabel')
       if (!lhs || !rhs) {
         this.$store.commit('toast/show', {
           show: true,
@@ -84,11 +104,17 @@ export default Vue.extend({
       const originalLhs = lhs
       const originalRhs = rhs
       const diff = dmp.diff_main(originalLhs, originalRhs)
-      const gzip = Buffer.from(pako.gzip(JSON.stringify(diff))).toString(
-        'base64'
-      )
+      const gzip = Buffer.from(
+        pako.gzip(
+          JSON.stringify({
+            diff,
+            lhsLabel,
+            rhsLabel,
+          })
+        )
+      ).toString('base64')
       this.$router.push({
-        path: '/diff',
+        path: '/v1/diff',
         hash: `#${doUrlSafeBase64(gzip)}`,
       })
     },