cheveguerra/bot-whatsapp
1
0
Fork 0
mirror of https://github.com/cheveguerra/bot-whatsapp.git synced 2026-04-18 03:29:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✨ updated

Browse Source
This commit is contained in:
Leifer Mendez
2022-12-25 20:53:25 +01:00
parent 4be1906914
commit e4ed904a8b
16 changed files with 162 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/docs/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
packages/docs/public/favicon.svg
View File

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

Before

Width:  |  Height:  |  Size: 947 B

4
packages/docs/src/assets/styles/global.css
View File

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

2
packages/docs/src/components/core/RouterHead.tsx
View File

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

14
packages/docs/src/components/widgets/Alert.tsx Normal file
View File

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

2
packages/docs/src/components/widgets/Footer.tsx
View File

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

73
packages/docs/src/components/widgets/Header.tsx
View File

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

12
packages/docs/src/components/widgets/Hero.tsx
View File

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

17
packages/docs/src/components/widgets/NavBar.tsx
View File

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

10
packages/docs/src/contexts/index.tsx Normal file
View File

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

44
packages/docs/src/root.tsx
View File

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

27
packages/docs/src/routes/blog/index.tsx
View File

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

6
packages/docs/src/routes/docs/concepts/index.mdx → packages/docs/src/routes/docs/essential/index.mdx
View File

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

25
packages/docs/src/routes/docs/index.mdx
View File

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

71
packages/docs/src/routes/docs/layout!.tsx
View File

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

4
packages/docs/src/routes/index.tsx
View File

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