docs: ✨ updated docs

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

@@ -29,23 +29,23 @@
     }
 
     .slot h2 {
-        @apply my-2 font-semibold text-xl;
+        @apply mt-4 font-semibold text-xl;
     }
 
     .slot h3 {
-        @apply my-2 font-semibold text-lg;
+        @apply mt-4 font-semibold text-lg;
     }
 
     .slot code {
-        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full text-sm;
+        @apply text-xs font-mono;
     }
 
     .slot pre {
-        @apply w-full flex my-2;
+        @apply bg-gray-800 dark:bg-slate-800 p-3 rounded w-full text-gray-100 w-full flex my-2;
     }
 
     .slot a {
-        @apply text-sky-900 font-medium dark:text-sky-400;
+        @apply text-sky-900 font-medium dark:text-sky-400 dark:hover:text-white;
     }
 
     .slot hr {
@@ -56,6 +56,10 @@
         @apply rounded drop-shadow-2xl;
     }
 
+    .slot ul {
+        @apply list-disc pl-5;
+    }
+
     [data-aw-toggle-menu] path {
         @apply transition;
     }
@@ -68,6 +72,10 @@
         @apply mt-2 text-sm text-slate-700 dark:text-slate-400;
     }
 
+    .coding p {
+        @apply m-0;
+    }
+
     [data-aw-toggle-menu].expanded g > path:last-child {
         @apply rotate-45 translate-y-[-8px] translate-x-[14px];
     }

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

@@ -5,31 +5,25 @@ export default component$(() => {
         <section class="relative">
             <div class="max-w-6xl mx-auto px-4 sm:px-6">
                 <div class="py-12 md:py-20">
-                    <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
+                    <video
-                        <h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
+                        style={'height:600px'}
-                            <span class="text-[#039de1]">Qwik</span> +{' '}
+                        width="100%"
-                            <br class="block sm:hidden" />
+                        height="400"
-                            <span class="text-[#039de1] sm:whitespace-nowrap">
+                        autoPlay
-                                Tailwind CSS
+                        muted
-                            </span>
+                        loop
-                        </h2>
+                        playsInline
-                        <p class="text-xl text-gray-600 dark:text-slate-400">
+                    >
-                            Be very surprised by these huge fake numbers you are
+                        <source
-                            seeing on this page. <br class="hidden md:inline" />
+                            src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
-                            Don't waste more time!
+                            type='video/mp4; codecs="hvc1"'
-                        </p>
+                        />
 
-                        <div class="mt-6">
+                        <source
-                            <a
+                            src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
-                                class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto"
+                            type="video/webm"
-                                href="https://github.com/onwidget/qwind"
+                        />
-                                target="_blank"
+                    </video>
-                                rel="noopener"
-                            >
-                                Get template
-                            </a>
-                        </div>
-                    </div>
                 </div>
             </div>
         </section>

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

@@ -54,14 +54,6 @@ export default component$(() => {
             <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">
-                        <div class="mb-2">
-                            <Link
-                                class="inline-block font-bold text-xl"
-                                href={'/'}
-                            >
-                                Qwind
-                            </Link>
-                        </div>
                         <div class="text-sm text-gray-600 dark:text-gray-400">
                             Nos sentimos muy afortunados de poder contribuir a
                             este proyecto y esperamos poder seguir trabajando

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

@@ -64,24 +64,6 @@ export default component$(() => {
                     </div>
                     <div class="block md:flex items-center flex-1">
                         <div class="relative m-auto max-w-4xl">
-                            {/* <video
-                                width="600"
-                                height="100%"
-                                autoPlay
-                                muted
-                                playsInline
-                            >
-                                <source
-                                    src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
-                                    type='video/mp4; codecs="hvc1"'
-                                />
-
-                                <source
-                                    src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
-                                    type="video/webm"
-                                />
-                            </video> */}
-
                             <picture>
                                 <source srcSet={srcsetAvif} type="image/avif" />
                                 <source srcSet={srcsetWebp} type="image/webp" />

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

@@ -16,8 +16,8 @@ export default component$(
     }) => {
         return (
             <div>
-                {options.map((item) => (
+                {options.map((item, i) => (
-                    <UlCompoent title={item.title} list={item.list} />
+                    <UlCompoent key={i} title={item.title} list={item.list} />
                 ))}
             </div>
         )

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

@@ -0,0 +1,74 @@
+import { component$ } from '@builder.io/qwik'
+
+export const ButtonLink = component$(
+    (props: { name: string; link: string; direction: 'left' | 'right' }) => {
+        const ArrowRight = () => (
+            <svg
+                viewBox="0 0 3 6"
+                class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
+            >
+                <path
+                    d="M0 0L3 3L0 6"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+            </svg>
+        )
+
+        const ArrowLeft = () => (
+            <svg
+                viewBox="0 0 3 6"
+                class="mr-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
+            >
+                <path
+                    d="M3 0L0 3L3 6"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+            </svg>
+        )
+
+        return (
+            <a
+                class="group flex items-center hover:text-slate-900 dark:hover:text-white"
+                href={props.link}
+            >
+                {props.direction === 'left' ? (
+                    <>
+                        <ArrowLeft />
+                        {props.name}
+                    </>
+                ) : (
+                    <>
+                        {props.name}
+                        <ArrowRight />
+                    </>
+                )}
+            </a>
+        )
+    }
+)
+
+export default component$(
+    (props: { pages: ({ name: string; link: string } | null)[] }) => {
+        const { pages } = props
+        return (
+            <div class="text-sm leading-6 mt-12">
+                <div class="mb-10 text-slate-700 font-semibold flex justify-between items-center dark:text-slate-200">
+                    {pages[0] ? (
+                        <ButtonLink direction="left" {...pages[0]} />
+                    ) : null}
+                    {pages[1] ? (
+                        <ButtonLink direction="right" {...pages[1]} />
+                    ) : null}
+                </div>
+            </div>
+        )
+    }
+)

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

@@ -0,0 +1,58 @@
+# Conceptos
+
+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**.
+
+Tan sencillo como decir **palabra/s clave** y **mensaje a responder**
+
+Ambos metodos **[addKeyword](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addKeyword.js)** y el **[addAnswer](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addAnswer.js)** tienen una serie opciones disponibles
+
+```js
+const {
+    createBot,
+    createProvider,
+    createFlow,
+    addKeyword,
+} = require('@bot-whatsapp/bot')
+
+const flowPrincipal = addKeyword(['hola', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .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
+
+```js
+const WhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
+....
+const adapterProvider = createProvider(WhatsappProvider)
+```
+
+Los proveedores disponibles hasta el momento son los siguientes:
+
+### [whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js)
+
+**require('@bot-whatsapp/provider/web-whatsapp')**
+
+### [Venom](https://github.com/orkestral/venom)
+
+**require('@bot-whatsapp/provider/venom')**
+
+### [Baileys](https://github.com/adiwajshing/Baileys)
+
+**require('@bot-whatsapp/provider/baileys')**
+
+### [Meta Official](https://developers.facebook.com/docs/whatsapp/cloud-api/reference/messages)
+
+**require('@bot-whatsapp/provider/meta')**
+
+### [Twilio Official](https://www.twilio.com/es-mx/messaging/whatsapp)
+
+**require('@bot-whatsapp/provider/twilio')**
+
+## DataBase (Base de datos)

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

@@ -0,0 +1,68 @@
+# Ejemplo
+
+Si copias y pegas este codigo y tu entorno de trabajo cumple con todos los requesitos te debe funcionar abajo explico muy por encima
+
+```js
+const {
+    createBot,
+    createProvider,
+    createFlow,
+    addKeyword,
+} = require('@bot-whatsapp/bot')
+
+const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
+const MockAdapter = require('@bot-whatsapp/database/mock')
+
+const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+
+/**
+ * Esta es la funcion importante es la que realmente inicia
+ * el chatbot.
+ */
+const main = async () => {
+    const adapterDB = new MockAdapter()
+    const adapterFlow = createFlow([flowPrincipal])
+    const adapterProvider = createProvider(WebWhatsappProvider)
+    createBot({
+        flow: adapterFlow,
+        provider: adapterProvider,
+        database: adapterDB,
+    })
+}
+
+main()
+```
+
+## Explicando código
+
+En esta parte solo estamos declaramos las dependencias que vamos a utilizar. Si quieres saber a fondo cada una de las funciones te recomiendo pasarte por la seccion de **[conceptos](/docs/concepts)**
+
+```js
+const {
+    createBot,
+    createProvider,
+    createFlow,
+    addKeyword,
+} = require('@bot-whatsapp/bot')
+
+const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
+const MockAdapter = require('@bot-whatsapp/database/mock')
+```
+
+La siguiente seccion te declaramos la palabras claves que disparan un flujo de conversación.
+
+**Ejemplo**:
+
+Si un usuario te escribe **👦hola** ó **👦alo** el bot respondera
+
+**🤖Hola, bienvenido a mi tienda, ¿Como puedo ayudarte?**
+
+**🤖Tengo: Zapatos, Bolsos, etc...**
+
+```js
+const flowPrincipal = addKeyword(['hola', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+```

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

@@ -2,15 +2,14 @@ import Collaborators from '../../components/widgets/Collaborators'
 
 # Vista rápida
 
-Los chatbots son una herramienta poderosa para que las empresas y
+Si eres una persona con **poco tiempo y gran capacidad** de comprensión con conocimientos ejecutando proyectos en Node.js y manejo de terminal.
-organizaciones comuniquen de forma personalizada y automatizada con sus clientes.
 
 Está documentación te ayudará a instalar tu bot de whatsapp en simples pasos con el proposito de
-que tengas un chatbot funcional en solo minutos.
+que tengas un chatbot funcional en **solo minutos.**
 
 ## Ejecutar
 
-Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
+Solo debes de ubicarte en un directorio de tu preferencia, ejecutar el siguiente comando y **seguir las instrucciones**
 
 ```shell
 npm create bot-whatsapp@latest
@@ -33,4 +32,5 @@ npm create bot-whatsapp@latest
     </video>
 </div>
 
+**¿Algun error?**
 Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema

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

@@ -1,120 +1,41 @@
----
-title: Overview
-contributors:
-    - adamdbradley
-    - steve8708
-    - manucorporat
-    - gabrielgrant
----
-
 # Instalación
 
-### 📄 Bienvenido/a
+A continuacion se describen los puntos técnicos que debes de tener en cuenta antes de trabajar con esta herramienta.
 
-Si deseas colaborar con el proyecto existen varias maneras, la primera de ellas es aportando conocimiento y mejorando el repositorio (actualizando documentación, mejorando código, revisando **[issues](https://github.com/codigoencasa/bot-whatsapp/issues)**, etc).
+## Requerimientos
-
-También es bien recibido los aportes económicos que se utilizaran para diferentes fines **[ver más](https://opencollective.com/bot-whatsapp)**
-
-El lenguaje principal que se utilizó para desarrollar este proyecto fue **JavaScript** con el fin de qué personas que están iniciando en el mundo de la programación puedan entender fácilmente.
-
-### 🤔 Preguntas frecuentes
-
--   ¿Como puedo hacer aportaciones de código en el proyecto?: [Ver Video](https://youtu.be/Lxt8Acob6aU)
--   ¿Como ejecutar el entorno de pruebas?: [Ver Video](https://youtu.be/Mf9V-dloBfk)
--   ¿Como crear un nuevo proveedor?: [Ver Video](https://youtu.be/cahK9zH3SI8)
--   ¿Que son los GithubActions?: [Ver Video](https://youtu.be/nYBEBFKLiqw)
--   ¿Canales de comunicación?: [Discord](https://link.codigoencasa.com/DISCORD)
-
----
-
-![](https://i.giphy.com/media/ntMt6TvalpstTIx7Ak/giphy.webp)
-
-**Requerimientos:**
 
 -   Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
--   **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)** como gestor de paquetes. En el link conseguirás las intrucciones para instalar yarn.
--   **[VSCode](https://code.visualstudio.com/download)** (recomendado): Editor de código con plugins.
--   **[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits&ssr=false#overview)** (plugin-vscode) este plugin te ayudará a crear commit semántico.
--   Se usará la rama **dev** _(https://github.com/leifermendez/bot-whatsapp/tree/dev)_ como rama principal hasta que se haga oficialmente el lanzamiento de la V2.
 
-### 🚀 Iniciando
+## ¿Como saber que tengo el Node?
 
-**Clonar repo rama dev**
+Solo debes ejecutar el siguiente comando y esperar que la version que te arroja sea superior a v16
 
-```
+```shell
-git clone --branch dev https://github.com/codigoencasa/bot-whatsapp
+$ node -v
+v18.12.1
 ```
 
-**Instalar dependencias**
+## Opcionales
 
-```
+Dependiendo de las opciones de configuraciones que haz marcado al momento de crear el bot **Command Line Interface (CLI)** puede que necesites instalar más cosas.
-cd bot-whatsapp
-yarn install
-```
 
-**Compilar (build)**
+**Ejemplo**: Si elegiste _(MySQL)_ como proveedor de base de datos logicamente necesitaras tener un entorno de MySQL.
-Para compilar la aplicación es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo.
 
-```
+📄 Pronto se agregara más informacion y videos explicando esto a fondo.
-yarn build
-```
 
-**Example-app**
+<div class="my-4 w-full ">
-Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo.
+    <video
-
+        class="rounded drop-shadow-xl rounded  "
-```
+        width="100%"
-yarn run cli
+        height="100%"
-```
+        autoplay
-
+        loop
-Selecionas (mediante las flechas arriba y abajo) el proveedor que quieras usar y cuando estes sobre el presiona la barra de espacio, igualmente selecciona la base de datos que quieras usar.
+        muted
-
+        playsinline
-Se creó un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql`
+    >
-
+        <source
-Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas:
+            src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/console.webm"
-
+            type="video/webm"
-```
+        />
-        "@bot-whatsapp/bot": "latest",
+    </video>
-        "@bot-whatsapp/cli": "latest",
+</div>
-        "@bot-whatsapp/database": "latest",
-        "@bot-whatsapp/provider": "latest",
-```
-
-Cambiate al directorio creado ejemplo: `base-bailey-mysql`
-
-```
-cd base-baileys-mysql
-```
-
-Ejecuta los comandos:
-
-```
-npm install
-npm run pre-copy
-npm start
-```
-
-En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexión, ejemplo de MySql:
-
-```
-const BaileysProvider = require('@bot-whatsapp/provider/baileys')
-const MySQLAdapter = require('@bot-whatsapp/database/mysql')
-
-/**
- * Declaramos las conexiones de MySQL
- */
-const MYSQL_DB_HOST = 'localhost'
-const MYSQL_DB_USER = 'usr'
-const MYSQL_DB_PASSWORD = 'pass'
-const MYSQL_DB_NAME = 'bot'
-```
-
-![](https://i.imgur.com/dC6lEwy.png)
-
-> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 🤣](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md)
-
----
-
--   [Discord](https://link.codigoencasa.com/DISCORD)
--   [Twitter](https://twitter.com/leifermendez)
--   [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
--   [Telegram](https://t.me/leifermendez)

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

@@ -1,9 +1,10 @@
 import { component$, Slot, useStore } from '@builder.io/qwik'
 import type { DocumentHead } from '@builder.io/qwik-city'
-import Collaborators from '~/components/widgets/Collaborators'
 import Footer from '~/components/widgets/Footer'
 import Header from '~/components/widgets/Header'
 import NavBar from '~/components/widgets/NavBar'
+// import Navigation from '~/components/widgets/Navigation'
+// import Collaborators from '~/components/widgets/Collaborators'
 // import ExtraBar from '~/components/widgets/ExtraBar'
 
 export default component$(() => {
@@ -14,14 +15,13 @@ export default component$(() => {
                 list: [
                     { name: 'Vista rápida', link: '/docs' },
                     { name: 'Instalación', link: '/docs/install' },
-                    { name: 'Configuración', link: '/docs/install' },
+                    { name: 'Ejemplo', link: '/docs/example' },
-                    { name: 'Ejemplos', link: '/docs/install' },
                 ],
             },
             {
                 title: 'Conceptos',
                 list: [
-                    { name: 'Flows', link: '/docs' },
+                    { name: 'Resumen', link: '/docs/concepts' },
                     { name: 'Proveedores', link: '/docs/install' },
                     { name: 'Base de datos', link: '/docss' },
                 ],
@@ -50,8 +50,7 @@ export default component$(() => {
                     </div>
                     <div class={'px-3  col-span-3 slot pb-5'}>
                         <Slot />
-
+                        {/* <Navigation pages={[null,store.options[0][1]]} /> */}
-                        <Collaborators />
                     </div>
                     <div class={'px-3 col-span-1  '}>
                         <NavBar options={store.options} />
@@ -65,7 +64,7 @@ export default component$(() => {
 })
 
 export const head: DocumentHead = {
-    title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
+    title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
     meta: [
         {
             name: 'description',

packages/docs/src/routes/index.tsx

@@ -4,17 +4,17 @@ import type { DocumentHead } from '@builder.io/qwik-city'
 import Hero from '~/components/widgets/Hero'
 import Features from '~/components/widgets/Features'
 import FAQs from '~/components/widgets/FAQs'
-import Stats from '~/components/widgets/Stats'
+// import Stats from '~/components/widgets/Stats'
-// import CallToAction from '~/components/widgets/CallToAction'
+import CallToAction from '~/components/widgets/CallToAction'
 
 export default component$(() => {
     return (
         <>
             <Hero />
             <Features />
-            {/* <CallToAction /> */}
+            <CallToAction />
             <FAQs />
-            <Stats />
+            {/* <Stats /> */}
         </>
     )
 })