Bump version

- Update sequence a bit optimized.
- Dependency updates.
- Edge case on repo/branch selection handled.
- More default templates. Thanks to @SaraVieira

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: andrasbacsai

.gitignore

@@ -8,3 +8,4 @@ dist-ssr
 yarn-error.log
 api/development/console.log
 .pnpm-debug.log
+yarn.lock

README.md

@@ -3,7 +3,7 @@
 https://andrasbacsai.com/farewell-netlify-and-heroku-after-3-days-of-coding
 
 # Features
-- Deploy your Node.js and static sites just by pushing code to git.
+- Deploy your Node.js, static sites, PHP or any custom application (with custom Dockerfile) just by pushing code to git.
 - Hassle-free installation and upgrade process.
 - One-click MongoDB, MySQL, PostgreSQL, CouchDB deployments!
 
@@ -14,15 +14,11 @@ https://andrasbacsai.com/farewell-netlify-and-heroku-after-3-days-of-coding
 
 
 # FAQ
-Q: What does Buildpack means?
+Q: What is a buildpack?
 
-A: It defines your application's final form. Static means that it will be hosted as a static site in the end. (see next question below 👇)
-
----
-
-Q: How can I build a static site, like Next.js, Sapper (prerendered), etc ?
-
-A: Use `static` builder and set your `Build command`.
+A: It defines your application's final form. 
+`Static` means that it will be hosted as a static site.
+`NodeJs` means that it will be started as a node application.
 
 # Screenshots
 

api/libs/applications/cleanup/index.js

@@ -1,9 +1,10 @@
 const { docker } = require('../../docker')
-const { execShellAsync, delay } = require('../../common')
+const { execShellAsync } = require('../../common')
 const Deployment = require('../../../models/Deployment')
 
 async function purgeOldThings () {
   try {
+    // TODO: Tweak this, because it deletes coolify-base, so the upgrade will be slow
     await docker.engine.pruneImages()
     await docker.engine.pruneContainers()
   } catch (error) {

api/libs/applications/configuration.js

@@ -1,8 +1,9 @@
 const { uniqueNamesGenerator, adjectives, colors, animals } = require('unique-names-generator')
 const cuid = require('cuid')
-const { execShellAsync } = require('../common')
 const crypto = require('crypto')
 
+const { execShellAsync } = require('../common')
+
 function getUniq () {
   return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 })
 }
@@ -15,6 +16,24 @@ function setDefaultConfiguration (configuration) {
     const shaBase = JSON.stringify({ repository: configuration.repository })
     const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex')
 
+    const baseServiceConfiguration = {
+      replicas: 1,
+      restart_policy: {
+        condition: 'any',
+        max_attempts: 3
+      },
+      update_config: {
+        parallelism: 1,
+        delay: '10s',
+        order: 'start-first'
+      },
+      rollback_config: {
+        parallelism: 1,
+        delay: '10s',
+        order: 'start-first'
+      }
+    }
+
     configuration.build.container.name = sha256.slice(0, 15)
 
     configuration.general.nickname = nickname
@@ -22,17 +41,24 @@ function setDefaultConfiguration (configuration) {
     configuration.general.workdir = `/tmp/${deployId}`
 
     if (!configuration.publish.path) configuration.publish.path = '/'
-    if (!configuration.publish.port) configuration.publish.port = configuration.build.pack === 'static' ? 80 : 3000
-
-    if (configuration.build.pack === 'static') {
+    if (!configuration.publish.port) {
+      if (configuration.build.pack === 'php') {
+        configuration.publish.port = 80
+      } else if (configuration.build.pack === 'static') {
+        configuration.publish.port = 80
+      } else if (configuration.build.pack === 'nodejs') {
+        configuration.publish.port = 3000
+      }
+    }
+    if (!configuration.build.directory) {
+      configuration.build.directory = '/'
+    }
+    if (configuration.build.pack === 'static' || configuration.build.pack === 'nodejs') {
       if (!configuration.build.command.installation) configuration.build.command.installation = 'yarn install'
-      if (!configuration.build.directory) configuration.build.directory = '/'
     }
 
-    if (configuration.build.pack === 'nodejs') {
-      if (!configuration.build.command.installation) configuration.build.command.installation = 'yarn install'
-      if (!configuration.build.directory) configuration.build.directory = '/'
-    }
+    configuration.build.container.baseSHA = crypto.createHash('sha256').update(JSON.stringify(baseServiceConfiguration)).digest('hex')
+    configuration.baseServiceConfiguration = baseServiceConfiguration
 
     return configuration
   } catch (error) {

api/libs/applications/deploy/deploy.js

@@ -1,9 +1,9 @@
 const yaml = require('js-yaml')
+const fs = require('fs').promises
 const { execShellAsync } = require('../../common')
 const { docker } = require('../../docker')
 const { saveAppLog } = require('../../logging')
 const { deleteSameDeployments } = require('../cleanup')
-const fs = require('fs').promises
 
 module.exports = async function (configuration, configChanged, imageChanged) {
   try {
@@ -12,6 +12,11 @@ module.exports = async function (configuration, configChanged, imageChanged) {
       generateEnvs[secret.name] = secret.value
     }
     const containerName = configuration.build.container.name
+
+    // Only save SHA256 of it in the configuration label
+    const baseServiceConfiguration = configuration.baseServiceConfiguration
+    delete configuration.baseServiceConfiguration
+
     const stack = {
       version: '3.8',
       services: {
@@ -20,23 +25,7 @@ module.exports = async function (configuration, configChanged, imageChanged) {
           networks: [`${docker.network}`],
           environment: generateEnvs,
           deploy: {
-            replicas: 1,
-            restart_policy: {
-              condition: 'on-failure',
-              delay: '5s',
-              max_attempts: 1,
-              window: '120s'
-            },
-            update_config: {
-              parallelism: 1,
-              delay: '10s',
-              order: 'start-first'
-            },
-            rollback_config: {
-              parallelism: 1,
-              delay: '10s',
-              order: 'start-first'
-            },
+            ...baseServiceConfiguration,
             labels: [
               'managedBy=coolify',
               'type=application',
@@ -73,16 +62,12 @@ module.exports = async function (configuration, configChanged, imageChanged) {
     }
     await saveAppLog('### Publishing.', configuration)
     await fs.writeFile(`${configuration.general.workdir}/stack.yml`, yaml.dump(stack))
-    if (configChanged) {
-      // console.log('configuration changed')
-      await execShellAsync(
-        `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
-      )
-    } else if (imageChanged) {
+    // TODO: Compare stack.yml with the currently running one to upgrade if something changes, like restart_policy
+    if (imageChanged) {
       // console.log('image changed')
       await execShellAsync(`docker service update --image ${configuration.build.container.name}:${configuration.build.container.tag} ${configuration.build.container.name}_${configuration.build.container.name}`)
     } else {
-      // console.log('new deployment or force deployment')
+      // console.log('new deployment or force deployment or config changed')
       await deleteSameDeployments(configuration)
       await execShellAsync(
         `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
@@ -91,6 +76,7 @@ module.exports = async function (configuration, configChanged, imageChanged) {
 
     await saveAppLog('### Published done!', configuration)
   } catch (error) {
+    console.log(error)
     await saveAppLog(`Error occured during deployment: ${error.message}`, configuration)
     throw { error, type: 'server' }
   }

api/packs/custom/index.js

@@ -0,0 +1,15 @@
+const fs = require('fs').promises
+const { streamEvents, docker } = require('../../libs/docker')
+
+module.exports = async function (configuration) {
+  const path = `${configuration.general.workdir}/${configuration.build.directory ? configuration.build.directory : ''}`
+  if (fs.stat(`${path}/Dockerfile`)) {
+    const stream = await docker.engine.buildImage(
+      { src: ['.'], context: path },
+      { t: `${configuration.build.container.name}:${configuration.build.container.tag}` }
+    )
+    await streamEvents(stream, configuration)
+  } else {
+    throw { error: 'No custom dockerfile found.', type: 'app' }
+  }
+}

api/packs/helpers.js

@@ -1,21 +1,16 @@
 const fs = require('fs').promises
 const { streamEvents, docker } = require('../libs/docker')
-
-async function buildImage (configuration) {
-  let dockerFile = `
-                # build
-                FROM node:lts
-                WORKDIR /usr/src/app
-                COPY package*.json .
-                `
-  if (configuration.build.command.installation) {
-    dockerFile += `RUN ${configuration.build.command.installation}
-                `
+const buildImageNodeDocker = (configuration) => {
+  return [
+    'FROM node:lts',
+    'WORKDIR /usr/src/app',
+    `COPY ${configuration.build.directory} ./`,
+    configuration.build.command.installation && `RUN ${configuration.build.command.installation}`,
+    `RUN ${configuration.build.command.build}`
+  ].join('\n')
 }
-  dockerFile += `COPY . .
-            RUN ${configuration.build.command.build}`
-
-  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, dockerFile)
+async function buildImage (configuration) {
+  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, buildImageNodeDocker(configuration))
   const stream = await docker.engine.buildImage(
     { src: ['.'], context: configuration.general.workdir },
     { t: `${configuration.build.container.name}:${configuration.build.container.tag}` }

api/packs/index.js

@@ -1,4 +1,6 @@
 const static = require('./static')
 const nodejs = require('./nodejs')
+const php = require('./php')
+const custom = require('./custom')
 
-module.exports = { static, nodejs }
+module.exports = { static, nodejs, php, custom }

api/packs/nodejs/index.js

@@ -2,28 +2,22 @@ const fs = require('fs').promises
 const { buildImage } = require('../helpers')
 const { streamEvents, docker } = require('../../libs/docker')
 
+const publishNodejsDocker = (configuration) => {
+  return [
+    'FROM node:lts',
+    'WORKDIR /usr/src/app',
+    configuration.build.command.build
+      ? `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.publish.directory} ./`
+      : `COPY ${configuration.build.directory} ./`,
+    configuration.build.command.installation && `RUN ${configuration.build.command.installation}`,
+    `EXPOSE ${configuration.publish.port}`,
+    'CMD [ "yarn", "start" ]'
+  ].join('\n')
+}
+
 module.exports = async function (configuration) {
   if (configuration.build.command.build) await buildImage(configuration)
-
-  let dockerFile = `# production stage
-      FROM node:lts
-      WORKDIR /usr/src/app
-      `
-  if (configuration.build.command.build) {
-    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.build.directory} /usr/src/app`
-  } else {
-    dockerFile += 'COPY . ./'
-  }
-  if (configuration.build.command.installation) {
-    dockerFile += `
-      RUN ${configuration.build.command.installation}
-      `
-  }
-  dockerFile += `
-        EXPOSE ${configuration.publish.port}
-        CMD [ "yarn", "start" ]`
-
-  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, dockerFile)
+  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, publishNodejsDocker(configuration))
   const stream = await docker.engine.buildImage(
     { src: ['.'], context: configuration.general.workdir },
     { t: `${configuration.build.container.name}:${configuration.build.container.tag}` }

api/packs/php/index.js

@@ -0,0 +1,21 @@
+const fs = require('fs').promises
+const { streamEvents, docker } = require('../../libs/docker')
+
+const publishPHPDocker = (configuration) => {
+  return [
+    'FROM php:apache',
+    'WORKDIR /usr/src/app',
+    `COPY .${configuration.build.directory} /var/www/html`,
+    'EXPOSE 80',
+    ' CMD ["apache2-foreground"]'
+  ].join('\n')
+}
+
+module.exports = async function (configuration) {
+  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, publishPHPDocker(configuration))
+  const stream = await docker.engine.buildImage(
+    { src: ['.'], context: configuration.general.workdir },
+    { t: `${configuration.build.container.name}:${configuration.build.container.tag}` }
+  )
+  await streamEvents(stream, configuration)
+}

api/packs/static/index.js

@@ -2,23 +2,22 @@ const fs = require('fs').promises
 const { buildImage } = require('../helpers')
 const { streamEvents, docker } = require('../../libs/docker')
 
-module.exports = async function (configuration) {
-  if (configuration.build.command.build) await buildImage(configuration)
-
-  let dockerFile = `# production stage
-    FROM nginx:stable-alpine
-    COPY nginx.conf /etc/nginx/nginx.conf
-    `
-  if (configuration.build.command.build) {
-    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.build.directory} /usr/share/nginx/html`
-  } else {
-    dockerFile += 'COPY . /usr/share/nginx/html'
+const publishStaticDocker = (configuration) => {
+  return [
+    'FROM nginx:stable-alpine',
+    'COPY nginx.conf /etc/nginx/nginx.conf',
+    'WORKDIR /usr/share/nginx/html',
+    configuration.build.command.build
+      ? `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.publish.directory} ./`
+      : `COPY ${configuration.build.directory} ./`,
+    'EXPOSE 80',
+    'CMD ["nginx", "-g", "daemon off;"]'
+  ].join('\n')
 }
 
-  dockerFile += `
-      EXPOSE 80
-      CMD ["nginx", "-g", "daemon off;"]`
-  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, dockerFile)
+module.exports = async function (configuration) {
+  if (configuration.build.command.build) await buildImage(configuration)
+  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, publishStaticDocker(configuration))
 
   const stream = await docker.engine.buildImage(
     { src: ['.'], context: configuration.general.workdir },

api/routes/v1/application/deploy/index.js

@@ -60,6 +60,10 @@ module.exports = async function (fastify) {
           foundDomain = true
         }
         if (running.repository.id === configuration.repository.id && running.repository.branch === configuration.repository.branch) {
+          // Base service configuration changed
+          if (!running.build.container.baseSHA || running.build.container.baseSHA !== configuration.build.container.baseSHA) {
+            configChanged = true
+          }
           const state = await execShellAsync(`docker stack ps ${running.build.container.name} --format '{{ json . }}'`)
           const isError = state.split('\n').filter(n => n).map(s => JSON.parse(s)).filter(n => n.DesiredState !== 'Running')
           if (isError.length > 0) forceUpdate = true

api/routes/v1/dashboard/index.js

@@ -4,6 +4,7 @@ const ServerLog = require('../../../models/Logs/Server')
 
 module.exports = async function (fastify) {
   fastify.get('/', async (request, reply) => {
+    try {
       const latestDeployments = await Deployment.aggregate([
         {
           $sort: { createdAt: -1 }
@@ -51,5 +52,10 @@ module.exports = async function (fastify) {
           deployed: databases
         }
       }
+    } catch (error) {
+      if (error.code === 'ENOENT' && error.errno === -2) {
+        throw new Error(`Docker service unavailable at ${error.address}.`)
+      }
+    }
   })
 }

api/server.js

@@ -31,7 +31,7 @@ if (process.env.NODE_ENV === 'production') {
 
 fastify.register(require('./app'), { prefix: '/api/v1' })
 fastify.setErrorHandler(async (error, request, reply) => {
-  console.log(error)
+  console.log({ error })
   if (error.statusCode) {
     reply.status(error.statusCode).send({ message: error.message } || { message: 'Something is NOT okay. Are you okay?' })
   } else {

index.html

@@ -10,6 +10,7 @@
   <link rel="dns-prefetch" href="https://cdn.coollabs.io/" />
   <link rel="preconnect" href="https://cdn.coollabs.io/" crossorigin="" />
   <link rel="stylesheet" href="https://cdn.coollabs.io/fonts/montserrat/montserrat.css" />
+  <link rel="stylesheet" href="https://cdn.coollabs.io/css/microtip-0.2.2.min.css" />
 </head>
 
 <body>

install.sh

@@ -1,43 +1,88 @@
 #!/bin/bash
+
+preTasks() {
+echo '
+##############################
+#### Pulling Git Updates #####
+##############################'
 GIT_SSH_COMMAND="ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no" git pull
-echo "#### Building base image."
-docker build -t coolify-base -f install/Dockerfile-base .
+
 if [ $? -ne 0 ]; then
-    echo '#### Ooops something not okay!'
+    echo '
+####################################
+#### Ooops something not okay! #####
+####################################'
     exit 1
 fi
 
-echo "#### Checking configuration."
+echo '
+##############################
+#### Building Base Image #####
+##############################'
+docker build --label coolify-reserve=true -t coolify-base -f install/Dockerfile-base .
+
+if [ $? -ne 0 ]; then
+    echo '
+####################################
+#### Ooops something not okay! #####
+####################################'
+    exit 1
+fi
+
+echo '
+##################################
+#### Checking configuration. #####
+##################################'
 docker run --rm -w /usr/src/app coolify-base node install/install.js --check
 if [ $? -ne 0 ]; then
-    echo '#### Missing configuration.'
+   echo '
+##################################
+#### Missing configuration ! #####
+##################################'
     exit 1
 fi
-
+}
 case "$1" in
     "all")
-        echo "#### Rebuild everything."
+       preTasks
+       echo '
+#################################
+#### Rebuilding everything. #####
+#################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type all
     ;;
     "coolify")
-        echo "#### Rebuild coolify."
+       preTasks
+       echo '
+##############################
+#### Rebuilding Coolify. #####
+##############################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type coolify
     ;;
     "proxy")
-        echo "#### Rebuild proxy."
+       preTasks
+       echo '
+############################
+#### Rebuilding Proxy. #####
+############################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type proxy
     ;;
     "upgrade-phase-1")
-        echo "#### Rebuild coolify from frontend request phase 1."
+        preTasks
+        echo '
+################################
+#### Upgrading Coolify P1. #####
+################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type upgrade
     ;;
     "upgrade-phase-2")
-        echo "#### Rebuild coolify from frontend request phase 2."
+        echo '
+################################
+#### Upgrading Coolify P2. #####
+################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/update.js --type upgrade
     ;;
-
     *)
-        echo "Use 'all' to build & deploy proxy+coolify, 'coolify' to build & deploy only coolify, 'proxy' to build & deploy only proxy."
         exit 1
      ;;
 esac

install/Dockerfile

@@ -1,5 +1,5 @@
 FROM coolify-base
 WORKDIR /usr/src/app
-RUN yarn build
-CMD ["yarn", "start"]
+RUN pnpm build
+CMD ["pnpm", "start"]
 EXPOSE 3000

install/Dockerfile-base

@@ -9,9 +9,10 @@ RUN apt update && apt install -y docker-ce-cli && apt clean all
 FROM node:14 as modules
 COPY --from=binaries /usr/bin/docker /usr/bin/docker
 COPY --from=binaries /usr/bin/envsubst /usr/bin/envsubst
+RUN curl -L https://pnpm.js.org/pnpm.js | node - add --global pnpm
 WORKDIR /usr/src/app
 COPY ./package*.json .
-RUN yarn install
+RUN pnpm install
 
 FROM modules
 WORKDIR /usr/src/app

install/install.js

@@ -13,7 +13,8 @@ program
 
 program.parse(process.argv)
 
-if (program.check) {
+const options = program.opts()
+if (options.check) {
   checkConfig().then(() => {
     console.log('Config: OK')
   }).catch((err) => {
@@ -26,16 +27,18 @@ if (program.check) {
     console.error(`Please run as root! Current user: ${user}`)
     process.exit(1)
   }
-  shell.exec(`docker network create ${process.env.DOCKER_NETWORK} --driver overlay`, { silent: !program.debug })
+  shell.exec(`docker network create ${process.env.DOCKER_NETWORK} --driver overlay`, { silent: !options.debug })
   shell.exec('docker build -t coolify -f install/Dockerfile .')
-  if (program.type === 'all') {
-    shell.exec('docker stack rm coollabs-coolify', { silent: !program.debug })
-  } else if (program.type === 'coolify') {
+  if (options.type === 'all') {
+    shell.exec('docker stack rm coollabs-coolify', { silent: !options.debug })
+  } else if (options.type === 'coolify') {
     shell.exec('docker service rm coollabs-coolify_coolify')
-  } else if (program.type === 'proxy') {
+  } else if (options.type === 'proxy') {
     shell.exec('docker service rm coollabs-coolify_proxy')
   }
-  if (program.type !== 'upgrade') shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })
+  if (options.type !== 'upgrade') {
+    shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !options.debug, shell: '/bin/bash' })
+  }
 }
 
 function checkConfig () {

install/update.js

@@ -10,12 +10,13 @@ program
   .option('-t, --type <type>', 'Deploy type.')
 
 program.parse(process.argv)
-
+const options = program.opts()
 if (user !== 'root') {
   console.error(`Please run as root! Current user: ${user}`)
   process.exit(1)
 }
-if (program.type === 'upgrade') {
+
+if (options.type === 'upgrade') {
   shell.exec('docker service rm coollabs-coolify_coolify')
-  shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })
+  shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !options.debug, shell: '/bin/bash' })
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coolify",
   "description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "license": "AGPL-3.0",
   "scripts": {
     "lint": "standard",
@@ -16,43 +16,45 @@
     "build:svite": "svite build"
   },
   "dependencies": {
-    "@roxi/routify": "^2.7.3",
-    "@zerodevx/svelte-toast": "^0.1.4",
-    "axios": "^0.21.0",
-    "commander": "^6.2.1",
+    "@roxi/routify": "^2.15.1",
+    "@zerodevx/svelte-toast": "^0.2.0",
+    "axios": "^0.21.1",
+    "commander": "^7.2.0",
+    "compare-versions": "^3.6.0",
     "cuid": "^2.1.8",
     "dayjs": "^1.10.4",
     "deepmerge": "^4.2.2",
     "dockerode": "^3.2.1",
     "dotenv": "^8.2.0",
-    "fastify": "^3.9.1",
+    "fastify": "^3.14.1",
     "fastify-env": "^2.1.0",
-    "fastify-jwt": "^2.1.3",
+    "fastify-jwt": "^2.4.0",
     "fastify-plugin": "^3.0.0",
-    "fastify-static": "^3.3.0",
+    "fastify-static": "^4.0.1",
     "generate-password": "^1.6.0",
     "js-yaml": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
-    "mongoose": "^5.11.4",
+    "mongoose": "^5.12.3",
     "shelljs": "^0.8.4",
+    "svelte-select": "^3.17.0",
     "unique-names-generator": "^4.4.0"
   },
   "devDependencies": {
-    "mongodb-memory-server-core": "^6.9.3",
-    "nodemon": "^2.0.6",
+    "mongodb-memory-server-core": "^6.9.6",
+    "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.35",
-    "postcss-import": "^12.0.1",
-    "postcss-load-config": "^3.0.0",
+    "postcss": "^8.2.9",
+    "postcss-import": "^14.0.1",
+    "postcss-load-config": "^3.0.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "1.19",
-    "prettier-plugin-svelte": "^2.1.6",
+    "prettier": "2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
     "standard": "^16.0.3",
-    "svelte": "^3.29.7",
-    "svelte-hmr": "^0.12.2",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
     "svelte-preprocess": "^4.6.1",
     "svite": "0.8.1",
-    "tailwindcss": "compat"
+    "tailwindcss": "2.1.1"
   },
   "keywords": [
     "svelte",

src/App.svelte

@@ -3,12 +3,16 @@
   import { Router } from "@roxi/routify";
   import { routes } from "../.routify/routes";
   const options = {
-    duration: 2000,
-    dismissable: false
+    duration: 5000,
+    dismissable: true
   };
 </script>
 
 <style lang="postcss">
+  :global(.main) {
+    width: calc(100% - 4rem);
+    margin-left: 4rem;
+  }
   :global(._toastMsg) {
     @apply text-sm font-bold !important;
   }
@@ -57,6 +61,22 @@
   :global(.h-271) {
     min-height: 271px !important;
   }
+  :global(.repository-select-search .listItem .item),
+  :global(.repository-select-search .empty) {
+    @apply text-sm py-3 font-bold bg-warmGray-800 text-white cursor-pointer border-none hover:bg-warmGray-700 !important;
+  }
+
+  :global(.repository-select-search .listContainer) {
+    @apply bg-transparent !important;
+  }
+
+  :global(.repository-select-search .clearSelect) {
+    @apply text-white cursor-pointer !important;
+  }
+
+  :global(.repository-select-search .selectedItem) {
+    @apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
+  }
 </style>
 
 <SvelteToast options="{options}" />

src/components/Application/Configuration/ActiveTab/BuildStep.svelte

@@ -1,22 +1,24 @@
 <script>
   import { application } from "@store";
+import Tooltip from "../../../Tooltip/TooltipInfo.svelte";
 </script>
 
-<div class="grid grid-cols-1 space-y-2 max-w-2xl md:mx-auto mx-6 text-center">
-  <label for="buildCommand">Build Command</label>
-  <input
-    id="buildCommand"
-    bind:value="{$application.build.command.build}"
-    placeholder="eg: yarn build"
-  />
+<div class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 text-center">
+  <label for="installCommand"
+    >Install Command <Tooltip label="Command to run for installing dependencies. eg: yarn install." />
+  </label>
 
-  <label for="installCommand">Install Command</label>
   <input
+    class="mb-6"
     id="installCommand"
     bind:value="{$application.build.command.installation}"
     placeholder="eg: yarn install"
   />
-
-  <label for="baseDir">Base Directory</label>
-  <input id="baseDir" bind:value="{$application.build.directory}" placeholder="/" />
+  <label for="buildCommand">Build Command <Tooltip label="Command to run for building your application. If empty, no build phase initiated in the deploy process." /></label>
+  <input
+    class="mb-6"
+    id="buildCommand"
+    bind:value="{$application.build.command.build}"
+    placeholder="eg: yarn build"
+  />
 </div>

src/components/Application/Configuration/ActiveTab/General.svelte

@@ -1,106 +1,105 @@
 <script>
   import { application} from "@store";
+  import TooltipInfo from "../../../Tooltip/TooltipInfo.svelte";
 </script>
 
 <div>
   <div
-      class="grid grid-cols-1 text-sm space-y-2 max-w-2xl md:mx-auto mx-6 pb-6 auto-cols-max"
+    class="grid grid-cols-1 text-sm max-w-2xl md:mx-auto mx-6 pb-6 auto-cols-max "
+  >
+    <label for="buildPack"
+      >Build Pack 
+      {#if $application.build.pack === 'custom'}
+      <TooltipInfo
+        label="Your custom Dockerfile will be used from the root directory (or from 'Base Directory' specified below) of your repository. "
+      />
+      {:else if $application.build.pack === 'static'}
+      <TooltipInfo
+        label="Published as a static site (for build phase see 'Build Step' tab)."
+      />
+      {:else if $application.build.pack === 'nodejs'}
+      <TooltipInfo
+        label="Published as a Node.js application (for build phase see 'Build Step' tab)."
+      />
+      {:else if $application.build.pack === 'php'}
+      <TooltipInfo
+      size="large"
+        label="Published as a PHP application."
+      />
+      {/if}
+      
+</label
     >
-      <label for="buildPack">Build Pack</label>
     <select id="buildPack" bind:value="{$application.build.pack}">
-        <option selected class="font-medium">static</option>
-        <option class="font-medium">nodejs</option>
+      <option selected class="font-bold">static</option>
+      <option class="font-bold">nodejs</option>
+      <option class="font-bold">php</option>
+      <option class="font-bold">custom</option>
     </select>
   </div>
   <div
-      class="grid grid-cols-2 space-y-2 max-w-2xl md:mx-auto mx-6 justify-center items-center"
+    class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center"
   >
-      <label for="Domain">Domain</label>
+    <div class="grid grid-flow-col gap-2 items-center pb-6">
+      <div class="grid grid-flow-row">
+        <label for="Domain" class="">Domain</label>
         <input
-        class:placeholder-red-500="{$application.publish.domain == null || $application.publish.domain == ''}"
-        class:border-red-500="{$application.publish.domain == null || $application.publish.domain == ''}"
+          class:placeholder-red-500="{$application.publish.domain == null ||
+            $application.publish.domain == ''}"
+          class:border-red-500="{$application.publish.domain == null ||
+            $application.publish.domain == ''}"
           id="Domain"
           bind:value="{$application.publish.domain}"
           placeholder="eg: coollabs.io (without www)"
         />
-      <label for="Path">Path Prefix</label>
+      </div>
+      <div class="grid grid-flow-row">
+        <label for="Path"
+          >Path <TooltipInfo
+            label="{`Path to deploy your application on your domain. eg: /api means it will be deployed to -> https://${$application.publish.domain}/api`}"
+          /></label
+        >
         <input
           id="Path"
           bind:value="{$application.publish.path}"
           placeholder="/"
         />
-      <label for="publishDir">Publish Directory</label>
+      </div>
+    </div>
+    {#if $application.build.pack === "nodejs" || $application.build.pack === "custom"}
+    <label for="Port" >Port</label>
+    <input
+      id="Port"
+      class="mb-6"
+      bind:value="{$application.publish.port}"
+      placeholder="{$application.build.pack === 'static' ? '80' : '3000'}"
+    />
+  {/if}
+    <div class="grid grid-flow-col gap-2 items-center pt-12">
+      <div class="grid grid-flow-row">
+        <label for="baseDir"
+          >Base Directory <TooltipInfo
+            label="The directory to use as base for every command (could be useful if you have a monorepo)."
+          /></label
+        >
+        <input
+          id="baseDir"
+          bind:value="{$application.build.directory}"
+          placeholder="/"
+        />
+      </div>
+      <div class="grid grid-flow-row">
+        <label for="publishDir"
+          >Publish Directory <TooltipInfo
+            label="The directory to deploy after running the build command.  eg: dist, _site, public."
+          /></label
+        >
         <input
           id="publishDir"
           bind:value="{$application.publish.directory}"
           placeholder="/"
         />
-      {#if $application.build.pack !== "static"}
-        <label for="Port">Port</label>
-        <input
-          id="Port"
-          bind:value="{$application.publish.port}"
-          placeholder="{$application.build.pack === 'static'
-            ? '80'
-            : '3000'}"
-        />
-      {/if}
-      <!-- {#if config.buildPack === "static"}
-        <div class="text-base font-bold text-white pt-2">
-          Preview Deploys
-        </div>
-        <button
-          type="button"
-          on:click="{() =>
-            (config.previewDeploy = !config.previewDeploy)}"
-          aria-pressed="false"
-          class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-          class:bg-green-600="{config.previewDeploy}"
-          class:bg-coolgray-300="{!config.previewDeploy}"
-        >
-          <span class="sr-only">Use setting</span>
-          <span
-            class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-            class:translate-x-5="{config.previewDeploy}"
-            class:translate-x-0="{!config.previewDeploy}"
-          >
-            <span
-              class="ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              class:opacity-0="{config.previewDeploy}"
-              class:opacity-100="{!config.previewDeploy}"
-              aria-hidden="true"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-red-600"
-                fill="none"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"></path>
-              </svg>
-            </span>
-            <span
-              class="ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              aria-hidden="true"
-              class:opacity-100="{config.previewDeploy}"
-              class:opacity-0="{!config.previewDeploy}"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-green-600"
-                fill="currentColor"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-                ></path>
-              </svg>
-            </span>
-          </span>
-        </button>
-      {/if} -->
+      </div>
+    </div>
   </div>
 </div>

src/components/Application/Configuration/ActiveTab/Secrets.svelte

@@ -21,23 +21,26 @@
         ];
         secret = {
           name: null,
-        value: null
-      }
+          value: null,
+        };
       } else {
         foundSecret = found;
       }
     }
-
   }
 
   async function removeSecret(name) {
-    $application.publish.secrets = [...$application.publish.secrets.filter(s => s.name !== name)]
-   
+    foundSecret = null
+    $application.publish.secrets = [
+      ...$application.publish.secrets.filter(s => s.name !== name),
+    ];
   }
 </script>
 
-<div class="space-y-2 max-w-2xl md:mx-auto mx-6 text-center">
-  <div class="text-left text-base font-bold tracking-tight text-warmGray-400">New Secret</div>
+<div class="max-w-2xl md:mx-auto mx-6 text-center">
+  <div class="text-left text-base font-bold tracking-tight text-warmGray-400">
+    New Secret
+  </div>
   <div class="grid md:grid-flow-col grid-flow-row gap-2">
     <input id="secretName" bind:value="{secret.name}" placeholder="Name" />
     <input id="secretValue" bind:value="{secret.value}" placeholder="Value" />
@@ -47,18 +50,19 @@
     >
   </div>
   {#if $application.publish.secrets.length > 0}
+    <div class="py-4">
       {#each $application.publish.secrets as s}
         <div class="grid md:grid-flow-col grid-flow-row gap-2">
           <input
             id="{s.name}"
             value="{s.name}"
             disabled
-          class="bg-transparent border-transparent"
+            class="border-2 bg-transparent border-transparent"
             class:border-red-600="{foundSecret && foundSecret.name === s.name}"
           />
           <input
             id="{s.createdAt}"
-          value="ENCRYPTED"
+            value="SAVED"
             disabled
             class="bg-transparent border-transparent"
           />
@@ -68,5 +72,6 @@
           >
         </div>
       {/each}
+    </div>
   {/if}
 </div>

src/components/Application/Configuration/Branches.svelte

@@ -1,24 +1,46 @@
 <script>
   export let loading, branches;
+  import { isActive } from "@roxi/routify";
   import { application } from "@store";
+  import Select from "svelte-select";
+
+  const selectedValue =
+    !$isActive("/application/new") && $application.repository.branch
+
+  function handleSelect(event) {
+    $application.repository.branch = null;
+    setTimeout(() => {
+      $application.repository.branch = event.detail.value;
+    }, 1);
+  }
 </script>
 
 {#if loading}
   <div class="grid grid-cols-1">
     <label for="branch">Branch</label>
-    <select disabled>
-      <option selected>Loading branches</option>
-    </select>
+    <div class="repository-select-search col-span-2">
+      <Select
+        containerClasses="w-full border-none bg-transparent"
+        placeholder="Loading branches..."
+        isDisabled
+      />
+    </div>
   </div>
 {:else}
   <div class="grid grid-cols-1">
     <label for="branch">Branch</label>
-    <!-- svelte-ignore a11y-no-onchange -->
-    <select id="branch" bind:value="{$application.repository.branch}">
-      <option disabled selected>Select a branch</option>
-      {#each branches as branch}
-        <option value="{branch.name}" class="font-medium">{branch.name}</option>
-      {/each}
-    </select>
+    <div class="repository-select-search col-span-2">
+      <Select
+        containerClasses="w-full border-none bg-transparent"
+        on:select="{handleSelect}"
+        selectedValue="{selectedValue}"
+        isClearable="{false}"
+        items="{branches.map(b => ({ label: b.name, value: b.name }))}"
+        showIndicator="{$isActive('/application/new')}"
+        noOptionsMessage="No branches found"
+        placeholder="Select a branch"
+        isDisabled="{!$isActive('/application/new')}"
+      />
+    </div>
   </div>
 {/if}

src/components/Application/Configuration/Configuration.svelte

@@ -18,7 +18,7 @@
   let repositories = [];
 
   function dashify(str, options) {
-    if (typeof str !== "string") return str
+    if (typeof str !== "string") return str;
     return str
       .trim()
       .replace(/\W/g, m => (/[À-ž]/.test(m) ? m : "-"))
@@ -29,6 +29,7 @@
 
   async function loadBranches() {
     loading.branches = true;
+    if ($isActive("/application/new")) $application.repository.branch = null
     const selectedRepository = repositories.find(
       r => r.id === $application.repository.id,
     );
@@ -44,6 +45,14 @@
     loading.branches = false;
   }
 
+  async function getGithubRepos(id, page) {
+    const data = await $fetch(
+      `https://api.github.com/user/installations/${id}/repositories?per_page=100&page=${page}`,
+    );
+
+    return data;
+  }
+
   async function loadGithub() {
     try {
       const { installations } = await $fetch(
@@ -55,12 +64,28 @@
       $application.github.installation.id = installations[0].id;
       $application.github.app.id = installations[0].app_id;
 
-      const data = await $fetch(
-        `https://api.github.com/user/installations/${$application.github.installation.id}/repositories?per_page=10000`,
+      let page = 1;
+      let userRepos = 0;
+      const data = await getGithubRepos(
+        $application.github.installation.id,
+        page,
       );
 
-      repositories = data.repositories;
-      const foundRepositoryOnGithub = data.repositories.find(
+      repositories = repositories.concat(data.repositories);
+      userRepos = data.total_count;
+
+      if (userRepos > repositories.length) {
+        while (userRepos > repositories.length) {
+          page = page + 1;
+          const repos = await getGithubRepos(
+            $application.github.installation.id,
+            page,
+          );
+          repositories = repositories.concat(repos.repositories);
+        }
+      }
+
+      const foundRepositoryOnGithub = repositories.find(
         r =>
           r.full_name ===
           `${$application.repository.organization}/${$application.repository.name}`,
@@ -72,9 +97,11 @@
       }
     } catch (error) {
       return false;
-    }
+    } finally {
       loading.github = false;
     }
+ 
+  }
   function modifyGithubAppConfig() {
     const left = screen.width / 2 - 1020 / 2;
     const top = screen.height / 2 - 618 / 2;
@@ -122,13 +149,13 @@
     <Login />
   {:else}
     {#await loadGithub()}
-      <Loading />
+      <Loading github githubLoadingText="Loading repositories..." />
     {:then}
       {#if loading.github}
-        <Loading />
+        <Loading github githubLoadingText="Loading repositories..." />
       {:else}
         <div
-          class="text-center space-y-2 max-w-4xl mx-auto px-6"
+          class="space-y-2 max-w-4xl mx-auto px-6"
           in:fade="{{ duration: 100 }}"
         >
           <Repositories

src/components/Application/Configuration/Repositories.svelte

@@ -2,9 +2,24 @@
   import { createEventDispatcher } from "svelte";
   import { isActive } from "@roxi/routify";
   import { application } from "@store";
+  import Select from "svelte-select";
+
+  function handleSelect(event) {
+    $application.repository.id = parseInt(event.detail.value, 10);
+    dispatch("loadBranches");
+  }
+
   export let repositories;
+  let items = repositories.map(repo => ({
+    label: `${repo.owner.login}/${repo.name}`,
+    value: repo.id.toString(),
+  }));
+
+  const selectedValue =
+    !$isActive("/application/new") &&
+    `${$application.repository.organization}/${$application.repository.name}`;
+
   const dispatch = createEventDispatcher();
-  const loadBranches = () => dispatch("loadBranches");
   const modifyGithubAppConfig = () => dispatch("modifyGithubAppConfig");
 </script>
 
@@ -12,25 +27,19 @@
   {#if repositories.length !== 0}
     <label for="repository">Organization / Repository</label>
     <div class="grid grid-cols-3 ">
-      <!-- svelte-ignore a11y-no-onchange -->
-      <select
-        id="repository"
-        class:cursor-not-allowed="{!$isActive('/application/new')}"
-        class="col-span-2"
-        bind:value="{$application.repository.id}"
-        on:change="{loadBranches}"
-        disabled="{!$isActive('/application/new')}"
-      >
-        <option selected disabled>Select a repository</option>
-        {#each repositories as repo}
-          <option value="{repo.id}" class="font-medium">
-            {repo.owner.login}
-            /
-            {repo.name}
-          </option>
-        {/each}
-      </select>
-
+      <div class="repository-select-search col-span-2">
+        <Select
+          containerClasses="w-full border-none bg-transparent"
+          on:select="{handleSelect}"
+          selectedValue="{selectedValue}"
+          isClearable="{false}"
+          items="{items}"
+          showIndicator="{$isActive('/application/new')}"
+          noOptionsMessage="No Repositories found"
+          placeholder="Select a Repository"
+          isDisabled="{!$isActive('/application/new')}"
+        />
+      </div>
       <button
         class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
         on:click="{modifyGithubAppConfig}">Configure on Github</button

src/components/Application/Configuration/Tabs.svelte

@@ -1,11 +1,15 @@
 <script>
   import { redirect, isActive } from "@roxi/routify";
+  import { onMount } from "svelte";
+  import { toast } from "@zerodevx/svelte-toast";
+  import templates from "../../../utils/templates";
   import { application, fetch, deployments } from "@store";
   import General from "./ActiveTab/General.svelte";
   import BuildStep from "./ActiveTab/BuildStep.svelte";
   import Secrets from "./ActiveTab/Secrets.svelte";
-  import { onMount } from "svelte";
+  import Loading from "../../Loading.svelte";
 
+  let loading = false;
   onMount(async () => {
     if (!$isActive("/application/new")) {
       const config = await $fetch(`/api/v1/config`, {
@@ -22,13 +26,14 @@
         branch: $application.repository.branch,
       });
     } else {
-      $deployments.applications.deployed.filter(d => {
+      loading = true;
+      $deployments?.applications?.deployed.filter(d => {
         const conf = d?.Spec?.Labels.application;
         if (
-          conf.repository.organization ===
+          conf?.repository?.organization ===
             $application.repository.organization &&
-          conf.repository.name === $application.repository.name &&
-          conf.repository.branch === $application.repository.branch
+          conf?.repository?.name === $application.repository.name &&
+          conf?.repository?.branch === $application.repository.branch
         ) {
           $redirect(`/application/:organization/:name/:branch/configuration`, {
             name: $application.repository.name,
@@ -37,7 +42,64 @@
           });
         }
       });
+      try {
+        const dir = await $fetch(
+          `https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/contents/?ref=${$application.repository.branch}`,
+        );
+        const packageJson = dir.find(
+          f => f.type === "file" && f.name === "package.json",
+        );
+        const Dockerfile = dir.find(
+          f => f.type === "file" && f.name === "Dockerfile",
+        );
+
+        if (Dockerfile) {
+          $application.build.pack = "custom";
+          toast.push("Custom Dockerfile found. Build pack set to custom.");
+        } else if (packageJson) {
+          const { content } = await $fetch(packageJson.git_url);
+          const packageJsonContent = JSON.parse(atob(content));
+          const checkPackageJSONContents = dep => {
+            return(
+              packageJsonContent?.dependencies?.hasOwnProperty(dep) ||
+              packageJsonContent?.devDependencies?.hasOwnProperty(dep)
+            );
+          };
+          Object.keys(templates).map(dep => {
+            if (checkPackageJSONContents(dep)) {
+              const config = templates[dep];
+              $application.build.pack = config.pack;
+              if (config.installation) {
+                $application.build.command.installation = config.installation;
               }
+
+              if (config.port) {
+                $application.publish.port = config.port;
+              }
+
+              if (config.directory) {
+                $application.publish.directory = config.directory;
+              }
+
+              if (
+                packageJsonContent.scripts.hasOwnProperty("build") &&
+                config.build
+              ) {
+                $application.build.command.build = config.build;
+              }
+              toast.push(
+                `${config.name} App detected. Default values set.`,
+              );
+            } 
+ 
+          });
+
+        }
+      } catch (error) {
+        // Nothing detected
+      }
+    }
+    loading = false;
   });
   let activeTab = {
     general: true,
@@ -56,6 +118,9 @@
   }
 </script>
 
+{#if loading}
+  <Loading github githubLoadingText="Scanning repository..." />
+{:else}
   <div class="block text-center py-4">
     <nav
       class="flex space-x-4 justify-center font-bold text-md text-white"
@@ -68,6 +133,11 @@
       >
         General
       </div>
+      {#if $application.build.pack === "php"}
+        <div disabled class="px-3 py-2 text-warmGray-700 cursor-not-allowed">
+          Build Step
+        </div>
+      {:else}
         <div
           on:click="{() => activateTab('buildStep')}"
           class:text-green-500="{activeTab.buildStep}"
@@ -75,6 +145,8 @@
         >
           Build Step
         </div>
+      {/if}
+
       <div
         on:click="{() => activateTab('secrets')}"
         class:text-green-500="{activeTab.secrets}"
@@ -95,3 +167,4 @@
       {/if}
     </div>
   </div>
+{/if}

src/components/Loading.svelte

@@ -42,11 +42,38 @@
 </style>
 
 <script>
+  export let github = false;
+  export let githubLoadingText = "Loading GitHub...";
   export let fullscreen = true;
 </script>
 
 {#if fullscreen}
-  <div class="fixed top-0 flex flex-wrap content-center h-full w-full">
+  {#if github}
+    <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
+      <div class="main flex justify-center items-center">
+        <div class="w-64">
+          <svg
+            class=" w-28 animate-bounce mx-auto"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            ><path
+              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+            ></path></svg
+          >
+          <div class="text-xl font-bold text-center">
+            {githubLoadingText}
+          </div>
+        </div>
+      </div>
+    </div>
+  {:else}
+    <div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
       <span class=" loader"></span>
     </div>
   {/if}
+{/if}

src/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let position = "bottom";
+  export let label;
+  export let size = "fit";
+</script>
+
+<span
+  aria-label="{label}"
+  data-microtip-position="{position}"
+  data-microtip-size="{size}"
+  role="tooltip"
+>
+<slot></slot>
+</span>

src/components/Tooltip/TooltipInfo.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let position = "top";
+  export let label;
+  export let size = "large";
+</script>
+
+<span
+  class="absolute px-1 py-1"
+  aria-label="{label}"
+  data-microtip-position="{position}"
+  data-microtip-size="{size}"
+  role="tooltip"
+>
+  <svg
+    class="w-4 text-warmGray-600 hover:text-white"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clip-rule="evenodd"></path>
+  </svg>
+</span>

src/index.css

@@ -16,3 +16,33 @@ body {
   --toastProgressBackground: transparent;
   --toastFont: 'Inter';
 }
+
+.border-gradient {
+    border-bottom: 2px solid transparent;
+    border-image: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0));
+    border-image-slice: 1;
+}
+
+[aria-label][role~="tooltip"]::after {
+  background: rgba(41, 37, 36, 0.9);
+  color: white;
+  font-family: 'Inter';
+  font-size: 16px;
+  font-weight: 600;
+   white-space: normal;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+}
+[role~="tooltip"][data-microtip-position="right"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+}

src/pages/_layout.svelte

@@ -2,32 +2,23 @@
   .min-w-4rem {
     min-width: 4rem;
   }
-  .main {
-    width: calc(100% - 4rem);
-    margin-left: 4rem;
-  }
 </style>
 
 <script>
-  import { url, goto, route, isActive, redirect } from "@roxi/routify/runtime";
-  import {
-    loggedIn,
-    session,
-    fetch,
-    deployments,
-    application,
-    initConf,
-  } from "@store";
+  import { goto, route, isActive } from "@roxi/routify/runtime";
+  import { loggedIn, session, fetch, deployments } from "@store";
   import { toast } from "@zerodevx/svelte-toast";
-  import packageJson from "../../package.json";
   import { onMount } from "svelte";
+  import compareVersions from "compare-versions";
+  import packageJson from "../../package.json";
+  import Tooltip from "../components/Tooltip/Tooltip.svelte";
 
   let upgradeAvailable = false;
   let upgradeDisabled = false;
   let upgradeDone = false;
   let latest = {};
   onMount(async () => {
-    upgradeAvailable = await checkUpgrade();
+    if ($session.token) upgradeAvailable = await checkUpgrade();
   });
   async function verifyToken() {
     if ($session.token) {
@@ -73,18 +64,20 @@
     }
   }
   async function checkUpgrade() {
+    const branch =
+      process.env.NODE_ENV === "production" &&
+      window.location.hostname !== "test.andrasbacsai.dev"
+        ? "main"
+        : "next";
     latest = await window
       .fetch(
-        "https://raw.githubusercontent.com/coollabsio/coolify/main/package.json",
+        `https://raw.githubusercontent.com/coollabsio/coolify/${branch}/package.json`,
         { cache: "no-cache" },
       )
       .then(r => r.json());
-    if (
-      latest.version.split(".").join("") >
-      packageJson.version.split(".").join("")
-    ) {
-      return true;
-    }
+    return compareVersions(latest.version, packageJson.version) === 1
+      ? true
+      : false;
   }
 </script>
 
@@ -94,11 +87,12 @@
       class="w-16 bg-warmGray-800 text-white top-0 left-0 fixed min-w-4rem min-h-screen"
     >
       <div
-        class="flex flex-col w-full h-screen items-center space-y-4 transition-all duration-100"
+        class="flex flex-col w-full h-screen items-center transition-all duration-100"
         class:border-green-500="{$isActive('/dashboard/applications')}"
         class:border-purple-500="{$isActive('/dashboard/databases')}"
       >
         <img class="w-10 pt-4 pb-4" src="/favicon.png" alt="coolLabs logo" />
+        <Tooltip position="right" label="Applications">
           <div
             class="p-2 hover:bg-warmGray-700 rounded hover:text-green-500 my-4 transition-all duration-100 cursor-pointer"
             on:click="{() => $goto('/dashboard/applications')}"
@@ -116,19 +110,17 @@
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-            ><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect
-              x="9"
-              y="9"
-              width="6"
-              height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line
-              x1="15"
+              ><rect x="4" y="4" width="16" height="16" rx="2" ry="2"
+              ></rect><rect x="9" y="9" width="6" height="6"></rect><line
+                x1="9"
                 y1="1"
-              x2="15"
-              y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line
-              x1="15"
+                x2="9"
+                y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line
+                x1="9"
                 y1="20"
-              x2="15"
-              y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line
+                x2="9"
+                y2="23"></line><line x1="15" y1="20" x2="15" y2="23"
+              ></line><line x1="20" y1="9" x2="23" y2="9"></line><line
                 x1="20"
                 y1="14"
                 x2="23"
@@ -139,8 +131,10 @@
                 y2="14"></line></svg
             >
           </div>
+        </Tooltip>
+        <Tooltip position="right" label="Databases">
           <div
-          class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 my-4 transition-all duration-100 cursor-pointer"
+            class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 transition-all duration-100 cursor-pointer"
             on:click="{() => $goto('/dashboard/databases')}"
             class:text-purple-500="{$isActive('/dashboard/databases') ||
               $isActive('/database')}"
@@ -162,10 +156,11 @@
               ></path>
             </svg>
           </div>
+        </Tooltip>
         <div class="flex-1"></div>
+        <Tooltip position="right" label="Settings">
           <button
-          title="Settings"
-          class="p-2 hover:bg-warmGray-700 rounded hover:text-yellow-500 my-4 transition-all duration-100 cursor-pointer"
+            class="p-2 hover:bg-warmGray-700 rounded hover:text-yellow-500 transition-all duration-100 cursor-pointer"
             class:text-yellow-500="{$isActive('/settings')}"
             class:bg-warmGray-700="{$isActive('/settings')}"
             on:click="{() => $goto('/settings')}"
@@ -190,6 +185,8 @@
                 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
             </svg>
           </button>
+        </Tooltip>
+        <Tooltip position="right" label="Logout">
           <button
             class="p-2 hover:bg-warmGray-700 rounded hover:text-red-500 my-4 transition-all duration-100 cursor-pointer"
             on:click="{logout}"
@@ -203,35 +200,36 @@
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-            ><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline
-              points="16 17 21 12 16 7"></polyline><line
+              ><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+              ></path><polyline points="16 17 21 12 16 7"></polyline><line
                 x1="21"
                 y1="12"
                 x2="9"
                 y2="12"></line></svg
             >
           </button>
+        </Tooltip>
         <div
           class="cursor-pointer text-xs font-bold text-warmGray-400 py-2 hover:bg-warmGray-700 w-full text-center"
         >
-          v{packageJson.version}
+          {packageJson.version}
         </div>
       </div>
     </nav>
   {/if}
   {#if upgradeAvailable}
     <footer
-      class="absolute top-0 right-0 p-2 w-auto rounded-tl text-white "
+      class="absolute bottom-0 right-0 p-4 px-6 w-auto rounded-tl text-white "
     >
       <div class="flex items-center">
         <div></div>
         <div class="flex-1"></div>
         {#if !upgradeDisabled}
           <button
-              class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 font-bold text-xs rounded px-2 py-2"
+            class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-xs font-bold rounded px-2 py-2"
             disabled="{upgradeDisabled}"
             on:click="{upgrade}"
-              >New version available. <br>Click here to upgrade!</button
+            >New version available, <br />click here to upgrade!</button
           >
         {:else if upgradeDone}
           <button
@@ -243,14 +241,14 @@
         {:else}
           <button
             class="opacity-50 tracking-tight font-bold text-xs rounded px-2  cursor-not-allowed"
-              disabled="{upgradeDisabled}">Upgrading. It could take a while, please wait...</button
+            disabled="{upgradeDisabled}"
+            >Upgrading. It could take a while, please wait...</button
           >
         {/if}
-    
       </div>
     </footer>
   {/if}
-  <main class:main={$route.path !== "/index"}>
+  <main class:main="{$route.path !== '/index'}">
     <slot />
   </main>
 {:catch test}

src/pages/application/[organization]/[name]/[branch]/configuration.svelte

@@ -1,30 +1,6 @@
 <script>
-  import { redirect, isActive } from "@roxi/routify";
-  import { application, fetch, initialApplication, initConf } from "@store";
-  import { toast } from "@zerodevx/svelte-toast";
+  import { application } from "@store";
   import Configuration from "../../../../../components/Application/Configuration/Configuration.svelte";
-  import Loading from "../../../../../components/Loading.svelte";
-
-  async function loadConfiguration() {
-    if (!$isActive("/application/new")) {
-      try {
-        const config = await $fetch(`/api/v1/config`, {
-          body: {
-            name: $application.repository.name,
-            organization: $application.repository.organization,
-            branch: $application.repository.branch,
-          },
-        });
-        $application = { ...config };
-        $initConf = JSON.parse(JSON.stringify($application));
-      } catch (error) {
-        toast.push("Configuration not found.");
-        $redirect("/dashboard/applications");
-      }
-    } else {
-      $application = JSON.parse(JSON.stringify(initialApplication));
-    }
-  }
 </script>
 
 <div class="min-h-full text-white">

src/pages/application/[organization]/[name]/[branch]/overview.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { fade } from "svelte/transition";
   import { application } from "@store";
   import Configuration from "../../../../../components/Application/Configuration/Configuration.svelte";
 </script>

src/pages/application/_layout.svelte

@@ -5,6 +5,7 @@
   import { fade } from "svelte/transition";
   import Loading from "../../components/Loading.svelte";
   import { toast } from "@zerodevx/svelte-toast";
+import Tooltip from "../../components/Tooltip/Tooltip.svelte";
 
   $application.repository.organization = $params.organization;
   $application.repository.name = $params.name;
@@ -49,6 +50,7 @@
 
   async function deploy() {
     try {
+      $application.build.pack =  $application.build.pack.replace('.','').toLowerCase()
       toast.push("Checking inputs.");
       await $fetch(`/api/v1/application/check`, {
         body: $application,
@@ -76,8 +78,8 @@
 <nav
   class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4"
 >
+<Tooltip position="bottom" label="Deploy" >
   <button
-    title="Deploy"
     disabled="{$application.publish.domain === '' ||
       $application.publish.domain === null}"
     class:cursor-not-allowed="{$application.publish.domain === '' ||
@@ -90,6 +92,7 @@
     class="icon"
     on:click="{deploy}"
   >
+ 
     <svg
       class="w-6"
       xmlns="http://www.w3.org/2000/svg"
@@ -107,9 +110,11 @@
         d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline
         points="16 16 12 12 8 16"></polyline></svg
     >
+
   </button>
+</Tooltip>
+<Tooltip position="bottom" label="Delete" >
   <button
-    title="Delete"
     disabled="{$application.publish.domain === '' ||
       $application.publish.domain === null ||
       $isActive('/application/new')}"
@@ -142,9 +147,10 @@
       ></path>
     </svg>
   </button>
+</Tooltip>
   <div class="border border-warmGray-700 h-8"></div>
+  <Tooltip position="bottom" label="Logs" >
   <button
-    title="Logs"
     class="icon"
     class:text-warmGray-700="{$isActive('/application/new')}"
     disabled="{$isActive('/application/new')}"
@@ -177,8 +183,9 @@
       ></path>
     </svg>
   </button>
+</Tooltip>
+<Tooltip position="bottom-left" label="Configuration" >
   <button
-    title="Configuration"
     class="icon hover:text-yellow-400"
     disabled="{$isActive(`/application/new`)}"
     class:text-yellow-400="{$isActive(
@@ -207,6 +214,7 @@
       ></path>
     </svg>
   </button>
+</Tooltip>
 </nav>
 
 <div class="text-white">

src/pages/dashboard/applications.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { deployments } from "@store";
+  import { deployments, dateOptions } from "@store";
   import { fade } from "svelte/transition";
   import { goto } from "@roxi/routify/runtime";
 
@@ -85,7 +85,7 @@
                   >
                 {:else if application.Spec.Labels.configuration.build.pack === "nodejs"}
                   <svg
-                    class="text-white w-10 h-10 absolute top-0 left-0 -m-4"
+                    class="text-green-400 w-10 h-10 absolute top-0 left-0 -m-4"
                     xmlns="http://www.w3.org/2000/svg"
                     aria-hidden="true"
                     focusable="false"
@@ -98,9 +98,97 @@
                       d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"
                     ></path>
                   </svg>
+                {:else if application.Spec.Labels.configuration.build.pack === "php"}
+                  <svg
+                    viewBox="0 0 128 128"
+                    class="text-white w-14 h-14 absolute top-0 left-0 -m-6"
+                  >
+                    <path
+                      fill="#6181B6"
+                      d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"
+                    ></path>
+                  </svg>
+                {:else if application.Spec.Labels.configuration.build.pack === "custom"}
+                  <svg
+                    viewBox="0 0 128 128"
+                    class="w-16 h-16 absolute top-0 left-0 -m-8"
+                  >
+                    <g
+                      ><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#3A4D54"
+                        d="M73.8 50.8h11.3v11.5h5.7c2.6 0 5.3-.5 7.8-1.3 1.2-.4 2.6-1 3.8-1.7-1.6-2.1-2.4-4.7-2.6-7.3-.3-3.5.4-8.1 2.8-10.8l1.2-1.4 1.4 1.1c3.6 2.9 6.5 6.8 7.1 11.4 4.3-1.3 9.3-1 13.1 1.2l1.5.9-.8 1.6c-3.2 6.2-9.9 8.2-16.4 7.8-9.8 24.3-31 35.8-56.8 35.8-13.3 0-25.5-5-32.5-16.8l-.1-.2-1-2.1c-2.4-5.2-3.1-10.9-2.6-16.6l.2-1.7h9.6v-11.4h11.3v-11.2h22.5v-11.3h13.5v22.5z"
+                      ></path><path
+                        fill="#00AADA"
+                        d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-72.2c-.6 6.2.5 11.9 3 16.8l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5 1.1-8.3 1.3h-.6000000000000001c-1.3.1-2.7.1-4.2.1-1.6 0-3.1 0-4.9-.1 6 6.8 15.4 10.8 27.2 10.8 25 0 46.2-11.1 55.5-35.9 6.7.7 13.1-1 16-6.7-4.5-2.7-10.5-1.8-13.9-.1z"
+                      ></path><path
+                        fill="#28B8EB"
+                        d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-68c-.3 9.5 3.2 16.7 9.5 21 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4l-.1-.1c8.5 4.4 20.8 4.3 35-1.1 15.8-6.1 30.6-17.7 40.9-30.9-.2.1-.4.1-.5.2z"
+                      ></path><path
+                        fill="#028BB8"
+                        d="M18.7 71.8c.4 3.3 1.4 6.4 2.9 9.3l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4h-.4c-1.3.1-2.7.1-4.1.1-1.6 0-3.2 0-4.9-.1 6 6.8 15.5 10.8 27.3 10.8 21.4 0 40-8.1 50.8-26h-85.1v-.1z"
+                      ></path><path
+                        fill="#019BC6"
+                        d="M23.5 71.8c1.3 5.8 4.3 10.4 8.8 13.5 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.6 1.4 8.5 4.4 20.8 4.3 34.9-1.1 8.5-3.3 16.8-8.2 24.2-14.1h-70.6z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#00ACD3"
+                        d="M28.4 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM39.6 41.5h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#23C2EE"
+                        d="M39.6 52.7h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#00ACD3"
+                        d="M50.9 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#23C2EE"
+                        d="M50.9 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM62.2 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#00ACD3"
+                        d="M62.2 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#23C2EE"
+                        d="M62.2 30.2h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#00ACD3"
+                        d="M73.5 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#D4EEF1"
+                        d="M48.8 78.3c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7"
+                      ></path><path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        fill="#3A4D54"
+                        d="M48.8 79.1c.2 0 .5 0 .7.1-.2.1-.4.4-.4.7 0 .4.4.8.8.8.3 0 .6-.2.7-.4.1.2.1.5.1.7 0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9 0-1 .8-1.9 1.9-1.9M1.1 72.8h125.4c-2.7-.7-8.6-1.6-7.7-5.2-5 5.7-16.9 4-20 1.2-3.4 4.9-23 3-24.3-.8-4.2 5-17.3 5-21.5 0-1.4 3.8-21 5.7-24.3.8-3 2.8-15 4.5-20-1.2 1.1 3.5-4.9 4.5-7.6 5.2"
+                      ></path><path
+                        fill="#BFDBE0"
+                        d="M56 97.8c-6.7-3.2-10.3-7.5-12.4-12.2-2.5.7-5.5 1.2-8.9 1.4-1.3.1-2.7.1-4.1.1-1.7 0-3.4 0-5.2-.1 6 6 13.6 10.7 27.5 10.8h3.1z"
+                      ></path><path
+                        fill="#D4EEF1"
+                        d="M46.1 89.9c-.9-1.3-1.8-2.8-2.5-4.3-2.5.7-5.5 1.2-8.9 1.4 2.3 1.2 5.7 2.4 11.4 2.9z"
+                      ></path></g
+                    >
+                  </svg>
                 {/if}
+                <div class="flex flex-col justify-center items-center w-full">
                 <div
-                  class="text-xs font-bold text-center w-full text-warmGray-300  group-hover:text-white"
+                  class="text-xs font-bold text-center w-full text-warmGray-300 group-hover:text-white pb-6"
                 >
                   {application.Spec.Labels.configuration.publish
                     .domain}{application.Spec.Labels.configuration.publish
@@ -108,6 +196,14 @@
                     ? application.Spec.Labels.configuration.publish.path
                     : ""}
                 </div>
+                <div class="text-xs font-bold text-center w-full text-warmGray-300 group-hover:text-white">
+                  Last deployment<br>
+                  {new Intl.DateTimeFormat(
+                    'default',
+                    $dateOptions,
+                  ).format(new Date(application.UpdatedAt))}
+                  </div>
+              </div>
               </div>
             </div>
           </div>

src/pages/index.svelte

@@ -43,7 +43,7 @@
       <p
         class="mt-1 pb-8 font-extrabold text-white text-5xl sm:tracking-tight lg:text-6xl text-center"
       >
-        Coolify
+        <span class="border-gradient">Coolify</span>
       </p>
       <h2 class="text-2xl md:text-3xl font-extrabold text-white">
         An open-source, hassle-free, self-hostable<br />

src/store.js

@@ -125,7 +125,8 @@ export const application = writable({
     },
     container: {
       name: null,
-      tag: null
+      tag: null,
+      baseSHA: null
     }
   },
   publish: {

src/utils/templates.js

@@ -0,0 +1,51 @@
+const defaultBuildAndDeploy = {
+  installation: 'yarn install',
+  build: 'yarn build'
+}
+
+const templates = {
+  next: {
+    pack: 'nodejs',
+    ...defaultBuildAndDeploy,
+    port: 3000,
+    name: 'Next.js'
+  },
+  nuxt: {
+    pack: 'nodejs',
+    ...defaultBuildAndDeploy,
+    port: 8080,
+    name: 'Nuxt'
+  },
+  'react-scripts': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'build',
+    name: 'Create React'
+  },
+  'parcel-bundler': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'dist',
+    name: 'Parcel'
+  },
+  'vue-cli-service': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'dist',
+    name: 'Vue CLI'
+  },
+  gatsby: {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'public',
+    name: 'Gatsby'
+  },
+  'preact-cli': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'build',
+    name: 'Preact CLI'
+  }
+}
+
+export default templates

tailwind.config.js

@@ -32,6 +32,15 @@ module.exports = {
   important: true,
   theme: {
     extend: {
+      keyframes: {
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-3deg)' },
+          '50%': { transform: 'rotate(3deg)' }
+        }
+      },
+      animation: {
+        wiggle: 'wiggle 0.5s ease-in-out infinite'
+      },
       fontFamily: {
         sans: ['Montserrat', ...defaultTheme.fontFamily.sans]
       },