fix: added GTM and css for diff page

technikhil314 · technikhil314 · commit f140e1519d84 · 2021-11-21T20:36:31.000+05:30
diff --git a/app.html b/app.html
@@ -3,10 +3,20 @@
 
 <head {{ HEAD_ATTRS }}>
   <title>Diff viewer</title>
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-K3KPK8G');</script>
   {{ HEAD }}
 </head>
 
 <body {{ BODY_ATTRS }}>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3KPK8G" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
   {{ APP }}
 </body>
 
diff --git a/components/navbar.vue b/components/navbar.vue
@@ -2,11 +2,13 @@
   <header class="fixed top-0 left-0 right-0 bg-white shadow-lg">
     <div class="container flex items-center h-full p-4 mx-auto">
       <div class="flex-shrink-0 mr-auto md:w-48">
-        <img
-          class="h-8 md:h-10"
-          src="https://i.ibb.co/98pHdFq/2021-10-27-15h51-15.png"
-          alt=""
-        />
+        <NuxtLink to="/">
+          <img
+            class="h-8 md:h-10"
+            src="https://i.ibb.co/98pHdFq/2021-10-27-15h51-15.png"
+            alt=""
+          />
+        </NuxtLink>
       </div>
 
       <!-- buttons -->
diff --git a/pages/diff/_lhs/_rhs.vue b/pages/diff/_lhs/_rhs.vue
@@ -1,12 +1,18 @@
 <template>
   <div class="h-full">
     <main class="container h-full mx-auto mt-24">
-      <p v-for="(lineDiff, index) in lhsDiff" :key="index">
-        <span v-html="lineDiff"></span>
-      </p>
-      <p v-for="(lineDiff, index) in rhsDiff" :key="index">
-        <span v-html="lineDiff"></span>
-      </p>
+      <div class="flex gap-4 mt-5">
+        <div class="flex-1 max-h-full p-4 border-2 rounded-sm">
+          <p v-for="(lineDiff, index) in lhsDiff" :key="index">
+            <span v-html="lineDiff"></span>
+          </p>
+        </div>
+        <div class="flex-1 max-h-full p-4 border-2 rounded-sm">
+          <p v-for="(lineDiff, index) in rhsDiff" :key="index">
+            <span v-html="lineDiff"></span>
+          </p>
+        </div>
+      </div>
     </main>
   </div>
 </template>
@@ -30,31 +36,34 @@ export default {
       }
       return dmp.diff_main(x, this.originalRhs[i])
     })
-    this.lhsDiff = diff.map((lineDiff) => {
-      return lineDiff
-        .map((item) => {
-          if (item[0] === -1 || item[0] === 0) {
-            const className = item[0] === -1 ? 'bg-red-300' : ''
-            return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
-          }
-          return ''
-        })
-        .filter(Boolean)
-        .join('\n')
-    })
-    this.rhsDiff = diff.map((lineDiff) => {
-      return lineDiff
-        .map((item) => {
-          if (item[0] === 1 || item[0] === 0) {
-            const className = item[0] === 1 ? 'bg-green-300' : ''
-            return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
-          }
-          return ''
-        })
-        .filter(Boolean)
-        .join('\n')
-    })
-    console.log(this.originalLhs, this.originalRhs, diff)
+    this.lhsDiff = diff
+      .map((lineDiff) => {
+        return lineDiff
+          .map((item) => {
+            if (item[0] === -1 || item[0] === 0) {
+              const className = item[0] === -1 ? 'bg-red-300' : ''
+              return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+            }
+            return ''
+          })
+          .filter(Boolean)
+          .join('\n')
+      })
+      .filter(Boolean)
+    this.rhsDiff = diff
+      .map((lineDiff) => {
+        return lineDiff
+          .map((item) => {
+            if (item[0] === 1 || item[0] === 0) {
+              const className = item[0] === 1 ? 'bg-green-300' : ''
+              return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+            }
+            return ''
+          })
+          .filter(Boolean)
+          .join('\n')
+      })
+      .filter(Boolean)
   },
   data() {
     return {
diff --git a/pages/index.vue b/pages/index.vue
@@ -31,7 +31,6 @@ export default Vue.extend({
   layout: 'main',
   methods: {
     checkForm(e: any) {
-      console.log('demo')
       e.preventDefault()
       const lhsTextArea: HTMLTextAreaElement = document.getElementById(
         'lhs'
