v1.0.5 (#25)

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

src/App.svelte

@@ -9,6 +9,10 @@
 </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/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-bold">{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

@@ -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,
     );
@@ -80,7 +81,6 @@
             $application.github.installation.id,
             page,
           );
-
           repositories = repositories.concat(repos.repositories);
         }
       }
@@ -97,8 +97,10 @@
       }
     } catch (error) {
       return false;
+    } finally {
+      loading.github = false;
     }
-    loading.github = false;
+ 
   }
   function modifyGithubAppConfig() {
     const left = screen.width / 2 - 1020 / 2;

src/components/Application/Configuration/Repositories.svelte

@@ -1,22 +1,3 @@
-<style lang="postcss">
-  :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>
-
 <script>
   import { createEventDispatcher } from "svelte";
   import { isActive } from "@roxi/routify";
@@ -53,6 +34,7 @@
           selectedValue="{selectedValue}"
           isClearable="{false}"
           items="{items}"
+          showIndicator="{$isActive('/application/new')}"
           noOptionsMessage="No Repositories found"
           placeholder="Select a Repository"
           isDisabled="{!$isActive('/application/new')}"

src/components/Application/Configuration/Tabs.svelte

@@ -2,7 +2,7 @@
   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";
@@ -57,30 +57,43 @@
           $application.build.pack = "custom";
           toast.push("Custom Dockerfile found. Build pack set to custom.");
         } else if (packageJson) {
-          // Check here for things like nextjs,react,vue,blablabla
           const { content } = await $fetch(packageJson.git_url);
           const packageJsonContent = JSON.parse(atob(content));
-
-          if (packageJsonContent.dependencies.hasOwnProperty("next")) {
-            // Next.js
-            $application.build.pack = "nodejs";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push("Next.js App detected. Build pack set to Node.js.");
-          } else if (packageJsonContent.dependencies.hasOwnProperty("react")) {
-            // CRA
-            $application.build.pack = "static";
-            $application.publish.directory = "build";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push(
-              "React App detected. Build pack set to static with build phase.",
+          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
@@ -106,7 +119,7 @@
 </script>
 
 {#if loading}
-  <Loading github githubLoadingText="Scanning repository 🤖" />
+  <Loading github githubLoadingText="Scanning repository..." />
 {:else}
   <div class="block text-center py-4">
     <nav

src/components/Loading.svelte

@@ -50,7 +50,7 @@
 {#if fullscreen}
   {#if github}
     <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
-      <div class="w-full flex justify-center items-center">
+      <div class="main flex justify-center items-center">
         <div class="w-64">
           <svg
             class=" w-28 animate-bounce mx-auto"
@@ -65,15 +65,15 @@
               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="w-full text-xl font-bold text-center">
+          <div class="text-xl font-bold text-center">
             {githubLoadingText}
           </div>
         </div>
       </div>
     </div>
   {:else}
-    <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
-      <span class="loader"></span>
+    <div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
+      <span class=" loader"></span>
     </div>
   {/if}
 {/if}

src/index.css

@@ -17,6 +17,12 @@ body {
   --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;

src/pages/_layout.svelte

@@ -2,10 +2,6 @@
   .min-w-4rem {
     min-width: 4rem;
   }
-  .main {
-    width: calc(100% - 4rem);
-    margin-left: 4rem;
-  }
 </style>
 
 <script>

src/pages/application/_layout.svelte

@@ -151,7 +151,6 @@ import Tooltip from "../../components/Tooltip/Tooltip.svelte";
   <div class="border border-warmGray-700 h-8"></div>
   <Tooltip position="bottom" label="Logs" >
   <button
-
     class="icon"
     class:text-warmGray-700="{$isActive('/application/new')}"
     disabled="{$isActive('/application/new')}"

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/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