Merge pull request #314 from codigoencasa/dev

Dev

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: BotWhatsapp Build-Test
+name: 🤪 Build and Test
 
 on:
     pull_request:

.github/workflows/contributors.yml

@@ -1,4 +1,4 @@
-name: Add contributors
+name: 🙌 Revisando Colaboradores
 on:
     pull_request:
         branches:

.github/workflows/netlify-dev.yml

@@ -0,0 +1,46 @@
+name: 📄 Desplegando documentacion
+
+on:
+    pull_request:
+        branches:
+            - 'feat/docs-**'
+            - 'fix/docs-**'
+    push:
+        branches:
+            - 'feat/docs-**'
+            - 'fix/docs-**'
+
+jobs:
+    ############ DOCUMENTATION BUILD ############
+    build-documentation:
+        name: Build Package
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Add netlify
+              run: yarn add netlify-cli -D
+
+            - name: Create .env build file
+              run: |
+                  touch packages/docs/.env
+                  echo VITE_GITHUB_TOKEN=${{ secrets.COLLABORATORS_TOKEN }} >> packages/docs/.env
+
+            - name: Build and Deploy
+              run: |
+                  cd packages/docs
+                  netlify deploy --build --site ${{ secrets.NETLIFY_SITE_ID }} --auth ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/netlify.yml

@@ -0,0 +1,41 @@
+name: 📄 (PROD) Desplegando documentacion
+
+on:
+    push:
+        branches:
+            - next-release
+
+jobs:
+    ############ DOCUMENTATION BUILD ############
+    build-documentation:
+        name: Build Package
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Add netlify
+              run: yarn add netlify-cli -D
+
+            - name: Create .env build file
+              run: |
+                  touch packages/docs/.env
+                  echo VITE_GITHUB_TOKEN=${{ secrets.COLLABORATORS_TOKEN }} >> packages/docs/.env
+
+            - name: Build and Deploy
+              run: |
+                  cd packages/docs
+                  netlify deploy --prod --build --site ${{ secrets.NETLIFY_SITE_ID }} --auth ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/releases-dev.yml

@@ -1,4 +1,4 @@
-name: BotWhatsapp Releases(DEV)
+name: 🚀 (DEV) Liberando versiones
 
 on:
     push:

.github/workflows/releases.yml

@@ -1,4 +1,4 @@
-name: BotWhatsapp Releases(Prod)
+name: 🚀⚡ Liberando versiones
 
 on:
     push:

.gitignore

@@ -35,4 +35,6 @@ base-*/
 qr.svg
 package-lock.json
 yarn-error.log
-.npmrc
+.npmrc
+# Local Netlify folder
+.netlify

README.md

@@ -1,10 +1,10 @@
 [![Test / Coverage](https://github.com/leifermendez/bot-whatsapp/actions/workflows/ci.yml/badge.svg)](https://github.com/leifermendez/bot-whatsapp/actions/workflows/ci.yml)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 --------
-🐤 Tablero de tareas : [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1)
+## Documentacion
+[https://bot-whatsapp.netlify.app/](https://bot-whatsapp.netlify.app/)
 
-🦊 Documentación: [https://bot-whatsapp-codigoencasa.pages.dev/](https://bot-whatsapp-codigoencasa.pages.dev/)
+🐤 Tablero de tareas : [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1)
-Video como hacer PR: https://youtu.be/Lxt8Acob6aU
 
 🚀 __Roadmap:__ [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1)
 

packages/bot/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/bot",
-    "version": "0.0.26-alpha.0",
+    "version": "0.0.27-alpha.0",
     "description": "",
     "main": "./lib/bundle.bot.cjs",
     "scripts": {

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/cli",
-    "version": "0.0.33-alpha.0",
+    "version": "0.0.34-alpha.0",
     "description": "",
     "main": "index.js",
     "devDependencies": {

packages/create-bot-whatsapp/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-bot-whatsapp",
-    "version": "0.0.44-alpha.0",
+    "version": "0.0.45-alpha.0",
     "description": "",
     "main": "./lib/bundle.create-bot-whatsapp.cjs",
     "files": [

packages/database/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/database",
-    "version": "0.0.25-alpha.0",
+    "version": "0.0.26-alpha.0",
     "description": "Esto es el conector a  mysql, pg, mongo",
     "main": "./lib/mock/index.cjs",
     "keywords": [],

packages/docs/.gitignore

@@ -41,3 +41,6 @@ package-lock.json
 
 # Cloudflare
 functions/**/*.js
+
+# Netlify
+.netlify

packages/docs/README.md

@@ -285,3 +285,72 @@ By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.js
 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.
+
+## Express Server
+
+This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:8080/](http://localhost:8080/)
+
+## Netlify
+
+This starter site is configured to deploy to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/), which means it will be rendered at an edge location near to your users.
+
+### Local development
+
+The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
+
+1. Install Netlify CLI globally `npm i -g netlify-cli`.
+2. Build your site with both ssr and static `npm run build`.
+3. Start a local server with `npm run serve`.
+   In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
+4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
+
+### Edge Functions Declarations
+
+[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/)
+can be configured to run on specific URL patterns. Each edge function declaration associates
+one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations.
+
+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 instead.
+
+By default, the Netlify Edge adaptor will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions.
+
+To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:
+
+```toml
+[[edge_functions]]
+  path = "/admin"
+  function = "auth"
+```
+
+### Deployments
+
+You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This starter site includes a `netlify.toml` file to configure your build for deployment.
+
+#### Deploying via Git
+
+Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link your site to a Git provider from the Netlify CLI, run the command:
+
+```shell
+netlify link
+```
+
+This sets up [continuous deployment](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) for your site's repo. Whenever you push new commits to your repo, Netlify starts the build process..
+
+#### Deploying manually via the CLI
+
+If you wish to deploy from the CLI rather than using Git, you can use the command:
+
+```shell
+netlify deploy --build
+```
+
+You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
+
+Add `--prod` flag to deploy to production.

packages/docs/adaptors/netlify-edge/vite.config.ts

@@ -1,4 +1,4 @@
-import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite'
+import { netifyEdgeAdaptor } from '@builder.io/qwik-city/adaptors/netlify-edge/vite'
 import { extendConfig } from '@builder.io/qwik-city/vite'
 import baseConfig from '../../vite.config'
 
@@ -7,11 +7,12 @@ export default extendConfig(baseConfig, () => {
         build: {
             ssr: true,
             rollupOptions: {
-                input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+                input: ['src/entry.netlify-edge.tsx', '@qwik-city-plan'],
             },
+            outDir: '.netlify/edge-functions/entry.netlify-edge',
         },
         plugins: [
-            cloudflarePagesAdaptor({
+            netifyEdgeAdaptor({
                 staticGenerate: true,
             }),
         ],

packages/docs/netlify.toml

@@ -1,7 +1,7 @@
 [build]
-  publish = "dist"
+publish = "dist"
-  command = "npm run build"
+command = "npm run build"
-[[headers]]
+
-  for = "/build/*"
+[[edge_functions]]
-  [headers.values]
+path = "/*"
-    Cache-Control = "public, max-age=31536000, immutable"
+function = "entry.netlify-edge"

packages/docs/package.json

@@ -6,9 +6,9 @@
     "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.server": "vite build -c adaptors/netlify-edge/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
-    "deploy": "wrangler pages dev ./dist",
+    "deploy": "netlify deploy --prod",
     "dev": "vite --host --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
@@ -20,7 +20,7 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.15.0",
+    "@builder.io/qwik": "0.16.1",
     "@builder.io/qwik-city": "0.0.128",
     "@fontsource/inter": "^4.5.14",
     "@iconify-json/tabler": "^1.1.49",
@@ -28,15 +28,18 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.0",
+    "@types/compression": "^1.7.2",
     "@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",
+    "compression": "^1.7.4",
     "eslint": "8.29.0",
     "eslint-plugin-qwik": "0.15.0",
     "imagetools-core": "^3.2.3",
-    "node-fetch": "3.3.0",
+    "netlify-cli": "^12.0.11",
+    "node-fetch": "^3.3.0",
     "postcss": "^8.4.19",
     "prettier": "2.8.0",
     "rehype-autolink-headings": "^6.1.1",
@@ -45,10 +48,9 @@
     "typescript": "4.8.4",
     "vite": "3.2.4",
     "vite-imagetools": "^4.0.11",
-    "vite-tsconfig-paths": "3.6.0",
+    "vite-tsconfig-paths": "3.6.0"
-    "wrangler": "latest"
   },
   "engines": {
-    "node": ">=15.0.0"
+    "node": ">=17.0.0"
   }
 }

packages/docs/public/_headers

@@ -1,4 +1,2 @@
-# https://developers.cloudflare.com/pages/platform/headers/
-
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

packages/docs/src/components/icons/IconArrowDownRight.tsx

@@ -18,10 +18,6 @@ export const IconArrowDownRight = (props: ItemProps) => {
             fill="none"
             stroke-linecap="round"
             stroke-linejoin="round"
-        >
+        ></svg>
-            <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>
     )
 }

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

@@ -1,17 +1,23 @@
-import { component$ } from '@builder.io/qwik'
+import { $, component$, QwikMouseEvent } from '@builder.io/qwik'
+
+export const handleVideo = $((ev: QwikMouseEvent<HTMLVideoElement>) => {
+    const targetVideo = ev.target as HTMLVideoElement
+    targetVideo.play()
+})
 
 export default component$(() => {
     return (
-        <section class="relative">
+        <section class="relative border-t border-gray-200 dark:border-slate-800">
-            <div class="max-w-6xl mx-auto px-4 sm:px-6">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 ">
-                <div class="py-12 md:py-20">
+                <div class="py-0 md:py-5">
                     <video
+                        class={'cursor-pointer'}
+                        onClick$={handleVideo}
                         style={'height:600px'}
                         width="100%"
                         height="400"
                         autoPlay
                         muted
-                        loop
                         playsInline
                     >
                         <source

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

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(
+    (props: {
+        user: {
+            id: number
+            login: string
+            html_url: string
+            avatar_url: string
+        }
+    }) => {
+        return (
+            <figure class="bg-gray-50 rounded p-4  dark:bg-slate-800">
+                <a href={props.user.html_url} target="_blank">
+                    <img
+                        class="w-16 h-16 rounded-full mx-auto object-cover"
+                        src={props.user.avatar_url + '&s=80'}
+                        alt={props.user.login}
+                        width="80"
+                        height="80"
+                    />
+                </a>
+
+                <div class="pt-2 space-y-4 justify-center flex">
+                    <figcaption class="text-sm">
+                        <div class={'font-semibold'}>{props.user.login}</div>
+                    </figcaption>
+                </div>
+            </figure>
+        )
+    }
+)

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

@@ -1,46 +1,46 @@
 import { component$ } from '@builder.io/qwik'
+import { RequestHandlerCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages'
+import { User } from '~/contexts'
+import Collaborator from './Collaborator'
 
-export default component$(() => {
+export const onRequest: RequestHandlerCloudflarePages = async () => {
+    console.log('??heree')
+}
+
+export const TaleUsers = component$((props: { users: User[] }) => {
     return (
-        <div class={'pt-4'}>
+        <>
-            <div class="flex items-center space-x-2 text-base">
+            {props.users.map((user) => (
-                <h4 class="font-semibold text-slate-900">Contributors</h4>
+                <div class="col-span-2 ">
-                <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
+                    {' '}
-                    204
+                    <Collaborator user={user} />
-                </span>
+                </div>
-            </div>
+            ))}
-            <div class="mt-3 flex -space-x-2 overflow-hidden">
+        </>
-                <img
+    )
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+})
-                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+
-                    alt=""
+export default component$((props: { users: User[] }) => {
-                />
+    return (
-                <img
+        <section class="relative ">
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+            <div class={'px-4 py-16 mx-auto max-w-6xl lg:py-20'}>
-                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
-                    alt=""
+                    <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
-                />
+                        Colaboradores
-                <img
+                    </p>
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                        Super estrellas
-                    alt=""
+                    </h2>
-                />
+                    <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
-                <img
+                        Todo es posible gracias a el mayor recursos de todos, el
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                        recurso humano. Tu tambien puedes formar parte
-                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    </p>
-                    alt=""
+                </div>
-                />
+
-                <img
+                <div class="grid lg:grid-cols-12 grid-cols-1 gap-4 ">
-                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    <TaleUsers users={props.users} />
-                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                </div>
-                    alt=""
+            </div>
-                />
+        </section>
-            </div>
-            <div class="mt-3 text-sm font-medium">
-                <a href="#" class="text-blue-500">
-                    + 198 others
-                </a>
-            </div>
-        </div>
     )
 })

packages/docs/src/contexts/index.tsx

@@ -6,7 +6,12 @@ export interface DocumentationCtx {
     list: { link: string; name: string }[]
 }
 
+export interface User {
+    id: number
+    login: string
+    html_url: string
+    avatar_url: string
+}
+
 export const GlobalStore =
     createContext<DocumentationCtx[]>('documentation-site')
-
-export const AppSetting = createContext<{ repo: string }>('app-settings')

packages/docs/src/entry.express.tsx

@@ -0,0 +1,50 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the  entry point for the express server when building for production.
+ *
+ * Learn more about the cloudflare integration here:
+ * - https://qwik.builder.io/qwikcity/adaptors/node/
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node'
+import qwikCityPlan from '@qwik-city-plan'
+import render from './entry.ssr'
+import express from 'express'
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import compression from 'compression'
+
+// Directories where the static assets are located
+const distDir = join(fileURLToPath(import.meta.url), '..', '..', 'dist')
+const buildDir = join(distDir, 'build')
+
+// Allow for dynamic port
+const PORT = process.env.PORT ?? 3000
+
+// Create the Qwik City express middleware
+const { router, notFound } = createQwikCity({ render, qwikCityPlan })
+
+// Create the express server
+// https://expressjs.com/
+const app = express()
+
+// Enable gzip compression
+app.use(compression())
+
+// Static asset handlers
+// https://expressjs.com/en/starter/static-files.html
+app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y' }))
+app.use(express.static(distDir, { redirect: false }))
+
+// Use Qwik City's page and endpoint request handler
+app.use(router)
+
+// Use Qwik City's 404 handler
+app.use(notFound)
+
+// Start the express server
+app.listen(PORT, () => {
+    /* eslint-disable */
+    console.log(`Server starter: http://localhost:${PORT}/`)
+})

packages/docs/src/entry.netlify-edge.tsx

@@ -0,0 +1,14 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the  entry point for netlify-edge when building for production.
+ *
+ * Learn more about the cloudflare integration here:
+ * - https://qwik.builder.io/qwikcity/adaptors/netlify-edge/
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge'
+import qwikCityPlan from '@qwik-city-plan'
+import render from './entry.ssr'
+
+export default createQwikCity({ render, qwikCityPlan })

packages/docs/src/routes/docs/constant.ts

@@ -0,0 +1 @@
+export const GITHUB_TOKEN = import.meta.env.VITE_GITHUB_TOKEN ?? 'SIN_TOKEN'

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

@@ -9,12 +9,12 @@ import Alert from '../../components/widgets/Alert'
     disfrutar de las nuevas características.
 </Alert>
 
-## ¿Que es esto?
+## ¿Què es esto?
 
 **@bot-whatsapp** es una librería que te permitirá **crear chatbot para WhatsApp** en tan solo minutos de una manera ágil y rápida. A lo largo de esta documentación encontrarás ejemplos y material de ayuda.
 
-Si eres una persona con **poco tiempo y gran capacidad** de comprensión con conocimientos, ejecutando proyectos en Node.js y manejo de terminal.
+Si eres una persona con **poco tiempo y gran capacidad** de comprensión, con conocimientos ejecutando proyectos en Node.js y manejo de terminal.
-Esta documentación te ayudará a instalar tu bot de WhatsApp en simples pasos con el propósito de que tengas un chatbot funcional **en solo minutos.**
+Esta documentación te ayudará a instalar tu bot de WhatsApp en simples pasos; con el propósito de que tengas un chatbot funcional **en solo minutos.**
 
 ---
 
@@ -40,5 +40,5 @@ npm create bot-whatsapp@latest
     </video>
 </div>
 
-**¿Algun error?**
+**¿Algún error?**
 Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema

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

@@ -1,3 +1,26 @@
 # Unirme
 
+Bienvenido al proyecto! Estamos emocionados de tenerte a bordo y esperamos trabajar contigo.
+
+Deseamos que te sientas cómodo y que puedas aportar tu valioso conocimiento y habilidades.
+
+Recuerda que si tienes alguna inquietud, o simplemente deseas interactuar con los otros colaboradores puedes unirte a la comunidad. 
+
+## Ventajas al unirme
+
+Participar en un proyecto de código abierto te permite aprender de manera práctica sobre tecnologías y metodologías de desarrollo de software. También puedes aprender de otros desarrolladores y contribuir a la comunidad de código abierto.
+
+Al unirte te estará brindando la oportunidad de **adquirir experiencia en el desarrollo de software** y en el trabajo en equipo. Esto puede ser muy valioso para tu currículum y para tu carrera profesional.
+
+La visibilidad es uno de los puntos que más se requieren hoy en día, al unirte se te brinda la oportunidad de **mayor visibilidad en la comunidad de desarrolladores y de demostrar tus habilidades**. Esto puede ayudarte a encontrar oportunidades de trabajo o a colaborar con otros proyectos.
+
+Colaboración con otros desarrolladores de todo el mundo y **trabajar juntos para mejorar el proyecto** Al trabajar en equipo y colaborar con otros, podrás mejorar tu comunicación, resolución de problemas y liderazgo, habilidades que cada vez son más demandadas en el entorno laboral. 
+
+Contribución al bien común Participar en un proyecto de código abierto te permite contribuir a la comunidad y a la sociedad en general, ya que el código abierto es accesible y utilizable por cualquier persona. **Esto puede ser muy gratificante y sentirte parte de algo más grande**.
+
+Es una excelente manera de incrementar tus habilidades tecnológicas y **estar al tanto de las últimas tendencias y desarrollos en el mundo del software**. Al trabajar con otros desarrolladores y contribuir a proyectos de código abierto, tendrás la oportunidad de **aprender y practicar nuevas tecnologías y metodologías, lo que te ayudará a mejorar tus habilidades y a mantenerte actualizado en el mundo en constante cambio de la tecnología. 
+
+
+Esperamos que estés listo para **unirte a nosotros en esta emocionante aventura**
+
 ...

packages/docs/src/routes/index.tsx

@@ -1,20 +1,35 @@
-import { component$ } from '@builder.io/qwik'
+import { component$, Resource } from '@builder.io/qwik'
-import type { DocumentHead } from '@builder.io/qwik-city'
+import { DocumentHead, useEndpoint } 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'
+import Collaborators from '~/components/widgets/Collaborators'
+import { fetchGithub } from '~/services/github'
+import { RequestHandlerNetlify } from '@builder.io/qwik-city/middleware/netlify-edge'
+import { GITHUB_TOKEN } from './docs/constant'
+
+export const onGet: RequestHandlerNetlify = async ({ platform }) => {
+    const CHECK_GITHUB_TOKEN =
+        (platform as any)?.['GITHUB_TOKEN'] ?? GITHUB_TOKEN
+    console.log(`[🚩 platform]: `, GITHUB_TOKEN)
+    const data = await fetchGithub(CHECK_GITHUB_TOKEN)
+    return data
+}
 
 export default component$(() => {
+    const resource = useEndpoint()
+
     return (
         <>
             <Hero />
             <Features />
             <CallToAction />
+            <Resource
+                value={resource}
+                onResolved={(data: any) => <Collaborators users={data} />}
+            ></Resource>
             <FAQs />
-            {/* <Stats /> */}
         </>
     )
 })

packages/docs/src/services/github.ts

@@ -0,0 +1,19 @@
+/**
+ * GET API from Github
+ * @returns
+ */
+export const fetchGithub = async (token: string) => {
+    const data = await fetch(
+        `https://api.github.com/repos/codigoencasa/bot-whatsapp/contributors`,
+        {
+            method: 'GET',
+            headers: {
+                Accept: 'application/vnd.github+json',
+                'X-GitHub-Api-Version': '2022-11-28',
+                Authorization: `Bearer ${token}`,
+            },
+        }
+    )
+    const listUsers = data.json()
+    return listUsers
+}

packages/docs/vite.config.ts

@@ -13,11 +13,6 @@ export default defineConfig(() => {
             qwikCity({
                 basePathname: SITE.basePathname,
                 trailingSlash: SITE.trailingSlash,
-                mdxPlugins: {
-                    rehypeSyntaxHighlight: true,
-                    rehypeAutolinkHeadings: false,
-                    remarkGfm: true,
-                },
             }),
             qwikVite(),
             tsconfigPaths(),

packages/provider/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bot-whatsapp/provider",
-    "version": "0.0.31-alpha.0",
+    "version": "0.0.32-alpha.0",
     "description": "Esto es el conector a Twilio, Meta, etc...",
     "main": "./lib/mock/index.cjs",
     "keywords": [],