diff --git a/packages/docs/package.json b/packages/docs/package.json index 3b6c476..d10a0b6 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -24,6 +24,10 @@ "@builder.io/qwik-city": "0.0.128", "@fontsource/inter": "^4.5.14", "@iconify-json/tabler": "^1.1.49", + "@tailwindcss/aspect-ratio": "^0.4.0", + "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/line-clamp": "^0.3.1", + "@tailwindcss/typography": "^0.5.0", "@types/eslint": "8.4.10", "@types/node": "latest", "@typescript-eslint/eslint-plugin": "5.45.0", diff --git a/packages/docs/src/assets/fonts/FiraCode-VF.woff b/packages/docs/src/assets/fonts/FiraCode-VF.woff new file mode 100644 index 0000000..f7ac814 Binary files /dev/null and b/packages/docs/src/assets/fonts/FiraCode-VF.woff differ diff --git a/packages/docs/src/assets/fonts/FiraCode-VF.woff2 b/packages/docs/src/assets/fonts/FiraCode-VF.woff2 new file mode 100644 index 0000000..64ffe43 Binary files /dev/null and b/packages/docs/src/assets/fonts/FiraCode-VF.woff2 differ diff --git a/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf b/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000..8d43f3d Binary files /dev/null and b/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf differ diff --git a/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf b/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf new file mode 100644 index 0000000..b8c3935 Binary files /dev/null and b/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf differ diff --git a/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 b/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 new file mode 100644 index 0000000..e09a201 Binary files /dev/null and b/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 differ diff --git a/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 b/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 new file mode 100644 index 0000000..44fabcb Binary files /dev/null and b/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 differ diff --git a/packages/docs/src/assets/fonts/Pally-Variable.ttf b/packages/docs/src/assets/fonts/Pally-Variable.ttf new file mode 100644 index 0000000..b0ecd84 Binary files /dev/null and b/packages/docs/src/assets/fonts/Pally-Variable.ttf differ diff --git a/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf b/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf new file mode 100644 index 0000000..bdcfb27 Binary files /dev/null and b/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf differ diff --git a/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf b/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf new file mode 100644 index 0000000..e6c5dff Binary files /dev/null and b/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf differ diff --git a/packages/docs/src/assets/fonts/Synonym-Variable.ttf b/packages/docs/src/assets/fonts/Synonym-Variable.ttf new file mode 100644 index 0000000..bcbe0a1 Binary files /dev/null and b/packages/docs/src/assets/fonts/Synonym-Variable.ttf differ diff --git a/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 b/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 new file mode 100644 index 0000000..56c55c1 Binary files /dev/null and b/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 new file mode 100644 index 0000000..c278686 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff new file mode 100644 index 0000000..31ee2e1 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css new file mode 100644 index 0000000..deddf7c --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: IBMPlexMono-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: IBMPlexMono-Regular; + src: url(IBMPlexMono-Regular-subset.woff2) format('woff2'), + url(IBMPlexMono-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+2C, U+2E, U+41-43, U+46, U+49, U+4B-4F, U+53-55, U+58, + U+61-65, U+67-69, U+6C-76; +} diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 new file mode 100644 index 0000000..dd6c410 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff new file mode 100644 index 0000000..fae3e2d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css new file mode 100644 index 0000000..e2fdf72 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css @@ -0,0 +1,13 @@ +.font { + font-family: IBMPlexMono-SemiBold; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: IBMPlexMono-SemiBold; + src: url(IBMPlexMono-SemiBold-subset.woff2) format('woff2'), + url(IBMPlexMono-SemiBold-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2E, U+30, U+38, U+39, U+41, U+42, U+44, U+47, + U+4E, U+4F, U+52-55, U+57, U+59, U+65, U+68, U+6F, U+72, U+74; +} diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 new file mode 100644 index 0000000..7482552 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff new file mode 100644 index 0000000..b5ef1d9 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css b/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css new file mode 100644 index 0000000..74aa400 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css @@ -0,0 +1,14 @@ +.font { + font-family: Pally-Variable; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: Pally-Variable; + src: url(Pally-Variable-subset.woff2) format('woff2'), + url(Pally-Variable-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+39, U+41-43, U+46, + U+49-4D, U+53, U+55, U+58, U+61-65, U+67-69, U+6B-77, U+79; + font-weight: 400 700; +} diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 new file mode 100644 index 0000000..722108f Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff new file mode 100644 index 0000000..c520f2b Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css new file mode 100644 index 0000000..b1a323f --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: SourceSerifPro-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: SourceSerifPro-Regular; + src: url(SourceSerifPro-Regular-subset.woff2) format('woff2'), + url(SourceSerifPro-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+2C, U+2E, U+41-44, U+49, U+4A, U+4C, U+53, U+55, + U+61-65, U+67-69, U+6B-76, U+79; +} diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 new file mode 100644 index 0000000..190f1ec Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff new file mode 100644 index 0000000..84a5c4d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css b/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css new file mode 100644 index 0000000..b834dbb --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css @@ -0,0 +1,14 @@ +.font { + font-family: Synonym-Variable; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: Synonym-Variable; + src: url(Synonym-Variable-subset.woff2) format('woff2'), + url(Synonym-Variable-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+35, U+41-44, U+46, U+47, + U+49, U+4B-4F, U+53-55, U+57-59, U+61, U+63-65, U+67-69, U+6C-76; + font-weight: 400 700; +} diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 new file mode 100644 index 0000000..3d5d391 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff new file mode 100644 index 0000000..294ca4d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css b/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css new file mode 100644 index 0000000..819cfa3 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: TenorSans-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: TenorSans-Regular; + src: url(TenorSans-Regular-subset.woff2) format('woff2'), + url(TenorSans-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2E, U+30, U+36, U+46, U+49, U+4A, U+53, U+54, + U+61, U+63, U+65, U+69, U+6B, U+6E, U+6F, U+72-75, U+79; +} diff --git a/packages/docs/src/assets/styles/fonts.css b/packages/docs/src/assets/styles/fonts.css new file mode 100644 index 0000000..c2b1344 --- /dev/null +++ b/packages/docs/src/assets/styles/fonts.css @@ -0,0 +1,44 @@ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: block; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/Inter-roman-latin.var.woff2') format('woff2'); +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: block; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/Inter-italic-latin.var.woff2') format('woff2'); +} + +@font-face { + font-family: 'Fira Code VF'; + font-weight: 300 700; + font-style: normal; + src: url('../fonts/FiraCode-VF.woff2') format('woff2-variations'), + url('../fonts/FiraCode-VF.woff') format('woff-variations'); +} + +.font-mono { + font-variant-ligatures: none; +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/SourceSansPro-Regular.otf') format('opentype'); +} + +@font-face { + font-family: 'Ubuntu Mono'; + font-weight: 700; + font-style: normal; + src: url('../fonts/Ubuntu-Mono-bold.woff2') format('woff2'); +} diff --git a/packages/docs/src/assets/styles/global.css b/packages/docs/src/assets/styles/global.css index 8d4a039..1ca6d42 100644 --- a/packages/docs/src/assets/styles/global.css +++ b/packages/docs/src/assets/styles/global.css @@ -9,6 +9,7 @@ @tailwind base; @tailwind components; @tailwind utilities; +@import url('./fonts.css'); @layer components { .btn { @@ -24,19 +25,19 @@ } .slot h1 { - @apply mb-2 font-semibold text-2xl; + @apply my-2 font-semibold text-2xl; } .slot h2 { - @apply mb-2 font-semibold text-lg; + @apply my-2 font-semibold text-lg; } .slot h3 { - @apply mb-2 font-semibold text-base; + @apply my-2 font-semibold text-base; } .slot code { - @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full; + @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full text-sm; } .slot pre { @@ -51,6 +52,10 @@ @apply my-5; } + .slot img { + @apply rounded drop-shadow-2xl; + } + [data-aw-toggle-menu] path { @apply transition; } diff --git a/packages/docs/src/components/widgets/Collaborators.tsx b/packages/docs/src/components/widgets/Collaborators.tsx new file mode 100644 index 0000000..698c0a2 --- /dev/null +++ b/packages/docs/src/components/widgets/Collaborators.tsx @@ -0,0 +1,46 @@ +import { component$ } from '@builder.io/qwik' + +export default component$(() => { + return ( +
+
+

Contributors

+ + 204 + +
+
+ + + + + +
+
+ + + 198 others + +
+
+ ) +}) diff --git a/packages/docs/src/components/widgets/NavBar.tsx b/packages/docs/src/components/widgets/NavBar.tsx index 42127ee..bcb36a7 100644 --- a/packages/docs/src/components/widgets/NavBar.tsx +++ b/packages/docs/src/components/widgets/NavBar.tsx @@ -5,28 +5,68 @@ import { useLocation } from '@builder.io/qwik-city' * options = [] array con la lista de opciones de la documentacion */ export default component$( - ({ options = [] }: { options: { link: string; name: string }[] }) => { - const location = useLocation() - const currentPage = location.pathname + ({ + options = [], + }: { + options: { + title: string + link: string + list: { link: string; name: string }[] + }[] + }) => { return (
- + {options.map((item) => ( + + ))}
) } ) + +export const UlCompoent = component$( + (porps: { + title: string + link: string + list: { link: string; name: string }[] + }) => { + return ( + + ) + } +) + +export const LiComponent = component$( + (porps: { list: { link: string; name: string }[] }) => { + const location = useLocation() + const currentPage = location.pathname + return ( + + ) + } +) diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx index bbaf423..dae1474 100644 --- a/packages/docs/src/root.tsx +++ b/packages/docs/src/root.tsx @@ -8,6 +8,7 @@ import { import { RouterHead } from '~/components/core/RouterHead' import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher' +import fontStyles from '~/assets/styles/fonts.css?inline' import globalStyles from '~/assets/styles/global.css?inline' export default component$(() => { @@ -18,6 +19,7 @@ export default component$(() => { * Dont remove the `` and `` elements. */ + useStyles$(fontStyles) useStyles$(globalStyles) return ( @@ -29,10 +31,7 @@ export default component$(() => { content="width=device-width, initial-scale=1" /> - + diff --git a/packages/docs/src/routes/docs/index.mdx b/packages/docs/src/routes/docs/index.mdx index d5aa85f..c6d4b13 100644 --- a/packages/docs/src/routes/docs/index.mdx +++ b/packages/docs/src/routes/docs/index.mdx @@ -1,3 +1,5 @@ +import Collaborators from '../../components/widgets/Collaborators' + # Primeros Pasos Los chatbots son una herramienta poderosa para que las empresas y @@ -6,8 +8,6 @@ organizaciones comuniquen de forma personalizada y automatizada con sus clientes Est谩 documentaci贸n te ayudar谩 a instalar tu bot de whatsapp en simples pasos con el proposito de que tengas un chatbot funcional en solo minutos. ---- - ### Ejecutar Es muy sencillo solo deberas ejecutar el siguiente comando 馃殌 @@ -16,4 +16,12 @@ Es muy sencillo solo deberas ejecutar el siguiente comando 馃殌 npm create bot-whatsapp@latest ``` -![](https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270) +
+ +
+ + diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx index a8eeb88..10141c3 100644 --- a/packages/docs/src/routes/docs/install/index.mdx +++ b/packages/docs/src/routes/docs/install/index.mdx @@ -8,3 +8,113 @@ contributors: --- # Instalaci贸n + +### 馃搫 Bienvenido/a + +Si deseas colaborar con el proyecto existen varias maneras, la primera de ellas es aportando conocimiento y mejorando el repositorio (actualizando documentaci贸n, mejorando c贸digo, revisando **[issues](https://github.com/codigoencasa/bot-whatsapp/issues)**, etc). + +Tambi茅n es bien recibido los aportes econ贸micos que se utilizaran para diferentes fines **[ver m谩s](https://opencollective.com/bot-whatsapp)** + +El lenguaje principal que se utiliz贸 para desarrollar este proyecto fue **JavaScript** con el fin de qu茅 personas que est谩n iniciando en el mundo de la programaci贸n puedan entender f谩cilmente. + +### 馃 Preguntas frecuentes + +- 驴Como puedo hacer aportaciones de c贸digo en el proyecto?: [Ver Video](https://youtu.be/Lxt8Acob6aU) +- 驴Como ejecutar el entorno de pruebas?: [Ver Video](https://youtu.be/Mf9V-dloBfk) +- 驴Como crear un nuevo proveedor?: [Ver Video](https://youtu.be/cahK9zH3SI8) +- 驴Que son los GithubActions?: [Ver Video](https://youtu.be/nYBEBFKLiqw) +- 驴Canales de comunicaci贸n?: [Discord](https://link.codigoencasa.com/DISCORD) + +--- + +![](https://i.giphy.com/media/ntMt6TvalpstTIx7Ak/giphy.webp) + +**Requerimientos:** + +- Node v16 o superior **[descargar node](https://nodejs.org/es/download/)** +- **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)** como gestor de paquetes. En el link conseguir谩s las intrucciones para instalar yarn. +- **[VSCode](https://code.visualstudio.com/download)** (recomendado): Editor de c贸digo con plugins. +- **[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits&ssr=false#overview)** (plugin-vscode) este plugin te ayudar谩 a crear commit sem谩ntico. +- Se usar谩 la rama **dev** _(https://github.com/leifermendez/bot-whatsapp/tree/dev)_ como rama principal hasta que se haga oficialmente el lanzamiento de la V2. + +### 馃殌 Iniciando + +**Clonar repo rama dev** + +``` +git clone --branch dev https://github.com/codigoencasa/bot-whatsapp +``` + +**Instalar dependencias** + +``` +cd bot-whatsapp +yarn install +``` + +**Compilar (build)** +Para compilar la aplicaci贸n es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo. + +``` +yarn build +``` + +**Example-app** +Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo. + +``` +yarn run cli +``` + +Selecionas (mediante las flechas arriba y abajo) el proveedor que quieras usar y cuando estes sobre el presiona la barra de espacio, igualmente selecciona la base de datos que quieras usar. + +Se cre贸 un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql` + +Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas: + +``` + "@bot-whatsapp/bot": "latest", + "@bot-whatsapp/cli": "latest", + "@bot-whatsapp/database": "latest", + "@bot-whatsapp/provider": "latest", +``` + +Cambiate al directorio creado ejemplo: `base-bailey-mysql` + +``` +cd base-baileys-mysql +``` + +Ejecuta los comandos: + +``` +npm install +npm run pre-copy +npm start +``` + +En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexi贸n, ejemplo de MySql: + +``` +const BaileysProvider = require('@bot-whatsapp/provider/baileys') +const MySQLAdapter = require('@bot-whatsapp/database/mysql') + +/** + * Declaramos las conexiones de MySQL + */ +const MYSQL_DB_HOST = 'localhost' +const MYSQL_DB_USER = 'usr' +const MYSQL_DB_PASSWORD = 'pass' +const MYSQL_DB_NAME = 'bot' +``` + +![](https://i.imgur.com/dC6lEwy.png) + +> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 馃ぃ](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md) + +--- + +- [Discord](https://link.codigoencasa.com/DISCORD) +- [Twitter](https://twitter.com/leifermendez) +- [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR) +- [Telegram](https://t.me/leifermendez) diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx index 3ff05ae..1ffe5b2 100644 --- a/packages/docs/src/routes/docs/layout!.tsx +++ b/packages/docs/src/routes/docs/layout!.tsx @@ -8,16 +8,15 @@ import ExtraBar from '~/components/widgets/ExtraBar' export default component$(() => { const store = useStore({ options: [ - { name: 'Primeros pasos', link: '/docs' }, - { name: 'Instalaci贸n', link: '/docs/install' }, - { name: 'Configuraci贸n', link: '/docs/settings' }, - { name: 'Migraci贸n', link: '/docs/migration' }, - ], - extraOptions: [ - { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' }, - { name: 'Instalaci贸n', link: '/docs' }, - { name: 'Configuraci贸n', link: '/docs' }, - { name: 'Forma de pensar', link: '/docs' }, + { + title: 'Primeros pasos', + list: [ + { name: 'Vista r谩pida', link: '/docs' }, + { name: 'Instalaci贸n', link: '/docs/install' }, + { name: 'Configuraci贸n', link: '/docs/settings' }, + { name: 'Migraci贸n', link: '/docs/migration' }, + ], + }, ], }) @@ -33,7 +32,7 @@ export default component$(() => {
- + {/* */}
diff --git a/packages/docs/src/routes/docs/migration/index.mdx b/packages/docs/src/routes/docs/migration/index.mdx index 560a39c..b9f69e6 100644 --- a/packages/docs/src/routes/docs/migration/index.mdx +++ b/packages/docs/src/routes/docs/migration/index.mdx @@ -1,10 +1,130 @@ ---- -title: Overview -contributors: - - adamdbradley - - steve8708 - - manucorporat - - gabrielgrant ---- +# Migraci贸n -# Migracion +#### Versi贸n (legacy) + +En la **_versi贸n (legacy)_** se implementas los flujos de esta manera, en dos archivos independientes. + +> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar. +> **`response.json`** donde se escriben los mensajes a responder. + +```json +//initial.json +[ + { + "keywords": ["hola", "ola", "alo"], + "key": "hola" + }, + { + "keywords": ["productos", "info"], + "key": "productos" + }, + { + "keywords": ["adios", "bye"], + "key": "adios" + }, + { + "keywords": ["imagen", "foto"], + "key": "catalogo" + } +] +``` + +```json +//response.json +{ + "hola": { + "replyMessage": ["Gracias a ti! \n"], + "media": null, + "trigger": null + }, + "adios": { + "replyMessage": ["Que te vaya bien!!"] + }, + "productos": { + "replyMessage": ["M谩s productos aqu铆"], + "trigger": null, + "actions": { + "title": "驴Que te interesa ver?", + "message": "Abajo unos botons", + "footer": "", + "buttons": [ + { "body": "Telefonos" }, + { "body": "Computadoras" }, + { "body": "Otros" } + ] + } + }, + "catalogo": { + "replyMessage": ["Te envio una imagen"], + "media": "https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif", + "trigger": null + } +} +``` + +#### Versi贸n 2 (0.2.X) + +En esta versi贸n es mucho m谩s sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado. + +```js +//app.js +const { + createBot, + createProvider, + createFlow, + addKeyword, + addChild, +} = require('@bot-whatsapp/bot') + +const BaileysProvider = require('@bot-whatsapp/provider/baileys') +const MockAdapter = require('@bot-whatsapp/database/mock') +/** + * Declarando flujos principales. + */ +const flowHola = addKeyword(['hola', 'ola', 'alo']).addAnswer( + 'Bienvenido a tu tienda online!' +) + +const flowAdios = addKeyword(['adios', 'bye']) + .addAnswer('Que te vaya bien!!') + .addAnswer('Hasta luego!') + +const flowProductos = addKeyword(['productos', 'info']).addAnswer( + 'Te envio una imagen', + { + buttons: [ + { body: 'Telefonos' }, + { body: 'Computadoras' }, + { body: 'Otros' }, + ], + } +) + +const flowCatalogo = addKeyword(['imagen', 'foto']).addAnswer( + 'Te envio una imagen', + { media: 'https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif' } +) + +const main = async () => { + const adapterDB = new MockAdapter() + const adapterFlow = createFlow([ + flowHola, + flowAdios, + flowProductos, + flowCatalogo, + ]) + const adapterProvider = createProvider(BaileysProvider) + createBot({ + flow: adapterFlow, + provider: adapterProvider, + database: adapterDB, + }) +} +``` + +> Forma parte de este proyecto. + +- [Discord](https://link.codigoencasa.com/DISCORD) +- [Twitter](https://twitter.com/leifermendez) +- [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR) +- [Telegram](https://t.me/leifermendez) diff --git a/packages/docs/tailwind.config.js b/packages/docs/tailwind.config.js index af2d670..55a3ee0 100644 --- a/packages/docs/tailwind.config.js +++ b/packages/docs/tailwind.config.js @@ -11,11 +11,212 @@ module.exports = { primary: colors.purple, secondary: colors.sky, }, + typography: (theme) => ({ + DEFAULT: { + css: { + maxWidth: 'none', + color: theme('colors.slate.700'), + hr: { + borderColor: theme('colors.slate.100'), + marginTop: '3em', + marginBottom: '3em', + }, + 'h1, h2, h3': { + letterSpacing: '-0.025em', + }, + h2: { + marginBottom: `${16 / 24}em`, + }, + h3: { + marginTop: '2.4em', + lineHeight: '1.4', + }, + h4: { + marginTop: '2em', + fontSize: '1.125em', + }, + 'h2 small, h3 small, h4 small': { + fontFamily: theme('fontFamily.mono').join(', '), + color: theme('colors.slate.500'), + fontWeight: 500, + }, + 'h2 small': { + fontSize: theme('fontSize.lg')[0], + ...theme('fontSize.lg')[1], + }, + 'h3 small': { + fontSize: theme('fontSize.base')[0], + ...theme('fontSize.base')[1], + }, + 'h4 small': { + fontSize: theme('fontSize.sm')[0], + ...theme('fontSize.sm')[1], + }, + 'h2, h3, h4': { + 'scroll-margin-top': 'var(--scroll-mt)', + }, + ul: { + listStyleType: 'none', + paddingLeft: 0, + }, + 'ul > li': { + position: 'relative', + paddingLeft: '1.75em', + }, + 'ul > li::before': { + content: '""', + width: '0.75em', + height: '0.125em', + position: 'absolute', + top: 'calc(0.875em - 0.0625em)', + left: 0, + borderRadius: '999px', + backgroundColor: theme('colors.slate.300'), + }, + a: { + fontWeight: theme('fontWeight.semibold'), + textDecoration: 'none', + borderBottom: `1px solid ${theme( + 'colors.sky.300' + )}`, + }, + 'a:hover': { + borderBottomWidth: '2px', + }, + 'a code': { + color: 'inherit', + fontWeight: 'inherit', + }, + strong: { + color: theme('colors.slate.900'), + fontWeight: theme('fontWeight.semibold'), + }, + 'a strong': { + color: 'inherit', + fontWeight: 'inherit', + }, + kbd: { + background: theme('colors.slate.100'), + borderWidth: '1px', + borderColor: theme('colors.slate.200'), + padding: '0.125em 0.25em', + color: theme('colors.slate.700'), + fontWeight: 500, + fontSize: '0.875em', + fontVariantLigatures: 'none', + borderRadius: '4px', + margin: '0 1px', + }, + code: { + fontWeight: theme('fontWeight.medium'), + fontVariantLigatures: 'none', + }, + pre: { + color: theme('colors.slate.50'), + borderRadius: theme('borderRadius.xl'), + padding: theme('padding.5'), + boxShadow: theme('boxShadow.md'), + display: 'flex', + marginTop: `${20 / 14}em`, + marginBottom: `${32 / 14}em`, + }, + 'p + pre': { + marginTop: `${-4 / 14}em`, + }, + 'pre + pre': { + marginTop: `${-16 / 14}em`, + }, + 'pre code': { + flex: 'none', + minWidth: '100%', + }, + table: { + fontSize: theme('fontSize.sm')[0], + lineHeight: theme('fontSize.sm')[1].lineHeight, + }, + thead: { + color: theme('colors.slate.700'), + borderBottomColor: theme('colors.slate.200'), + }, + 'thead th': { + paddingTop: 0, + fontWeight: theme('fontWeight.semibold'), + }, + 'tbody tr': { + borderBottomColor: theme('colors.slate.100'), + }, + 'tbody tr:last-child': { + borderBottomWidth: '1px', + }, + 'tbody code': { + fontSize: theme('fontSize.xs')[0], + }, + 'figure figcaption': { + textAlign: 'center', + fontStyle: 'italic', + }, + 'figure > figcaption': { + marginTop: `${12 / 14}em`, + }, + }, + }, + dark: { + css: { + color: theme('colors.slate.400'), + 'h2, h3, h4, thead th': { + color: theme('colors.slate.200'), + }, + 'h2 small, h3 small, h4 small': { + color: theme('colors.slate.400'), + }, + kbd: { + background: theme('colors.slate.700'), + borderColor: theme('colors.slate.600'), + color: theme('colors.slate.200'), + }, + code: { + color: theme('colors.slate.200'), + }, + hr: { + borderColor: theme('colors.slate.200'), + opacity: '0.05', + }, + pre: { + boxShadow: 'inset 0 0 0 1px rgb(255 255 255 / 0.1)', + }, + a: { + color: theme('colors.white'), + borderBottomColor: theme('colors.sky.400'), + }, + strong: { + color: theme('colors.slate.200'), + }, + thead: { + color: theme('colors.slate.300'), + borderBottomColor: 'rgb(148 163 184 / 0.2)', + }, + 'tbody tr': { + borderBottomColor: 'rgb(148 163 184 / 0.1)', + }, + blockQuote: { + color: theme('colors.white'), + }, + }, + }, + }), fontFamily: { - sans: ["'Inter'", ...defaultTheme.fontFamily.sans], + sans: ['Inter var', ...defaultTheme.fontFamily.sans], + mono: ['Fira Code VF', ...defaultTheme.fontFamily.mono], + source: ['Source Sans Pro', ...defaultTheme.fontFamily.sans], + 'ubuntu-mono': ['Ubuntu Mono', ...defaultTheme.fontFamily.mono], }, }, }, - plugins: [], darkMode: 'class', + plugins: [ + require('@tailwindcss/line-clamp'), + require('@tailwindcss/typography'), + require('@tailwindcss/aspect-ratio'), + require('@tailwindcss/forms')({ strategy: 'class' }), + ], } diff --git a/yarn.lock b/yarn.lock index 698e138..00f657e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -916,11 +916,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.3.4": - version: 7.20.6 - resolution: "@babel/runtime@npm:7.20.6" + version: 7.20.7 + resolution: "@babel/runtime@npm:7.20.7" dependencies: regenerator-runtime: ^0.13.11 - checksum: 42a8504db21031b1859fbc0f52d698a3d2f5ada9519eb76c6f96a7e657d8d555732a18fe71ef428a67cc9fc81ca0d3562fb7afdc70549c5fec343190cbaa9b03 + checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 languageName: node linkType: hard @@ -1882,6 +1882,49 @@ __metadata: languageName: node linkType: hard +"@tailwindcss/aspect-ratio@npm:^0.4.0": + version: 0.4.2 + resolution: "@tailwindcss/aspect-ratio@npm:0.4.2" + peerDependencies: + tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + checksum: e998fcb0c1a55cae4e83c4510fed0d4d1cba845b7ed79a18451f55377d4a177050c2401af59222662a216aa9c407ef49c475c93db8e13246e0bb3f1ed42f78f8 + languageName: node + linkType: hard + +"@tailwindcss/forms@npm:^0.5.3": + version: 0.5.3 + resolution: "@tailwindcss/forms@npm:0.5.3" + dependencies: + mini-svg-data-uri: ^1.2.3 + peerDependencies: + tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1" + checksum: 9eddb4dbd06d01b1068138ff52a54ed0e35a28e7bfd3c72e226fc28658ecd92a9c078c4abe9c83db090984672040644d7ae2e035933fb619dd703df1d87aa275 + languageName: node + linkType: hard + +"@tailwindcss/line-clamp@npm:^0.3.1": + version: 0.3.1 + resolution: "@tailwindcss/line-clamp@npm:0.3.1" + peerDependencies: + tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + checksum: 805322a6333f029d6d961e02f23099d16f55d31f4736511bc741efff4097a1ad1574a7dff0530b17dbc974e08138b3beb13766f809e0116ebc192b0edf38b737 + languageName: node + linkType: hard + +"@tailwindcss/typography@npm:^0.5.0": + version: 0.5.8 + resolution: "@tailwindcss/typography@npm:0.5.8" + dependencies: + lodash.castarray: ^4.4.0 + lodash.isplainobject: ^4.0.6 + lodash.merge: ^4.6.2 + postcss-selector-parser: 6.0.10 + peerDependencies: + tailwindcss: "*" + checksum: afe172c75ddf086f840b10f95e562bb210dde5612fccfcfd3c4cee688c57ca5b79569b3c2cb75687b34b1b7f9ad194b14e9fbb09a741cd69198bb92b5ac3838f + languageName: node + linkType: hard + "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -7434,6 +7477,13 @@ __metadata: languageName: node linkType: hard +"lodash.castarray@npm:^4.4.0": + version: 4.4.0 + resolution: "lodash.castarray@npm:4.4.0" + checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f + languageName: node + linkType: hard + "lodash.clone@npm:^4.5.0": version: 4.5.0 resolution: "lodash.clone@npm:4.5.0" @@ -8301,6 +8351,15 @@ __metadata: languageName: node linkType: hard +"mini-svg-data-uri@npm:^1.2.3": + version: 1.4.4 + resolution: "mini-svg-data-uri@npm:1.4.4" + bin: + mini-svg-data-uri: cli.js + checksum: 997f1fbd8d59a70f03761e18626d335197a3479cb9d1ff75678e4b64b864d32a0b8fc18115eabde035e5299b8b4a354a78e57dd6ac10f9d604162a6170898d09 + languageName: node + linkType: hard + "miniflare@npm:2.10.0": version: 2.10.0 resolution: "miniflare@npm:2.10.0" @@ -9718,6 +9777,16 @@ __metadata: languageName: node linkType: hard +"postcss-selector-parser@npm:6.0.10": + version: 6.0.10 + resolution: "postcss-selector-parser@npm:6.0.10" + dependencies: + cssesc: ^3.0.0 + util-deprecate: ^1.0.2 + checksum: 46afaa60e3d1998bd7adf6caa374baf857cc58d3ff944e29459c9a9e4680a7fe41597bd5b755fc81d7c388357e9bf67c0251d047c640a09f148e13606b8a8608 + languageName: node + linkType: hard + "postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9": version: 6.0.11 resolution: "postcss-selector-parser@npm:6.0.11" @@ -10034,6 +10103,10 @@ __metadata: "@builder.io/qwik-city": 0.0.128 "@fontsource/inter": ^4.5.14 "@iconify-json/tabler": ^1.1.49 + "@tailwindcss/aspect-ratio": ^0.4.0 + "@tailwindcss/forms": ^0.5.3 + "@tailwindcss/line-clamp": ^0.3.1 + "@tailwindcss/typography": ^0.5.0 "@types/eslint": 8.4.10 "@types/node": latest "@typescript-eslint/eslint-plugin": 5.45.0