From 4524a3c30c44b654ded6386573ff45ea84061d6e Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Tue, 31 May 2022 10:34:53 +0530
Subject: [PATCH 1/2] fix(footer,layout): moved footer to layout, and using
 sticky position for footer

---
 components/footer.vue | 2 +-
 layouts/main.vue      | 1 +
 pages/diff.vue        | 3 ---
 pages/index.vue       | 9 ++++-----
 pages/v1/diff.vue     | 3 ---
 styles/global.scss    | 3 ++-
 6 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/footer.vue b/components/footer.vue
index cdfcc25..4f03efe 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="py-4 mt-4 text-center text-gray-800  bg-inherit dark:text-gray-50 min-h-max"
+    class="sticky py-4 mt-4 text-center text-gray-800  top-full bg-inherit dark:text-gray-50 min-h-max"
   >
     Made with &hearts; using
     <a
diff --git a/layouts/main.vue b/layouts/main.vue
index faa80e4..2f1bcb8 100644
--- a/layouts/main.vue
+++ b/layouts/main.vue
@@ -2,5 +2,6 @@
   <div class="page-root">
     <Toast />
     <Nuxt />
+    <Footer />
   </div>
 </template>
diff --git a/pages/diff.vue b/pages/diff.vue
index c3d9795..2a899fc 100644
--- a/pages/diff.vue
+++ b/pages/diff.vue
@@ -82,16 +82,13 @@
         </div>
       </div>
     </main>
-    <Footer />
   </div>
 </template>
 
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
-import Footer from '~/components/footer.vue'
 export default {
-  components: { Footer },
   layout: 'main',
   data() {
     return {
diff --git a/pages/index.vue b/pages/index.vue
index 445429d..0599540 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,13 +14,13 @@
       </section>
       <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">
+          <div class="flex flex-col 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"
+                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
                 placeholder="Add label to this text block"
               />
             </label>
@@ -31,12 +31,12 @@
               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">
+          <div class="flex flex-col 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"
+              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
               placeholder="Add label to this text block"
             />
             <textarea
@@ -56,7 +56,6 @@
         </div>
       </form>
     </main>
-    <Footer />
   </div>
 </template>
 
diff --git a/pages/v1/diff.vue b/pages/v1/diff.vue
index dd8e327..d6d1de7 100644
--- a/pages/v1/diff.vue
+++ b/pages/v1/diff.vue
@@ -94,16 +94,13 @@
         </div>
       </section>
     </main>
-    <Footer />
   </div>
 </template>
 
 <script>
 import pako from 'pako'
 import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
-import Footer from '~/components/footer.vue'
 export default {
-  components: { Footer },
   layout: 'main',
   data() {
     return {
diff --git a/styles/global.scss b/styles/global.scss
index 605722c..76cc30a 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -26,11 +26,12 @@ body {
 
 .page-root {
   @apply flow-root w-full;
+  min-height: 100vh;
 }
 
 .page-contents {
   @apply grid;
-  grid-template-rows: 70px 1fr 70px;
+  grid-template-rows: 70px 1fr;
 }
 
 main {

From 0bd34f502aad6b990029387739f4fac3e0e13576 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Tue, 31 May 2022 12:06:19 +0530
Subject: [PATCH 2/2] feat(tutorial): added tutorials for users

---
 helpers/isDarkModeCookie.ts                   |  5 +--
 helpers/isSkipTutorialCookie.ts               | 16 +++++++++
 nuxt.config.js                                |  2 +-
 package-lock.json                             | 10 ++++--
 package.json                                  |  1 +
 pages/index.vue                               | 35 ++++++++++++++++++-
 ...er.client.ts => cookie-injector.client.ts} | 10 ++++--
 styles/global.scss                            |  2 ++
 8 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 helpers/isSkipTutorialCookie.ts
 rename plugins/{fart-remover.client.ts => cookie-injector.client.ts} (66%)

diff --git a/helpers/isDarkModeCookie.ts b/helpers/isDarkModeCookie.ts
index a1b4093..09da92c 100644
--- a/helpers/isDarkModeCookie.ts
+++ b/helpers/isDarkModeCookie.ts
@@ -5,8 +5,9 @@ export default function () {
   } = {}
   cookies.forEach((element) => {
     const [name, val] = element.split('=')
-    if (name === 'darkMode') {
-      cookieMap[name] = val
+    const trimmedName = name.trim()
+    if (trimmedName === 'darkMode') {
+      cookieMap[trimmedName] = val
     }
   })
   if (cookieMap.darkMode) {
diff --git a/helpers/isSkipTutorialCookie.ts b/helpers/isSkipTutorialCookie.ts
new file mode 100644
index 0000000..6780c11
--- /dev/null
+++ b/helpers/isSkipTutorialCookie.ts
@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipTutorial?: string
+  } = {
+    isSkipTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipTutorial === 'true'
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 560d18c..e521600 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -76,7 +76,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    '~/plugins/fart-remover.client.ts'
+    '~/plugins/cookie-injector.client.ts'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
diff --git a/package-lock.json b/package-lock.json
index 9cdac24..2058c4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "offline-diff-viewer",
-  "version": "1.0.1",
+  "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7851,6 +7851,11 @@
       "resolved": "https://artifactory.g.devqa.gcp.dev.paypalinc.com/artifactory/api/npm/npm-all/dotenv/-/dotenv-9.0.2.tgz",
       "integrity": "sha1-2swgFgk1o33qY2SqG++Bn7m2qwU="
     },
+    "driver.js": {
+      "version": "0.9.8",
+      "resolved": "https://artifactory.g.devqa.gcp.dev.paypalinc.com/artifactory/api/npm/npm-all/driver.js/-/driver.js-0.9.8.tgz",
+      "integrity": "sha1-SzJ/RTexybn7GUGd6GF0voIa4yo="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://artifactory.g.devqa.gcp.dev.paypalinc.com/artifactory/api/npm/npm-all/duplexer/-/duplexer-0.1.2.tgz",
@@ -17202,7 +17207,8 @@
     "prettier": {
       "version": "2.4.1",
       "resolved": "https://artifactory.g.devqa.gcp.dev.paypalinc.com/artifactory/api/npm/npm-all/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha1-Zx4RyJwUpM/Ids5WQQbEpnJsn1w="
+      "integrity": "sha1-Zx4RyJwUpM/Ids5WQQbEpnJsn1w=",
+      "optional": true
     },
     "pretty": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index fdf73a4..d5880a7 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "core-js": "^3.15.1",
     "diff": "^5.0.0",
     "diff-match-patch": "^1.0.5",
+    "driver.js": "^0.9.8",
     "nuxt": "^2.15.7",
     "pako": "^2.0.4",
     "sass": "^1.43.4"
diff --git a/pages/index.vue b/pages/index.vue
index 0599540..902e78b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -67,11 +67,44 @@ import { doUrlSafeBase64 } from '../helpers/utils'
 const dmp = new DiffMatchPatch()
 export default Vue.extend({
   layout: 'main',
+  data() {
+    return {
+      isSkipTutorial: this.$isSkipTutorial,
+    }
+  },
+  async mounted() {
+    const { default: Driver } = await import('driver.js')
+    const driver = new Driver({
+      closeBtnText: 'Skip',
+      onReset: () => {
+        document.cookie = 'isSkipTutorial=true; max-age=31536000; path=/;'
+      },
+    })
+    // Define the steps for introduction
+    if (!this.isSkipTutorial) {
+      driver.defineSteps([
+        {
+          element: '#lhsLabel',
+          popover: {
+            title: 'Labels',
+            description: 'Now you can add labels to text blocks',
+          },
+        },
+        {
+          element: '#rhsLabel',
+          popover: {
+            title: 'Labels',
+            description: 'Now you can add labels to text blocks',
+          },
+        },
+      ])
+      driver.start()
+    }
+  },
   methods: {
     checkForm(e: Event) {
       e.preventDefault()
       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')
diff --git a/plugins/fart-remover.client.ts b/plugins/cookie-injector.client.ts
similarity index 66%
rename from plugins/fart-remover.client.ts
rename to plugins/cookie-injector.client.ts
index fbf80cf..d3ea209 100644
--- a/plugins/fart-remover.client.ts
+++ b/plugins/cookie-injector.client.ts
@@ -1,9 +1,11 @@
 import { Plugin } from '@nuxt/types'
 import isDarkModeCookie from '~/helpers/isDarkModeCookie'
+import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
 declare module 'vue/types/vue' {
   // this.$isDarkModeinside Vue components
   interface Vue {
     $isDarkMode: boolean
+    $isSkipTutorial: boolean
   }
 }
 
@@ -11,10 +13,12 @@ declare module '@nuxt/types' {
   // nuxtContext.app.$isDarkModeinside asyncData, fetch, plugins, middleware, nuxtServerInit
   interface NuxtAppOptions {
     $isDarkMode: boolean
+    $isSkipTutorial: boolean
   }
   // nuxtContext.isDarkMode$
   interface Context {
     $isDarkMode: boolean
+    $isSkipTutorial: boolean
   }
 }
 
@@ -22,11 +26,13 @@ declare module 'vuex/types/index' {
   // this.$isDarkModeinside Vuex stores
   interface Store<S> {
     $isDarkMode: boolean | S
+    $isSkipTutorial: boolean | S
   }
 }
 
-const myPlugin: Plugin = (_context, inject) => {
+const cookieInjectorPlugin: Plugin = (_context, inject) => {
   inject('isDarkMode', isDarkModeCookie())
+  inject('isSkipTutorial', isSkipTutorialCookie())
 }
 
-export default myPlugin
+export default cookieInjectorPlugin
diff --git a/styles/global.scss b/styles/global.scss
index 76cc30a..57d1a44 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,3 +1,5 @@
+@import 'driver.js/dist/driver.min.css';
+
 /* Basic layout */
 :root {
   color-scheme: dark light;