fix(conflict): conflict resolution

2026-04-20 20:49:15 +00:00 · 2022-12-15 00:25:13 -05:00
parent 438607c222 5433610a84
commit 71d43b585a
111 changed files with 3726 additions and 1404 deletions
--- a/packages/bot/core/core.class.js
+++ b/packages/bot/core/core.class.js
@@ -34,16 +34,16 @@ class CoreClass {
    listenerBusEvents = () => [
        {
            event: 'preinit',
-            func: () => printer('Iniciando provider espere...'),
+            func: () => printer('Iniciando proveedor, espere...'),
        },
        {
            event: 'require_action',
-            func: ({ instructions, title = '⚡⚡ ACCION REQUERIDA ⚡⚡' }) =>
+            func: ({ instructions, title = '⚡⚡ ACCIÓN REQUERIDA ⚡⚡' }) =>
                printer(instructions, title),
        },
        {
            event: 'ready',
-            func: () => printer('Provider conectado y listo'),
+            func: () => printer('Proveedor conectado y listo'),
        },
        {
            event: 'auth_failure',
--- a/packages/bot/package.json
+++ b/packages/bot/package.json
@@ -1,9 +1,8 @@
 {
    "name": "@bot-whatsapp/bot",
-    "version": "0.0.1",
+    "version": "0.0.22-alpha.0",
    "description": "",
    "main": "./lib/bundle.bot.cjs",
-    "private": true,
    "scripts": {
        "bot:rollup": "node ../../node_modules/.bin/rollup index.js --config ./rollup-cli.config.js",
        "format:check": "prettier --check .",
--- a/packages/bot/provider/provider.class.js
+++ b/packages/bot/provider/provider.class.js
@@ -19,7 +19,7 @@ class ProviderClass extends EventEmitter {
     *
     */

-    sendMessage = async (userId, message, sendMessage) => {
+    sendMessage = async (userId, message) => {
        if (NODE_ENV !== 'production')
            console.log('[sendMessage]', { userId, message })
        return message
--- a/packages/cli/check/index.js
+++ b/packages/cli/check/index.js
@@ -12,20 +12,20 @@ const checkNodeVersion = () => {
        )
        process.exit(1)
    }
-    console.log(green(`Node.js combatible ${version}`))
+    console.log(green(`Node.js compatible ${version}`))
    console.log(``)
 }

 const checkOs = () => {
-    console.log(bgCyan('🙂 Revisando tu Sistema Operativo'))
+    console.log(bgCyan('🙂 Revisando tu sistema operativo'))
    const os = process.platform
    if (!os.includes('win32')) {
        const messages = [
            `El sistema operativo actual (${os}) posiblemente requiera`,
-            `una confiuración adicional referente al puppeter`,
+            `una configuración adicional referente al puppeteer`,
            ``,
            `Recuerda pasar por el WIKI`,
-            `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalaci%C3%B3n`,
+            `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalación`,
            ``,
        ]

--- a/packages/cli/create-app/index.js
+++ b/packages/cli/create-app/index.js
@@ -12,9 +12,13 @@ const copyFiles = async (from, to) => {
    }
 }

-const copyBaseApp = async () => {
-    const BASEP_APP_PATH_FROM = `${process.cwd()}/starters/apps/base`
-    const BASEP_APP_PATH_TO = `${process.cwd()}/example-app-base`
+/**
+ * Copiar directorio con archivos
+ * @param {*} templateName
+ */
+const copyBaseApp = async (fromDir = process.cwd(), toDir = process.cwd()) => {
+    const BASEP_APP_PATH_FROM = `${fromDir}`
+    const BASEP_APP_PATH_TO = `${toDir}`
    await copyFiles(BASEP_APP_PATH_FROM, BASEP_APP_PATH_TO)
 }

--- a/packages/cli/install/tool.js
+++ b/packages/cli/install/tool.js
@@ -14,7 +14,7 @@ const getPkgManage = async () => {
 }

 const installDeps = (pkgManager, packageList) => {
-    const errorMessage = `Ocurrio un error instalando ${packageList}`
+    const errorMessage = `Ocurrió un error instalando ${packageList}`
    let childProcess = []

    const installSingle = (pkgInstall) => () => {
--- a/packages/cli/interactive/index.js
+++ b/packages/cli/interactive/index.js
@@ -1,54 +1,59 @@
 const prompts = require('prompts')
-const { yellow, red } = require('kleur')
-const { installAll } = require('../install')
-const { cleanSession } = require('../clean')
+const { yellow, red, cyan, bgMagenta } = require('kleur')
 const { copyBaseApp } = require('../create-app')
+const { join } = require('path')
+const { existsSync } = require('fs')
 const { checkNodeVersion, checkOs } = require('../check')
-const { jsonConfig } = require('../configuration')
+
+const bannerDone = () => {
+    console.log(``)
+    console.log(
+        cyan(
+            [
+                `[Agradecimientos]: Este es un proyecto OpenSource, si tienes intenciones de colaborar puedes hacerlo:`,
+                `[😉] Comprando un cafe https://www.buymeacoffee.com/leifermendez`,
+                `[⭐] Dar estrella  https://github.com/leifermendez/bot-whatsapp`,
+                `[🚀] Realizando mejoras en el codigo`,
+            ].join('\n')
+        )
+    )
+    console.log(``)
+}

 const startInteractive = async () => {
    const questions = [
        {
            type: 'text',
-            name: 'exampeOpt',
-            message:
-                'Quieres crear una app de ejemplo "example-app-example"? (Y/n)',
-        },
-        // {
-        //     type: 'text',
-        //     name: 'dependencies',
-        //     message:
-        //         'Quieres actualizar las librerias "whatsapp-web.js"? (Y/n)',
-        // },
-        {
-            type: 'text',
-            name: 'cleanTmp',
-            message: 'Quieres limpiar la session del bot? (Y/n)',
+            name: 'outDir',
+            message: 'Quieres crear un bot? (Y/n)',
        },
        {
            type: 'multiselect',
            name: 'providerWs',
-            message: 'Proveedor de Whatsapp',
+            message: '¿Cuál proveedor de whatsapp quieres utilizar?',
            choices: [
-                { title: 'whatsapp-web.js', value: 'whatsapp-web.js' },
+                { title: 'whatsapp-web.js (gratis)', value: 'wweb' },
+                { title: 'Twilio', value: 'twilio' },
+                { title: 'Venom (gratis)', value: 'venom' },
+                { title: 'Baileys (gratis)', value: 'bailey' },
                { title: 'API Oficial (Meta)', value: 'meta', disabled: true },
-                { title: 'Twilio', value: 'twilio', disabled: true },
            ],
            max: 1,
-            hint: 'Espacio para selecionar',
+            hint: 'Espacio para seleccionar',
            instructions: '↑/↓',
        },
        {
            type: 'multiselect',
            name: 'providerDb',
-            message: 'Cual base de datos quieres usar',
+            message: '¿Cuál base de datos quieres utilizar?',
            choices: [
-                { title: 'JSONFile', value: 'json' },
-                { title: 'MySQL', value: 'mysql', disabled: true },
-                { title: 'Mongo', value: 'mongo', disabled: true },
+                { title: 'Memory', value: 'memory' },
+                { title: 'Mongo', value: 'mongo' },
+                { title: 'MySQL', value: 'mysql' },
+                { title: 'Json', value: 'json', disabled: true },
            ],
            max: 1,
-            hint: 'Espacio para selecionar',
+            hint: 'Espacio para seleccionar',
            instructions: '↑/↓',
        },
    ]
@@ -57,90 +62,78 @@ const startInteractive = async () => {
    checkNodeVersion()
    checkOs()
    const onCancel = () => {
-        console.log('Proceso cancelado!')
+        console.log('¡Proceso cancelado!')
        return true
    }
    const response = await prompts(questions, { onCancel })
-    const {
-        dependencies = '',
-        cleanTmp = '',
-        exampeOpt = '',
-        providerDb = [],
-        providerWs = [],
-    } = response
-    /**
-     * Question
-     * @returns
-     */
-    const installOrUdpateDep = async () => {
-        const answer = dependencies.toLowerCase() || 'n'
+    const { outDir = '', providerDb = [], providerWs = [] } = response
+
+    const createApp = async (templateName = null) => {
+        if (!templateName)
+            throw new Error('TEMPLATE_NAME_INVALID: ', templateName)
+
+        const possiblesPath = [
+            join(__dirname, '..', '..', 'starters', 'apps', templateName),
+            join(__dirname, '..', 'starters', 'apps', templateName),
+            join(__dirname, 'starters', 'apps', templateName),
+        ]
+
+        const answer = outDir.toLowerCase() || 'n'
        if (answer.includes('n')) return true

        if (answer.includes('y')) {
-            await installAll()
-            return true
+            const indexOfPath = possiblesPath.find((a) => existsSync(a))
+            await copyBaseApp(indexOfPath, join(process.cwd(), templateName))
+            console.log(``)
+            console.log(bgMagenta(`⚡⚡⚡INSTRUCCIONES⚡⚡⚡`))
+            console.log(yellow(`cd ${templateName}`))
+            console.log(yellow(`npm install`))
+            console.log(yellow(`npm start`))
+            console.log(``)
+
+            return outDir
        }
    }

    /**
-     * Question
+     * Selccionar Provider (meta, twilio, etc...)
     * @returns
     */
-    const cleanAllSession = async () => {
-        const answer = cleanTmp.toLowerCase() || 'n'
-        if (answer.includes('n')) return true
-
-        if (answer.includes('y')) {
-            await cleanSession()
-            return true
-        }
-    }
-
-    const createApp = async () => {
-        const answer = exampeOpt.toLowerCase() || 'n'
-        if (answer.includes('n')) return true
-
-        if (answer.includes('y')) {
-            await copyBaseApp()
-            return true
-        }
-    }
-
    const vendorProvider = async () => {
+        const [answer] = providerWs
        if (!providerWs.length) {
            console.log(
                red(
-                    `Debes de seleccionar una WS Provider. Tecla [Space] para seleccionar`
+                    `Debes seleccionar un proveedor de whatsapp. Tecla [Space] para seleccionar`
                )
            )
            process.exit(1)
        }
-        console.log(yellow(`'Deberia crer una carpeta en root/provider'`))
-        return true
+        return answer
    }

+    /**
+     * Selecionar adaptador de base de datos
+     * @returns
+     */
    const dbProvider = async () => {
-        const answer = providerDb
+        const [answer] = providerDb
        if (!providerDb.length) {
            console.log(
                red(
-                    `Debes de seleccionar una DB Provider. Tecla [Space] para seleccionar`
+                    `Debes seleccionar un proveedor de base de datos. Tecla [Space] para seleccionar`
                )
            )
            process.exit(1)
        }
-        if (answer === 'json') {
-            console.log('Deberia crer una carpeta en root/data')
-            return 1
-        }
+        return answer
    }

-    await createApp()
-    await installOrUdpateDep()
-    await cleanAllSession()
-    await vendorProvider()
-    await dbProvider()
-    await jsonConfig()
+    const providerAdapter = await vendorProvider()
+    const dbAdapter = await dbProvider()
+    const NAME_DIR = ['base', providerAdapter, dbAdapter].join('-')
+    await createApp(NAME_DIR)
+    bannerDone()
 }

 module.exports = { startInteractive }
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,9 +1,8 @@
 {
    "name": "@bot-whatsapp/cli",
-    "version": "0.0.1",
+    "version": "0.0.29-alpha.0",
    "description": "",
    "main": "index.js",
-    "private": true,
    "devDependencies": {
        "cross-env": "^7.0.3",
        "cross-spawn": "^7.0.3",
@@ -11,6 +10,7 @@
        "kleur": "^4.1.5"
    },
    "files": [
+        "./starters/",
        "./lib/cli/bundle.cli.cjs"
    ],
    "bin": {
--- a/packages/cli/rollup-cli.config.js
+++ b/packages/cli/rollup-cli.config.js
@@ -1,5 +1,6 @@
 const banner = require('../../config/banner.rollup.json')
 const commonjs = require('@rollup/plugin-commonjs')
+const copy = require('rollup-plugin-copy')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { join } = require('path')

@@ -12,5 +13,11 @@ module.exports = {
        file: PATH,
        format: 'cjs',
    },
-    plugins: [commonjs(), nodeResolve()],
+    plugins: [
+        copy({
+            targets: [{ src: 'starters/*', dest: join(__dirname, 'starters') }],
+        }),
+        commonjs(),
+        nodeResolve(),
+    ],
 }
--- a/packages/create-bot-whatsapp/bin/create.js
+++ b/packages/create-bot-whatsapp/bin/create.js
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-const main = require('../lib/bin/bundle.create.cjs')
+const main = require('../lib/bundle.create-bot-whatsapp.cjs')
 main()
--- a/packages/create-bot-whatsapp/index.js
+++ b/packages/create-bot-whatsapp/index.js
@@ -1,12 +1,10 @@
+const { startInteractive } = require('../cli')
 /**
- * Main function
+ * Voy a llamar directo a CLI
+ * Temporalmente luego mejoro esta
+ * parte
+ * @returns
 */
-const main = () => {
-    console.clear()
-    console.log(``)
-    console.log(`[PostInstall]: Este es el main function.`)
-    console.log(`[PostInstall]: 👌 Aqui podrias instalar cosas`)
-    console.log(``)
-}
+const main = () => startInteractive()

 module.exports = main
--- a/packages/create-bot-whatsapp/package.json
+++ b/packages/create-bot-whatsapp/package.json
@@ -1,13 +1,15 @@
 {
    "name": "create-bot-whatsapp",
-    "version": "0.0.1",
+    "version": "0.0.40-alpha.0",
    "description": "",
-    "main": "./lib/bin/bundle.create.cjs",
-    "private": true,
+    "main": "./lib/bundle.create-bot-whatsapp.cjs",
+    "files": [
+        "./starters/",
+        "./bin/create.js",
+        "./lib/bundle.create-bot-whatsapp.cjs"
+    ],
+    "bin": "./bin/create.js",
    "dependencies": {
        "@bot-whatsapp/cli": "*"
-    },
-    "bin": {
-        "bot": "./lib/bin/bundle.create.cjs"
    }
 }
--- a/packages/create-bot-whatsapp/rollup-create.config.js
+++ b/packages/create-bot-whatsapp/rollup-create.config.js
@@ -1,9 +1,10 @@
 const banner = require('../../config/banner.rollup.json')
 const commonjs = require('@rollup/plugin-commonjs')
+const copy = require('rollup-plugin-copy')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { join } = require('path')

-const PATH = join(__dirname, 'lib', 'bin', 'bundle.create.cjs')
+const PATH = join(__dirname, 'lib', 'bundle.create-bot-whatsapp.cjs')

 module.exports = {
    input: join(__dirname, 'index.js'),
@@ -12,5 +13,11 @@ module.exports = {
        file: PATH,
        format: 'cjs',
    },
-    plugins: [commonjs(), nodeResolve()],
+    plugins: [
+        copy({
+            targets: [{ src: 'starters/*', dest: join(__dirname, 'starters') }],
+        }),
+        commonjs(),
+        nodeResolve(),
+    ],
 }
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -1,20 +1,24 @@
 {
    "name": "@bot-whatsapp/database",
-    "version": "0.0.1",
+    "version": "0.0.21-alpha.0",
    "description": "Esto es el conector a  mysql, pg, mongo",
    "main": "./lib/mock/index.cjs",
-    "private": true,
    "keywords": [],
    "author": "",
    "license": "ISC",
+    "files": [
+        "./lib/"
+    ],
    "dependencies": {
        "dotenv": "^16.0.3",
        "mongodb": "^4.11.0",
-        "mysql2": "^2.3.3"
+        "mysql2": "^2.3.3",
+        "stormdb": "^0.6.0"
    },
    "exports": {
        "./mock": "./lib/mock/index.cjs",
        "./mongo": "./lib/mongo/index.cjs",
+        "./json-file": "./lib/json-file/index.cjs",
        "./mysql": "./lib/mysql/index.cjs"
    }
 }
--- a/packages/database/rollup-database.config.js
+++ b/packages/database/rollup-database.config.js
@@ -30,4 +30,12 @@ module.exports = [
        },
        plugins: [commonjs()],
    },
+    {
+        input: join(__dirname, 'src', 'json-file', 'index.js'),
+        output: {
+            banner: banner['banner.output'].join(''),
+            file: join(__dirname, 'lib', 'json-file', 'index.cjs'),
+        },
+        plugins: [commonjs()],
+    },
 ]
--- a/packages/database/src/json-file/index.js
+++ b/packages/database/src/json-file/index.js
@@ -0,0 +1,48 @@
+const path = require('path')
+const StormDB = require('stormdb')
+const engine = new StormDB.localFileEngine(
+    path.join(process.cwd(), './db.stormdb')
+)
+
+class JsonFileAdapter {
+    db
+    listHistory = []
+
+    constructor() {
+        this.init().then()
+    }
+
+    init() {
+        return new Promise((resolve) => {
+            this.db = new StormDB(engine)
+            this.db.default({ history: [] })
+            resolve(this.db)
+        })
+    }
+
+    getPrevByNumber = async (from) => {
+        const response = await this.db.get('history')
+        const { history } = response.state
+
+        if (!history.length) {
+            return null
+        }
+
+        const result = history.filter((res) => res.from === from).pop()
+
+        return {
+            ...result,
+        }
+    }
+
+    save = async (ctx) => {
+        await this.db
+            .get('history')
+            .push({ ...ctx })
+            .save()
+        console.log('Guardado en DB...', ctx)
+        this.listHistory.push(ctx)
+    }
+}
+
+module.exports = JsonFileAdapter
--- a/packages/docs/adaptors/cloudflare-pages/vite.config.ts
+++ b/packages/docs/adaptors/cloudflare-pages/vite.config.ts
@@ -1,19 +1,19 @@
-import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite';
-import { extendConfig } from '@builder.io/qwik-city/vite';
-import baseConfig from '../../vite.config';
+import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite'
+import { extendConfig } from '@builder.io/qwik-city/vite'
+import baseConfig from '../../vite.config'

 export default extendConfig(baseConfig, () => {
-  return {
-    build: {
-      ssr: true,
-      rollupOptions: {
-        input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
-      },
-    },
-    plugins: [
-      cloudflarePagesAdaptor({
-        staticGenerate: true,
-      }),
-    ],
-  };
-});
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+            },
+        },
+        plugins: [
+            cloudflarePagesAdaptor({
+                staticGenerate: true,
+            }),
+        ],
+    }
+})
--- a/packages/docs/functions/[[path]].ts
+++ b/packages/docs/functions/[[path]].ts
@@ -2,4 +2,4 @@

 // Cloudflare Pages Functions
 // https://developers.cloudflare.com/pages/platform/functions/
-export { onRequest } from '../server/entry.cloudflare-pages';
+export { onRequest } from '../server/entry.cloudflare-pages'
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,44 +1,44 @@
 {
-  "name": "bot-whatsapp-docs",
-  "version": "0.0.1",
-  "description": "Basic start point to build a docs site with Qwik",
-  "engines": {
-    "node": ">=15.0.0"
-  },
-  "private": true,
-  "scripts": {
-    "build": "qwik build",
-    "build.client": "vite build",
-    "build.preview": "vite build --ssr src/entry.preview.tsx",
-    "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts",
-    "build.types": "tsc --incremental --noEmit",
-    "deploy": "wrangler pages dev ./dist",
-    "dev": "vite --mode ssr",
-    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check .",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "preview": "qwik build preview && vite preview --open",
-    "start": "vite --open --mode ssr",
-    "qwik": "qwik"
-  },
-  "devDependencies": {
-    "@builder.io/qwik": "0.14.1",
-    "@builder.io/qwik-city": "0.0.127",
-    "@types/eslint": "8.4.10",
-    "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
-    "@typescript-eslint/parser": "5.43.0",
-    "autoprefixer": "10.4.11",
-    "eslint": "8.28.0",
-    "eslint-plugin-qwik": "0.14.1",
-    "node-fetch": "3.3.0",
-    "postcss": "^8.4.16",
-    "prettier": "2.7.1",
-    "tailwindcss": "^3.1.8",
-    "typescript": "4.9.3",
-    "vite": "3.2.4",
-    "vite-tsconfig-paths": "3.5.0",
-    "wrangler": "latest"
-  }
+    "name": "bot-whatsapp-docs",
+    "version": "0.0.1",
+    "description": "Basic start point to build a docs site with Qwik",
+    "engines": {
+        "node": ">=15.0.0"
+    },
+    "private": true,
+    "scripts": {
+        "build": "qwik build",
+        "build.client": "vite build",
+        "build.preview": "vite build --ssr src/entry.preview.tsx",
+        "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts",
+        "build.types": "tsc --incremental --noEmit",
+        "deploy": "wrangler pages dev ./dist",
+        "dev": "vite --mode ssr",
+        "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+        "fmt": "prettier --write .",
+        "fmt.check": "prettier --check .",
+        "lint": "eslint \"src/**/*.ts*\"",
+        "preview": "qwik build preview && vite preview --open",
+        "start": "vite --open --mode ssr",
+        "qwik": "qwik"
+    },
+    "devDependencies": {
+        "@builder.io/qwik": "0.14.1",
+        "@builder.io/qwik-city": "0.0.127",
+        "@types/eslint": "8.4.10",
+        "@types/node": "latest",
+        "@typescript-eslint/eslint-plugin": "5.43.0",
+        "@typescript-eslint/parser": "5.43.0",
+        "autoprefixer": "10.4.11",
+        "eslint": "8.28.0",
+        "eslint-plugin-qwik": "0.14.1",
+        "node-fetch": "3.3.0",
+        "postcss": "^8.4.16",
+        "prettier": "2.7.1",
+        "tailwindcss": "^3.1.8",
+        "typescript": "4.9.3",
+        "vite": "3.2.4",
+        "vite-tsconfig-paths": "3.5.0",
+        "wrangler": "latest"
+    }
 }
--- a/packages/docs/postcss.config.js
+++ b/packages/docs/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }
--- a/packages/docs/public/manifest.json
+++ b/packages/docs/public/manifest.json
@@ -1,9 +1,9 @@
 {
-  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "qwik-project-name",
-  "short_name": "Welcome to Qwik",
-  "start_url": ".",
-  "display": "standalone",
-  "background_color": "#fff",
-  "description": "A Qwik project app."
+    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+    "name": "qwik-project-name",
+    "short_name": "Welcome to Qwik",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "A Qwik project app."
 }
--- a/packages/docs/src/components/breadcrumbs/breadcrumbs.css
+++ b/packages/docs/src/components/breadcrumbs/breadcrumbs.css
@@ -1,25 +1,25 @@
 nav.breadcrumbs {
-  padding: 5px;
-  border-bottom: 1px solid #ddd;
+    padding: 5px;
+    border-bottom: 1px solid #ddd;
 }

 nav.breadcrumbs > span {
-  display: inline-block;
-  padding: 5px 0;
-  font-size: 12px;
+    display: inline-block;
+    padding: 5px 0;
+    font-size: 12px;
 }

 nav.breadcrumbs > span a {
-  text-decoration: none;
-  color: inherit;
+    text-decoration: none;
+    color: inherit;
 }

 nav.breadcrumbs > span::after {
-  content: '>';
-  padding: 0 5px;
-  opacity: 0.4;
+    content: '>';
+    padding: 0 5px;
+    opacity: 0.4;
 }

 nav.breadcrumbs > span:last-child::after {
-  display: none;
+    display: none;
 }
--- a/packages/docs/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/packages/docs/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,74 +1,77 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
-import styles from './breadcrumbs.css?inline';
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city'
+import styles from './breadcrumbs.css?inline'

 export const Breadcrumbs = component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  const { menu } = useContent();
-  const loc = useLocation();
+    const { menu } = useContent()
+    const loc = useLocation()

-  const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
-  if (breadcrumbs.length === 0) {
-    return null;
-  }
-
-  return (
-    <nav class="breadcrumbs">
-      {breadcrumbs.map((b) => (
-        <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
-      ))}
-    </nav>
-  );
-});
-
-export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
-  if (menu?.items) {
-    for (const indexA of menu.items) {
-      const breadcrumbA: ContentBreadcrumb = {
-        text: indexA.text,
-      };
-      if (typeof indexA.href === 'string') {
-        breadcrumbA.href = indexA.href;
-      }
-      if (indexA.href === pathname) {
-        return [breadcrumbA];
-      }
-
-      if (indexA.items) {
-        for (const indexB of indexA.items) {
-          const breadcrumbB: ContentBreadcrumb = {
-            text: indexB.text,
-          };
-          if (typeof indexB.href === 'string') {
-            breadcrumbB.href = indexB.href;
-          }
-          if (indexB.href === pathname) {
-            return [breadcrumbA, breadcrumbB];
-          }
-
-          if (indexB.items) {
-            for (const indexC of indexB.items) {
-              const breadcrumbC: ContentBreadcrumb = {
-                text: indexC.text,
-              };
-              if (typeof indexC.href === 'string') {
-                breadcrumbC.href = indexC.href;
-              }
-              if (indexC.href === pathname) {
-                return [breadcrumbA, breadcrumbB, breadcrumbC];
-              }
-            }
-          }
-        }
-      }
+    const breadcrumbs = createBreadcrumbs(menu, loc.pathname)
+    if (breadcrumbs.length === 0) {
+        return null
    }
-  }

-  return [];
+    return (
+        <nav class="breadcrumbs">
+            {breadcrumbs.map((b) => (
+                <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
+            ))}
+        </nav>
+    )
+})
+
+export function createBreadcrumbs(
+    menu: ContentMenu | undefined,
+    pathname: string
+) {
+    if (menu?.items) {
+        for (const indexA of menu.items) {
+            const breadcrumbA: ContentBreadcrumb = {
+                text: indexA.text,
+            }
+            if (typeof indexA.href === 'string') {
+                breadcrumbA.href = indexA.href
+            }
+            if (indexA.href === pathname) {
+                return [breadcrumbA]
+            }
+
+            if (indexA.items) {
+                for (const indexB of indexA.items) {
+                    const breadcrumbB: ContentBreadcrumb = {
+                        text: indexB.text,
+                    }
+                    if (typeof indexB.href === 'string') {
+                        breadcrumbB.href = indexB.href
+                    }
+                    if (indexB.href === pathname) {
+                        return [breadcrumbA, breadcrumbB]
+                    }
+
+                    if (indexB.items) {
+                        for (const indexC of indexB.items) {
+                            const breadcrumbC: ContentBreadcrumb = {
+                                text: indexC.text,
+                            }
+                            if (typeof indexC.href === 'string') {
+                                breadcrumbC.href = indexC.href
+                            }
+                            if (indexC.href === pathname) {
+                                return [breadcrumbA, breadcrumbB, breadcrumbC]
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    return []
 }

 interface ContentBreadcrumb {
-  text: string;
-  href?: string;
+    text: string
+    href?: string
 }
--- a/packages/docs/src/components/footer/footer.css
+++ b/packages/docs/src/components/footer/footer.css
@@ -1,22 +1,22 @@
 footer {
-  border-top: 0.5px solid #ddd;
-  margin-top: 40px;
-  padding: 20px;
-  text-align: center;
+    border-top: 0.5px solid #ddd;
+    margin-top: 40px;
+    padding: 20px;
+    text-align: center;
 }

 footer a {
-  color: #9e9e9e;
-  font-size: 12px;
+    color: #9e9e9e;
+    font-size: 12px;
 }

 footer ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }

 footer li {
-  display: inline-block;
-  padding: 6px 12px;
+    display: inline-block;
+    padding: 6px 12px;
 }
--- a/packages/docs/src/components/footer/footer.tsx
+++ b/packages/docs/src/components/footer/footer.tsx
@@ -1,36 +1,40 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './footer.css?inline';
+import { component$, useStyles$ } from '@builder.io/qwik'
+import styles from './footer.css?inline'

 export default component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  return (
-    <footer>
-      <ul>
-        <li>
-          <a href="/docs">Docs</a>
-        </li>
-        <li>
-          <a href="/about-us">About Us</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/">Qwik</a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev">Twitter</a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik">GitHub</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat">Chat</a>
-        </li>
-      </ul>
-      <div>
-        <a href="https://www.builder.io/" target="_blank" class="builder">
-          Made with ♡ by Builder.io
-        </a>
-      </div>
-    </footer>
-  );
-});
+    return (
+        <footer>
+            <ul>
+                <li>
+                    <a href="/docs">Docs</a>
+                </li>
+                <li>
+                    <a href="/about-us">About Us</a>
+                </li>
+                <li>
+                    <a href="https://qwik.builder.io/">Qwik</a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/QwikDev">Twitter</a>
+                </li>
+                <li>
+                    <a href="https://github.com/BuilderIO/qwik">GitHub</a>
+                </li>
+                <li>
+                    <a href="https://qwik.builder.io/chat">Chat</a>
+                </li>
+            </ul>
+            <div>
+                <a
+                    href="https://www.builder.io/"
+                    target="_blank"
+                    class="builder"
+                >
+                    Made with ♡ by Builder.io
+                </a>
+            </div>
+        </footer>
+    )
+})
--- a/packages/docs/src/components/header/header.css
+++ b/packages/docs/src/components/header/header.css
@@ -1,34 +1,34 @@
 header {
-  position: sticky;
-  top: 0;
-  z-index: 11;
-  display: grid;
-  grid-template-columns: minmax(130px, auto) 1fr;
-  gap: 30px;
-  height: 80px;
-  width: 100%;
-  padding: 10px;
-  background-color: white;
-  overflow: hidden;
+    position: sticky;
+    top: 0;
+    z-index: 11;
+    display: grid;
+    grid-template-columns: minmax(130px, auto) 1fr;
+    gap: 30px;
+    height: 80px;
+    width: 100%;
+    padding: 10px;
+    background-color: white;
+    overflow: hidden;
 }

 header a.logo {
-  display: block;
+    display: block;
 }

 header a {
-  text-decoration: none;
+    text-decoration: none;
 }

 header nav {
-  text-align: right;
+    text-align: right;
 }

 header nav a {
-  display: inline-block;
-  padding: 5px 15px;
+    display: inline-block;
+    padding: 5px 15px;
 }

 header nav a:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,26 +1,32 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
-import { QwikLogo } from '../icons/qwik';
-import styles from './header.css?inline';
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+import { QwikLogo } from '../icons/qwik'
+import styles from './header.css?inline'

 export default component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  const { pathname } = useLocation();
+    const { pathname } = useLocation()

-  return (
-    <header>
-      <a class="logo" href="/">
-        <QwikLogo />
-      </a>
-      <nav>
-        <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
-          Docs
-        </a>
-        <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
-          About Us
-        </a>
-      </nav>
-    </header>
-  );
-});
+    return (
+        <header>
+            <a class="logo" href="/">
+                <QwikLogo />
+            </a>
+            <nav>
+                <a
+                    href="/docs"
+                    class={{ active: pathname.startsWith('/docs') }}
+                >
+                    Docs
+                </a>
+                <a
+                    href="/about-us"
+                    class={{ active: pathname.startsWith('/about-us') }}
+                >
+                    About Us
+                </a>
+            </nav>
+        </header>
+    )
+})
--- a/packages/docs/src/components/icons/qwik.tsx
+++ b/packages/docs/src/components/icons/qwik.tsx
@@ -1,20 +1,20 @@
 export const QwikLogo = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 167 53">
-    <path
-      fill="#000"
-      d="M81.95 46.59h-6.4V35.4a12.25 12.25 0 0 1-7.06 2.17c-3.47 0-6.06-.94-7.67-2.92-1.6-1.96-2.42-5.45-2.42-10.43 0-5.1.95-8.62 2.87-10.67 1.96-2.08 5.1-3.09 9.43-3.09 4.1 0 7.82.57 11.25 1.67V46.6Zm-6.4-30.31a16.6 16.6 0 0 0-4.85-.66c-2.17 0-3.73.56-4.6 1.7-.85 1.17-1.32 3.38-1.32 6.65 0 3.08.41 5.14 1.26 6.26.86 1.1 2.33 1.67 4.5 1.67 2.84 0 5.01-1.17 5.01-2.62v-13Zm15.58-5.14c2.27 6.3 4.2 12.6 5.86 18.95 2.22-6.5 4.1-12.8 5.55-18.95h5.61a187.5 187.5 0 0 1 5.3 18.95c2.52-6.9 4.5-13.21 5.95-18.95h6.31a285.68 285.68 0 0 1-8.92 25.76h-7.53c-.86-4.6-2.22-10.14-4.04-16.75a151.51 151.51 0 0 1-4.89 16.75H92.8a287.88 287.88 0 0 0-8.17-25.76h6.5Zm41.7-3.58c-2.83 0-3.63-.7-3.63-3.59 0-2.57.82-3.18 3.63-3.18 2.83 0 3.63.6 3.63 3.18 0 2.89-.8 3.59-3.63 3.59Zm-3.18 3.58h6.4V36.9h-6.4V11.14Zm36.65 0c-4.54 6.46-7.72 10.39-9.49 11.8 1.46.95 5.36 5.95 10.2 13.98h-7.38c-6.02-9.13-8.89-13.07-10.3-13.67v13.67h-6.4V0h6.4v23.23c1.45-1.06 4.63-5.1 9.54-12.09h7.43Z"
-    />
-    <path
-      fill="#18B6F6"
-      d="M40.97 52.54 32.1 43.7l-.14.02v-.1l-18.9-18.66 4.66-4.5-2.74-15.7L2 20.87a7.14 7.14 0 0 0-1.03 8.52l8.11 13.45a6.81 6.81 0 0 0 5.92 3.3l4.02-.05 21.96 6.46Z"
-    />
-    <path
-      fill="#AC7EF4"
-      d="m45.82 20.54-1.78-3.3-.93-1.68-.37-.66-.04.04-4.9-8.47a6.85 6.85 0 0 0-5.99-3.43l-4.28.12-12.8.04a6.85 6.85 0 0 0-5.85 3.37L1.1 21.99 15 4.73l18.24 20.04L30 28.04l1.94 15.68.02-.04v.04h-.04l.04.04 1.51 1.47 7.36 7.19c.3.29.81-.06.6-.43l-4.54-8.93 7.91-14.63.26-.3a6.73 6.73 0 0 0 .76-7.6Z"
-    />
-    <path
-      fill="#fff"
-      d="M33.3 24.69 15.02 4.75l2.6 15.62-4.66 4.51L31.91 43.7l-1.7-15.62 3.1-3.4Z"
-    />
-  </svg>
-);
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 167 53">
+        <path
+            fill="#000"
+            d="M81.95 46.59h-6.4V35.4a12.25 12.25 0 0 1-7.06 2.17c-3.47 0-6.06-.94-7.67-2.92-1.6-1.96-2.42-5.45-2.42-10.43 0-5.1.95-8.62 2.87-10.67 1.96-2.08 5.1-3.09 9.43-3.09 4.1 0 7.82.57 11.25 1.67V46.6Zm-6.4-30.31a16.6 16.6 0 0 0-4.85-.66c-2.17 0-3.73.56-4.6 1.7-.85 1.17-1.32 3.38-1.32 6.65 0 3.08.41 5.14 1.26 6.26.86 1.1 2.33 1.67 4.5 1.67 2.84 0 5.01-1.17 5.01-2.62v-13Zm15.58-5.14c2.27 6.3 4.2 12.6 5.86 18.95 2.22-6.5 4.1-12.8 5.55-18.95h5.61a187.5 187.5 0 0 1 5.3 18.95c2.52-6.9 4.5-13.21 5.95-18.95h6.31a285.68 285.68 0 0 1-8.92 25.76h-7.53c-.86-4.6-2.22-10.14-4.04-16.75a151.51 151.51 0 0 1-4.89 16.75H92.8a287.88 287.88 0 0 0-8.17-25.76h6.5Zm41.7-3.58c-2.83 0-3.63-.7-3.63-3.59 0-2.57.82-3.18 3.63-3.18 2.83 0 3.63.6 3.63 3.18 0 2.89-.8 3.59-3.63 3.59Zm-3.18 3.58h6.4V36.9h-6.4V11.14Zm36.65 0c-4.54 6.46-7.72 10.39-9.49 11.8 1.46.95 5.36 5.95 10.2 13.98h-7.38c-6.02-9.13-8.89-13.07-10.3-13.67v13.67h-6.4V0h6.4v23.23c1.45-1.06 4.63-5.1 9.54-12.09h7.43Z"
+        />
+        <path
+            fill="#18B6F6"
+            d="M40.97 52.54 32.1 43.7l-.14.02v-.1l-18.9-18.66 4.66-4.5-2.74-15.7L2 20.87a7.14 7.14 0 0 0-1.03 8.52l8.11 13.45a6.81 6.81 0 0 0 5.92 3.3l4.02-.05 21.96 6.46Z"
+        />
+        <path
+            fill="#AC7EF4"
+            d="m45.82 20.54-1.78-3.3-.93-1.68-.37-.66-.04.04-4.9-8.47a6.85 6.85 0 0 0-5.99-3.43l-4.28.12-12.8.04a6.85 6.85 0 0 0-5.85 3.37L1.1 21.99 15 4.73l18.24 20.04L30 28.04l1.94 15.68.02-.04v.04h-.04l.04.04 1.51 1.47 7.36 7.19c.3.29.81-.06.6-.43l-4.54-8.93 7.91-14.63.26-.3a6.73 6.73 0 0 0 .76-7.6Z"
+        />
+        <path
+            fill="#fff"
+            d="M33.3 24.69 15.02 4.75l2.6 15.62-4.66 4.51L31.91 43.7l-1.7-15.62 3.1-3.4Z"
+        />
+    </svg>
+)
--- a/packages/docs/src/components/menu/menu.css
+++ b/packages/docs/src/components/menu/menu.css
@@ -1,13 +1,13 @@
 .menu {
-  background: #eee;
-  padding: 20px 10px;
+    background: #eee;
+    padding: 20px 10px;
 }

 .menu h5 {
-  margin: 0;
+    margin: 0;
 }

 .menu ul {
-  padding-left: 20px;
-  margin: 5px 0 25px 0;
+    padding-left: 20px;
+    margin: 5px 0 25px 0;
 }
--- a/packages/docs/src/components/menu/menu.tsx
+++ b/packages/docs/src/components/menu/menu.tsx
@@ -1,36 +1,37 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, Link, useLocation } from '@builder.io/qwik-city';
-import styles from './menu.css?inline';
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { useContent, Link, useLocation } from '@builder.io/qwik-city'
+import styles from './menu.css?inline'

 export default component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  const { menu } = useContent();
-  const loc = useLocation();
+    const { menu } = useContent()
+    const loc = useLocation()

-  return (
-    <aside class="menu">
-      {menu
-        ? menu.items?.map((item) => (
-            <>
-              <h5>{item.text}</h5>
-              <ul>
-                {item.items?.map((item) => (
-                  <li>
-                    <Link
-                      href={item.href}
-                      class={{
-                        'is-active': loc.pathname === item.href,
-                      }}
-                    >
-                      {item.text}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </>
-          ))
-        : null}
-    </aside>
-  );
-});
+    return (
+        <aside class="menu">
+            {menu
+                ? menu.items?.map((item) => (
+                      <>
+                          <h5>{item.text}</h5>
+                          <ul>
+                              {item.items?.map((item) => (
+                                  <li>
+                                      <Link
+                                          href={item.href}
+                                          class={{
+                                              'is-active':
+                                                  loc.pathname === item.href,
+                                          }}
+                                      >
+                                          {item.text}
+                                      </Link>
+                                  </li>
+                              ))}
+                          </ul>
+                      </>
+                  ))
+                : null}
+        </aside>
+    )
+})
--- a/packages/docs/src/components/on-this-page/on-this-page.css
+++ b/packages/docs/src/components/on-this-page/on-this-page.css
@@ -1,33 +1,33 @@
 .on-this-page {
-  padding-bottom: 20px;
-  font-size: 0.9em;
+    padding-bottom: 20px;
+    font-size: 0.9em;
 }

 .on-this-page h6 {
-  margin: 10px 0;
-  font-weight: bold;
-  text-transform: uppercase;
+    margin: 10px 0;
+    font-weight: bold;
+    text-transform: uppercase;
 }

 .on-this-page ul {
-  margin: 0;
-  padding: 0 0 20px 0;
-  list-style: none;
+    margin: 0;
+    padding: 0 0 20px 0;
+    list-style: none;
 }

 .on-this-page a {
-  position: relative;
-  display: block;
-  border: 0 solid #ddd;
-  border-left-width: 2px;
-  padding: 4px 2px 4px 8px;
-  text-decoration: none;
+    position: relative;
+    display: block;
+    border: 0 solid #ddd;
+    border-left-width: 2px;
+    padding: 4px 2px 4px 8px;
+    text-decoration: none;
 }

 .on-this-page a.indent {
-  padding-left: 30px;
+    padding-left: 30px;
 }

 .on-this-page a:hover {
-  border-color: var(--theme-accent);
+    border-color: var(--theme-accent);
 }
--- a/packages/docs/src/components/on-this-page/on-this-page.tsx
+++ b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -1,62 +1,63 @@
-import { useContent, useLocation } from '@builder.io/qwik-city';
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './on-this-page.css?inline';
+import { useContent, useLocation } from '@builder.io/qwik-city'
+import { component$, useStyles$ } from '@builder.io/qwik'
+import styles from './on-this-page.css?inline'

 export default component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  const { headings } = useContent();
-  const contentHeadings = headings?.filter((h) => h.level === 2 || h.level === 3) || [];
+    const { headings } = useContent()
+    const contentHeadings =
+        headings?.filter((h) => h.level === 2 || h.level === 3) || []

-  const { pathname } = useLocation();
-  const editUrl = `#update-your-edit-url-for-${pathname}`;
+    const { pathname } = useLocation()
+    const editUrl = `#update-your-edit-url-for-${pathname}`

-  return (
-    <aside class="on-this-page">
-      {contentHeadings.length > 0 ? (
-        <>
-          <h6>On This Page</h6>
-          <ul>
-            {contentHeadings.map((h) => (
-              <li>
-                <a
-                  href={`#${h.id}`}
-                  class={{
-                    block: true,
-                    indent: h.level > 2,
-                  }}
-                >
-                  {h.text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : null}
+    return (
+        <aside class="on-this-page">
+            {contentHeadings.length > 0 ? (
+                <>
+                    <h6>On This Page</h6>
+                    <ul>
+                        {contentHeadings.map((h) => (
+                            <li>
+                                <a
+                                    href={`#${h.id}`}
+                                    class={{
+                                        block: true,
+                                        indent: h.level > 2,
+                                    }}
+                                >
+                                    {h.text}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </>
+            ) : null}

-      <h6>More</h6>
-      <ul>
-        <li>
-          <a href={editUrl} target="_blank">
-            Edit this page
-          </a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat" target="_blank">
-            Join our community
-          </a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik" target="_blank">
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev" target="_blank">
-            @QwikDev
-          </a>
-        </li>
-      </ul>
-    </aside>
-  );
-});
+            <h6>More</h6>
+            <ul>
+                <li>
+                    <a href={editUrl} target="_blank">
+                        Edit this page
+                    </a>
+                </li>
+                <li>
+                    <a href="https://qwik.builder.io/chat" target="_blank">
+                        Join our community
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/BuilderIO/qwik" target="_blank">
+                        GitHub
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/QwikDev" target="_blank">
+                        @QwikDev
+                    </a>
+                </li>
+            </ul>
+        </aside>
+    )
+})
--- a/packages/docs/src/components/router-head/router-head.tsx
+++ b/packages/docs/src/components/router-head/router-head.tsx
@@ -1,32 +1,35 @@
-import { component$ } from '@builder.io/qwik';
-import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { component$ } from '@builder.io/qwik'
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city'

 /**
 * The RouterHead component is placed inside of the document `<head>` element.
 */
 export const RouterHead = component$(() => {
-  const head = useDocumentHead();
-  const loc = useLocation();
+    const head = useDocumentHead()
+    const loc = useLocation()

-  return (
-    <>
-      <title>{head.title}</title>
+    return (
+        <>
+            <title>{head.title}</title>

-      <link rel="canonical" href={loc.href} />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+            <link rel="canonical" href={loc.href} />
+            <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1.0"
+            />
+            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

-      {head.meta.map((m) => (
-        <meta {...m} />
-      ))}
+            {head.meta.map((m) => (
+                <meta {...m} />
+            ))}

-      {head.links.map((l) => (
-        <link {...l} />
-      ))}
+            {head.links.map((l) => (
+                <link {...l} />
+            ))}

-      {head.styles.map((s) => (
-        <style {...s.props} dangerouslySetInnerHTML={s.style} />
-      ))}
-    </>
-  );
-});
+            {head.styles.map((s) => (
+                <style {...s.props} dangerouslySetInnerHTML={s.style} />
+            ))}
+        </>
+    )
+})
--- a/packages/docs/src/entry.cloudflare-pages.tsx
+++ b/packages/docs/src/entry.cloudflare-pages.tsx
@@ -7,10 +7,10 @@
 * - https://qwik.builder.io/qwikcity/adaptors/cloudflare-pages/
 *
 */
-import { createQwikCity } from '@builder.io/qwik-city/middleware/cloudflare-pages';
-import qwikCityPlan from '@qwik-city-plan';
-import render from './entry.ssr';
+import { createQwikCity } from '@builder.io/qwik-city/middleware/cloudflare-pages'
+import qwikCityPlan from '@qwik-city-plan'
+import render from './entry.ssr'

-const onRequest = createQwikCity({ render, qwikCityPlan });
+const onRequest = createQwikCity({ render, qwikCityPlan })

-export { onRequest };
+export { onRequest }
--- a/packages/docs/src/entry.dev.tsx
+++ b/packages/docs/src/entry.dev.tsx
@@ -9,9 +9,9 @@
 * - More code is transferred to the browser than in SSR mode.
 * - Optimizer/Serialization/Deserialization code is not exercised!
 */
-import { render, RenderOptions } from '@builder.io/qwik';
-import Root from './root';
+import { render, RenderOptions } from '@builder.io/qwik'
+import Root from './root'

 export default function (opts: RenderOptions) {
-  return render(document, <Root />, opts);
+    return render(document, <Root />, opts)
 }
--- a/packages/docs/src/entry.preview.tsx
+++ b/packages/docs/src/entry.preview.tsx
@@ -10,11 +10,11 @@
 * - https://vitejs.dev/config/preview-options.html#preview-options
 *
 */
-import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
-import render from './entry.ssr';
-import qwikCityPlan from '@qwik-city-plan';
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node'
+import render from './entry.ssr'
+import qwikCityPlan from '@qwik-city-plan'

 /**
 * The default export is the QwikCity adaptor used by Vite preview.
 */
-export default createQwikCity({ render, qwikCityPlan });
+export default createQwikCity({ render, qwikCityPlan })
--- a/packages/docs/src/entry.ssr.tsx
+++ b/packages/docs/src/entry.ssr.tsx
@@ -10,18 +10,18 @@
 * - npm run build
 *
 */
-import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
-import { manifest } from '@qwik-client-manifest';
-import Root from './root';
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server'
+import { manifest } from '@qwik-client-manifest'
+import Root from './root'

 export default function (opts: RenderToStreamOptions) {
-  return renderToStream(<Root />, {
-    manifest,
-    ...opts,
-    // Use container attributes to set attributes on the html tag.
-    containerAttributes: {
-      lang: 'en-us',
-      ...opts.containerAttributes,
-    },
-  });
+    return renderToStream(<Root />, {
+        manifest,
+        ...opts,
+        // Use container attributes to set attributes on the html tag.
+        containerAttributes: {
+            lang: 'en-us',
+            ...opts.containerAttributes,
+        },
+    })
 }
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -1,66 +1,67 @@
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }

 :root {
-  --user-font-scale: 1rem - 16px;
-  --max-width: calc(100% - 1rem);
+    --user-font-scale: 1rem - 16px;
+    --max-width: calc(100% - 1rem);

-  --font-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-    Apple Color Emoji, Segoe UI Emoji;
-  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
-    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
-    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+    --font-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono',
+        'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
+        'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
+        'Courier New', Courier, monospace;

-  color-scheme: light;
-  --theme-accent: #006ce9;
-  --theme-text: #181818;
+    color-scheme: light;
+    --theme-accent: #006ce9;
+    --theme-text: #181818;
 }

@media (min-width: 50em) {
-  :root {
-    --max-width: 46em;
-  }
+    :root {
+        --max-width: 46em;
+    }
 }

 body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  font-family: var(--font-body);
-  font-size: 1rem;
-  font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
-  line-height: 1.5;
-  max-width: 100vw;
-  background: var(--theme-bg);
-  color: var(--theme-text);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+    line-height: 1.5;
+    max-width: 100vw;
+    background: var(--theme-bg);
+    color: var(--theme-text);
 }

 main {
-  padding: 10px 20px;
-  max-width: 960px;
-  margin: 0 auto;
+    padding: 10px 20px;
+    max-width: 960px;
+    margin: 0 auto;
 }

 a {
-  color: var(--theme-accent);
+    color: var(--theme-accent);
 }

 a:hover {
-  text-decoration: none;
+    text-decoration: none;
 }

 code,
 kbd,
 samp,
 pre {
-  font-family: var(--font-mono);
+    font-family: var(--font-mono);
 }

 code {
-  background-color: rgb(224, 224, 224);
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 0.9em;
-  border-bottom: 2px solid #bfbfbf;
-}
+    background-color: rgb(224, 224, 224);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 0.9em;
+    border-bottom: 2px solid #bfbfbf;
+}
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -1,26 +1,30 @@
-import { component$ } from '@builder.io/qwik';
-import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
-import { RouterHead } from './components/router-head/router-head';
+import { component$ } from '@builder.io/qwik'
+import {
+    QwikCityProvider,
+    RouterOutlet,
+    ServiceWorkerRegister,
+} from '@builder.io/qwik-city'
+import { RouterHead } from './components/router-head/router-head'

-import './global.css';
+import './global.css'

 export default component$(() => {
-  /*
-   * The root of a QwikCity site always start with the <QwikCityProvider> component,
-   * immediately followed by the document's <head> and <body>.
-   *
-   * Dont remove the `<head>` and `<body>` elements.
-   */
-  return (
-    <QwikCityProvider>
-      <head>
-        <meta charSet="utf-8" />
-        <RouterHead />
-      </head>
-      <body lang="en">
-        <RouterOutlet />
-        <ServiceWorkerRegister />
-      </body>
-    </QwikCityProvider>
-  );
-});
+    /*
+     * The root of a QwikCity site always start with the <QwikCityProvider> component,
+     * immediately followed by the document's <head> and <body>.
+     *
+     * Dont remove the `<head>` and `<body>` elements.
+     */
+    return (
+        <QwikCityProvider>
+            <head>
+                <meta charSet="utf-8" />
+                <RouterHead />
+            </head>
+            <body lang="en">
+                <RouterOutlet />
+                <ServiceWorkerRegister />
+            </body>
+        </QwikCityProvider>
+    )
+})
--- a/packages/docs/src/routes/docs/docs.css
+++ b/packages/docs/src/routes/docs/docs.css
@@ -1,22 +1,22 @@
 .docs {
-  display: grid;
-  grid-template-columns: 210px auto 190px;
-  grid-template-areas: 'menu article on-this-page';
-  gap: 40px;
+    display: grid;
+    grid-template-columns: 210px auto 190px;
+    grid-template-areas: 'menu article on-this-page';
+    gap: 40px;
 }

 .docs h1 {
-  margin-top: 0;
+    margin-top: 0;
 }

 .docs .menu {
-  grid-area: menu;
+    grid-area: menu;
 }

 .docs article {
-  grid-area: article;
+    grid-area: article;
 }

 .docs .on-this-page {
-  grid-area: on-this-page;
+    grid-area: on-this-page;
 }
--- a/packages/docs/src/routes/docs/layout.tsx
+++ b/packages/docs/src/routes/docs/layout.tsx
@@ -1,25 +1,25 @@
-import { component$, Slot, useStyles$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-import Menu from '~/components/menu/menu';
-import OnThisPage from '~/components/on-this-page/on-this-page';
-import styles from './docs.css?inline';
+import { component$, Slot, useStyles$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+import Menu from '~/components/menu/menu'
+import OnThisPage from '~/components/on-this-page/on-this-page'
+import styles from './docs.css?inline'

 export default component$(() => {
-  useStyles$(styles);
+    useStyles$(styles)

-  return (
-    <div class="docs">
-      <Menu />
-      <article>
-        <Slot />
-      </article>
-      <OnThisPage />
-    </div>
-  );
-});
+    return (
+        <div class="docs">
+            <Menu />
+            <article>
+                <Slot />
+            </article>
+            <OnThisPage />
+        </div>
+    )
+})

 export const head: DocumentHead = ({ head }) => {
-  return {
-    title: `${head.title} - Documentation`,
-  };
-};
+    return {
+        title: `${head.title} - Documentation`,
+    }
+}
--- a/packages/docs/src/routes/index.tsx
+++ b/packages/docs/src/routes/index.tsx
@@ -4,143 +4,228 @@ import type { DocumentHead } from '@builder.io/qwik-city'
 export default component$(() => {
    return (
        <>
-            <h1>Welcome to BotWhatsapp Docs Starter</h1>
+            <h1>Bienvenido</h1>

+            <p>
+                Un robot (bot) de Whatsapp es un programa que reconoce palabras
+                clave en los mensajes que entran, y contesta con respuestas
+                pre-programadas, facilitando así el dar información a posibles
+                clientes desde tu cuenta de Whatsapp automáticamente.
+            </p>
+            <p>
+                Este bot esta programado en Javascript y usa NodeJS y es{' '}
+                <a href="https://www.redhat.com/es/topics/open-source/what-is-open-source">
+                    Open Source
+                </a>
+                .
+            </p>
+            <p>
+                Está programado de tal forma que se pueden usar varias librerías
+                (hasta ahora whatsapp-web.js, twilio y Venom) y se puden agregar
+                más.
+            </p>
+            <p>
+                Si se quere cambiar la librería que se está usando, esto se
+                puede hacer con solo cambiar unas lineas en el código.
+            </p>
+
+            <table border>
+                <thead>
+                    <tr>
+                        <th>Características</th>
+                        <th>Estatus</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Menus y Submenus</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Dialogflow</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>MySQL</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>JSON File</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>QR Scan (route)</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Easy deploy heroku</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Buttons</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="information_source"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2139.png"
+                            >
+                                ℹ️
+                            </g-emoji>{' '}
+                            (No funciona en multi-device)
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Send Voice Note</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Add support ubuntu/linux</td>
+                        <td>
+                            <g-emoji
+                                class="g-emoji"
+                                alias="white_check_mark"
+                                fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                            >
+                                ✅
+                            </g-emoji>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <h2>Requisitos</h2>
            <ul>
-                <li>This homepage uses a layout without a menu.</li>
+                <li>Node v14 o superior</li>
                <li>
-                    <span>The </span>
-                    <a href="/docs">Documentation</a>
-                    <span>
-                        {' '}
-                        pages use multiple nested layouts, one of them providing
-                        a left menu.
-                    </span>
+                    VSCode (Editor de codigo){' '}
+                    <a
+                        href="https://code.visualstudio.com/download"
+                        rel="nofollow"
+                    >
+                        Descargar
+                    </a>
                </li>
                <li>
-                    Check out the <code>src/routes</code> directory to get
-                    started.
+                    MySql (opcional) solo aplica si vas a usar el modo 'mysql'{' '}
+                    <a href="https://github.com/leifermendez/bot-whatsapp/blob/main/sql-bot.sql">
+                        sql-bot.sql migración
+                    </a>
                </li>
                <li>
-                    Add integrations with <code>npm run qwik add</code>.
-                </li>
-                <li>
-                    More info about development in <code>README.md</code>
-                </li>
-                <li>
-                    <a href="/docs">Qwik City</a>
-                    <span> is the meta-framework for Qwik</span>
+                    Dialogflow (opcional) solo aplica si vas a usar el modo
+                    'dialogflow'
                </li>
            </ul>

-            <h2>Commands</h2>
-
-            <table class="commands">
-                <tr>
-                    <td>
-                        <code>npm run dev</code>
-                    </td>
-                    <td>Start the dev server and watch for changes.</td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run preview</code>
-                    </td>
-                    <td>Production build and start preview server.</td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run build</code>
-                    </td>
-                    <td>Production build.</td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run qwik add</code>
-                    </td>
-                    <td>Select an integration to add.</td>
-                </tr>
-            </table>
-
-            <h2>Add Integrations</h2>
-
-            <table class="commands">
-                <tr>
-                    <td>
-                        <code>npm run qwik add cloudflare-pages</code>
-                    </td>
-                    <td>
-                        <a
-                            href="https://developers.cloudflare.com/pages"
-                            target="_blank"
-                        >
-                            Cloudflare Pages Server
-                        </a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run qwik add express</code>
-                    </td>
-                    <td>
-                        <a href="https://expressjs.com/" target="_blank">
-                            Nodejs Express Server
-                        </a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run qwik add netlify-edge</code>
-                    </td>
-                    <td>
-                        <a href="https://docs.netlify.com/" target="_blank">
-                            Netlify Edge Functions
-                        </a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <code>npm run qwik add static</code>
-                    </td>
-                    <td>
-                        <a
-                            href="https://qwik.builder.io/qwikcity/static-site-generation/overview/"
-                            target="_blank"
-                        >
-                            Static Site Generation (SSG)
-                        </a>
-                    </td>
-                </tr>
-            </table>
-
-            <h2>Community</h2>
-
+            <h2>Instalación</h2>
            <ul>
                <li>
-                    <span>Questions or just want to say hi? </span>
-                    <a href="https://qwik.builder.io/chat" target="_blank">
-                        Chat on discord!
-                    </a>
+                    Abre VSCode y muevete al directorio en donde queres insralar
+                    el bot.
+                </li>
+                <li>Ejecuta este comando: npm create bot-whatsapp@latest</li>
+                <li>Contesta que SI queres crear un bot nuevo (Y)</li>
+                <li>
+                    Selecciona con las flechas (arriba y abajo) la librería que
+                    quieres usar para el bot, cuando estes sobre la opción que
+                    quieres, oprime la barra de espacio y luego la tecla "Enter"
                </li>
                <li>
-                    <span>Follow </span>
-                    <a href="https://twitter.com/QwikDev" target="_blank">
-                        @QwikDev
-                    </a>
-                    <span> on Twitter</span>
+                    De igual forma selecciona la base de daros que quieres usar.
                </li>
                <li>
-                    <span>Open issues and contribute on </span>
-                    <a href="https://github.com/BuilderIO/qwik" target="_blank">
-                        GitHub
-                    </a>
+                    Cambiate al directorio que se creo dependiendo de la base de
+                    datos que hayas seleccionado, si seleccionaste "Memory"
+                    sería "cd base-wweb-memory"
                </li>
                <li>
-                    <span>Watch </span>
-                    <a href="https://qwik.builder.io/media/" target="_blank">
-                        Presentations, Podcasts, Videos, etc.
-                    </a>
+                    Ya estando en el nuevo subdirectorio, ejecuta el comando
+                    "npm install" y espera a que se instalen las dependencias.
                </li>
+                <li>
+                    Una vez que termine la instalación ejecuta el comando "npm
+                    start"y espera a que te mande el mensaje de que necesitas
+                    escanear el código QR, para esto ve al directorio en el que
+                    se instaló y busca el archivo "qr.svg" y abrelo, te debe de
+                    mostrsr un código QR que tienes que escanear en el Whatsapp
+                    que quieres ligar con el bot, para esto ve a tu Whatsapp,
+                    haz clic en los tres botones de arriba a la derecha y entra
+                    en "Linked devices", y luego en el botón que dice "LINK
+                    DEVICE", esto va a abrir la camara para que escanes el
+                    código.
+                </li>
+                <li>
+                    Una vez ligado el Whatsapp vas a ver el mensaje de
+                    "Proveedor conectado y listo".
+                </li>
+                <li>
+                    Desde OTRO celular mandas un mensaje al numero del Whatsapp
+                    que acabas de ligar al bot con la palabra "Hola" y LISTO.
+                </li>
+                <li>Debes de recibir una respuesta automática del bot.</li>
            </ul>
        </>
    )
--- a/packages/docs/src/routes/layout.tsx
+++ b/packages/docs/src/routes/layout.tsx
@@ -1,15 +1,15 @@
-import { component$, Slot } from '@builder.io/qwik';
-import Footer from '~/components/footer/footer';
-import Header from '~/components/header/header';
+import { component$, Slot } from '@builder.io/qwik'
+import Footer from '~/components/footer/footer'
+import Header from '~/components/header/header'

 export default component$(() => {
-  return (
-    <>
-      <Header />
-      <main>
-        <Slot />
-      </main>
-      <Footer />
-    </>
-  );
-});
+    return (
+        <>
+            <Header />
+            <main>
+                <Slot />
+            </main>
+            <Footer />
+        </>
+    )
+})
--- a/packages/docs/src/routes/service-worker.ts
+++ b/packages/docs/src/routes/service-worker.ts
@@ -7,12 +7,12 @@
 * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
 * You can also use this file to add more functionality that runs in the service worker.
 */
-import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'

-setupServiceWorker();
+setupServiceWorker()

-addEventListener('install', () => self.skipWaiting());
+addEventListener('install', () => self.skipWaiting())

-addEventListener('activate', () => self.clients.claim());
+addEventListener('activate', () => self.clients.claim())

-declare const self: ServiceWorkerGlobalScope;
+declare const self: ServiceWorkerGlobalScope
--- a/packages/docs/tailwind.config.js
+++ b/packages/docs/tailwind.config.js
@@ -1,21 +1,21 @@
 /** @type {import('tailwindcss').Config} */

-const defaultTheme = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");
+const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')

 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-  theme: {
-    extend: {
-      colors: {
-        primary: colors.purple,
-        secondary: colors.sky,
-      },
-      fontFamily: {
-        sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
-      },
+    content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+    theme: {
+        extend: {
+            colors: {
+                primary: colors.purple,
+                secondary: colors.sky,
+            },
+            fontFamily: {
+                sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
+            },
+        },
    },
-  },
-  plugins: [],
-  darkMode: "class",
-};
+    plugins: [],
+    darkMode: 'class',
+}
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -1,15 +1,15 @@
-import { defineConfig } from 'vite';
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { qwikCity } from '@builder.io/qwik-city/vite'
+import tsconfigPaths from 'vite-tsconfig-paths'

 export default defineConfig(() => {
-  return {
-    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
-    preview: {
-      headers: {
-        'Cache-Control': 'public, max-age=600',
-      },
-    },
-  };
-});
+    return {
+        plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
+        preview: {
+            headers: {
+                'Cache-Control': 'public, max-age=600',
+            },
+        },
+    }
+})
--- a/packages/provider/package.json
+++ b/packages/provider/package.json
@@ -1,12 +1,14 @@
 {
    "name": "@bot-whatsapp/provider",
-    "version": "0.0.1",
+    "version": "0.0.27-alpha.0",
    "description": "Esto es el conector a Twilio, Meta, etc...",
    "main": "./lib/mock/index.cjs",
-    "private": true,
    "keywords": [],
    "author": "",
    "license": "ISC",
+    "files": [
+        "./lib/"
+    ],
    "dependencies": {
        "@bot-whatsapp/bot": "*",
        "qr-image": "^3.2.0"
@@ -15,6 +17,8 @@
        "./mock": "./lib/mock/index.cjs",
        "./twilio": "./lib/twilio/index.cjs",
        "./web-whatsapp": "./lib/web-whatsapp/index.cjs",
+        "./venom": "./lib/venom/index.cjs",
+        "./baileys": "./lib/baileys/index.cjs",
        "./meta": "./lib/meta/index.cjs"
    }
 }
--- a/packages/provider/rollup-provider.config.js
+++ b/packages/provider/rollup-provider.config.js
@@ -30,6 +30,24 @@ module.exports = [
        },
        plugins: [commonjs()],
    },
+    {
+        input: join(__dirname, 'src', 'venom', 'index.js'),
+        output: {
+            banner: banner['banner.output'].join(''),
+            file: join(__dirname, 'lib', 'venom', 'index.cjs'),
+            format: 'cjs',
+        },
+        plugins: [commonjs()],
+    },
+    {
+        input: join(__dirname, 'src', 'baileys', 'index.js'),
+        output: {
+            banner: banner['banner.output'].join(''),
+            file: join(__dirname, 'lib', 'baileys', 'index.cjs'),
+            format: 'cjs',
+        },
+        plugins: [commonjs()],
+    },
    {
        input: join(__dirname, 'src', 'meta', 'index.js'),
        output: {
--- a/packages/provider/src/baileys/index.js
+++ b/packages/provider/src/baileys/index.js
@@ -0,0 +1,216 @@
+const { ProviderClass } = require('@bot-whatsapp/bot')
+const pino = require('pino')
+const mime = require('mime-types')
+const fs = require('fs')
+const {
+    default: makeWASocket,
+    useMultiFileAuthState,
+} = require('@adiwajshing/baileys')
+const {
+    baileyGenerateImage,
+    baileyCleanNumber,
+    baileyIsValidNumber,
+} = require('./utils')
+
+/**
+ * ⚙️ BaileysProvider: Es una clase tipo adaptor
+ * que extiende clases de ProviderClass (la cual es como interfaz para sber que funciones rqueridas)
+ * https://github.com/adiwajshing/Baileys
+ */
+class BaileysProvider extends ProviderClass {
+    vendor
+    constructor() {
+        super()
+        this.initBailey().then(() => this.initBusEvents())
+    }
+
+    /**
+     * Iniciar todo Bailey
+     */
+    async initBailey() {
+        const { state, saveCreds } = await useMultiFileAuthState('sessions')
+
+        try {
+            this.vendor = makeWASocket({
+                printQRInTerminal: false,
+                auth: state,
+                logger: pino({ level: 'error' }),
+            })
+
+            this.vendor.ev.on(
+                'connection.update',
+                async ({ qr, connection, lastDisconnect }) => {
+                    if (qr) baileyGenerateImage(qr)
+                    if (connection === 'open') this.emit('ready', true)
+                    if (lastDisconnect?.error) {
+                        saveCreds()
+                        this.initBailey()
+                    }
+                }
+            )
+        } catch (e) {
+            this.emit('error', e)
+        }
+    }
+
+    /**
+     * Mapeamos los eventos nativos a los que la clase Provider espera
+     * para tener un standar de eventos
+     * @returns
+     */
+    busEvents = () => [
+        {
+            event: 'connection.update',
+            func: async ({ qr, connection, lastDisconnect }) => {
+                if (qr) {
+                    this.emit('require_action', {
+                        instructions: [
+                            `Debes escanear el QR Code para iniciar session reivsa qr.png`,
+                            `Recuerda que el QR se actualiza cada minuto `,
+                            `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
+                        ],
+                    })
+                    baileyGenerateImage(qr)
+                }
+
+                if (lastDisconnect?.error) {
+                    this.emit('require_action', {
+                        instructions: [
+                            `Algo sucedio reinicia el bot o revisa tu whatsapp`,
+                            `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
+                        ],
+                    })
+                }
+
+                if (connection === 'open') this.emit('ready', true)
+            },
+        },
+        {
+            event: 'messages.upsert',
+            func: ({ messages }) => {
+                const [messageCtx] = messages
+                let payload = {
+                    ...messageCtx,
+                    body: messageCtx?.message?.conversation,
+                    from: messageCtx?.key?.remoteJid,
+                }
+                if (payload.from === 'status@broadcast') {
+                    return
+                }
+
+                if (!baileyIsValidNumber(payload.from)) {
+                    return
+                }
+                payload.from = baileyCleanNumber(payload.from, true)
+                this.emit('message', payload)
+            },
+        },
+    ]
+
+    initBusEvents = () => {
+        const listEvents = this.busEvents()
+
+        for (const { event, func } of listEvents) {
+            this.vendor.ev.on(event, func)
+        }
+    }
+
+    /**
+     * @alpha
+     * @param {string} number
+     * @param {string} message
+     * @example await sendMessage('+XXXXXXXXXXX', 'https://dominio.com/imagen.jpg' | 'img/imagen.jpg')
+     */
+
+    sendMedia = async (number, imageUrl) => {
+        await this.vendor.sendMessage(number, {
+            image: { url: imageUrl },
+        })
+    }
+
+    /**
+     * @alpha
+     * @param {string} number
+     * @param {string} message
+     * @param {boolean} voiceNote optional
+     * @example await sendMessage('+XXXXXXXXXXX', 'audio.mp3')
+     */
+
+    sendAudio = async (number, audioUrl, voiceNote = false) => {
+        const numberClean = number.replace('+', '')
+        await this.vendor.sendMessage(`${numberClean}@c.us`, {
+            audio: { url: audioUrl },
+            ptt: voiceNote,
+        })
+    }
+
+    /**
+     *
+     * @param {string} number
+     * @param {string} message
+     * @returns
+     */
+    sendText = async (number, message) => {
+        return this.vendor.sendMessage(number, { text: message })
+    }
+    /**
+     * TODO: Necesita terminar de implementar el sendMedia y sendButton guiarse:
+     * https://github.com/leifermendez/bot-whatsapp/blob/4e0fcbd8347f8a430adb43351b5415098a5d10df/packages/provider/src/web-whatsapp/index.js#L165
+     * @param {string} number
+     * @param {string} message
+     * @example await sendMessage('+XXXXXXXXXXX', 'Hello World')
+     */
+    sendMessage = async (numberIn, message, { options }) => {
+        const number = baileyCleanNumber(numberIn)
+
+        // if (options?.buttons?.length)
+        //     return this.sendButtons(number, message, options.buttons)
+        if (options?.media) return this.sendMedia(number, options.media)
+        return this.sendText(number, message)
+    }
+
+    /**
+     *
+     * @param {string} number
+     * @param {string} filePath
+     * @example await sendMessage('+XXXXXXXXXXX', './document/file.pdf')
+     */
+
+    sendFile = async (number, filePath) => {
+        if (fs.existsSync(filePath)) {
+            const mimeType = mime.lookup(filePath)
+            const numberClean = number.replace('+', '')
+            const fileName = filePath.split('/').pop()
+
+            await this.vendor.sendMessage(`${numberClean}@c.us`, {
+                document: { url: filePath },
+                mimetype: mimeType,
+                fileName: fileName,
+            })
+        }
+    }
+
+    /**
+     *
+     * @param {string} number
+     * @param {string} text
+     * @param {string} footer
+     * @param {Array} buttons
+     * @example await sendMessage("+XXXXXXXXXXX", "Your Text", "Your Footer", [{"buttonId": "id", "buttonText": {"displayText": "Button"}, "type": 1}])
+     */
+
+    sendButtons = async (number, text, footer, buttons) => {
+        const numberClean = number.replace('+', '')
+
+        const buttonMessage = {
+            text: text,
+            footer: footer,
+            buttons: buttons,
+            headerType: 1,
+        }
+
+        await this.vendor.sendMessage(`${numberClean}@c.us`, buttonMessage)
+    }
+}
+
+module.exports = BaileysProvider
--- a/packages/provider/src/baileys/utils.js
+++ b/packages/provider/src/baileys/utils.js
@@ -0,0 +1,21 @@
+const { createWriteStream } = require('fs')
+const qr = require('qr-image')
+
+const baileyCleanNumber = (number, full = false) => {
+    number = number.replace('@s.whatsapp.net', '')
+    number = !full ? `${number}@s.whatsapp.net` : `${number}`
+    return number
+}
+
+const baileyGenerateImage = (base64) => {
+    let qr_svg = qr.image(base64, { type: 'png', margin: 4 })
+    qr_svg.pipe(createWriteStream(`${process.cwd()}/qr.png`))
+}
+
+const baileyIsValidNumber = (rawNumber) => {
+    const regexGroup = /\@g.us\b/gm
+    const exist = rawNumber.match(regexGroup)
+    return !exist
+}
+
+module.exports = { baileyCleanNumber, baileyGenerateImage, baileyIsValidNumber }
--- a/packages/provider/src/twilio/index.js
+++ b/packages/provider/src/twilio/index.js
@@ -81,7 +81,7 @@ class TwilioProvider extends ProviderClass {
     * @param {*} buttons []
     * @returns
     */
-    sendButtons = async (number, message, buttons = []) => {
+    sendButtons = async () => {
        console.log(``)
        console.log(
            `[NOTA]: Actualmente enviar botons con Twilio esta en desarrollo`
--- a/packages/provider/src/venom/index.js
+++ b/packages/provider/src/venom/index.js
@@ -0,0 +1,116 @@
+const { ProviderClass } = require('@bot-whatsapp/bot')
+const venom = require('venom-bot')
+const {
+    venomCleanNumber,
+    venomGenerateImage,
+    venomisValidNumber,
+} = require('./utils')
+
+/**
+ * ⚙️ VenomProvider: Es una clase tipo adaptor
+ * que extiende clases de ProviderClass (la cual es como interfaz para sber que funciones rqueridas)
+ * https://github.com/orkestral/venom
+ */
+class VenomProvider extends ProviderClass {
+    vendor
+    constructor() {
+        super()
+        this.init().then(() => this.initBusEvents())
+    }
+
+    /**
+     * Iniciamos el Proveedor Venom
+     */
+    init = async () => {
+        try {
+            const client = await venom.create(
+                {
+                    session: 'session-base',
+                    multidevice: true,
+                },
+                (base) => this.generateQr(base),
+                undefined,
+                { logQR: false }
+            )
+            this.vendor = client
+        } catch (e) {
+            this.emit('auth_failure', {
+                instructions: [
+                    `Ocurrio un error con la inicializacion de venom`,
+                    `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
+                    `(Puedes abrir un ISSUE) https://github.com/leifermendez/bot-whatsapp/issues/new/choose`,
+                    ``,
+                    `${e?.message}`,
+                ],
+            })
+        }
+    }
+
+    /**
+     * Generamos QR Code pra escanear con el Whatsapp
+     */
+    generateQr = (qr) => {
+        console.clear()
+        this.emit('require_action', {
+            instructions: [
+                `Debes escanear el QR Code para iniciar session reivsa qr.png`,
+                `Recuerda que el QR se actualiza cada minuto `,
+                `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
+            ],
+        })
+        venomGenerateImage(qr)
+    }
+
+    /**
+     * Mapeamos los eventos nativos de  https://docs.orkestral.io/venom/#/?id=events
+     * para tener un standar de eventos
+     * @returns
+     */
+    busEvents = () => [
+        {
+            event: 'onMessage',
+            func: (payload) => {
+                if (payload.from === 'status@broadcast') {
+                    return
+                }
+
+                if (!venomisValidNumber(payload.from)) {
+                    return
+                }
+                payload.from = venomCleanNumber(payload.from, true)
+                this.emit('message', payload)
+            },
+        },
+    ]
+
+    /**
+     * Iniciamos y mapeamos el BusEvent
+     * Ejemplo:
+     * this.vendor.onMessage() 👉 this.vendor["onMessage"]()
+     */
+    initBusEvents = () => {
+        const listEvents = this.busEvents()
+
+        for (const { event, func } of listEvents) {
+            if (this.vendor[event])
+                this.vendor[event]((payload) => func(payload))
+        }
+    }
+
+    /**
+     * Enviar mensaje al usuario
+     * @param {*} userId
+     * @param {*} message
+     * @param {*} param2
+     * @returns
+     */
+    sendMessage = async (userId, message, { options }) => {
+        const number = venomCleanNumber(userId)
+        if (options?.buttons?.length)
+            return this.sendButtons(number, message, options.buttons)
+        if (options?.media) return this.sendMedia(number, options.media)
+        return this.vendor.sendText(number, message)
+    }
+}
+
+module.exports = VenomProvider
--- a/packages/provider/src/venom/utils.js
+++ b/packages/provider/src/venom/utils.js
@@ -0,0 +1,36 @@
+const { writeFile } = require('fs')
+
+const venomCleanNumber = (number, full = false) => {
+    number = number.replace('@c.us', '')
+    number = !full ? `${number}@c.us` : `${number}`
+    return number
+}
+
+const venomGenerateImage = (base) => {
+    const matches = base.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/)
+    if (matches.length !== 3) {
+        return new Error('Invalid input string')
+    }
+
+    let response = {}
+    response.type = matches[1]
+    response.data = new Buffer.from(matches[2], 'base64')
+
+    var imageBuffer = response
+    writeFile(
+        `${process.cwd()}/qr.png`,
+        imageBuffer['data'],
+        'binary',
+        (err) => {
+            if (err != null) throw new Error('ERROR_QR_GENERATE')
+            return
+        }
+    )
+}
+
+const venomisValidNumber = (rawNumber) => {
+    const regexGroup = /\@g.us\b/gm
+    const exist = rawNumber.match(regexGroup)
+    return !exist
+}
+module.exports = { venomCleanNumber, venomGenerateImage, venomisValidNumber }
--- a/packages/provider/src/web-whatsapp/index.js
+++ b/packages/provider/src/web-whatsapp/index.js
@@ -1,18 +1,12 @@
-const {
-    Client,
-    LocalAuth,
-    MessageMedia,
-    Buttons,
-    List,
-} = require('whatsapp-web.js')
+const { Client, LocalAuth, MessageMedia, Buttons } = require('whatsapp-web.js')
 const { ProviderClass } = require('@bot-whatsapp/bot')
 const { Console } = require('console')
-const { createWriteStream, existsSync } = require('fs')
+const { createWriteStream } = require('fs')
 const {
-    cleanNumber,
-    generateImage,
-    isValidNumber,
-    downloadMedia,
+    wwebCleanNumber,
+    wwebDownloadMedia,
+    wwebGenerateImage,
+    wwebIsValidNumber,
 } = require('./utils')

 const logger = new Console({
@@ -37,6 +31,7 @@ class WebWhatsappProvider extends ProviderClass {
        for (const { event, func } of listEvents) {
            this.vendor.on(event, func)
        }
+
        this.vendor.emit('preinit')
        this.vendor.initialize().catch((e) => {
            logger.log(e)
@@ -65,12 +60,12 @@ class WebWhatsappProvider extends ProviderClass {
            func: (qr) => {
                this.emit('require_action', {
                    instructions: [
-                        `Debes escanear el QR Code para iniciar session reivsa qr.svg`,
+                        `Debes escanear el QR Code para iniciar session reivsa qr.png`,
                        `Recuerda que el QR se actualiza cada minuto `,
                        `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
                    ],
                })
-                generateImage(qr)
+                wwebGenerateImage(qr)
            },
        },
        {
@@ -84,10 +79,10 @@ class WebWhatsappProvider extends ProviderClass {
                    return
                }

-                if (!isValidNumber(payload.from)) {
+                if (!wwebIsValidNumber(payload.from)) {
                    return
                }
-                payload.from = cleanNumber(payload.from, true)
+                payload.from = wwebCleanNumber(payload.from, true)
                this.emit('message', payload)
            },
        },
@@ -103,7 +98,7 @@ class WebWhatsappProvider extends ProviderClass {
     */
    sendMedia = async (number, mediaInput = null) => {
        if (!mediaInput) throw new Error(`NO_SE_ENCONTRO: ${mediaInput}`)
-        const fileDownloaded = await downloadMedia(mediaInput)
+        const fileDownloaded = await wwebDownloadMedia(mediaInput)
        const media = MessageMedia.fromFilePath(fileDownloaded)
        return this.vendor.sendMessage(number, media, {
            sendAudioAsVoice: true,
@@ -134,19 +129,19 @@ class WebWhatsappProvider extends ProviderClass {
     * @param {*} buttons []
     * @returns
     */
-    sendList = async (number, message, listInput = []) => {
-        let sections = [
-            {
-                title: 'sectionTitle',
-                rows: [
-                    { title: 'ListItem1', description: 'desc' },
-                    { title: 'ListItem2' },
-                ],
-            },
-        ]
-        let list = new List('List body', 'btnText', sections, 'Title', 'footer')
-        return this.vendor.sendMessage(number, list)
-    }
+    // sendList = async (number, message, listInput = []) => {
+    //     let sections = [
+    //         {
+    //             title: 'sectionTitle',
+    //             rows: [
+    //                 { title: 'ListItem1', description: 'desc' },
+    //                 { title: 'ListItem2' },
+    //             ],
+    //         },
+    //     ]
+    //     let list = new List('List body', 'btnText', sections, 'Title', 'footer')
+    //     return this.vendor.sendMessage(number, list)
+    // }

    /**
     * Enviar un mensaje solo texto
@@ -168,7 +163,7 @@ class WebWhatsappProvider extends ProviderClass {
     * @returns
     */
    sendMessage = async (userId, message, { options }) => {
-        const number = cleanNumber(userId)
+        const number = wwebCleanNumber(userId)
        if (options?.buttons?.length)
            return this.sendButtons(number, message, options.buttons)
        if (options?.media) return this.sendMedia(number, options.media)
--- a/packages/provider/src/web-whatsapp/utils.js
+++ b/packages/provider/src/web-whatsapp/utils.js
@@ -4,18 +4,18 @@ const { tmpdir } = require('os')
 const http = require('http')
 const https = require('https')

-const cleanNumber = (number, full = false) => {
+const wwebCleanNumber = (number, full = false) => {
    number = number.replace('@c.us', '')
    number = !full ? `${number}@c.us` : `${number}`
    return number
 }

-const generateImage = (base64) => {
-    let qr_svg = qr.image(base64, { type: 'svg', margin: 4 })
-    qr_svg.pipe(createWriteStream(`${process.cwd()}/qr.svg`))
+const wwebGenerateImage = (base64) => {
+    let qr_svg = qr.image(base64, { type: 'png', margin: 4 })
+    qr_svg.pipe(createWriteStream(`${process.cwd()}/qr.png`))
 }

-const isValidNumber = (rawNumber) => {
+const wwebIsValidNumber = (rawNumber) => {
    const regexGroup = /\@g.us\b/gm
    const exist = rawNumber.match(regexGroup)
    return !exist
@@ -27,7 +27,7 @@ const isValidNumber = (rawNumber) => {
 * @param {*} url
 * @returns
 */
-const downloadMedia = (url) => {
+const wwebDownloadMedia = (url) => {
    return new Promise((resolve, reject) => {
        const ext = url.split('.').pop()
        const checkProtocol = url.includes('https:')
@@ -50,4 +50,9 @@ const downloadMedia = (url) => {
    })
 }

-module.exports = { cleanNumber, generateImage, isValidNumber, downloadMedia }
+module.exports = {
+    wwebCleanNumber,
+    wwebGenerateImage,
+    wwebIsValidNumber,
+    wwebDownloadMedia,
+}