mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-20 20:49:15 +00:00
Compare commits
32 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7c8742735c | ||
|
|
c868f73462 | ||
|
|
93a990e229 | ||
|
|
00c587fbf2 | ||
|
|
e6fefb4049 | ||
|
|
2d5ac2664b | ||
|
|
4d4f15ce73 | ||
|
|
a30eaac775 | ||
|
|
5da4b7a4d1 | ||
|
|
4e0fcbd834 | ||
|
|
041bf6280e | ||
|
|
e37fd0da36 | ||
|
|
ca6afbb87f | ||
|
|
66f75f8722 | ||
|
|
31c83f5d68 | ||
|
|
1b83871cca | ||
|
|
337c2e94bc | ||
|
|
01fe9ebc9a | ||
|
|
23b2e8e439 | ||
|
|
f799498dec | ||
| 17466138dd | |||
| 63ca8e8892 | |||
| 60fdbf3d3c | |||
|
|
e8c249897d | ||
| 55d12810d9 | |||
| 639e2defa7 | |||
| b97d8ba8f1 | |||
|
|
f05b76936a | ||
|
|
28d88c282c | ||
|
|
a2be57f0aa | ||
|
|
670ecf121b | ||
|
|
fee7c2e967 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,6 +3,7 @@
|
||||
/packages/*/node_modules
|
||||
/packages/*/dist
|
||||
/packages/*/docs/dist
|
||||
/packages/provider/src/venom/tokens
|
||||
session.json
|
||||
chats/*
|
||||
!chats/.gitkeep
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -6,6 +6,7 @@
|
||||
"bot",
|
||||
"provider",
|
||||
"adapter",
|
||||
"ci"
|
||||
"ci",
|
||||
"starters"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
[handleMsg]: { from: 'XXXXXX', body: 'hola', hasMedia: false }
|
||||
[handleMsg]: { from: 'XXXXXX', body: 'hola', hasMedia: false }
|
||||
[handleMsg]: { from: 'XXXXXX', body: 'hola', hasMedia: false }
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@bot-whatsapp/bot",
|
||||
"version": "0.0.20-alpha.0",
|
||||
"version": "0.0.21-alpha.0",
|
||||
"description": "",
|
||||
"main": "./lib/bundle.bot.cjs",
|
||||
"scripts": {
|
||||
|
||||
@@ -34,7 +34,8 @@ const startInteractive = async () => {
|
||||
choices: [
|
||||
{ title: 'whatsapp-web.js (gratis)', value: 'wweb' },
|
||||
{ title: 'Twilio', value: 'twilio' },
|
||||
{ title: 'Baileys (gratis)', value: 'bailey', disabled: true },
|
||||
{ title: 'Venom (gratis)', value: 'venom' },
|
||||
{ title: 'Baileys (gratis)', value: 'bailey' },
|
||||
{ title: 'API Oficial (Meta)', value: 'meta', disabled: true },
|
||||
],
|
||||
max: 1,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@bot-whatsapp/cli",
|
||||
"version": "0.0.27-alpha.0",
|
||||
"version": "0.0.28-alpha.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "create-bot-whatsapp",
|
||||
"version": "0.0.38-alpha.0",
|
||||
"version": "0.0.39-alpha.0",
|
||||
"description": "",
|
||||
"main": "./lib/bundle.create-bot-whatsapp.cjs",
|
||||
"files": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@bot-whatsapp/database",
|
||||
"version": "0.0.19-alpha.0",
|
||||
"version": "0.0.20-alpha.0",
|
||||
"description": "Esto es el conector a mysql, pg, mongo",
|
||||
"main": "./lib/mock/index.cjs",
|
||||
"keywords": [],
|
||||
|
||||
@@ -6,35 +6,35 @@ module.exports = {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:qwik/recommended',
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:qwik/recommended",
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
project: ["./tsconfig.json"],
|
||||
ecmaVersion: 2021,
|
||||
sourceType: 'module',
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
plugins: ['@typescript-eslint'],
|
||||
plugins: ["@typescript-eslint"],
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-inferrable-types': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/no-empty-interface': 'off',
|
||||
'@typescript-eslint/no-namespace': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'@typescript-eslint/no-this-alias': 'off',
|
||||
'@typescript-eslint/ban-types': 'off',
|
||||
'@typescript-eslint/ban-ts-comment': 'off',
|
||||
'prefer-spread': 'off',
|
||||
'no-case-declarations': 'off',
|
||||
'no-console': 'off',
|
||||
'@typescript-eslint/no-unused-vars': ['error'],
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"@typescript-eslint/no-inferrable-types": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-empty-interface": "off",
|
||||
"@typescript-eslint/no-namespace": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-this-alias": "off",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"prefer-spread": "off",
|
||||
"no-case-declarations": "off",
|
||||
"no-console": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error"],
|
||||
},
|
||||
};
|
||||
|
||||
4
packages/docs/.gitignore
vendored
4
packages/docs/.gitignore
vendored
@@ -5,7 +5,7 @@
|
||||
/server
|
||||
|
||||
# Development
|
||||
node_modules
|
||||
node_modules/
|
||||
|
||||
# Cache
|
||||
.cache
|
||||
@@ -37,5 +37,7 @@ lerna-debug.log*
|
||||
.yarn/*
|
||||
!.yarn/releases
|
||||
|
||||
package-lock.json
|
||||
|
||||
# Cloudflare
|
||||
functions/**/*.js
|
||||
|
||||
6
packages/docs/.stackblitzrc
Normal file
6
packages/docs/.stackblitzrc
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"startCommand": "npm start",
|
||||
"env": {
|
||||
"ENABLE_CJS_IMPORTS": true
|
||||
}
|
||||
}
|
||||
21
packages/docs/LICENSE.md
Normal file
21
packages/docs/LICENSE.md
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 onWidget
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,11 +1,240 @@
|
||||
### 😎 Documentación Bot-Whatsapp
|
||||
# 💠 Qwind
|
||||
|
||||
👉 [https://bot-whatsapp.pages.dev/](https://bot-whatsapp.pages.dev/)
|
||||
**Qwind** is a free and open-source template to make your website using **[Qwik](https://qwik.builder.io/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices.
|
||||
|
||||
Se esta iniciando una documentación oficial sobre como usar e implementar los diferentes funcionalidades del bot-wahtsapp
|
||||
## Features
|
||||
|
||||
- ✅ Integration with **Tailwind CSS** supporting **Dark mode**.
|
||||
- ✅ **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.
|
||||
- ✅ **Image optimization** and **Font optimization**.
|
||||
|
||||
La idea es cada usuario pueda ir aportando a la documentacion y formar parte de este proyecto.
|
||||
<br>
|
||||
|
||||
<img src="./screenshot.jpg" alt="Qwind Theme Screenshot">
|
||||
|
||||
##### ¿Como agregar documentación? [Video]
|
||||
[](https://onwidget.com)
|
||||
[](https://github.com/onwidget/qwind/blob/main/LICENSE.md)
|
||||
[](https://github.com/onwidget)
|
||||
[](https://github.com/onwidget/qwind#contributing)
|
||||
[](https://snyk.io/test/github/onwidget/qwind)
|
||||
|
||||
<br>
|
||||
|
||||
<details open>
|
||||
<summary>Table of Contents</summary>
|
||||
|
||||
- [Demo](#demo)
|
||||
- [Getting started](#getting-started)
|
||||
- [Project structure](#project-structure)
|
||||
- [Commands](#commands)
|
||||
- [Configuration](#configuration)
|
||||
- [Deploy](#deploy)
|
||||
- [Roadmap](#roadmap)
|
||||
- [Contributing](#contributing)
|
||||
- [Acknowledgements](#acknowledgements)
|
||||
- [License](#license)
|
||||
|
||||
</details>
|
||||
|
||||
<br>
|
||||
|
||||
## Demo
|
||||
|
||||
📌 [https://qwind.pages.dev/](https://qwind.pages.dev/)
|
||||
|
||||
<br>
|
||||
|
||||
## Getting started
|
||||
|
||||
This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
|
||||
|
||||
### Project structure
|
||||
|
||||
Inside **Qwind** template, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── adaptors/
|
||||
| └── static/
|
||||
| └── vite.config.ts
|
||||
├── public/
|
||||
│ ├── favicon.svg
|
||||
│ ├── manifest.json
|
||||
│ └── robots.txt
|
||||
├── src/
|
||||
│ ├── assets/
|
||||
│ │ ├── images/
|
||||
| | └── styles/
|
||||
| | └── global.css
|
||||
│ ├── components/
|
||||
│ │ ├── atoms/
|
||||
│ │ ├── core/
|
||||
│ │ ├── icons/
|
||||
| | └── widgets/
|
||||
| | ├── Header.astro
|
||||
| | ├── Footer.astro
|
||||
| | └── ...
|
||||
│ ├── routes/
|
||||
│ | ├── blog/
|
||||
│ | ├── index.astro
|
||||
| | ├── layout.tsx
|
||||
| | └-- service-worker.ts
|
||||
│ ├── config.mjs
|
||||
│ ├── entry.dev.tsx
|
||||
│ ├── entry.preview.tsx
|
||||
│ ├── entry.ssr.tsx
|
||||
│ └── root.tsx
|
||||
├── package.json
|
||||
└── ...
|
||||
```
|
||||
|
||||
- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
|
||||
|
||||
- `src/components`: Recommended directory for components.
|
||||
|
||||
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
|
||||
|
||||
[](https://githubbox.com/onwidget/qwind/tree/main)
|
||||
|
||||
> **Seasoned qwik expert?** Delete this file. Update `config.mjs` and contents. Have fun!
|
||||
|
||||
<br>
|
||||
|
||||
### Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :-------------------- | :------------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `127.0.0.1:5173/` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run fmt` | Format codes with Prettier |
|
||||
| `npm run lint` | Run Eslint |
|
||||
| `npm run qwik ...` | Run CLI commands like `qwik add`, `qwik build` |
|
||||
|
||||
<br>
|
||||
|
||||
### Configuration
|
||||
|
||||
Basic configuration file: `./src/config.mjs`
|
||||
|
||||
```javascript
|
||||
export const SITE = {
|
||||
name: 'Example',
|
||||
|
||||
origin: 'https://example.com',
|
||||
basePathname: '/', // Change this if you need to deploy to Github Pages, for example
|
||||
trailingSlash: true, // Generate permalinks with or without "/" at the end
|
||||
};
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
### Deploy
|
||||
|
||||
#### Deploy to production (manual)
|
||||
|
||||
You can create an optimized production build with:
|
||||
|
||||
```shell
|
||||
npm run build
|
||||
```
|
||||
|
||||
Now, your website is ready to be deployed. All generated files are located at
|
||||
`dist` folder, which you can deploy the folder to any hosting service you
|
||||
prefer.
|
||||
|
||||
#### Deploy to Netlify
|
||||
|
||||
Clone this repository on own GitHub account and deploy to Netlify:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/onwidget/qwind)
|
||||
|
||||
#### Deploy to Vercel
|
||||
|
||||
Clone this repository on own GitHub account and deploy to Vercel:
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonwidget%2Fqwind)
|
||||
|
||||
<br>
|
||||
|
||||
## Roadmap
|
||||
|
||||
### Base
|
||||
- [ ] Create utilities to generate permalinks tailored to the domain and base pathname.
|
||||
- [ ] Simplify the way to optimize images.
|
||||
- [ ] Create component to make SEO simpler and more intuitive.
|
||||
- [ ] Create configurable blog with categories, tags and authors using MDX.
|
||||
- [ ] Add more frequently used pages (Portfolio, Services, Contact, Docs ...).
|
||||
- [ ] Find or create a library to have more icon sources available.
|
||||
- [ ] Refactor some code that doesn't follow Qwik conventions yet.
|
||||
|
||||
### Advanced
|
||||
|
||||
- [ ] Achieve perfect 100% Google Page Speed score.
|
||||
- [ ] Insert complex javascript example widget on home page to demonstrate Qwik features.
|
||||
- [ ] Create small illustrative admin backend.
|
||||
|
||||
<br>
|
||||
|
||||
## Contributing
|
||||
|
||||
If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.
|
||||
That would be very useful for all of us and we would be happy to listen and take action.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/qwind/graphs/contributors).
|
||||
|
||||
## License
|
||||
|
||||
**Qwind** is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/qwind/blob/main/LICENSE.md) file for details.
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:
|
||||
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
Then visit [http://localhost:8787/](http://localhost:8787/)
|
||||
|
||||
### Deployments
|
||||
|
||||
[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).
|
||||
|
||||
If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
|
||||
|
||||
Within the projects "Settings" for "Build and deployments", the "Build command" should be `npm run build`, and the "Build output directory" should be set to `dist`.
|
||||
|
||||
### Function Invocation Routes
|
||||
|
||||
Cloudflare Page's [function-invocation-routes config](https://developers.cloudflare.com/pages/platform/functions/function-invocation-routes/) can be used to include, or exclude, certain paths to be used by the worker functions. Having a `_routes.json` file gives developers more granular control over when your Function is invoked.
|
||||
This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) `index.html` file.
|
||||
|
||||
By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.json` config, but rather it is auto-generated from the build by the Cloudflare adaptor. An example of an auto-generate `dist/_routes.json` would be:
|
||||
|
||||
```
|
||||
{
|
||||
"include": [
|
||||
"/*"
|
||||
],
|
||||
"exclude": [
|
||||
"/_headers",
|
||||
"/_redirects",
|
||||
"/build/*",
|
||||
"/favicon.ico",
|
||||
"/manifest.json",
|
||||
"/service-worker.js",
|
||||
"/about"
|
||||
],
|
||||
"version": 1
|
||||
}
|
||||
```
|
||||
|
||||
In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.
|
||||
|
||||
In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.
|
||||
|
||||
21
packages/docs/adaptors/static/vite.config.ts
Normal file
21
packages/docs/adaptors/static/vite.config.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { staticAdaptor } from '@builder.io/qwik-city/adaptors/static/vite'
|
||||
import { extendConfig } from '@builder.io/qwik-city/vite'
|
||||
import baseConfig from '../../vite.config'
|
||||
|
||||
import { SITE } from '../../src/config.mjs'
|
||||
|
||||
export default extendConfig(baseConfig, () => {
|
||||
return {
|
||||
build: {
|
||||
ssr: true,
|
||||
rollupOptions: {
|
||||
input: ['@qwik-city-plan'],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
staticAdaptor({
|
||||
origin: SITE.origin,
|
||||
}),
|
||||
],
|
||||
}
|
||||
})
|
||||
@@ -1,44 +1,49 @@
|
||||
{
|
||||
"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": "qwind",
|
||||
"description": "A template to make your website using Qwik + Tailwind CSS.",
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "qwik build && npm run subfont",
|
||||
"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",
|
||||
"subfont": "subfont -i --inline-css --no-fallbacks --silent --root dist",
|
||||
"qwik": "qwik"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@builder.io/qwik": "0.15.0",
|
||||
"@builder.io/qwik-city": "0.0.128",
|
||||
"@fontsource/inter": "^4.5.14",
|
||||
"@iconify-json/tabler": "^1.1.49",
|
||||
"@types/eslint": "8.4.10",
|
||||
"@types/node": "latest",
|
||||
"@typescript-eslint/eslint-plugin": "5.45.0",
|
||||
"@typescript-eslint/parser": "5.45.0",
|
||||
"autoprefixer": "10.4.13",
|
||||
"eslint": "8.29.0",
|
||||
"eslint-plugin-qwik": "0.15.0",
|
||||
"node-fetch": "3.3.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "2.8.0",
|
||||
"subfont": "^6.12.2",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"typescript": "4.8.4",
|
||||
"vite": "3.2.4",
|
||||
"vite-imagetools": "^4.0.11",
|
||||
"vite-tsconfig-paths": "3.6.0",
|
||||
"wrangler": "latest"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=15.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
11
packages/docs/sandbox.config.json
Normal file
11
packages/docs/sandbox.config.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"infiniteLoopProtection": true,
|
||||
"hardReloadOnChange": false,
|
||||
"view": "browser",
|
||||
"template": "node",
|
||||
"container": {
|
||||
"port": 5173,
|
||||
"startScript": "start",
|
||||
"node": "16"
|
||||
}
|
||||
}
|
||||
BIN
packages/docs/screenshot.jpg
Normal file
BIN
packages/docs/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
BIN
packages/docs/src/assets/images/hero.jpg
Normal file
BIN
packages/docs/src/assets/images/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 964 KiB |
BIN
packages/docs/src/assets/images/logo.png
Normal file
BIN
packages/docs/src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
40
packages/docs/src/assets/styles/global.css
Normal file
40
packages/docs/src/assets/styles/global.css
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* WHAT IS THIS FILE?
|
||||
*
|
||||
* Globally applied styles. No matter which components are in the page or matching route,
|
||||
* the styles in here will be applied to the Document, without any sort of CSS scoping.
|
||||
*
|
||||
*/
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center rounded-md shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
|
||||
}
|
||||
|
||||
[data-aw-toggle-menu] path {
|
||||
@apply transition;
|
||||
}
|
||||
[data-aw-toggle-menu].expanded g > path:first-child {
|
||||
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
|
||||
}
|
||||
|
||||
[data-aw-toggle-menu].expanded g > path:last-child {
|
||||
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
18
packages/docs/src/components/atoms/Logo.tsx
Normal file
18
packages/docs/src/components/atoms/Logo.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
// @ts-ignore
|
||||
import logoSrc from '~/assets/images/logo.png?width=64&height=64&png'
|
||||
|
||||
export default component$(() => (
|
||||
<span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white flex items-center">
|
||||
<img
|
||||
src={logoSrc}
|
||||
class="inline-block mr-1"
|
||||
width={32}
|
||||
height={32}
|
||||
alt="Qwind Logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
Qwind
|
||||
</span>
|
||||
))
|
||||
@@ -1,25 +0,0 @@
|
||||
nav.breadcrumbs {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
nav.breadcrumbs > span {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
nav.breadcrumbs > span a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav.breadcrumbs > span::after {
|
||||
content: '>';
|
||||
padding: 0 5px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
nav.breadcrumbs > span:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
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)
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
interface ContentBreadcrumb {
|
||||
text: string
|
||||
href?: string
|
||||
}
|
||||
3
packages/docs/src/components/core/DarkThemeLauncher.tsx
Normal file
3
packages/docs/src/components/core/DarkThemeLauncher.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export const DarkThemeLauncher = () => (
|
||||
<script>{`if(localStorage.theme==="dark"){document.documentElement.classList.add("dark");}else if(typeof localStorage.theme==="undefined"){if(window.matchMedia("(prefers-color-scheme: dark)").matches){document.documentElement.classList.add("dark");}}`}</script>
|
||||
)
|
||||
38
packages/docs/src/components/core/ToggleMenu.tsx
Normal file
38
packages/docs/src/components/core/ToggleMenu.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { component$, useStore } from '@builder.io/qwik'
|
||||
|
||||
import { IconMenu } from '~/components/icons/IconMenu'
|
||||
|
||||
interface ItemProps {
|
||||
iconClass?: string
|
||||
}
|
||||
|
||||
export default component$((props: ItemProps) => {
|
||||
const { iconClass } = props
|
||||
|
||||
const store = useStore({
|
||||
isExpanded: false,
|
||||
})
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={`ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition ${
|
||||
store.isExpanded ? 'expanded' : ''
|
||||
}`}
|
||||
aria-label="Toggle Menu"
|
||||
data-aw-toggle-menu={true}
|
||||
onClick$={() => {
|
||||
store.isExpanded = store.isExpanded ? false : true
|
||||
|
||||
// TODO:
|
||||
document.body.classList.toggle('overflow-hidden')
|
||||
document.getElementById('header')?.classList.toggle('h-screen')
|
||||
document
|
||||
.querySelector('#header nav')
|
||||
?.classList.toggle('hidden')
|
||||
}}
|
||||
>
|
||||
<IconMenu class={iconClass} />
|
||||
</button>
|
||||
)
|
||||
})
|
||||
52
packages/docs/src/components/core/ToggleTheme.tsx
Normal file
52
packages/docs/src/components/core/ToggleTheme.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { component$, useStore, useClientEffect$ } from '@builder.io/qwik'
|
||||
|
||||
import { IconSun } from '~/components/icons/IconSun'
|
||||
import { IconMoon } from '../icons/IconMoon'
|
||||
|
||||
interface ItemProps {
|
||||
iconClass?: string
|
||||
}
|
||||
|
||||
export default component$((props: ItemProps) => {
|
||||
const { iconClass } = props
|
||||
const store = useStore({
|
||||
theme:
|
||||
(typeof window !== 'undefined' && window?.localStorage?.theme) ||
|
||||
undefined,
|
||||
})
|
||||
|
||||
useClientEffect$(() => {
|
||||
store.theme =
|
||||
window.localStorage.theme === 'dark' ||
|
||||
(!('theme' in window.localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
? 'dark'
|
||||
: 'light'
|
||||
})
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onClick$={() => {
|
||||
switch (store.theme) {
|
||||
case 'dark':
|
||||
document.documentElement.classList.remove('dark')
|
||||
store.theme = window.localStorage.theme = 'light'
|
||||
break
|
||||
default:
|
||||
document.documentElement.classList.add('dark')
|
||||
store.theme = window.localStorage.theme = 'dark'
|
||||
break
|
||||
}
|
||||
}}
|
||||
>
|
||||
{store.theme == 'dark' ? (
|
||||
<IconMoon class={iconClass} />
|
||||
) : (
|
||||
<IconSun class={iconClass} />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})
|
||||
@@ -1,22 +0,0 @@
|
||||
footer {
|
||||
border-top: 0.5px solid #ddd;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #9e9e9e;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer li {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { component$, useStyles$ } from '@builder.io/qwik'
|
||||
import styles from './footer.css?inline'
|
||||
|
||||
export default component$(() => {
|
||||
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>
|
||||
)
|
||||
})
|
||||
@@ -1,34 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
header a.logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
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)
|
||||
|
||||
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>
|
||||
)
|
||||
})
|
||||
27
packages/docs/src/components/icons/IconArrowDownRight.tsx
Normal file
27
packages/docs/src/components/icons/IconArrowDownRight.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconArrowDownRight = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-arrow-down-right ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<line x1="7" y1="7" x2="17" y2="17"></line>
|
||||
<polyline points="17 8 17 17 8 17"></polyline>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconFacebook.tsx
Normal file
17
packages/docs/src/components/icons/IconFacebook.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconFacebook = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-facebook w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
|
||||
</svg>
|
||||
)
|
||||
17
packages/docs/src/components/icons/IconGithub.tsx
Normal file
17
packages/docs/src/components/icons/IconGithub.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconGithub = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-github w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
|
||||
</svg>
|
||||
)
|
||||
19
packages/docs/src/components/icons/IconInstagram.tsx
Normal file
19
packages/docs/src/components/icons/IconInstagram.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
export const IconInstagram = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-instagram w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
||||
</svg>
|
||||
)
|
||||
30
packages/docs/src/components/icons/IconMenu.tsx
Normal file
30
packages/docs/src/components/icons/IconMenu.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconMenu = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class={`icon icon-tabler icon-tabler-menu ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
class="icon-tabler"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 8h16"></path>
|
||||
<path d="M4 16h16"></path>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
26
packages/docs/src/components/icons/IconMoon.tsx
Normal file
26
packages/docs/src/components/icons/IconMoon.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconMoon = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-moon ${
|
||||
className || 'w-5 h-5'
|
||||
}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconStar.tsx
Normal file
17
packages/docs/src/components/icons/IconStar.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconStar = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-star w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
|
||||
</svg>
|
||||
)
|
||||
25
packages/docs/src/components/icons/IconSun.tsx
Normal file
25
packages/docs/src/components/icons/IconSun.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
interface ItemProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const IconSun = (props: ItemProps) => {
|
||||
const { class: className } = props
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`icon icon-tabler icon-tabler-sun ${className || 'w-5 h-5'}`}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
17
packages/docs/src/components/icons/IconTwitter.tsx
Normal file
17
packages/docs/src/components/icons/IconTwitter.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
export const IconTwitter = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-twitter w-5 h-5"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
|
||||
</svg>
|
||||
)
|
||||
@@ -1,20 +0,0 @@
|
||||
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>
|
||||
)
|
||||
@@ -1,13 +0,0 @@
|
||||
.menu {
|
||||
background: #eee;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.menu h5 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
padding-left: 20px;
|
||||
margin: 5px 0 25px 0;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
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)
|
||||
|
||||
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>
|
||||
)
|
||||
})
|
||||
@@ -1,33 +0,0 @@
|
||||
.on-this-page {
|
||||
padding-bottom: 20px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.on-this-page h6 {
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.on-this-page ul {
|
||||
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;
|
||||
}
|
||||
|
||||
.on-this-page a.indent {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.on-this-page a:hover {
|
||||
border-color: var(--theme-accent);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
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)
|
||||
|
||||
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}`
|
||||
|
||||
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>
|
||||
)
|
||||
})
|
||||
37
packages/docs/src/components/widgets/CallToAction.tsx
Normal file
37
packages/docs/src/components/widgets/CallToAction.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<section class="relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
|
||||
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
<span class="text-[#039de1]">Qwik</span> +{' '}
|
||||
<br class="block sm:hidden" />
|
||||
<span class="text-[#039de1] sm:whitespace-nowrap">
|
||||
Tailwind CSS
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-slate-400">
|
||||
Be very surprised by these huge fake numbers you are
|
||||
seeing on this page. <br class="hidden md:inline" />
|
||||
Don't waste more time!
|
||||
</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto"
|
||||
href="https://github.com/onwidget/qwind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Get template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
84
packages/docs/src/components/widgets/FAQs.tsx
Normal file
84
packages/docs/src/components/widgets/FAQs.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { IconArrowDownRight } from '../icons/IconArrowDownRight'
|
||||
|
||||
export default component$(() => {
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
question: 'What do I need to start?',
|
||||
answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
|
||||
|
||||
Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
|
||||
},
|
||||
{
|
||||
question: 'How to install the Qwik + Tailwind CSS template?',
|
||||
answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
|
||||
|
||||
Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
"What's something that you completely don't understand?",
|
||||
answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: "What's an example of when you changed your mind?",
|
||||
answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
'What is something that you would really like to try again?',
|
||||
answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
|
||||
|
||||
It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
'If you could only ask one question to each person you meet, what would that question be?',
|
||||
answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
return (
|
||||
<section class="border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
|
||||
FAQs
|
||||
</p>
|
||||
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl sm:mx-auto">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
||||
{items.map((subitems) => (
|
||||
<div class="space-y-8">
|
||||
{subitems.map(({ question, answer }) => (
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-secondary-500 inline-block" />
|
||||
{question}
|
||||
</p>
|
||||
{answer
|
||||
.split('\n\n')
|
||||
.map((paragraph) => (
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
91
packages/docs/src/components/widgets/Features.tsx
Normal file
91
packages/docs/src/components/widgets/Features.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { IconStar } from '~/components/icons/IconStar'
|
||||
|
||||
export default component$(() => {
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
title: 'Qwik + Tailwind CSS Integration',
|
||||
description:
|
||||
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
|
||||
icon: 'tabler:brand-tailwind',
|
||||
},
|
||||
{
|
||||
title: 'Ready-to-use Components',
|
||||
description:
|
||||
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
|
||||
icon: 'tabler:components',
|
||||
},
|
||||
{
|
||||
title: 'Best Practices',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:list-check',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'Excellent Page Speed',
|
||||
description:
|
||||
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
|
||||
icon: 'tabler:rocket',
|
||||
},
|
||||
{
|
||||
title: 'Search Engine Optimization (SEO)',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:arrows-right-left',
|
||||
},
|
||||
{
|
||||
title: 'Open to new ideas and contributions',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:bulb',
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
return (
|
||||
<section class="scroll-mt-16" id="features">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
||||
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
|
||||
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
|
||||
Features
|
||||
</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
What you get with{' '}
|
||||
<span class="whitespace-nowrap">Qwind</span>
|
||||
</h2>
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque rem aperiam, eaque
|
||||
ipsa quae.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
{items.map((subitems) => (
|
||||
<div class="space-y-8 sm:px-8">
|
||||
{subitems.map(({ title, description }) => (
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-secondary-500 dark:bg-secondary-700">
|
||||
<IconStar />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">
|
||||
{title}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
143
packages/docs/src/components/widgets/Footer.tsx
Normal file
143
packages/docs/src/components/widgets/Footer.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { Link } from '@builder.io/qwik-city'
|
||||
|
||||
import { IconTwitter } from '~/components/icons/IconTwitter'
|
||||
import { IconInstagram } from '~/components/icons/IconInstagram'
|
||||
import { IconFacebook } from '~/components/icons/IconFacebook'
|
||||
import { IconGithub } from '~/components/icons/IconGithub'
|
||||
|
||||
export default component$(() => {
|
||||
const links = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ title: 'Features', href: '#' },
|
||||
{ title: 'Security', href: '#' },
|
||||
{ title: 'Team', href: '#' },
|
||||
{ title: 'Enterprise', href: '#' },
|
||||
{ title: 'Customer stories', href: '#' },
|
||||
{ title: 'Pricing', href: '#' },
|
||||
{ title: 'Resources', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Platform',
|
||||
items: [
|
||||
{ title: 'Developer API', href: '#' },
|
||||
{ title: 'Partners', href: '#' },
|
||||
{ title: 'Atom', href: '#' },
|
||||
{ title: 'Electron', href: '#' },
|
||||
{ title: 'Qwind Desktop', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
items: [
|
||||
{ title: 'Docs', href: '#' },
|
||||
{ title: 'Community Forum', href: '#' },
|
||||
{ title: 'Professional Services', href: '#' },
|
||||
{ title: 'Skills', href: '#' },
|
||||
{ title: 'Status', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ title: 'About', href: '#' },
|
||||
{ title: 'Blog', href: '#' },
|
||||
{ title: 'Careers', href: '#' },
|
||||
{ title: 'Press', href: '#' },
|
||||
{ title: 'Inclusion', href: '#' },
|
||||
{ title: 'Social Impact', href: '#' },
|
||||
{ title: 'Shop', href: '#' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const social = [
|
||||
{ label: 'Twitter', icon: IconTwitter, href: '#' },
|
||||
{ label: 'Instagram', icon: IconInstagram, href: '#' },
|
||||
{ label: 'Facebook', icon: IconFacebook, href: '#' },
|
||||
{
|
||||
label: 'Github',
|
||||
icon: IconGithub,
|
||||
href: 'https://github.com/onwidget/qwind',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<footer class="border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
|
||||
<div class="col-span-12 lg:col-span-4 pr-8">
|
||||
<div class="mb-2">
|
||||
<Link
|
||||
class="inline-block font-bold text-xl"
|
||||
href={'/'}
|
||||
>
|
||||
Qwind
|
||||
</Link>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Morbi sagittis, quam nec venenatis lobortis,
|
||||
mi risus tempus nulla
|
||||
</div>
|
||||
</div>
|
||||
{links.map(({ title, items }) => (
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
{title}
|
||||
</div>
|
||||
{items &&
|
||||
Array.isArray(items) &&
|
||||
items.length > 0 && (
|
||||
<ul class="text-sm">
|
||||
{items.map(({ title, href }) => (
|
||||
<li class="mb-2">
|
||||
<Link
|
||||
class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href={href}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
|
||||
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
|
||||
{social.map(({ label, href, icon: Icon }) => (
|
||||
<li>
|
||||
<Link
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label={label}
|
||||
title={label}
|
||||
href={href}
|
||||
>
|
||||
{Icon && <Icon />}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||
<span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"></span>
|
||||
Made by{' '}
|
||||
<a
|
||||
class="text-secondary-700 hover:underline dark:text-gray-200"
|
||||
href="https://onwidget.com/"
|
||||
>
|
||||
{' '}
|
||||
onWidget
|
||||
</a>{' '}
|
||||
· All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
})
|
||||
115
packages/docs/src/components/widgets/Header.tsx
Normal file
115
packages/docs/src/components/widgets/Header.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { component$, 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'
|
||||
|
||||
export default component$(() => {
|
||||
const store = useStore({
|
||||
isScrolling: false,
|
||||
})
|
||||
|
||||
return (
|
||||
<header
|
||||
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all ${
|
||||
store.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
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href={'/'}>
|
||||
<Logo />
|
||||
</a>
|
||||
<div class="flex items-center md:hidden">
|
||||
<ToggleTheme iconClass="w-6 h-6" />
|
||||
<ToggleMenu iconClass="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto md:overflow-visible"
|
||||
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">
|
||||
<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
|
||||
</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>
|
||||
</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={'#'}
|
||||
>
|
||||
Resources
|
||||
</a>
|
||||
</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={'/blog'}
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
<a
|
||||
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="https://github.com/onwidget/qwind"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
|
||||
<div class="hidden items-center md:flex">
|
||||
<ToggleTheme />
|
||||
<a
|
||||
href="https://github.com/onwidget/qwind"
|
||||
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||
aria-label="Qwind Github"
|
||||
>
|
||||
<IconGithub />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
})
|
||||
83
packages/docs/src/components/widgets/Hero.tsx
Normal file
83
packages/docs/src/components/widgets/Hero.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
// @ts-ignore
|
||||
import srcsetAvif from '~/assets/images/hero.jpg?w=400;900&avif&srcset'
|
||||
// @ts-ignore
|
||||
import srcsetWebp from '~/assets/images/hero.jpg?w=400;900&webp&srcset'
|
||||
// @ts-ignore
|
||||
import { src as placeholder } from '~/assets/images/hero.jpg?width=400&metadata'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<section
|
||||
class={`bg-gradient-to-b md:bg-gradient-to-r from-white via-purple-50 to-sky-100 dark:bg-none mt-[-72px]`}
|
||||
>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 md:flex md:h-screen 2xl:h-auto pt-[72px]">
|
||||
<div class="py-12 md:py-12 lg:py-16 block md:flex text-center md:text-left">
|
||||
<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">
|
||||
Chatbot{' '}
|
||||
<span class="text-[#039de1]">Gratis</span>{' '}
|
||||
<br class="hidden lg:block" />{' '}
|
||||
<span class="hidden lg:inline">
|
||||
para optimizar tu negocio en{' '}
|
||||
</span>{' '}
|
||||
<span class="text-[#039de1]">Whatsapp</span>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||
Con nuestro{' '}
|
||||
<span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
|
||||
Chatbot , puede configurar respuestas
|
||||
automatizadas para preguntas frecuentes
|
||||
</span>{' '}
|
||||
, recibir y responder mensajes de manera
|
||||
automatizada, y hacer un seguimiento de las
|
||||
interacciones con los clientes. Además,
|
||||
nuestro Chatbot se integra fácilmente con
|
||||
otros sistemas y herramientas que ya esté
|
||||
utilizando en su negocio.
|
||||
</p>
|
||||
<div class="max-w-xs sm:max-w-md flex flex-nowrap flex-col sm:flex-row gap-4 m-auto md:m-0 justify-center md:justify-start">
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<a
|
||||
class="btn btn-primary sm:mb-0 w-full"
|
||||
href="https://github.com/onwidget/qwind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Get template
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<button class="btn w-full bg-gray-50 dark:bg-transparent">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block md:flex items-center flex-1">
|
||||
<div class="relative m-auto max-w-4xl">
|
||||
<picture>
|
||||
<source srcSet={srcsetAvif} type="image/avif" />
|
||||
<source srcSet={srcsetWebp} type="image/webp" />
|
||||
<img
|
||||
src={placeholder}
|
||||
width={1000}
|
||||
height={1250}
|
||||
class="mx-auto w-full rounded-md md:h-full drop-shadow-2xl bg-gray-400 dark:bg-slate-700"
|
||||
alt="Qwind Hero Image (Cool dog)"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
42
packages/docs/src/components/widgets/Stats.tsx
Normal file
42
packages/docs/src/components/widgets/Stats.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
132K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Downloads
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
24.8K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Stars
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1]">
|
||||
10.3K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Forks
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-[#039de1] font-heading">
|
||||
48.4K
|
||||
</div>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
7
packages/docs/src/config.mjs
Normal file
7
packages/docs/src/config.mjs
Normal file
@@ -0,0 +1,7 @@
|
||||
export const SITE = {
|
||||
name: "Qwind",
|
||||
|
||||
origin: "https://qwind.pages.dev",
|
||||
basePathname: "/",
|
||||
trailingSlash: true
|
||||
};
|
||||
@@ -20,7 +20,9 @@ export default function (opts: RenderToStreamOptions) {
|
||||
...opts,
|
||||
// Use container attributes to set attributes on the html tag.
|
||||
containerAttributes: {
|
||||
lang: 'en-us',
|
||||
lang: 'en',
|
||||
dir: 'ltr',
|
||||
class: 'motion-safe:scroll-smooth 2xl:text-[20px]',
|
||||
...opts.containerAttributes,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--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;
|
||||
|
||||
color-scheme: light;
|
||||
--theme-accent: #006ce9;
|
||||
--theme-text: #181818;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
: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);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 10px 20px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
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;
|
||||
}
|
||||
@@ -1,27 +1,42 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { component$, useStyles$ } 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 { RouterHead } from '~/components/core/RouterHead'
|
||||
import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher'
|
||||
|
||||
import globalStyles from '~/assets/styles/global.css?inline'
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
useStyles$(globalStyles)
|
||||
|
||||
return (
|
||||
<QwikCityProvider>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1"
|
||||
/>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<RouterHead />
|
||||
<DarkThemeLauncher />
|
||||
</head>
|
||||
<body lang="en">
|
||||
<body class="text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-gray-900 antialiased">
|
||||
<RouterOutlet />
|
||||
<ServiceWorkerRegister />
|
||||
</body>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
title: About Bot-Whatsapp .
|
||||
---
|
||||
|
||||
# About Qwik
|
||||
|
||||
Hola soy una prueba
|
||||
|
||||
## More info:
|
||||
|
||||
- [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
|
||||
- [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
|
||||
- [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
|
||||
- [Deployment](https://qwik.builder.io/qwikcity/adaptors/overview/)
|
||||
- [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)
|
||||
27
packages/docs/src/routes/blog/index.tsx
Normal file
27
packages/docs/src/routes/blog/index.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
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 ...',
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
title: Advanced
|
||||
---
|
||||
|
||||
# Advanced
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
## Ferrari
|
||||
|
||||
[Ferrari](https://en.wikipedia.org/wiki/Ferrari) (/fəˈrɑːri/; Italian: [ferˈraːri]) is an Italian luxury sports car manufacturer based in Maranello, Italy. Founded by Enzo Ferrari (1898–1988) in 1939 from the Alfa Romeo racing division as Auto Avio Costruzioni, the company built its first car in 1940, and produced its first Ferrari-badged car in 1947.
|
||||
@@ -1,22 +0,0 @@
|
||||
.docs {
|
||||
display: grid;
|
||||
grid-template-columns: 210px auto 190px;
|
||||
grid-template-areas: 'menu article on-this-page';
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.docs h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.docs .menu {
|
||||
grid-area: menu;
|
||||
}
|
||||
|
||||
.docs article {
|
||||
grid-area: article;
|
||||
}
|
||||
|
||||
.docs .on-this-page {
|
||||
grid-area: on-this-page;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Getting Started
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
```
|
||||
npm create qwik@latest
|
||||
```
|
||||
|
||||
## Ford GT40
|
||||
|
||||
The [Ford GT40](https://en.wikipedia.org/wiki/Ford_GT40) is a high-performance endurance racing car commissioned by the Ford Motor Company. It grew out of the "Ford GT" (for Grand Touring) project, an effort to compete in European long-distance sports car races, against Ferrari, which won the prestigious 24 Hours of Le Mans race from 1960 to 1965. Ford succeeded with the GT40, winning the 1966 through 1969 races.
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
---
|
||||
|
||||
# Docs Site Overview
|
||||
|
||||
This page is wrapped by two layouts because this source file `src/routes/docs/index.md` is nested. The applied layouts are:
|
||||
|
||||
- `src/routes/docs/layout.tsx`
|
||||
- `src/routes/layout.tsx`
|
||||
|
||||
## Left Menu
|
||||
|
||||
The left menu ordering is created with the `src/routes/docs/menu.md` markdown file.
|
||||
|
||||
## More info:
|
||||
|
||||
- [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
|
||||
- [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
|
||||
- [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
|
||||
- [Deployment](https://qwik.builder.io/qwikcity/adaptors/overview/)
|
||||
- [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)
|
||||
@@ -1,25 +0,0 @@
|
||||
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)
|
||||
|
||||
return (
|
||||
<div class="docs">
|
||||
<Menu />
|
||||
<article>
|
||||
<Slot />
|
||||
</article>
|
||||
<OnThisPage />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export const head: DocumentHead = ({ head }) => {
|
||||
return {
|
||||
title: `${head.title} - Documentation`,
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
# Guide
|
||||
|
||||
## Guides
|
||||
|
||||
- [Getting Started](getting-started/index.md)
|
||||
|
||||
## Advanced
|
||||
|
||||
- [Overview](advanced/index.md)
|
||||
|
||||
## Examples
|
||||
|
||||
- [Hello World](https://qwik.builder.io/examples/introduction/hello-world/)
|
||||
- [Tutorials](https://qwik.builder.io/tutorial/welcome/overview/)
|
||||
- [Playground](https://qwik.builder.io/playground/)
|
||||
|
||||
## Community
|
||||
|
||||
- [@QwikDev](https://twitter.com/QwikDev)
|
||||
- [Discord](https://qwik.builder.io/chat)
|
||||
- [GitHub](https://github.com/BuilderIO/qwik)
|
||||
@@ -1,151 +1,31 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import type { DocumentHead } from '@builder.io/qwik-city'
|
||||
|
||||
import Hero from '~/components/widgets/Hero'
|
||||
import Features from '~/components/widgets/Features'
|
||||
import FAQs from '~/components/widgets/FAQs'
|
||||
import Stats from '~/components/widgets/Stats'
|
||||
import CallToAction from '~/components/widgets/CallToAction'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<>
|
||||
<h1>Welcome to BotWhatsapp Docs Starter</h1>
|
||||
|
||||
<ul>
|
||||
<li>This homepage uses a layout without a menu.</li>
|
||||
<li>
|
||||
<span>The </span>
|
||||
<a href="/docs">Documentation</a>
|
||||
<span>
|
||||
{' '}
|
||||
pages use multiple nested layouts, one of them providing
|
||||
a left menu.
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
Check out the <code>src/routes</code> directory to get
|
||||
started.
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<span>Questions or just want to say hi? </span>
|
||||
<a href="https://qwik.builder.io/chat" target="_blank">
|
||||
Chat on discord!
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>Follow </span>
|
||||
<a href="https://twitter.com/QwikDev" target="_blank">
|
||||
@QwikDev
|
||||
</a>
|
||||
<span> on Twitter</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Open issues and contribute on </span>
|
||||
<a href="https://github.com/BuilderIO/qwik" target="_blank">
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>Watch </span>
|
||||
<a href="https://qwik.builder.io/media/" target="_blank">
|
||||
Presentations, Podcasts, Videos, etc.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<Hero />
|
||||
<Features />
|
||||
<FAQs />
|
||||
<Stats />
|
||||
<CallToAction />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export const head: DocumentHead = {
|
||||
title: 'Welcome to Qwik Docs Starter',
|
||||
title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Qwind is a free and ready to start template to make your website using Qwik and Tailwind CSS.',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
@@ -1,8 +1,21 @@
|
||||
import { component$, Slot } from '@builder.io/qwik'
|
||||
import Footer from '~/components/footer/footer'
|
||||
import Header from '~/components/header/header'
|
||||
|
||||
import Footer from '~/components/widgets/Footer'
|
||||
import Header from '~/components/widgets/Header'
|
||||
|
||||
export default component$(() => {
|
||||
// useClientEffect$(() => {
|
||||
// if (
|
||||
// localStorage.theme === "dark" ||
|
||||
// (!("theme" in localStorage) &&
|
||||
// window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
// ) {
|
||||
// document.documentElement.classList.add("dark");
|
||||
// } else {
|
||||
// document.documentElement.classList.remove("dark");
|
||||
// }
|
||||
// });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"outDir": "tmp",
|
||||
"noEmit": true,
|
||||
"types": ["node", "vite/client"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
|
||||
@@ -1,15 +1,33 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { qwikVite } from '@builder.io/qwik/optimizer'
|
||||
import { qwikCity } from '@builder.io/qwik-city/vite'
|
||||
import { imagetools } from 'vite-imagetools'
|
||||
import tsconfigPaths from 'vite-tsconfig-paths'
|
||||
|
||||
import { SITE } from './src/config.mjs'
|
||||
|
||||
const path = require('path')
|
||||
|
||||
export default defineConfig(() => {
|
||||
return {
|
||||
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
|
||||
plugins: [
|
||||
qwikCity({
|
||||
basePathname: SITE.basePathname,
|
||||
trailingSlash: SITE.trailingSlash,
|
||||
}),
|
||||
qwikVite(),
|
||||
tsconfigPaths(),
|
||||
imagetools(),
|
||||
],
|
||||
preview: {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=600',
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@bot-whatsapp/provider",
|
||||
"version": "0.0.25-alpha.0",
|
||||
"version": "0.0.26-alpha.0",
|
||||
"description": "Esto es el conector a Twilio, Meta, etc...",
|
||||
"main": "./lib/mock/index.cjs",
|
||||
"keywords": [],
|
||||
@@ -16,6 +16,8 @@
|
||||
"exports": {
|
||||
"./mock": "./lib/mock/index.cjs",
|
||||
"./twilio": "./lib/twilio/index.cjs",
|
||||
"./web-whatsapp": "./lib/web-whatsapp/index.cjs"
|
||||
"./web-whatsapp": "./lib/web-whatsapp/index.cjs",
|
||||
"./venom": "./lib/venom/index.cjs",
|
||||
"./baileys": "./lib/baileys/index.cjs"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,4 +30,22 @@ 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()],
|
||||
},
|
||||
]
|
||||
|
||||
171
packages/provider/src/baileys/index.js
Normal file
171
packages/provider/src/baileys/index.js
Normal file
@@ -0,0 +1,171 @@
|
||||
const { ProviderClass } = require('@bot-whatsapp/bot')
|
||||
const pino = require('pino')
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = BaileysProvider
|
||||
21
packages/provider/src/baileys/utils.js
Normal file
21
packages/provider/src/baileys/utils.js
Normal file
@@ -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 }
|
||||
116
packages/provider/src/venom/index.js
Normal file
116
packages/provider/src/venom/index.js
Normal file
@@ -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
|
||||
36
packages/provider/src/venom/utils.js
Normal file
36
packages/provider/src/venom/utils.js
Normal file
@@ -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 }
|
||||
@@ -3,10 +3,10 @@ const { ProviderClass } = require('@bot-whatsapp/bot')
|
||||
const { Console } = require('console')
|
||||
const { createWriteStream } = require('fs')
|
||||
const {
|
||||
cleanNumber,
|
||||
generateImage,
|
||||
isValidNumber,
|
||||
downloadMedia,
|
||||
wwebCleanNumber,
|
||||
wwebDownloadMedia,
|
||||
wwebGenerateImage,
|
||||
wwebIsValidNumber,
|
||||
} = require('./utils')
|
||||
|
||||
const logger = new Console({
|
||||
@@ -31,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)
|
||||
@@ -59,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)
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -78,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)
|
||||
},
|
||||
},
|
||||
@@ -97,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,
|
||||
@@ -162,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)
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
12
starters/apps/base-bailey-memory/README.md
Normal file
12
starters/apps/base-bailey-memory/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
82
starters/apps/base-bailey-memory/app.js
Normal file
82
starters/apps/base-bailey-memory/app.js
Normal file
@@ -0,0 +1,82 @@
|
||||
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 flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(BaileysProvider)
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-bailey-memory/package.json
Normal file
20
starters/apps/base-bailey-memory/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-bailey-memory",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-bailey-memory",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"@adiwajshing/baileys": "^4.4.0",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
12
starters/apps/base-bailey-mongo/README.md
Normal file
12
starters/apps/base-bailey-mongo/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
82
starters/apps/base-bailey-mongo/app.js
Normal file
82
starters/apps/base-bailey-mongo/app.js
Normal file
@@ -0,0 +1,82 @@
|
||||
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 flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(BaileysProvider)
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-bailey-mongo/package.json
Normal file
20
starters/apps/base-bailey-mongo/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-bailey-mongo",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-bailey-mongo",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"@adiwajshing/baileys": "^4.4.0",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
12
starters/apps/base-bailey-mysql/README.md
Normal file
12
starters/apps/base-bailey-mysql/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
82
starters/apps/base-bailey-mysql/app.js
Normal file
82
starters/apps/base-bailey-mysql/app.js
Normal file
@@ -0,0 +1,82 @@
|
||||
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 flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(BaileysProvider)
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-bailey-mysql/package.json
Normal file
20
starters/apps/base-bailey-mysql/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-bailey-mysql",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-bailey-mysql",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"@adiwajshing/baileys": "^4.4.0",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
@@ -3,20 +3,80 @@ const {
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
addChild,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
const TwilioProvider = require('@bot-whatsapp/provider/twilio')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
/**
|
||||
* Declarando flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(WebWhatsappProvider)
|
||||
|
||||
const adapterProvider = createProvider(TwilioProvider, {
|
||||
accountSid: 'YOUR_ACCOUNT_SID',
|
||||
authToken: 'YOUR_ACCOUNT_TOKEN',
|
||||
vendorNumber: '+14155238886',
|
||||
})
|
||||
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base",
|
||||
"name": "bot-whatsapp-base-twilio-memory",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
@@ -9,7 +9,9 @@
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"whatsapp-web.js": "^1.18.3",
|
||||
"body-parser": "^1.20.1",
|
||||
"polka": "^0.5.2",
|
||||
"twilio": "^3.83.4",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
|
||||
@@ -3,20 +3,79 @@ const {
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
addChild,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
const TwilioProvider = require('@bot-whatsapp/provider/twilio')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
/**
|
||||
* Declarando flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(WebWhatsappProvider)
|
||||
const adapterProvider = createProvider(TwilioProvider, {
|
||||
accountSid: 'YOUR_ACCOUNT_SID',
|
||||
authToken: 'YOUR_ACCOUNT_TOKEN',
|
||||
vendorNumber: '+14155238886',
|
||||
})
|
||||
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base",
|
||||
"name": "bot-whatsapp-base-twilio-mongo",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
@@ -9,7 +9,9 @@
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"whatsapp-web.js": "^1.18.3",
|
||||
"body-parser": "^1.20.1",
|
||||
"polka": "^0.5.2",
|
||||
"twilio": "^3.83.4",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
|
||||
@@ -3,21 +3,79 @@ const {
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
addChild,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
const TwilioProvider = require('@bot-whatsapp/provider/twilio')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
/**
|
||||
* Declarando flujo hijo
|
||||
*/
|
||||
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*2*', 'o', '*bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer('Hola, bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*Zapatos*', 'o', '*Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
console.log(ctx['_data']['notifyName'])
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(WebWhatsappProvider)
|
||||
|
||||
const adapterProvider = createProvider(TwilioProvider, {
|
||||
accountSid: 'YOUR_ACCOUNT_SID',
|
||||
authToken: 'YOUR_ACCOUNT_TOKEN',
|
||||
vendorNumber: '+14155238886',
|
||||
})
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base",
|
||||
"name": "bot-whatsapp-base-twilio-mysql",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
@@ -9,7 +9,9 @@
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"whatsapp-web.js": "^1.18.3",
|
||||
"body-parser": "^1.20.1",
|
||||
"polka": "^0.5.2",
|
||||
"twilio": "^3.83.4",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
|
||||
12
starters/apps/base-venom-memory/README.md
Normal file
12
starters/apps/base-venom-memory/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
28
starters/apps/base-venom-memory/app.js
Normal file
28
starters/apps/base-venom-memory/app.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const VenomProvider = require('@bot-whatsapp/provider/venom')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(VenomProvider)
|
||||
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-venom-memory/package.json
Normal file
20
starters/apps/base-venom-memory/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-venom-memory",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-venom-memory",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"venom-bot": "^4.3.7",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
12
starters/apps/base-venom-mongo/README.md
Normal file
12
starters/apps/base-venom-mongo/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
28
starters/apps/base-venom-mongo/app.js
Normal file
28
starters/apps/base-venom-mongo/app.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const VenomProvider = require('@bot-whatsapp/provider/venom')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(VenomProvider)
|
||||
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-venom-mongo/package.json
Normal file
20
starters/apps/base-venom-mongo/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-venom-mongo",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-venom-mongo",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"venom-bot": "^4.3.7",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
12
starters/apps/base-venom-mysql/README.md
Normal file
12
starters/apps/base-venom-mysql/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
### BASE APP
|
||||
|
||||
Este bot contiene un flujo basico en el cual una persona (cliente) escribe **"hola"** y el bot responde.
|
||||
- Bienvenido a mi tienda
|
||||
- Como puedo ayudarte?
|
||||
- Tengo: Zapatos Bolsos etc..
|
||||
|
||||
------
|
||||
- [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)
|
||||
28
starters/apps/base-venom-mysql/app.js
Normal file
28
starters/apps/base-venom-mysql/app.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const VenomProvider = require('@bot-whatsapp/provider/venom')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'HOLA'])
|
||||
.addAnswer('Bienvenido a mi tienda')
|
||||
.addAnswer('Como puedo ayudarte?')
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc..'])
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(VenomProvider)
|
||||
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
20
starters/apps/base-venom-mysql/package.json
Normal file
20
starters/apps/base-venom-mysql/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bot-whatsapp-base-venom-mysql",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"pre-copy": "cd .. && yarn run copy.lib base-venom-mysql",
|
||||
"start": "node app.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"dependencies": {
|
||||
"venom-bot": "^4.3.7",
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user