docs(websitedoc): added new website

.github/workflows/publish-doc.yml

@@ -0,0 +1,24 @@
+on: [push]
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            deployments: write
+        name: Publish Docs
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - run: npm install
+            - run: npm run build --if-present
+
+            - name: Publish Docs
+              uses: cloudflare/pages-action@1
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  projectName: bot-whatsapp-docs
+                  directory: packages/docs/dist
+                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,5 +1,7 @@
 /node_modules
 /packages/*/node_modules
+/packages/*/dist
+/packages/*/docs/dist
 session.json
 chats/*
 !chats/.gitkeep

.prettierignore

@@ -1,4 +1,5 @@
 packages/**/lib
+packages/docs
 **/.git
 **/.svn
 **/.hg

TODO.md

@@ -14,7 +14,7 @@
 - [ ] createDatabase validar implementacion de funciones
 
 ### @bot-whatsapp/database
-- [ ] agregar export package
+- [X] agregar export package
 - [X] __(doc):__ Video para explicar como implementar nuevos database
 - [X] Mongo adapter
 - [ ] MySQL adapter

package.json

@@ -25,8 +25,11 @@
         "prepare": "husky install"
     },
     "workspaces": [
-        "packages/*",
-        "docs"
+        "packages/bot",
+        "packages/cli",
+        "packages/database",
+        "packages/provider",
+        "packages/docs"
     ],
     "keywords": [
         "whatsapp",

packages/docs/.eslintignore

@@ -0,0 +1,33 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts

packages/docs/.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:qwik/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  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'],
+  },
+};

packages/docs/.gitignore

@@ -0,0 +1,41 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases
+
+# Cloudflare
+functions/**/*.js

packages/docs/.node-version

@@ -0,0 +1 @@
+16

packages/docs/.prettierignore

@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules

packages/docs/README.md

@@ -0,0 +1,112 @@
+# Qwik City App ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## Project Structure
+
+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.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
+```
+
+- `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.
+
+## Add Integrations and deployment
+
+Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
+
+```shell
+npm run qwik add # or `yarn qwik add`
+```
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+
+```shell
+npm start # or `yarn start`
+```
+
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
+
+```shell
+npm run preview # or `yarn preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
+
+```shell
+npm run build # or `yarn build`
+```
+
+## 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.

packages/docs/adaptors/cloudflare-pages/vite.config.ts

@@ -0,0 +1,19 @@
+import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+      },
+    },
+    plugins: [
+      cloudflarePagesAdaptor({
+        staticGenerate: true,
+      }),
+    ],
+  };
+});

packages/docs/functions/[[path]].ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+
+// Cloudflare Pages Functions
+// https://developers.cloudflare.com/pages/platform/functions/
+export { onRequest } from '../server/entry.cloudflare-pages';

packages/docs/package.json

@@ -0,0 +1,41 @@
+{
+  "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",
+    "eslint": "8.28.0",
+    "eslint-plugin-qwik": "0.14.1",
+    "node-fetch": "3.3.0",
+    "prettier": "2.7.1",
+    "typescript": "4.9.3",
+    "vite": "3.2.4",
+    "vite-tsconfig-paths": "3.5.0",
+    "wrangler": "latest"
+  }
+}

packages/docs/public/_headers

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

packages/docs/public/_redirects

@@ -0,0 +1 @@
+# https://developers.cloudflare.com/pages/platform/redirects/

packages/docs/public/favicon.svg

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

packages/docs/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}

packages/docs/src/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,25 @@
+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;
+}

packages/docs/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,74 @@
+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;
+}

packages/docs/src/components/footer/footer.css

@@ -0,0 +1,22 @@
+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;
+}

packages/docs/src/components/footer/footer.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+});

packages/docs/src/components/header/header.css

@@ -0,0 +1,34 @@
+header {
+  position: sticky;
+  top: 0;
+  z-index: 11;
+  display: grid;
+  grid-template-columns: minmax(130px, auto) 1fr;
+  gap: 30px;
+  height: 80px;
+  width: 100%;
+  padding: 10px;
+  background-color: white;
+  overflow: hidden;
+}
+
+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;
+}

packages/docs/src/components/header/header.tsx

@@ -0,0 +1,26 @@
+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>
+  );
+});

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

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

packages/docs/src/components/menu/menu.css

@@ -0,0 +1,13 @@
+.menu {
+  background: #eee;
+  padding: 20px 10px;
+}
+
+.menu h5 {
+  margin: 0;
+}
+
+.menu ul {
+  padding-left: 20px;
+  margin: 5px 0 25px 0;
+}

packages/docs/src/components/menu/menu.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+});

packages/docs/src/components/on-this-page/on-this-page.css

@@ -0,0 +1,33 @@
+.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);
+}

packages/docs/src/components/on-this-page/on-this-page.tsx

@@ -0,0 +1,62 @@
+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>
+  );
+});

packages/docs/src/components/router-head/router-head.tsx

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+
+/**
+ * The RouterHead component is placed inside of the document `<head>` element.
+ */
+export const RouterHead = component$(() => {
+  const head = useDocumentHead();
+  const loc = useLocation();
+
+  return (
+    <>
+      <title>{head.title}</title>
+
+      <link rel="canonical" href={loc.href} />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+      {head.meta.map((m) => (
+        <meta {...m} />
+      ))}
+
+      {head.links.map((l) => (
+        <link {...l} />
+      ))}
+
+      {head.styles.map((s) => (
+        <style {...s.props} dangerouslySetInnerHTML={s.style} />
+      ))}
+    </>
+  );
+});

packages/docs/src/entry.cloudflare-pages.tsx

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

packages/docs/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, RenderOptions } from '@builder.io/qwik';
+import Root from './root';
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

packages/docs/src/entry.preview.tsx

@@ -0,0 +1,20 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
+import render from './entry.ssr';
+import qwikCityPlan from '@qwik-city-plan';
+
+/**
+ * The default export is the QwikCity adaptor used by Vite preview.
+ */
+export default createQwikCity({ render, qwikCityPlan });

packages/docs/src/entry.ssr.tsx

@@ -0,0 +1,27 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    // Use container attributes to set attributes on the html tag.
+    containerAttributes: {
+      lang: 'en-us',
+      ...opts.containerAttributes,
+    },
+  });
+}

packages/docs/src/global.css

@@ -0,0 +1,66 @@
+* {
+  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;
+}

packages/docs/src/root.tsx

@@ -0,0 +1,26 @@
+import { component$ } from '@builder.io/qwik';
+import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
+import { RouterHead } from './components/router-head/router-head';
+
+import './global.css';
+
+export default component$(() => {
+  /*
+   * The root of a QwikCity site always start with the <QwikCityProvider> component,
+   * immediately followed by the document's <head> and <body>.
+   *
+   * Dont remove the `<head>` and `<body>` elements.
+   */
+  return (
+    <QwikCityProvider>
+      <head>
+        <meta charSet="utf-8" />
+        <RouterHead />
+      </head>
+      <body lang="en">
+        <RouterOutlet />
+        <ServiceWorkerRegister />
+      </body>
+    </QwikCityProvider>
+  );
+});

packages/docs/src/routes/about-us/index.md

@@ -0,0 +1,15 @@
+---
+title: About Qwik
+---
+
+# About Qwik
+
+This page is at the root level, so it only uses the `/src/routes/layout.tsx` layout to wrap the page content.
+
+## 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/)

packages/docs/src/routes/docs/advanced/index.md

@@ -0,0 +1,11 @@
+---
+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.

packages/docs/src/routes/docs/docs.css

@@ -0,0 +1,22 @@
+.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;
+}

packages/docs/src/routes/docs/getting-started/index.md

@@ -0,0 +1,13 @@
+---
+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.

packages/docs/src/routes/docs/index.md

@@ -0,0 +1,22 @@
+---
+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/)

packages/docs/src/routes/docs/layout.tsx

@@ -0,0 +1,25 @@
+import { component$, Slot, useStyles$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import Menu from '~/components/menu/menu';
+import OnThisPage from '~/components/on-this-page/on-this-page';
+import styles from './docs.css?inline';
+
+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`,
+  };
+};

packages/docs/src/routes/docs/menu.md

@@ -0,0 +1,21 @@
+# 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)

packages/docs/src/routes/index.tsx

@@ -0,0 +1,151 @@
+import { component$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+
+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>
+        </>
+    )
+})
+
+export const head: DocumentHead = {
+    title: 'Welcome to Qwik Docs Starter',
+}

packages/docs/src/routes/layout.tsx

@@ -0,0 +1,15 @@
+import { component$, Slot } from '@builder.io/qwik';
+import Footer from '~/components/footer/footer';
+import Header from '~/components/header/header';
+
+export default component$(() => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Slot />
+      </main>
+      <Footer />
+    </>
+  );
+});

packages/docs/src/routes/service-worker.ts

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+
+setupServiceWorker();
+
+addEventListener('install', () => self.skipWaiting());
+
+addEventListener('activate', () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;

packages/docs/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2017",
+    "module": "ES2020",
+    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "outDir": "tmp",
+    "noEmit": true,
+    "types": ["node", "vite/client"],
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "files": ["./.eslintrc.cjs"],
+  "include": ["src"]
+}

packages/docs/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { qwikCity } from '@builder.io/qwik-city/vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig(() => {
+  return {
+    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
+    preview: {
+      headers: {
+        'Cache-Control': 'public, max-age=600',
+      },
+    },
+  };
+});

packages/rollup-cli.config.js

@@ -1,10 +0,0 @@
-const commonjs = require('@rollup/plugin-commonjs')
-
-module.exports = {
-    input: 'index.js',
-    output: {
-        file: 'lib/index.cjs',
-        format: 'cjs',
-    },
-    plugins: [commonjs()],
-}