Merge pull request #22 from technikhil314/develop

Develop

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

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) {

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

layouts/main.vue

@@ -2,5 +2,6 @@
   <div class="page-root">
     <Toast />
     <Nuxt />
+    <Footer />
   </div>
 </template>

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

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"

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 {

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>
 
@@ -68,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')

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 {

plugins/fart-remover.client.ts → plugins/cookie-injector.client.ts

@@ -1,32 +1,38 @@
 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
   }
 }
 
 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
   }
 }
 
 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

styles/global.scss

@@ -1,3 +1,5 @@
+@import 'driver.js/dist/driver.min.css';
+
 /* Basic layout */
 :root {
   color-scheme: dark light;
@@ -26,11 +28,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 {