chirag-appwrite-cli 0.1.0

package/lib/utils.js

@@ -0,0 +1,289 @@
+const fs = require("fs");
+const path = require("path");
+const net = require("net");
+const childProcess = require('child_process');
+const chalk = require('chalk');
+const { localConfig, globalConfig } = require("./config");
+
+function getAllFiles(folder) {
+    const files = [];
+    for (const pathDir of fs.readdirSync(folder)) {
+        const pathAbsolute = path.join(folder, pathDir);
+        let stats;
+        try {
+            stats = fs.statSync(pathAbsolute);
+        } catch (error) {
+            continue;
+        }
+        if (stats.isDirectory()) {
+            files.push(...getAllFiles(pathAbsolute));
+        } else {
+            files.push(pathAbsolute);
+        }
+    }
+    return files;
+}
+
+async function isPortTaken(port) {
+    const taken = await new Promise((res, rej) => {
+        const tester = net.createServer()
+        .once('error', function (err) {
+            if (err.code != 'EADDRINUSE') return rej(err)
+                res(true)
+            })
+            .once('listening', function() {
+                tester.once('close', function() { res(false) })
+                .close()
+            })
+            .listen(port);
+    });
+
+    return taken;
+}
+
+function systemHasCommand(command) {
+    const isUsingWindows = process.platform == 'win32'
+
+     try {
+        if(isUsingWindows) {
+            childProcess.execSync('where ' + command, { stdio: 'pipe' })
+        } else {
+            childProcess.execSync(`[[ $(${command} --version) ]] || { exit 1; } && echo "OK"`, { stdio: 'pipe', shell: '/bin/bash' });
+        }
+    } catch (error) {
+        console.log(error);
+        return false;
+    }
+
+    return true;
+}
+
+const checkDeployConditions = (localConfig) => {
+    if (Object.keys(localConfig.data).length === 0) {
+        throw new Error("No appwrite.json file found in the current directory. Please run this command again in the folder containing your appwrite.json file, or run 'appwrite init project' to link current directory to an Appwrite project.");
+    }
+}
+
+function showConsoleLink(serviceName, action, ...ids) {
+    const projectId = localConfig.getProject().projectId;
+
+    const url = new URL(globalConfig.getEndpoint().replace('/v1', '/console'));
+    url.pathname += `/project-${projectId}`;
+    action = action.toLowerCase();
+
+    switch (serviceName) {
+        case "account":
+            url.pathname = url.pathname.replace(`/project-${projectId}`, '');
+            url.pathname += getAccountPath(action);
+            break;
+        case "databases":
+            url.pathname += getDatabasePath(action, ids);
+            break;
+        case "functions":
+            url.pathname += getFunctionsPath(action, ids);
+            break;
+        case "messaging":
+            url.pathname += getMessagingPath(action, ids);
+            break;
+        case "projects":
+            url.pathname = url.pathname.replace(`/project-${projectId}`, '');
+            url.pathname += getProjectsPath(action, ids);
+            break;
+        case "storage":
+            url.pathname += getBucketsPath(action, ids);
+            break;
+        case "teams":
+            url.pathname += getTeamsPath(action, ids);
+            break;
+        case "organizations":
+            url.pathname += getOrganizationsPath(action, ids);
+            break;
+        case "users":
+            url.pathname += getUsersPath(action, ids);
+            break;
+        default:
+            return;
+    }
+
+    console.log(`${chalk.green.bold("✓ Success:")} ${chalk.green(url)}`);
+}
+
+function getAccountPath(action) {
+    let path = '/account';
+
+    if (action === 'listsessions') {
+        path += '/sessions';
+    }
+
+    return path;
+}
+
+function getDatabasePath(action, ids) {
+    let path = '/databases';
+
+
+    if (['get', 'listcollections', 'getcollection', 'listattributes', 'listdocuments', 'getdocument', 'listindexes', 'getdatabaseusage'].includes(action)) {
+        path += `/database-${ids[0]}`;
+    }
+
+    if (action === 'getdatabaseusage') {
+        path += `/usage`;
+    }
+
+    if (['getcollection', 'listattributes', 'listdocuments', 'getdocument', 'listindexes'].includes(action)) {
+        path += `/collection-${ids[1]}`;
+    }
+
+    if (action === 'listattributes') {
+        path += '/attributes';
+    }
+    if (action === 'listindexes') {
+        path += '/indexes';
+    }
+    if (action === 'getdocument') {
+        path += `/document-${ids[2]}`;
+    }
+
+
+    return path;
+}
+
+function getFunctionsPath(action, ids) {
+    let path = '/functions';
+
+    if (action !== 'list') {
+        path += `/function-${ids[0]}`;
+    }
+
+    if (action === 'getdeployment') {
+        path += `/deployment-${ids[1]}`
+    }
+
+    if (action === 'getexecution' || action === 'listexecution') {
+        path += `/executions`
+    }
+    if (action === 'getfunctionusage') {
+        path += `/usage`
+    }
+
+    return path;
+}
+
+function getMessagingPath(action, ids) {
+    let path = '/messaging';
+
+    if (['getmessage', 'listmessagelogs'].includes(action)) {
+        path += `/message-${ids[0]}`;
+    }
+
+    if (['listproviders', 'getprovider'].includes(action)) {
+        path += `/providers`;
+    }
+
+    if (action === 'getprovider') {
+        path += `/provider-${ids[0]}`;
+    }
+
+    if (['listtopics', 'gettopic'].includes(action)) {
+        path += `/topics`;
+    }
+
+    if (action === 'gettopic') {
+        path += `/topic-${ids[0]}`;
+    }
+
+    return path;
+}
+
+function getProjectsPath(action, ids) {
+    let path = '';
+
+    if (action !== 'list') {
+        path += `/project-${ids[0]}`;
+    }
+
+    if (['listkeys', 'getkey'].includes(action)) {
+        path += '/overview/keys'
+    }
+
+    if (['listplatforms', 'getplatform'].includes(action)) {
+        path += '/overview/platforms'
+    }
+
+    if (['listwebhooks', 'getwebhook'].includes(action)) {
+        path += '/settings/webhooks'
+    }
+
+    if (['getplatform', 'getkey', 'getwebhook'].includes(action)) {
+        path += `/${ids[1]}`;
+    }
+
+    return path;
+}
+
+function getBucketsPath(action, ids) {
+    let path = '/storage';
+
+    if (action !== 'listbuckets') {
+        path += `/bucket-${ids[0]}`;
+    }
+
+    if (action === 'getbucketusage') {
+        path += `/usage`
+    }
+
+    if (action === 'getfile') {
+        path += `/file-${ids[1]}`
+    }
+
+    return path;
+}
+
+function getTeamsPath(action, ids) {
+    let path = '/auth/teams';
+
+    if (action !== 'list') {
+        path += `/team-${ids[0]}`;
+    }
+
+    return path;
+}
+
+function getOrganizationsPath(action, ids) {
+    let path = `/organization-${ids[0]}`;
+
+    if (action === 'list') {
+        path = '/account/organizations';
+    }
+
+    return path;
+}
+
+function getUsersPath(action, ids) {
+    let path = '/auth';
+
+    if (action !== 'list') {
+        path += `/user-${ids[0]}`;
+    }
+
+    if (action === 'listsessions') {
+        path += 'sessions';
+    }
+
+    return path;
+}
+
+function isCloud() {
+    const endpoint = globalConfig.getEndpoint() || "https://cloud.appwrite.io/v1";
+    const hostname = new URL(endpoint).hostname;
+    return hostname.endsWith('appwrite.io');
+}
+
+module.exports = {
+    getAllFiles,
+    isPortTaken,
+    systemHasCommand,
+    checkDeployConditions,
+    showConsoleLink,
+    isCloud
+};

package/lib/validations.js

@@ -0,0 +1,17 @@
+const validateRequired = (resource, value) => {
+    if (Array.isArray(value)) {
+        if (value.length <= 0) {
+            return `Please select at least one ${resource}`;
+        }
+    } else {
+        if (value === undefined || value === null || value === 0 || (typeof value === "string" && value.trim() === '')) {
+            return `${resource} is required`;
+        }
+    }
+
+    return true;
+}
+
+module.exports = {
+    validateRequired
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "chirag-appwrite-cli",
+  "homepage": "https://appwrite.io/support",
+  "description": "Repo short description goes here",
+  "version": "0.1.0",
+  "license": "BSD-3-Clause",
+  "main": "index.js",
+  "bin": {
+    "appwrite": "index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "linux-x64": "pkg -t node18-linux-x64 -o build/appwrite-cli-linux-x64 package.json",
+    "linux-arm64": "pkg -t node18-linux-arm64 -o build/appwrite-cli-linux-arm64 package.json",
+    "mac-x64": "pkg -t node18-macos-x64 -o build/appwrite-cli-darwin-x64 package.json",
+    "mac-arm64": "pkg -t node18-macos-arm64 -o build/appwrite-cli-darwin-arm64 package.json",
+    "windows-x64": "pkg -t node18-win-x64 -o build/appwrite-cli-win-x64.exe package.json",
+    "windows-arm64": "pkg -t node18-win-arm64 -o build/appwrite-cli-win-arm64.exe package.json"
+  },
+  "dependencies": {
+    "undici": "^5.28.2",
+    "ejs": "^3.1.9",
+    "chalk": "4.1.2",
+    "cli-progress": "^3.12.0",
+    "cli-table3": "^0.6.2",
+    "commander": "^9.2.0",
+    "form-data": "^4.0.0",
+    "json-bigint": "^1.0.0",
+    "inquirer": "^8.2.4",
+    "inquirer-search-list": "^1.2.6",
+    "tar": "^6.1.11",
+    "ignore": "^5.2.0",
+    "chokidar": "^3.6.0",
+    "tail": "^2.2.6",
+    "dotenv": "^16.4.5"
+  },
+  "devDependencies": {
+    "pkg": "5.8.1"
+  },
+  "pkg": {
+    "scripts": [
+      "index.js",
+      "lib/**/*.js"
+    ]
+  }
+}

package/scoop/appwrite.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "https://raw.githubusercontent.com/ScoopInstaller/Scoop/master/schema.json",
+	"version": "0.16.0",
+	"description": "The Appwrite CLI is a command-line application that allows you to interact with Appwrite and perform server-side tasks using your terminal.",
+	"homepage": "https://github.com/appwrite/sdk-for-cli",
+	"license": "BSD-3-Clause",
+	"architecture": {
+		"64bit": {
+			"url": "https://github.com/appwrite/sdk-for-cli/releases/download/0.16.0/appwrite-cli-win-x64.exe",
+			"bin": [
+				[
+					"appwrite-cli-win-x64.exe",
+					"appwrite"
+				]
+			]
+		},
+		"arm64": {
+			"url": "https://github.com/appwrite/sdk-for-cli/releases/download/0.16.0/appwrite-cli-win-arm64.exe",
+			"bin": [
+				[
+					"appwrite-cli-win-arm64.exe",
+					"appwrite"
+				]
+			]
+		}
+	},
+	"checkver": {
+    	"github": "https://github.com/appwrite/sdk-for-cli"
+ 	}
+}

package/sites/JavaScript starter/.env.example

@@ -0,0 +1,3 @@
+VITE_APPWRITE_ENDPOINT=
+VITE_APPWRITE_PROJECT_ID=
+VITE_APPWRITE_PROJECT_NAME=

package/sites/JavaScript starter/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Appwrite
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/sites/JavaScript starter/images/appwrite.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+            d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
+            fill="#FD366E" />
+    <path
+            d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
+            fill="#FD366E" />
+</svg>

package/sites/JavaScript starter/images/javascript.svg

@@ -0,0 +1,5 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+    <rect width="630" height="630" fill="#f7df1e"/>
+    <path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
+</svg>

package/sites/JavaScript starter/index.html

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/images/appwrite.svg" />
+  <title>Appwrite + Javascript </title>
+  <link rel="stylesheet" href="./style/app.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+  <link
+          href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:opsz,wght@14..32,100..900&family=Poppins:wght@300;400&display=swap"
+          rel="stylesheet"
+  />
+  <link rel="icon" type="image/svg+xml" href="/appwrite.svg" />
+</head>
+<body class="bg-[#FAFAFB] font-[Inter] text-sm text-[#56565C]">
+<main class="checker-background flex flex-col items-center p-5" id="main">
+  <div class="mt-25 flex w-full max-w-[40em] items-center justify-center lg:mt-34">
+    <div class="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
+      <div class="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
+        <img alt="Javascript logo" src="./images/javascript.svg" class="h-14 w-14" width="56" height="56">
+      </div>
+    </div>
+    <div class="flex w-38 items-center transition-opacity duration-2500 opacity-0" id="success-icon">
+      <div class="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-l from-[#f02e65]"></div>
+      <div class="icon-check flex h-5 w-5 items-center justify-center rounded-full border border-[#FD366E52] bg-[#FD366E14] text-[#FD366E]"></div>
+      <div class="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-r from-[#f02e65]"></div>
+    </div>
+    <div class="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
+      <div class="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
+        <img alt="Appwrite logo" src="./images/appwrite.svg" class="h-14 w-14" width="56" height="56">
+      </div>
+    </div>
+  </div>
+
+  <section class="mt-12 flex h-52 flex-col items-center" id="status-section">
+    <div class="flex flex-row gap-4" id="loading-spinner" style="display: none;">
+      <div role="status">
+        <svg aria-hidden="true" class="h-5 w-5 animate-spin fill-[#FD366E] text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+        </svg>
+        <span class="sr-only">Loading...</span>
+      </div>
+      <span>Waiting for connection...</span>
+    </div>
+    <h1 class="font-[Poppins] text-2xl font-light text-[#2D2D31]" id="status-message">Check connection</h1>
+    <p class="mt-2 mb-8" id="status-description">Send a ping to verify the connection</p>
+    <button class="cursor-pointer rounded-md bg-[#FD366E] px-2.5 py-1.5" id="ping-button">
+      <span class="text-white">Send a ping</span>
+    </button>
+  </section>
+
+  <div class="grid grid-rows-3 gap-7 lg:grid-cols-3 lg:grid-rows-none">
+    <div class="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+      <h2 class="text-xl font-light text-[#2D2D31]">Edit your app</h2>
+      <p>Edit <code class="rounded-sm bg-[#EDEDF0] p-1">app/page.js</code> to get started with building your app.</p>
+    </div>
+    <a href="https://cloud.appwrite.io" target="_blank" rel="noopener noreferrer">
+      <div class="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+        <div class="flex flex-row items-center justify-between">
+          <h2 class="text-xl font-light text-[#2D2D31]">Go to console</h2>
+          <span class="icon-arrow-right text-[#D8D8DB]"></span>
+        </div>
+        <p>Navigate to the console to control and oversee the Appwrite services.</p>
+      </div>
+    </a>
+    <a href="https://appwrite.io/docs" target="_blank" rel="noopener noreferrer">
+      <div class="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+        <div class="flex flex-row items-center justify-between">
+          <h2 class="text-xl font-light text-[#2D2D31]">Explore docs</h2>
+          <span class="icon-arrow-right text-[#D8D8DB]"></span>
+        </div>
+        <p>Discover the full power of Appwrite by diving into our documentation.</p>
+      </div>
+    </a>
+  </div>
+
+  <aside class="fixed bottom-0 flex w-full cursor-pointer border-t border-[#EDEDF0] bg-white">
+    <details id="logs-details" class="w-full">
+      <summary class="flex w-full flex-row justify-between p-4 marker:content-none">
+        <div class="flex gap-2">
+          <span class="font-semibold">Logs</span>
+          <div class="flex items-center rounded-md bg-[#E6E6E6] px-2" id="log-count" style="display: none;">
+            <span class="font-semibold" id="log-count-value"></span>
+          </div>
+        </div>
+        <div class="icon">
+          <span class="icon-cheveron-down" aria-hidden="true"></span>
+        </div>
+      </summary>
+      <div class="flex w-full flex-col lg:flex-row">
+        <div class="flex flex-col border-r border-[#EDEDF0]">
+          <div class="border-y border-[#EDEDF0] bg-[#FAFAFB] px-4 py-2 text-[#97979B]">Project</div>
+          <div class="grid grid-cols-2 gap-4 p-4">
+            <div class="flex flex-col">
+              <span class="text-[#97979B]">Endpoint</span>
+              <span class="truncate" id="project-endpoint"></span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-[#97979B]">Project-ID</span>
+              <span class="truncate" id="project-id"></span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-[#97979B]">Project name</span>
+              <span class="truncate" id="project-name"></span>
+            </div>
+          </div>
+        </div>
+        <div class="flex-grow">
+          <table class="w-full">
+            <thead>
+            <tr class="border-y border-[#EDEDF0] bg-[#FAFAFB] text-[#97979B]">
+              <td class="w-52 py-2 pl-4">Date</td>
+              <td>Status</td>
+              <td>Method</td>
+              <td class="hidden lg:table-cell">Path</td>
+              <td class="hidden lg:table-cell">Response</td>
+            </tr>
+            </thead>
+            <tbody id="log-table">
+            <tr>
+              <td class="py-2 pl-4 font-[Fira_Code]">There are no logs to show</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </details>
+  </aside>
+</main>
+
+<script type="module">
+  import { client } from "./lib/appwrite.js";
+  import { AppwriteException } from "appwrite";
+  import "@appwrite.io/pink-icons";
+
+  document.addEventListener("DOMContentLoaded", () => {
+    let logs = [];
+    let status = "idle";
+    let showLogs = false;
+
+    const detailsRef = document.getElementById("logs-details");
+    const main = document.getElementById("main");
+    const statusMessage = document.getElementById("status-message");
+    const statusDescription = document.getElementById("status-description");
+    const pingButton = document.getElementById("ping-button");
+    const loadingSpinner = document.getElementById("loading-spinner");
+    const successIcon = document.getElementById("success-icon");
+    const logCount = document.getElementById("log-count");
+    const logCountValue = document.getElementById("log-count-value");
+    const logTable = document.getElementById("log-table");
+
+    const updateHeight = () => {
+      if (detailsRef) {
+        const height = detailsRef.clientHeight;
+        main.style.marginBottom = `${height}px`;
+      }
+    };
+
+    window.addEventListener("resize", updateHeight);
+
+    detailsRef.addEventListener("toggle", updateHeight);
+
+    async function sendPing() {
+      if (status === "loading") return;
+      status = "loading";
+      statusMessage.textContent = "";
+      statusDescription.textContent = "";
+      pingButton.style.display = "none";
+      loadingSpinner.style.display = "flex";
+
+      try {
+        const result = await client.ping();
+        const log = {
+          date: new Date(),
+          method: "GET",
+          path: "/v1/ping",
+          status: 200,
+          response: JSON.stringify(result),
+        };
+        logs.unshift(log);
+        status = "success";
+        statusMessage.textContent = "Congratulations!";
+        statusDescription.textContent = "You connected your app successfully.";
+
+        updateLogs();
+      } catch (err) {
+        const log = {
+          date: new Date(),
+          method: "GET",
+          path: "/v1/ping",
+          status: err instanceof AppwriteException ? err.code : 500,
+          response: err instanceof AppwriteException ? err.message : "Something went wrong",
+        };
+        logs.unshift(log);
+        status = "error";
+        statusMessage.textContent = "Check connection";
+        statusDescription.textContent = "Send a ping to verify the connection";
+        updateLogs();
+      }
+      pingButton.style.display = "block";
+      loadingSpinner.style.display = "none";
+      successIcon.style.opacity = status === "success" ? "100" : "0";
+      showLogs = true;
+    }
+
+    const updateLogs = () => {
+      logTable.innerHTML = "";
+      if (logs.length > 0) {
+        logCount.style.display = "flex";
+        logCountValue.textContent = logs.length;
+        logs.forEach((log) => {
+          const row = document.createElement("tr");
+          row.innerHTML = `
+          <td class="py-2 pl-4 font-[Fira_Code]">${log.date.toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })}</td>
+          <td>
+            <div class="w-fit rounded-sm ${log.status > 400 ? "bg-[#FF453A3D] text-[#B31212]" : "bg-[#10B9813D] text-[#0A714F]"} px-1">
+              ${log.status}
+            </div>
+          </td>
+          <td>${log.method}</td>
+          <td class="hidden lg:table-cell">${log.path}</td>
+          <td class="hidden font-[Fira_Code] lg:table-cell">${log.response}</td>
+        `;
+          logTable.appendChild(row);
+        });
+      } else {
+        logCount.style.display = "none";
+        const row = document.createElement("tr");
+        row.innerHTML = `<td class="py-2 pl-4 font-[Fira_Code]">There are no logs to show</td>`;
+        logTable.appendChild(row);
+      }
+    };
+
+    pingButton.addEventListener("click", sendPing);
+    document.getElementById('project-endpoint').textContent = import.meta.env.VITE_APPWRITE_ENDPOINT;
+    document.getElementById('project-id').textContent = import.meta.env.VITE_APPWRITE_PROJECT_ID;
+    document.getElementById('project-name').textContent = import.meta.env.VITE_APPWRITE_PROJECT_NAME;
+    updateHeight();
+  });
+</script>
+</body>
+</html>