fix: pasing diff in json format to route

Author: technikhil314

diff-match-patch.d.ts

@@ -0,0 +1 @@
+declare module 'diff-match-patch'

pages/diff/_lhs/_rhs.vue renamed to pages/diff/_diff.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <main class="container h-full mx-auto mt-24">
+    <main class="h-full mt-24 xl:container">
       <div class="flex gap-4 mt-5">
         <div
           class="flex-1 p-4 overflow-y-auto border-2 rounded-sm  max-h-screen--nav"
@@ -22,24 +22,12 @@
 </template>
 
 <script>
-import DiffMatchPatch from 'diff-match-patch'
-import { urlDecode } from '../../../helpers/utils'
-const dmp = new DiffMatchPatch()
+import { urlDecode } from '../../helpers/utils'
 export default {
   layout: 'main',
-  lhs: '',
-  rhs: '',
-  diff: [],
   mounted() {
-    const { lhs, rhs } = this.$route.params
-    this.originalLhs = urlDecode(lhs).split('\n')
-    this.originalRhs = urlDecode(rhs).split('\n')
-    const diff = this.originalLhs.map((x, i) => {
-      if (!this.originalRhs[i]) {
-        this.originalRhs[i] = ''
-      }
-      return dmp.diff_main(x, this.originalRhs[i])
-    })
+    const { diff: _diff } = this.$route.params
+    const diff = JSON.parse(urlDecode(_diff))
     this.lhsDiff = diff
       .map((lineDiff) => {
         return lineDiff
@@ -71,9 +59,6 @@ export default {
   },
   data() {
     return {
-      diff: this.diff,
-      originalRhs: this.originalRhs,
-      originalLhs: this.originalLhs,
       lhsDiff: this.lhsDiff,
       rhsDiff: this.rhsDiff,
     }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <main class="container h-full mx-auto mt-24">
+    <main class="h-full mt-24 xl:container">
       <form @submit="checkForm" class="w-full h-full">
         <div class="flex flex-wrap w-full h-full gap-4">
           <textarea
@@ -25,8 +25,10 @@
 </template>
 
 <script lang="ts">
+import DiffMatchPatch from 'diff-match-patch'
 import Vue from 'vue'
 import { urlEncode } from '../helpers/utils'
+const dmp = new DiffMatchPatch()
 export default Vue.extend({
   layout: 'main',
   methods: {
@@ -40,8 +42,17 @@ export default Vue.extend({
         'rhs'
       ) as HTMLTextAreaElement
       const rhs: string = rhsTextArea?.value || ''
+
+      const originalLhs = lhs.split('\n')
+      const originalRhs = rhs.split('\n')
+      const diff = originalLhs.map((x, i) => {
+        if (!originalRhs[i]) {
+          originalRhs[i] = ''
+        }
+        return dmp.diff_main(x, originalRhs[i])
+      })
       this.$router.push({
-        path: `/diff/${urlEncode(lhs)}/${urlEncode(rhs)}`,
+        path: `/diff/${urlEncode(JSON.stringify(diff))}`,
       })
     },
   },

tailwind.config.js

@@ -3,7 +3,10 @@ module.exports = {
   theme: {
     maxHeight: {
       'screen--nav': 'calc(100vh - 7rem)',
-    }
+    },
+    container: {
+      center: true,
+    },
   },
   plugins: [
     require('@tailwindcss/forms'),