Updated tour functionality.

Set main functionality inside app.vue with nuxt hooks to be able to call it from any point in the app.

app/app.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+const nuxtApp = useNuxtApp();
+const { $i18n } = useNuxtApp();
+const t = $i18n.t;
+
+const title = t('seo.title')
+const description = t('seo.description')
+
 useHead({
   meta: [
     { charset: 'utf-8' },
@@ -8,19 +15,133 @@ useHead({
     { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
-    lang: 'es'
+    lang: $i18n.locale
   }
 })
 
-const title = 'La Gran Carpa Catedral - Buscador'
-const description = 'Buscador de actividades y conferencias.'
-
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description
 })
+
+const steps = [
+  {
+    element: "#bible-studies",
+    popover: {
+      title: t('nav.bible_studies'),
+      description: t('tour.bible_studies_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#conferences",
+    popover: {
+      title: t('nav.conferences'),
+      description: t('tour.conferences_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#betweenthelines",
+    popover: {
+      title: t('nav.between_the_lines'),
+      description: t('tour.betweenthelines_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#favorites",
+    popover: {
+      title: t('nav.my_list'),
+      description: t('tour.favorites_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#history",
+    popover: {
+      title: t('nav.history'),
+      description: t('tour.history_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#changelog",
+    popover: {
+      title: t('nav.changelog'),
+      description: t('tour.changelog_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#settings",
+    popover: {
+      title: t('nav.settings'),
+      description: t('tour.settings_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#feedback",
+    popover: {
+      title: t('feedback.title'),
+      description: t('tour.feedback_description'),
+      side: "right",
+    },
+  },
+  {
+    element: "#localeSelector",
+    popover: {
+      title: t('nav.localeselector'),
+      description: t('tour.localeselector_description'),
+      side: "right",
+    },
+  },
+  {
+    element: ".collapse-sidebar-icon",
+    popover: {
+      title: t('search.collapse'),
+      description: t('tour.collapse_sidebar_description'),
+      side: "bottom"
+    }
+  },
+  {
+    element: ".total-results",
+    popover: {
+      title: t('search.total_results'),
+      description: t('tour.total_results_description'),
+      side: "bottom"
+    }
+  },
+  {
+    element: "#index_changelog",
+    popover: {
+      title: t('nav.changelog'),
+      description: t('tour.changelog_description'),
+      side: "right",
+    },
+  },
+]
+
+const tourConfig = {
+  nextBtnText: t('tour.next'),
+  prevBtnText: t('tour.prev'),
+  doneBtnText: t('tour.done'),
+  progressText: t('tour.progress', { current: '{{current}}', total: '{{total}}' }),
+  showProgress: true,
+  animate: true,
+  smoothScroll: true,
+  steps: steps,
+}
+
+nuxtApp.hook('tour', (startIndex=0)=>{
+  const { driver } = useDriver("onboarding");
+  const instance = driver( tourConfig )
+  instance.drive(startIndex)
+  
+})
 </script>
 
 <template>

app/layouts/default.vue

@@ -10,6 +10,7 @@ const unlocked = ref(useDevMode())
 
 const { locale, locales, setLocale } = useI18n()
 
+const nuxtApp = useNuxtApp()
 const { $i18n } = useNuxtApp();
 const t = $i18n.t;
 
@@ -87,140 +88,33 @@ const links = computed(() => {
       class: 'mt-4 border-t-2 border-gray-300 pt-4',
       label: t('nav.tour'),
       icon: 'ph-student',
-      onSelect: () => start( tourConfig ),
+      onSelect: () => { doTour() },
-       chip: {
+      chip: {
         color: 'error'
       }
     }
 
   ] satisfies NavigationMenuItem[]
-  
-  const homeLink = {
-      id: 'home',
-      label: t('nav.tour'),
-      icon: 'ph-house',
-      to: '/'
-    }
-    
-  return [ homeLink,...links]
-})
 
-const { start } = useDriver("onboarding");
+  function doTour(){
-
+    nuxtApp.callHook('tour',0)
-const steps = [
-    {
-      element: "#bible-studies",
-      popover: {
-        title: t('nav.bible_studies'),
-        description: t('nav.bible_studies_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#conferences",
-      popover: {
-        title: t('nav.conferences'),
-        description: t('nav.conferences_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#betweenthelines",
-      popover: {
-        title: t('nav.between_the_lines'),
-        description: t('nav.betweenthelines_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#favorites",
-      popover: {
-        title: t('nav.my_list'),
-        description: t('nav.favorites_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#history",
-      popover: {
-        title: t('nav.history'),
-        description: t('nav.history_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#changelog",
-      popover: {
-        title: t('nav.changelog'),
-        description: t('nav.changelog_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#settings",
-      popover: {
-        title: t('nav.settings'),
-        description: t('nav.settings_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#feedback",
-      popover: {
-        title: t('feedback.title'),
-        description: t('nav.feedback_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: "#localeSelector",
-      popover: {
-        title: t('nav.localeselector'),
-        description: t('nav.localeselector_tour_description'),
-        side: "right",
-      },
-    },
-    {
-      element: ".collapse-sidebar-icon",
-      popover: {
-        title: t('search.collapse'),
-        description: t('search.collapse_sidebar_tour_description'),
-        side: "bottom"
-      }
-    },
-    {
-      element: ".total-results",
-      popover: {
-        title: t('search.total_results'),
-        description: t('search.total_results_tour_description'),
-        side: "bottom"
-      }
-    }
-  ]
-
-  const tourConfig = {
-    nextBtnText: t('tour.next'),
-    prevBtnText: t('tour.prev'),
-    doneBtnText: t('tour.done'),
-    progressText: t('tour.progress'),
-    showProgress: true,
-    animate: true,
-    smoothScroll: true,
-    steps: steps,
   }
 
+  const homeLink = {
+    id: 'home',
+    label: t('nav.home'),
+    icon: 'ph-house',
+    to: '/'
+  }
+
+  return [homeLink, ...links]
+})
 </script>
 
 <template>
   <UDashboardGroup unit="rem">
-    <UDashboardSidebar
+    <UDashboardSidebar id="default" v-model:open="open" collapsible resizable
-      id="default"
+      class="bg-elevated/25 bg-gradient-to-tr from-blue-100 to-white" :ui="{ footer: 'lg:border-t lg:border-default' }">
-      v-model:open="open"
-      collapsible
-      resizable
-      class="bg-elevated/25 bg-gradient-to-tr from-blue-100 to-white"
-      :ui="{ footer: 'lg:border-t lg:border-default' }"
-    >
       <template #header="{ collapsed }">
         <div v-if="!collapsed" class="mt-2 flex justify-center">
           <img src="/logo.svg" class="w-full" alt="Buscador - La Gran Carpa Catedral" />
@@ -229,22 +123,16 @@ const steps = [
       </template>
 
       <template #default="{ collapsed }">
-        <UNavigationMenu
+        <UNavigationMenu :collapsed="collapsed" :items="links" orientation="vertical" tooltip popover color="neutral"
-          :collapsed="collapsed"
+          variant="link">
-          :items="links"
-          orientation="vertical"
-          tooltip
-          popover
-          color="neutral"
-          variant="link"
-        >
 
-          <template #item="{item}">
+          <template #item="{ item }">
-            <div :id="item.id" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted flex-row">
+            <div :id="item.id"
+              class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-inverted flex-row">
               <UChip :color="item.chip?.color" :show="item.chip?.color ? true : false" inset>
                 <UIcon :name="item.icon" class="text-2xl" />
               </UChip>
-              <div :class="!collapsed ? 'flex justify-between w-full' : 'hidden'" >{{ item.label }}
+              <div :class="!collapsed ? 'flex justify-between w-full' : 'hidden'">{{ item.label }}
                 <UBadge v-if="item.badge" variant="outline" color="neutral" size="sm" :label="item.badge" />
               </div>
             </div>
@@ -254,11 +142,8 @@ const steps = [
 
       <template #footer="{ collapsed }">
         <div id="localeSelector">
-          <ULocaleSelect
+          <ULocaleSelect :model-value="$i18n.locale.value" :locales="Object.values(locales)"
-            :model-value="$i18n.locale.value"
+            @update:model-value="setLocale($event)" />
-            :locales="Object.values(locales)"
-            @update:model-value="setLocale($event)"
-          />
         </div>
       </template>
     </UDashboardSidebar>

app/pages/index.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
 // Home redirects straight to the search experience.
 import type { ButtonProps } from '@nuxt/ui'
-import { useSettingsStore } from '~/stores/settings'
-
-// const { unlocked } = useDevMode()
-
-// if( !unlocked ){
-//   definePageMeta({
-//     middleware: () => navigateTo('/estudios-biblicos', { redirectCode: 302 })
-//   })
-// }
-
-const { start } = useDriver("onboarding")
 
+const nuxtApp = useNuxtApp()
 const { $i18n } = useNuxtApp()
 const t = $i18n.t
 
@@ -24,17 +14,17 @@ const links = ref<ButtonProps[]>([
     icon: 'ph-student',
     color: 'error',
     class: 'hidden sm:flex',
-    onClick: () => start( tourConfig )
+    onClick: () => nuxtApp.callHook('tour',11)
   },
   {
     label: t('nav.bible_studies'),
-    to: '/estudios-biblicos',
+    to: `/${$i18n.locale.value}/estudios-biblicos`,
     icon: 'ph-books',
     color: 'primary'
   },
   {
     label: t('nav.conferences'),
-    to: '/conferences',
+    to: `/${$i18n.locale.value}/conferencias`,
     icon: 'ph-books',
     color: 'secondary'
   },
@@ -58,7 +48,8 @@ const links = ref<ButtonProps[]>([
         :links="links"
         >
 
-        <UPageCard variant="soft" icon="ph-git-branch" :title="release?.title" :description="release?.description">
+        <div id="index_changelog">
+          <UPageCard variant="soft" icon="ph-git-branch" :title="release?.title" :description="release?.description">
 
           <template #header>
             v{{ release?.version }}
@@ -74,6 +65,7 @@ const links = ref<ButtonProps[]>([
             </li>
           </ul>
         </UPageCard>
+        </div>
       </UPageHero>
 
     </UPage>

app/utils/guidedTour.ts

@@ -1,3 +0,0 @@
-export default () => {
-  return 'Hello Util'
-}

lang/es.json

@@ -9,7 +9,27 @@
         "my_list": "Mi Listado",
         "history": "Historial",
         "settings": "Configuración",
-        "changelog": "Novedades"
+        "changelog": "Novedades",
+        "tour": "Toma el tour"
+    },
+    "tour": {
+        "progress": "{current} de {total}",
+        "next": "Siguiente",
+        "prev": "Anterior",
+        "done": "Finalizar",
+        "bible_studies_description": "Realiza busquedas en los estudios biblicos predicados por el Dr. José Benjamín Pérez",
+        "conferences_description": "Realiza busquedas en las conferencias predicadas por el Dr. William Soto Santiago",
+        "betweenthelines_description": "Realiza busquedas en las imagenes de entrelineas de los estudios del Dr. José Benjamín Perez",
+        "favorites_description": "Listado de resultados guardados como favoritos para facil acceso futuro",
+        "history_description": "Historial de los resultados de busqueda que has visto",
+        "settings_description": "Configuracion, cantidad de resultados por pagina, tipo de paginacion, entre otros",
+        "changelog_description": "Bitacora de cambios realizados al sitio en orden cronologico",
+        "feedback_description": "Tienes alguna sugerencia o queja? realizala aqui",
+        "localeselector_description": "Cambia facilmente el idioma de la pagina",
+        "index_changelog": "Panel de ultimos cambios subidos"
+    },
+    "home": {
+        "instructions": "Bienvenidos, aqui podran buscar entre los estudios biblicos, las conferencias y las entrelineas que estan disponibles en el material de archivo de La Gran Carpa Catedral."
     },
     "search": {
         "placeholder": "Buscar...",
@@ -90,5 +110,9 @@
         "draft": "Borrador",
         "empty_bible_studies": "Selecciona un Estudio Bíblico para ver el detalle",
         "empty_conferences": "Selecciona una Conferencia para ver el detalle"
+    },
+    "seo": {
+        "title": "La Gran Carpa Catedral - Buscador",
+        "description": "Buscador de actividades y conferencias."
     }
 }