feat(tutorial): added tutorials for users

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

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/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')

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;