LGCC
/
search
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Updated tour functionality. 

Set main functionality inside app.vue with nuxt hooks to be able to call it from any point in the app.
This commit is contained in:
Julio Ruiz 2026-06-01 11:19:56 -05:00
parent 6b7f9bdd78
commit 47c88c22a6
5 changed files with 181 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
app/app.vue
View File

@ -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>

163
app/layouts/default.vue
View File

@ -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 ),
chip: {
onSelect: () => { doTour() },
chip: {
color: 'error'
}
}
] satisfies NavigationMenuItem[]
const homeLink = {
id: 'home',
label: t('nav.tour'),
icon: 'ph-house',
to: '/'
}
return [ homeLink,...links]
})
const { start } = useDriver("onboarding");
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,
function doTour(){
nuxtApp.callHook('tour',0)
}
const homeLink = {
id: 'home',
label: t('nav.home'),
icon: 'ph-house',
to: '/'
}
return [homeLink, ...links]
})
</script>
<template>
<UDashboardGroup unit="rem">
<UDashboardSidebar
id="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' }"
>
<UDashboardSidebar id="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
:collapsed="collapsed"
:items="links"
orientation="vertical"
tooltip
popover
color="neutral"
variant="link"
>
<UNavigationMenu :collapsed="collapsed" :items="links" orientation="vertical" tooltip popover color="neutral"
variant="link">
<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">
<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">
<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
:model-value="$i18n.locale.value"
:locales="Object.values(locales)"
@update:model-value="setLocale($event)"
/>
<ULocaleSelect :model-value="$i18n.locale.value" :locales="Object.values(locales)"
@update:model-value="setLocale($event)" />
</div>
</template>
</UDashboardSidebar>

22
app/pages/index.vue
View File

@ -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>

3
app/utils/guidedTour.ts
View File

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

26
lang/es.json
View File

@ -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."
}
}