Fix/docs nex

Fix/docs nex

packages/docs/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>

packages/docs/src/assets/styles/global.css

@@ -41,7 +41,7 @@
     }
 
     .slot pre {
-        @apply bg-gray-800 dark:bg-slate-800 p-3 rounded w-full text-gray-100 w-full flex my-2;
+        @apply bg-gray-800 dark:bg-slate-800 p-3 rounded w-full max-w-lg text-gray-100  flex my-2;
     }
 
     .slot a {
@@ -49,7 +49,7 @@
     }
 
     .slot hr {
-        @apply my-5;
+        @apply my-5  border-t-slate-100 dark:border-t-slate-800;
     }
 
     .slot img {

packages/docs/src/components/core/RouterHead.tsx

@@ -17,7 +17,7 @@ export const RouterHead = component$(() => {
                 name="viewport"
                 content="width=device-width, initial-scale=1.0"
             />
-            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+            <link rel="icon" href="/favicon.ico" />
 
             {head.meta.map((m) => (
                 <meta {...m} />

packages/docs/src/components/widgets/Alert.tsx

@@ -0,0 +1,14 @@
+import { component$, Slot } from '@builder.io/qwik'
+
+export default component$(() => {
+    return (
+        <div
+            class="p-4 border border-slate-200 rounded my-2 bg-gray-50  dark:border-gray-600 dark:bg-gray-700"
+            role="alert"
+        >
+            <div class=" mb-2 text-md ">
+                <Slot />
+            </div>
+        </div>
+    )
+})

packages/docs/src/components/widgets/Footer.tsx

@@ -50,7 +50,7 @@ export default component$(() => {
     ]
 
     return (
-        <footer class="border-t border-gray-200 dark:border-slate-800">
+        <footer class="">
             <div class="max-w-6xl mx-auto px-4 sm:px-6">
                 <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
                     <div class="col-span-12 lg:col-span-4 pr-8">

packages/docs/src/components/widgets/Header.tsx

@@ -1,28 +1,31 @@
-import { component$, useStore } from '@builder.io/qwik'
+import { component$, useContext, useStore } from '@builder.io/qwik'
 import Logo from '~/components/atoms/Logo'
 import { IconGithub } from '~/components/icons/IconGithub'
 import ToggleTheme from '~/components/core/ToggleTheme'
 import ToggleMenu from '~/components/core/ToggleMenu'
 import { IconDiscord } from '../icons/IconDiscord'
+import { GlobalStore } from '~/contexts'
 
 export default component$(() => {
-    const store = useStore({
+    const storeScroll = useStore({
         isScrolling: false,
     })
 
+    const store = useContext(GlobalStore)
+
     return (
         <header
-            class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all ${
+            class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all border border-b-slate-100 dark:border-b-slate-800 border-x-0 border-t-0 ${
-                store.isScrolling
+                storeScroll.isScrolling
                     ? ' md:bg-white/90 md:backdrop-blur-sm dark:md:bg-slate-900/90 bg-white dark:bg-slate-900'
                     : ''
             }`}
             id="header"
             window:onScroll$={() => {
-                if (!store.isScrolling && window.scrollY >= 10) {
+                if (!storeScroll.isScrolling && window.scrollY >= 10) {
-                    store.isScrolling = true
+                    storeScroll.isScrolling = true
-                } else if (store.isScrolling && window.scrollY < 10) {
+                } else if (storeScroll.isScrolling && window.scrollY < 10) {
-                    store.isScrolling = false
+                    storeScroll.isScrolling = false
                 }
             }}
         >
@@ -41,46 +44,28 @@ export default component$(() => {
                     aria-label="Main navigation"
                 >
                     <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
-                        {/* <li class="dropdown">
+                        <li class="dropdown">
                             <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
-                                Pages
+                                Documentación
                             </button>
                             <ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
-                                <li>
+                                {store.map((ctx) => {
-                                    <a
+                                    return ctx.list.map((listCtx) => {
-                                        class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
+                                        return (
-                                        href="#"
+                                            <li>
-                                    >
+                                                <a
-                                        Features
+                                                    class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-                                    </a>
+                                                    href={listCtx.link}
-                                </li>
+                                                >
-                                <li>
+                                                    {listCtx.name}
-                                    <a
+                                                </a>
-                                        class="font-medium md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
+                                            </li>
-                                        href="#"
+                                        )
-                                    >
+                                    })
-                                        Profile
+                                })}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        class="font-medium rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-                                        href="#"
-                                    >
-                                        Pricing
-                                    </a>
-                                </li>
                             </ul>
-                        </li> */}
-                        <li>
-                            <a
-                                class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-                                href={'/docs'}
-                            >
-                                Documentación
-                            </a>
                         </li>
-                        <li>
+                        {/* <li>
                             <a
                                 target={'_blank'}
                                 class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -90,7 +75,7 @@ export default component$(() => {
                             >
                                 Blog
                             </a>
-                        </li>
+                        </li> */}
                         <li class="md:hidden">
                             <a
                                 target={'_blank'}

packages/docs/src/components/widgets/Hero.tsx

@@ -17,15 +17,12 @@ export default component$(() => {
                     <div class="pb-12 md:pb-0 md:py-0 max-w-5xl mx-auto md:pr-16 flex items-center basis-[56%]">
                         <div>
                             <h1 class="text-5xl md:text-[3.48rem] font-bold leading-tighter tracking-tighter mb-4 font-heading px-4 md:px-0">
-                                Construye tu 
+                                Crear chatbot{' '}
                                 <span class="sm:whitespace-nowrap text-[#25b637]">
-                                    Chatbot
+                                    WhatsApp
-                                </span>{' '}
-                                <br class="hidden lg:block" />{' '}
-                                <span class="hidden lg:inline">
-                                para{' '}
-                                    <span class="text-[#25b637]">Whatsapp</span>{' '}
                                 </span>
+                                <br class="hidden lg:block" />{' '}
+                                <span class="lg:inline">en minutos</span>
                             </h1>
                             <div class="max-w-3xl mx-auto">
                                 <p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
@@ -35,7 +32,6 @@ export default component$(() => {
                                     <span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
                                         puedes configurar respuestas
                                         automatizadas para preguntas frecuentes
-                              
                                     </span>{' '}
                                     , recibir y responder mensajes de manera
                                     automatizada, y hacer un seguimiento de las

packages/docs/src/components/widgets/NavBar.tsx

@@ -1,19 +1,12 @@
 import { component$ } from '@builder.io/qwik'
-import { useLocation } from '@builder.io/qwik-city'
+import { Link, useLocation } from '@builder.io/qwik-city'
+import { DocumentationCtx } from '~/contexts'
 
 /**
  * options = [] array con la lista de opciones de la documentacion
  */
 export default component$(
-    ({
+    ({ options = [] }: { options: DocumentationCtx[] }) => {
-        options = [],
-    }: {
-        options: {
-            title: string
-            link?: string
-            list: { link: string; name: string }[]
-        }[]
-    }) => {
         return (
             <div>
                 {options.map((item, i) => (
@@ -47,7 +40,7 @@ export const LiComponent = component$(
             <ul class="space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">
                 {porps.list.map((opt) => (
                     <li>
-                        <a
+                        <Link
                             class={[
                                 currentPage === `${opt.link}/`
                                     ? 'font-semibold'
@@ -57,7 +50,7 @@ export const LiComponent = component$(
                             href={opt.link}
                         >
                             {opt.name}
-                        </a>
+                        </Link>
                     </li>
                 ))}
             </ul>

packages/docs/src/contexts/index.tsx

@@ -0,0 +1,10 @@
+import { createContext } from '@builder.io/qwik'
+
+export interface DocumentationCtx {
+    title: string
+    link?: string
+    list: { link: string; name: string }[]
+}
+
+export const GlobalStore =
+    createContext<DocumentationCtx[]>('documentation-site')

packages/docs/src/root.tsx

@@ -1,4 +1,9 @@
-import { component$, useStyles$ } from '@builder.io/qwik'
+import {
+    component$,
+    useContextProvider,
+    useStore,
+    useStyles$,
+} from '@builder.io/qwik'
 import {
     QwikCityProvider,
     RouterOutlet,
@@ -10,6 +15,7 @@ import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher'
 
 import fontStyles from '~/assets/styles/fonts.css?inline'
 import globalStyles from '~/assets/styles/global.css?inline'
+import { DocumentationCtx, GlobalStore } from './contexts'
 
 export default component$(() => {
     /**
@@ -22,6 +28,42 @@ export default component$(() => {
     useStyles$(fontStyles)
     useStyles$(globalStyles)
 
+    const store = useStore<DocumentationCtx[]>([
+        {
+            title: 'Primeros pasos',
+            list: [
+                { name: 'Vista rápida', link: '/docs' },
+                { name: 'Instalación', link: '/docs/install' },
+                { name: 'Ejemplo', link: '/docs/example' },
+            ],
+        },
+        {
+            title: 'Esenciales',
+            list: [
+                { name: 'Resumen', link: '/docs/essential' },
+                { name: 'Proveedores', link: '/docs/install' },
+                { name: 'Base de datos', link: '/docss' },
+            ],
+        },
+        {
+            title: 'Avanzado',
+            list: [
+                { name: 'Migración', link: '/docs/migration' },
+                { name: 'Extender funcionalidades', link: '/' },
+            ],
+        },
+        {
+            title: 'Comunidad',
+            list: [
+                { name: 'Unirme al proyecto', link: '/' },
+                { name: 'Sponsors', link: '/' },
+                { name: 'Roadmap', link: '/' },
+            ],
+        },
+    ])
+
+    useContextProvider(GlobalStore, store)
+
     return (
         <QwikCityProvider>
             <head>

packages/docs/src/routes/blog/index.tsx

@@ -1,27 +0,0 @@
-import { component$ } from '@builder.io/qwik'
-import type { DocumentHead } from '@builder.io/qwik-city'
-
-export default component$(() => {
-    return (
-        <>
-            <section>
-                <div class="max-w-6xl mx-auto py-6 px-4 sm:px-6 h-[60vh]">
-                    <h1 class="text-4xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
-                        Blog
-                    </h1>
-                    <p class="text-xl">Coming soon ...</p>
-                </div>
-            </section>
-        </>
-    )
-})
-
-export const head: DocumentHead = {
-    title: 'Blog — Qwind',
-    meta: [
-        {
-            name: 'description',
-            content: 'Lorem ipsum lorem ...',
-        },
-    ],
-}

packages/docs/src/routes/docs/essential/index.mdx

@@ -2,6 +2,8 @@
 
 Durante el desarrollo de este sistema se elaboraron tres (3) conceptos principales que conformar el funcionamiento
 
+---
+
 ## Flow (Flujos)
 
 Los flujos hace referencia al hecho de construir un flujo de conversion. Esto es un flow podemos observar que estan presente dos metodos importantes **addKeyword** y el **addAnswer**.
@@ -23,6 +25,8 @@ const flowPrincipal = addKeyword(['hola', 'alo'])
     .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
 ```
 
+---
+
 ## Provider (Proveedor)
 
 Es la pieza que conectara tu flujo con Whatsapp. En este chatbot tenemos varios proveedores disponibles la mayoria gratis pero tambien tenemos integracion la api oficial de whatsapp o twilio
@@ -55,4 +59,6 @@ Los proveedores disponibles hasta el momento son los siguientes:
 
 **require('@bot-whatsapp/provider/twilio')**
 
+---
+
 ## DataBase (Base de datos)

packages/docs/src/routes/docs/index.mdx

@@ -1,21 +1,32 @@
-# Vista rápida
+import Alert from '../../components/widgets/Alert'
+
+# Introducción
+
+<Alert>
+    **Atención** estás leyendo la documentación de la **versión estable
+    (0.2.x)** de esta librería, si vienes de la versión anterior te recomendamos
+    pasarte por la sección de **[migración](/docs/migration/)** para que puedas
+    disfrutar de las nuevas características.
+</Alert>
+
+## ¿Que es esto?
+
+Esto es una librería que te permitirá **crear chatbot para WhatsApp** en tan solo minutos de una manera ágil y rápida. A lo largo de esta documentación encontrarás ejemplos y material de ayuda.
 
 Si eres una persona con **poco tiempo y gran capacidad** de comprensión con conocimientos, ejecutando proyectos en Node.js y manejo de terminal.
-
 Esta documentación te ayudará a instalar tu bot de WhatsApp en simples pasos con el propósito de que tengas un chatbot funcional **en solo minutos.**
 
-## Ejecutar
+---
 
-Solo debes de ubicarte en un directorio de tu preferencia, ejecutar el siguiente comando y **seguir las instrucciones**
+Ejecutar el siguiente comando y **seguir las instrucciones**
 
 ```shell
 npm create bot-whatsapp@latest
 ```
 
-<div class="my-4 w-full ">
+<div class="my-4  ">
     <video
-        class="rounded drop-shadow-xl rounded  "
+        class="rounded drop-shadow-xl w-full max-w-lg rounded  "
-        width="100%"
         height="100%"
         autoplay
         loop

packages/docs/src/routes/docs/layout!.tsx

@@ -1,75 +1,58 @@
-import { component$, Slot, useStore } from '@builder.io/qwik'
+import { component$, Slot, useContext } from '@builder.io/qwik'
 import type { DocumentHead } from '@builder.io/qwik-city'
 import Footer from '~/components/widgets/Footer'
 import Header from '~/components/widgets/Header'
 import NavBar from '~/components/widgets/NavBar'
+import { GlobalStore } from '~/contexts'
 // import Navigation from '~/components/widgets/Navigation'
 // import Collaborators from '~/components/widgets/Collaborators'
 // import ExtraBar from '~/components/widgets/ExtraBar'
 
 export default component$(() => {
-    const store = useStore({
+    const store = useContext(GlobalStore)
-        options: [
-            {
-                title: 'Primeros pasos',
-                list: [
-                    { name: 'Vista rápida', link: '/docs' },
-                    { name: 'Instalación', link: '/docs/install' },
-                    { name: 'Ejemplo', link: '/docs/example' },
-                ],
-            },
-            {
-                title: 'Conceptos',
-                list: [
-                    { name: 'Resumen', link: '/docs/concepts' },
-                    { name: 'Proveedores', link: '/docs/install' },
-                    { name: 'Base de datos', link: '/docss' },
-                ],
-            },
-            {
-                title: 'Avanzado',
-                list: [
-                    { name: 'Migración', link: '/docs/migration' },
-                    { name: 'Extender', link: '/docs/migration' },
-                ],
-            },
-            {
-                title: 'Comunidad',
-                list: [{ name: 'Migración', link: '/docs/migration' }],
-            },
-        ],
-    })
 
     return (
         <>
             <Header />
-            <main class="container mx-auto px-12 ">
+            <main class={'overflow-hidden'}>
-                <div class={'grid grid-cols-5 gap-1 min-h-min'}>
+                <div class={'max-w-8xl'}>
-                    <div class={'col-span-1'}>
+                    <div
-                        <NavBar options={store.options} />
+                        class={
+                            'hidden lg:block fixed z-20 inset-0 top-[4rem] left-[max(0px,calc(50%-48rem))] right-auto w-[14.5rem] py-5 px-8 overflow-y-auto'
+                        }
+                    >
+                        <NavBar options={store} />
                     </div>
-                    <div class={'px-3  col-span-3 slot pb-5'}>
+                    <div class={'lg:pl-[14.5rem] lg:pr-[14.5rem]'}>
-                        <Slot />
+                        <div
-                        {/* <Navigation pages={[null,store.options[0][1]]} /> */}
+                            class={
+                                'slot max-w-3xl mx-auto relative z-20 p-5 xl:max-w-none'
+                            }
+                        >
+                            <Slot />
+                        </div>
                     </div>
-                    <div class={'px-3 col-span-1  '}>
+                    <div
-                        <NavBar options={store.options} />
+                        class={
+                            'hidden lg:block fixed z-20 inset-0 top-[4rem] right-[max(0px,calc(50%-48rem))] left-auto w-[14.5rem] py-5 px-8 overflow-y-auto'
+                        }
+                    >
+                        <NavBar options={store} />
                     </div>
                 </div>
             </main>
-
             <Footer />
         </>
     )
 })
 
 export const head: DocumentHead = {
-    title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
+    title: 'Crear chatbot WhatsApp en minutos — Servicio de chatbot para whatspp gratis proyecto OpenSource',
     meta: [
         {
             name: 'description',
             content:
-                'Qwind is a free and ready to start template to make your website using Qwik and Tailwind CSS.',
+                'Crear chatbot WhatsApp en minutos — Servicio de chatbot para whatspp gratis proyecto OpenSource',
         },
     ],
 }

packages/docs/src/routes/index.tsx

@@ -20,12 +20,12 @@ export default component$(() => {
 })
 
 export const head: DocumentHead = {
-    title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
+    title: 'Crear chatbot WhatsApp en minutos — Servicio de chatbot para whatspp gratis proyecto OpenSource',
     meta: [
         {
             name: 'description',
             content:
-                'Qwind is a free and ready to start template to make your website using Qwik and Tailwind CSS.',
+                'Crear chatbot WhatsApp en minutos — Servicio de chatbot para whatspp gratis proyecto OpenSource',
         },
     ],
 }