add doc

docs/en/index.md

@@ -0,0 +1,152 @@
+# Evolution Manager - README
+
+## Introduction
+
+Evolution Manager is an open-source management tool for the Evolution API, designed to streamline the administration and monitoring of instances. It can be accessed online at [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
+
+---
+
+🇧🇷 **Atenção, Comunidade Brasileira!** 🇧🇷
+
+Se você é um desenvolvedor ou usuário brasileiro interessado no Evolution Manager, temos boas notícias! Agora você pode acessar a documentação completa do projeto em português. Isso facilitará seu entendimento e uso desta ferramenta incrível. Clique no link abaixo para ler o README em português:
+
+🔗 [Leia o README em Português](https://github.com/gabrielpastori1/evolution-manager/blob/main/README.pt_BR.md)
+
+---
+
+## Features
+
+- **Instance Management**: Create, manage, and delete instances.
+- **Instance Settings**: Customize behavior settings (e.g., disabling calls, always-online mode), webhook integration, RabbitMQ, WebSocket, Chatwoot, and Typebot configurations.
+- **User Utilities**: Check user numbers, search for conversations, and find groups.
+
+## Limitations
+
+- The version hosted on Vercel requires the server to have an SSL certificate.
+
+## Technology
+
+- The project is built using Vue.js v3 and Vuetify.
+
+## Evolution-Manager CLI - Documentation
+
+For detailed information on how to use the Evolution-Manager CLI, please refer to the documentation available at the following links:
+
+🔗 Full Documentation:  [Documentation in English](https://github.com/gabrielpastori1/evolution-manager/blob/main/docs/en/cli.md)
+
+## Docker Image - Documentation
+
+For detailed information on using the Docker image, including configurations and examples, please refer to our comprehensive documentation. You will find step-by-step instructions, as well as helpful tips to make the most of the Evolution Manager's Docker image.
+
+🔗 Full Documentation: [Documentation in English](https://github.com/gabrielpastori1/evolution-manager/tree/main/docs/en/docker.md)
+
+## Self-Hosted - Evolution Manager CLI and PM2
+
+### Straight to the Point: Quick Setup with PM2
+
+To quickly install Evolution Manager globally and set it up with PM2, follow these commands:
+
+1. **Install Evolution Manager Globally**:
+
+   ```bash
+   npm install -g evolution-manager
+   ```
+
+2. **Set Up PM2 for Evolution Manager**:
+
+   ```bash
+   evolution-manager pm2 setup
+   ```
+
+These two steps will install the Evolution Manager CLI globally on your system and configure it to run with PM2, a powerful process manager.
+
+### Installation and Configuration
+
+These two steps will install the Evolution Manager CLI globally on your system and configure it to run with PM2, a powerful process manager.
+
+1. **Install Evolution Manager Globally**:
+   - Ensure Node.js and NPM are installed on your system.
+   - Install Evolution Manager globally using NPM to access the CLI (Command Line Interface):
+
+     ```bash
+     npm install -g evolution-manager
+     ```
+
+2. **Using the CLI**:
+   - After installation, access the CLI commands by typing `evolution-manager` in your terminal.
+   - Available commands include:
+     - `help`: Displays a list of available commands and their descriptions.
+     - `server`: Server-related operations.
+       - `start [--port=9615]`: Starts the server on the specified port (default: 9615).
+       - `build`: Builds the project.
+     - `pm2`: Manages the process with PM2.
+       - `setup`: Sets up PM2 for the project.
+       - `start`: Starts the service with PM2.
+       - `stop`: Stops the service in PM2.
+       - `restart`: Restarts the service in PM2.
+       - `delete`: Removes the service from PM2.
+
+3. **Running the Project with PM2**:
+   - To set up and manage the service with PM2, start with the setup command:
+
+     ```bash
+     evolution-manager pm2 setup
+     ```
+
+   - Then, you can start, stop, restart, or delete the service using the respective `pm2` commands in the CLI.
+
+These instructions provide a streamlined method for managing Evolution Manager across various systems, utilizing PM2 for efficient service start-up, maintenance, and control.
+
+## Development Setup
+
+1. **Prerequisites**: Ensure you have `yarn` installed on your system.
+2. **Clone the Repository**:
+
+   ```bash
+   git clone https://github.com/gabrielpastori1/evolution-manager.git
+   cd evolution-manager
+   ```
+
+3. **Install Dependencies**:
+
+   ```bash
+   yarn install
+   ```
+
+4. **Run Development Server**:
+
+   ```bash
+   yarn dev
+   ```
+
+   This will start a local development server. You can access the app at `localhost:8080`.
+
+## Building the Project
+
+To build the project for production, run:
+
+```bash
+yarn build
+```
+
+This will create a `dist` folder with the compiled assets.
+
+## Contributing
+
+Contributions are an essential part of the Evolution Manager project. Whether you're contributing code, suggestions, or feedback, your input is invaluable. To facilitate contributions, we have included a direct means for donations:
+
+### Making a Donation
+
+If you wish to support the project financially, we have provided a QR code for Pix donations. Your generosity helps in maintaining and evolving this open-source tool.
+
+<img src="https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg" width="300" alt="Pix Donation QR Code">
+
+### Contributing Code or Ideas
+
+We also welcome code contributions and innovative ideas. If you're interested in contributing in this way, please read our contributing guidelines for more information on how to get started.
+
+Your support, in any form, makes a significant difference and is greatly appreciated. Thank you for being a part of the Evolution Manager community!
+
+## License
+
+This project is open-source and available under the [MIT License](LICENSE.md).

docs/pt_br/cli.md

@@ -1,7 +1,9 @@
 # Evolution-Manager CLI
 
 ## Instalação
+
 Para instalar o Evolution-Manager CLI, execute o seguinte comando:
+
 ```
 npm install -g evolution-manager
 ```
@@ -9,14 +11,18 @@ npm install -g evolution-manager
 ## Comandos Disponíveis
 
 ### Geral
+
 - `help`: Exibe uma lista de comandos disponíveis. Para mais detalhes sobre cada comando, consulte este documento.
 
 ### Server
+
 - `server start [--port=9615]`: Inicia um servidor temporário no terminal, ideal para execução local. O parâmetro `--port` define a porta do servidor, sendo `9615` o valor padrão.
 - `server build`: Realiza o build do servidor, mas não o executa. (Atualmente sem uso específico).
 
 ### PM2
+
 O CLI interage com o PM2 para gerenciar processos do Evolution Manager.
+
 - `pm2 setup`: Configura o PM2 para hospedar o Evolution Manager. Se o PM2 não estiver instalado, o CLI o instalará automaticamente.
 - `pm2 start`: Inicia o processo do Evolution Manager no PM2.
 - `pm2 stop`: Para o processo do Evolution Manager no PM2.
@@ -33,10 +39,10 @@ A seção API do Evolution-Manager CLI inclui várias funções para gerenciar a
 
 Esses comandos fornecem uma interface de linha de comando flexível e poderosa para gerenciar as versões e a configuração do manager na sua instalação da Evolution API.
 
-
 ## Fluxo de Uso Típico
+
 1. Instale o CLI globalmente.
 2. Utilize o comando `help` para ver a lista de comandos disponíveis.
 3. Para hospedar o Evolution Manager, use os comandos sob `PM2`.
 4. Use o comando `server start` para rodar um servidor temporário localmente.
-5. Utilize `api setup` para interagir com o projeto "evolution-api" e configurar o manager.
+5. Utilize `api setup` para interagir com o projeto "evolution-api" e configurar o manager.

docs/pt_br/index.md

@@ -0,0 +1,144 @@
+# Evolution Manager - README
+
+## Introdução
+
+O Evolution Manager é uma ferramenta de gerenciamento open-source para a Evolution API, projetada para facilitar a administração e monitoramento de instâncias. Pode ser acessada online em [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
+
+## Funcionalidades
+
+- **Gerenciamento de Instâncias**: Criação, gerenciamento e exclusão de instâncias.
+- **Configurações de Instância**: Personalização das configurações de comportamento (por exemplo, desativar chamadas, modo sempre online), integração com webhook, RabbitMQ, WebSocket, Chatwoot e configurações do Typebot.
+- **Utilitários para Usuários**: Verificação de números de usuários, busca por conversas e grupos.
+
+## Limitações
+
+- A versão hospedada na Vercel requer que o servidor tenha um certificado SSL.
+
+## Tecnologia
+
+- O projeto é desenvolvido usando Vue.js v3 e Vuetify.
+
+## Evolution-Manager CLI - Documentação
+
+Para informações detalhadas sobre como usar o Evolution-Manager CLI, consulte a documentação disponível nos seguintes links:
+
+🔗 Documentação completa: [Documentação em Português](https://github.com/gabrielpastori1/evolution-manager/blob/main/docs/pt_br/cli.md)
+
+## Imagem Docker - Documentação
+
+Para obter informações detalhadas sobre como usar a imagem Docker, incluindo configurações e exemplos, acesse a nossa documentação completa. Você encontrará instruções passo a passo, bem como dicas úteis para maximizar o uso da imagem Docker do Evolution Manager.
+
+🔗 Documentação completa: [Documentação em Português](https://github.com/gabrielpastori1/evolution-manager/tree/main/docs/pt_br/docker.md)
+
+---
+
+## Auto-Hospedagem - CLI e PM2 do Evolution Manager
+
+### Direto ao Ponto: Configuração Rápida com PM2
+
+Para instalar rapidamente o Evolution Manager globalmente e configurá-lo com o PM2, siga estes comandos:
+
+1. **Instalar o Evolution Manager Globalmente**:
+
+   ```bash
+   npm install -g evolution-manager
+   ```
+
+2. **Configurar PM2 para o Evolution Manager**:
+
+   ```bash
+   evolution-manager pm2 setup
+   ```
+
+Estes dois passos instalarão o CLI do Evolution Manager globalmente em seu sistema e o configurarão para funcionar com o PM2, um gerenciador de processos poderoso.
+
+### Instalação e Configuração
+
+Esses dois passos instalarão o CLI do Evolution Manager globalmente em seu sistema e o configurarão para funcionar com o PM2, um gerenciador de processos poderoso.
+
+1. **Instalar o Evolution Manager Globalmente**:
+   - Certifique-se de ter o Node.js e o NPM instalados em seu sistema.
+   - Instale o Evolution Manager globalmente usando o NPM para acessar o CLI (Interface de Linha de Comando):
+
+     ```bash
+     npm install -g evolution-manager
+     ```
+
+2. **Usando o CLI**:
+   - Após a instalação, acesse os comandos do CLI digitando `evolution-manager` em seu terminal.
+   - Os comandos disponíveis incluem:
+     - `help`: Exibe uma lista de comandos disponíveis e suas descrições.
+     - `server`: Operações relacionadas ao servidor.
+       - `start [--port=9615]`: Inicia o servidor na porta especificada (padrão: 9615).
+       - `build`: Constrói o projeto.
+     - `pm2`: Gerencia o processo com o PM2.
+       - `setup`: Configura o PM2 para o projeto.
+       - `start`: Inicia o serviço com o PM2.
+       - `stop`: Para o serviço no PM2.
+       - `restart`: Reinicia o serviço no PM2.
+       - `delete`: Remove o serviço do PM2.
+
+3. **Executando o Projeto com o PM2**:
+   - Para configurar e gerenciar o serviço com o PM2, comece com o comando de configuração:
+
+     ```bash
+     evolution-manager pm2 setup
+     ```
+
+   - Em seguida, você pode iniciar, parar, reiniciar ou excluir o serviço usando os respectivos comandos `pm2` no CLI.
+
+Estas instruções fornecem um método simplificado para gerenciar o Evolution Manager em vários sistemas, utilizando o PM2 para um eficiente início de serviço
+
+## Configuração para Desenvolvimento
+
+1. **Pré-requisitos**: Certifique-se de ter o `yarn` instalado no seu sistema.
+2. **Clonar o Repositório**:
+
+   ```bash
+   git clone https://github.com/gabrielpastori1/evolution-manager.git
+   cd evolution-manager
+   ```
+
+3. **Instalar Dependências**:
+
+   ```bash
+   yarn install
+   ```
+
+4. **Executar o Servidor de Desenvolvimento**:
+
+   ```bash
+   yarn dev
+   ```
+
+   Isso iniciará um servidor de desenvolvimento local. Você pode acessar o aplicativo em `localhost:8080`.
+
+## Construção do Projeto
+
+Para construir o projeto para produção, execute:
+
+```bash
+yarn build
+```
+
+Isso criará uma pasta `dist` com os ativos compilados.
+
+## Contribuindo
+
+As contribuições são uma parte essencial do projeto Evolution Manager. Seja contribuindo com código, sugestões ou feedback, sua participação é inestimável. Para facilitar as contribuições, incluímos um meio direto para doações:
+
+### Fazendo uma Doação
+
+Se desejar apoiar o projeto financeiramente, disponibilizamos um QR code para doações via Pix. Sua generosidade ajuda na manutenção e evolução desta ferramenta de código aberto.
+
+<img src="https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg" width="300" alt="QR Code para Doação Pix">
+
+### Contribuindo com Código ou Ideias
+
+Também recebemos contribuições de código e ideias inovadoras. Se você tem interesse em contribuir dessa forma, por favor, leia nossas diretrizes de contribuição para mais informações sobre como começar.
+
+Seu apoio, de qualquer forma, faz uma grande diferença e é muito apreciado. Obrigado por fazer parte da comunidade Evolution Manager!
+
+## Licença
+
+Este projeto é de código aberto e está disponível sob a [Licença MIT](LICENSE.md).

package.json

@@ -16,21 +16,22 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "@vitejs/plugin-vue": "^4.0.0",
     "axios": "^1.6.0",
     "core-js": "^3.29.0",
+    "eslint": "^8.37.0",
+    "eslint-plugin-vue": "^9.3.0",
     "optimist": "^0.6.1",
     "pinia": "^2.0.0",
     "pm2": "^5.3.0",
     "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.4.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "eslint": "^8.37.0",
-    "eslint-plugin-vue": "^9.3.0",
     "sass": "^1.60.0",
     "unplugin-fonts": "^1.0.3",
-    "vite": "^4.2.0"
+    "vite": "^4.2.0",
+    "vite-plugin-vuetify": "^1.0.0",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0",
+    "vue3-markdown": "^1.1.9",
+    "vuetify": "^3.4.0"
   }
 }

src/components/modal/ShareConnection.vue

@@ -32,7 +32,6 @@
               </v-btn>
             </div>
           </v-card>
-          <!-- {{ connection }} -->
         </div>
       </v-card-text>
       <v-card-actions>

src/layouts/default/AppBar.vue

@@ -12,7 +12,7 @@
     <v-chip
       v-else-if="AppStore.validConnection"
       color="success"
-      style="max-width: 40vw"
+      style="max-width: 35vw"
     >
       <v-icon color="success" start> mdi-check-circle </v-icon>
       {{

src/layouts/doc/AppBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title class="flex-shrink-0">
+      <v-btn @click="drawer = !drawer" icon>
+        <v-icon>mdi-menu</v-icon>
+      </v-btn>
+      <v-btn variant="text" @click="$router.push({ name: 'doc' })">
+        <v-img src="@/assets/logo.png" height="24" width="24" class="mr-2" />
+        Evolution Doc
+      </v-btn>
+    </v-app-bar-title>
+    <v-btn :to="{ name: 'instances' }"> Instâncias </v-btn>
+    <v-btn @click="toggleTheme" icon>
+      <v-icon>mdi-{{ dark ? "white-balance-sunny" : "weather-night" }}</v-icon>
+    </v-btn>
+  </v-app-bar>
+
+  <v-navigation-drawer :width="200" v-model="drawer">
+    <v-select
+      :value="lang"
+      :items="lang_list"
+      item-text="text"
+      item-value="value"
+      density="compact"
+      hide-details="auto"
+      class="ma-1"
+      @update:model-value="DocStore.setLang"
+    />
+    <v-list-item
+      title="Documentação"
+      subtitle="Evolution-Manager"
+    ></v-list-item>
+    <v-divider></v-divider>
+    <v-list-item
+      link
+      :title="doc"
+      v-for="doc in docs"
+      :key="doc"
+      :to="{ name: 'doc', params: { doc } }"
+    />
+  </v-navigation-drawer>
+</template>
+
+<script>
+import { useTheme } from "vuetify";
+import { useDocStore } from "@/store/doc";
+export default {
+  name: "AppBar",
+  data: () => ({
+    theme: useTheme(),
+    drawer: false,
+    lang_list: [
+      { title: "Português", value: "pt_br" },
+      { title: "English", value: "en" },
+    ],
+    DocStore: useDocStore(),
+  }),
+  methods: {
+    toggleTheme() {
+      const theme = this.theme.global.current.dark ? "light" : "dark";
+      this.theme.global.name = theme;
+      localStorage.setItem("theme", theme);
+    },
+  },
+  computed: {
+    lang() {
+      return this.DocStore.lang;
+    },
+    docs() {
+      return Object.keys(this.DocStore.docs).filter((doc) => doc !== "index");
+    },
+    dark() {
+      return this.theme.global.current.dark;
+    },
+    files() {},
+  },
+  mounted() {
+    this.DocStore.loadDocs();
+  },
+};
+</script>

src/layouts/doc/AppFooter.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-footer absolute app class="mt-10">
+    <div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
+      <div class="flex-shrink-0 d-flex gap-2 align-center">
+        <v-btn
+        @click="about"
+        variant="tonal"
+          size="small"
+          color="blue"
+          >
+          <v-icon start> mdi-information </v-icon>
+          Sobre
+        </v-btn>
+        <v-btn
+        @click="contribute"
+          variant="tonal"
+          size="small"
+          color="light-blue-lighten-1"
+        >
+          <v-icon start>mdi-hand-coin</v-icon>
+          Contribua com o projeto
+        </v-btn>
+        <p style="font-size: 12px" class="text-disabled">v{{ version }}</p>
+      </div>
+    </div>
+  </v-footer>
+  <Contribute ref="contribute" />
+  <About ref="about" />
+</template>
+
+<script>
+import About from "@/components/modal/About.vue";
+import Contribute from "@/components/modal/Contribute.vue";
+import { version } from "../../../package.json";
+
+export default {
+  name: "AppFooter",
+  data: () => ({
+    version,
+  }),
+  methods: {
+    about() {
+      this.$refs.about.open();
+    },
+    contribute() {
+      this.$refs.contribute.open();
+    },
+  },
+  components: { Contribute, About },
+};
+</script>
+
+<style></style>

src/layouts/doc/Index.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app>
+    <doc-bar />
+
+    <doc-view />
+
+    <doc-footer />
+  </v-app>
+</template>
+
+<script setup>
+
+import DocBar from "./AppBar.vue";
+import DocView from "./View.vue";
+import DocFooter from "./AppFooter.vue";
+</script>

src/layouts/doc/View.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-main>
+    <v-container>
+      <router-view />
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+//
+</script>

src/router/index.js

@@ -21,6 +21,23 @@ const routes = [
 
     ],
   },
+  {
+    path: BASE_URL + 'doc',
+    component: () => import('@/layouts/doc/Index.vue'),
+    children: [
+      {
+        path: ':doc',
+        name: 'doc',
+        component: () => import('@/views/Doc.vue'),
+
+      },
+      {
+        path: '',
+        name: 'doc.index',
+        component: () => import('@/views/Doc.vue'),
+      },
+    ]
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: BASE_URL,

src/store/app.js

@@ -85,7 +85,8 @@ export const useAppStore = defineStore('app', {
       this.instancesList = []
       this.instancesKeys = {}
       this.connectionsList = []
-      window.localStorage.clear();
+      this.saveLocalStorage()
+
     },
 
     async reconnect() {

src/store/doc.js

@@ -0,0 +1,65 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+
+export const useDocStore = defineStore('doc', {
+  getters: {
+    lang: (state) => state.language,
+  },
+  state: () => ({
+    language: 'pt_br',
+    languages: [],
+    docs: {},
+  }),
+
+  actions: {
+    async setLang(lang) {
+      this.language = lang;
+    },
+    async loadDocs() {
+      try {
+        const { languages, docs } = getFileTree();
+        this.languages = languages;
+        this.docs = docs;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async loadDoc(path) {
+      try {
+        debugger;
+        const { language } = this;
+        const doc = this.docs[path]
+        const content = await doc[language]();
+        return {
+          content,
+          language,
+        };
+      } catch (error) {
+        console.log(error);
+        throw new Error('Documento não encontrado');
+      }
+    }
+  }
+})
+
+// Function to get the file tree from @doc
+function getFileTree() {
+  const tree = import.meta.glob('@docs/**/*.{md,mdx}', { as: 'raw'})
+  const docsFiles = {}
+  const languages = new Set()
+
+  Object.entries(tree).forEach(([path, imprt]) => {
+    const [, , lang, ...rest] = path.split('/')
+    languages.add(lang)
+
+    const filename = rest.join('/').replace(/\.mdx?$/, '')
+    docsFiles[filename] = docsFiles[filename] || {}
+    docsFiles[filename][lang] = imprt
+  })
+
+  return {
+    languages: Array.from(languages),
+    docs: docsFiles,
+  }
+}

src/views/Doc.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-card elevation="0" :loading="loading">
+    <VMarkdownView
+      v-if="!error"
+      :mode="dark ? 'dark' : 'light'"
+      :content="content"
+    ></VMarkdownView>
+
+    <div v-else>
+      <v-alert type="error" outlined>
+        {{ error }}
+      </v-alert>
+    </div>
+  </v-card>
+</template>
+
+<script>
+import { VMarkdownView } from "vue3-markdown";
+import "vue3-markdown/dist/style.css";
+import { useDocStore } from "@/store/doc";
+export default {
+  components: {
+    VMarkdownView,
+  },
+  data: () => ({
+    drawer: false,
+    lang_list: [
+      { title: "Português", value: "pt_br" },
+      { title: "English", value: "en" },
+    ],
+    DocStore: useDocStore(),
+    content: "",
+    error: false,
+    loading: false,
+  }),
+  methods: {
+    async loadDoc(doc) {
+      try {
+        this.loading = true;
+        this.error = false;
+        debugger;
+        const { content } = await this.DocStore.loadDoc(doc || "index");
+        this.content = content;
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  watch: {
+    $route() {
+      this.loadDoc(this.$route.params.doc);
+    },
+    lang() {
+      this.loadDoc(this.$route.params.doc);
+    },
+  },
+  computed: {
+    lang() {
+      return this.DocStore.lang;
+    },
+    docs() {
+      return this.DocStore.docs;
+    },
+    dark() {
+      return this.theme?.global?.current?.dark;
+    },
+  },
+  mounted() {
+    debugger;
+    this.loadDoc(this.$route.params.doc);
+  },
+};
+</script>

vite.config.js

@@ -17,7 +17,6 @@ export default defineConfig(({ command, mode }) => {
       vue({
         template: { transformAssetUrls }
       }),
-      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
       vuetify({
         autoImport: true,
         styles: {
@@ -38,7 +37,8 @@ export default defineConfig(({ command, mode }) => {
 
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url))
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '@docs': fileURLToPath(new URL('./docs', import.meta.url))
       },
       extensions: [
         '.js',