dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

V2 (#111)

Browse Source 
Just v2
This commit is contained in:
Andras Bacsai
2022-02-10 15:47:44 +01:00
committed by GitHub
parent a64b095c13
commit 460ae85226
403 changed files with 22039 additions and 12465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@@ -4,10 +4,10 @@
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Coolify</title>
<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/fonts/poppins/poppins.css" />
<title>Coolify</title>
%svelte.head%
</head>
<body>

149
src/app.postcss
View File

@@ -1,149 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
height: 100%;
}
body {
background-color: rgb(22, 22, 22);
min-height: 100vh;
overflow-x: hidden;
@apply text-white;
}
:root {
--toastBackground: rgba(41, 37, 36, 0.8);
--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;
}
.border-gradient-full {
border: 4px 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;
}
.main {
width: calc(100% - 4rem);
margin-left: 4rem;
}
._toastMsg {
@apply text-sm font-bold !important;
}
._toastItem {
@apply w-full border-l-2 border-green-600 !important;
}
._toastBtn {
@apply text-xs !important;
}
._toastBtn:hover {
@apply bg-gray-500 !important;
}
.icon {
@apply text-white rounded p-2 transition duration-100;
}
.icon:hover {
@apply bg-warmGray-700;
}
input {
@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none border border-transparent !important;
}
input:hover,
input:focus-visible,
input:focus {
@apply bg-warmGray-700 !important;
}
textarea {
@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none resize-none !important;
}
textarea:hover {
@apply bg-warmGray-700 !important;
}
select {
@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none !important;
}
select:hover {
@apply bg-warmGray-700 !important;
}
label {
@apply text-left text-base font-bold text-warmGray-400 !important;
}
button {
@apply outline-none !important;
}
.button {
@apply rounded text-sm font-bold transition-all duration-100 !important;
}
.button:focus-visible,
.button:focus {
@apply bg-warmGray-700 !important;
}
.h-271 {
min-height: 271px !important;
}
.repository-select-search .listItem .item,
.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;
}
.repository-select-search .listContainer {
@apply bg-transparent !important;
}
.repository-select-search .clearSelect {
@apply text-white cursor-pointer !important;
}
.repository-select-search .selectedItem {
@apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
}
.selectContainer {
background: transparent !important;
@apply border-0 !important;
}

610
src/components/Application/ActiveTab/General.svelte
View File

@@ -1,610 +0,0 @@
<script>
import { VITE_GITHUB_APP_NAME } from '$lib/consts';
import { application, isPullRequestPermissionsGranted, originalDomain } from '$store';
import { onMount } from 'svelte';
import TooltipInfo from '$components/TooltipInfo.svelte';
import { request } from '$lib/request';
import { page, session } from '$app/stores';
import { browser } from '$app/env';
let domainInput;
let loading = {
previewDeployment: false
};
let howToActivate = false;
const buildpacks = {
static: {
port: {
active: false,
number: 80
},
build: true,
start: false
},
nodejs: {
port: {
active: true,
number: 3000
},
build: true,
start: true
},
nestjs: {
port: {
active: true,
number: 3000
},
build: true,
start: true
},
vuejs: {
port: {
active: false,
number: 80
},
build: true,
start: false
},
nuxtjs: {
port: {
active: true,
number: 3000
},
build: true,
start: true
},
react: {
port: {
active: false,
number: 80
},
build: true,
start: false
},
nextjs: {
port: {
active: true,
number: 3000
},
build: true,
start: true
},
gatsby: {
port: {
active: true,
number: 3000
},
build: true,
start: false
},
svelte: {
port: {
active: false,
number: 80
},
build: true,
start: false
},
php: {
port: {
active: false,
number: 80
},
build: false,
start: false
},
rust: {
port: {
active: true,
number: 3000
},
build: false,
start: false
},
docker: {
port: {
active: true,
number: 3000
},
build: false,
start: false
},
python: {
port: {
active: true,
number: 4000
},
build: false,
start: false,
custom: true
}
};
async function setPreviewDeployment() {
if ($application.general.isPreviewDeploymentEnabled) {
const result = window.confirm(
"DANGER ZONE! It will delete all PR deployments. It's NOT reversible! Are you sure?"
);
if (result) {
loading.previewDeployment = true;
$application.general.isPreviewDeploymentEnabled =
!$application.general.isPreviewDeploymentEnabled;
if ($page.path !== '/application/new') {
const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
body: {
name: $application.repository.name,
organization: $application.repository.organization,
branch: $application.repository.branch,
isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
}
});
}
loading.previewDeployment = false;
}
} else {
loading.previewDeployment = true;
$application.general.isPreviewDeploymentEnabled =
!$application.general.isPreviewDeploymentEnabled;
$application.general.pullRequest = 0;
if ($page.path !== '/application/new') {
const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
body: {
name: $application.repository.name,
organization: $application.repository.organization,
branch: $application.repository.branch,
isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
}
});
}
loading.previewDeployment = false;
}
}
function selectBuildPack(event) {
if (event.target.innerText === 'React/Preact') {
$application.build.pack = 'react';
} else {
$application.build.pack = event.target.innerText.replace(/\./g, '').toLowerCase();
}
}
async function openGithub() {
if (browser) {
const config = await request(`https://api.github.com/apps/${VITE_GITHUB_APP_NAME}`, $session);
let url = `https://github.com/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
if (config.owner.type === 'Organization') {
url = `https://github.com/organizations/${config.owner.login}/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
}
const left = screen.width / 2 - 1020 / 2;
const top = screen.height / 2 - 618 / 2;
const newWindow = open(
url,
'Permission Update',
'resizable=1, scrollbars=1, fullscreen=1, height=1000, width=1220,top=' +
top +
', left=' +
left +
', toolbar=0, menubar=0, status=0'
);
const timer = setInterval(async () => {
if (newWindow?.closed) {
clearInterval(timer);
location.reload();
}
}, 100);
}
}
onMount(() => {
if (!$application.publish.domain) {
domainInput.focus();
} else {
$originalDomain = $application.publish.domain;
}
});
</script>
<div>
<div class="grid grid-cols-1 text-sm max-w-4xl md:mx-auto mx-6 pb-16 auto-cols-max ">
<div class="text-2xl font-bold border-gradient w-40">Build Packs</div>
<div class="flex font-bold flex-wrap justify-center pt-10">
<div
class={$application.build.pack === 'static'
? 'buildpack bg-red-500'
: 'buildpack hover:border-red-500'}
on:click={selectBuildPack}
>
Static
</div>
<div
class={$application.build.pack === 'nodejs'
? 'buildpack bg-emerald-600'
: 'buildpack hover:border-emerald-600'}
on:click={selectBuildPack}
>
NodeJS
</div>
<div
class={$application.build.pack === 'vuejs'
? 'buildpack bg-green-500'
: 'buildpack hover:border-green-500'}
on:click={selectBuildPack}
>
VueJS
</div>
<div
class={$application.build.pack === 'nuxtjs'
? 'buildpack bg-green-500'
: 'buildpack hover:border-green-500'}
on:click={selectBuildPack}
>
NuxtJS
</div>
<div
class={$application.build.pack === 'react'
? 'buildpack bg-gradient-to-r from-blue-500 to-purple-500'
: 'buildpack hover:border-blue-500'}
on:click={selectBuildPack}
>
React/Preact
</div>
<div
class={$application.build.pack === 'nextjs'
? 'buildpack bg-blue-500'
: 'buildpack hover:border-blue-500'}
on:click={selectBuildPack}
>
NextJS
</div>
<div
class={$application.build.pack === 'gatsby'
? 'buildpack bg-blue-500'
: 'buildpack hover:border-blue-500'}
on:click={selectBuildPack}
>
Gatsby
</div>
<div
class={$application.build.pack === 'svelte'
? 'buildpack bg-orange-600'
: 'buildpack hover:border-orange-600'}
on:click={selectBuildPack}
>
Svelte
</div>
<div
class={$application.build.pack === 'php'
? 'buildpack bg-indigo-500'
: 'buildpack hover:border-indigo-500'}
on:click={selectBuildPack}
>
PHP
</div>
<div
class={$application.build.pack === 'rust'
? 'buildpack bg-pink-500'
: 'buildpack hover:border-pink-500'}
on:click={selectBuildPack}
>
Rust
</div>
<div
class={$application.build.pack === 'nestjs'
? 'buildpack bg-red-500'
: 'buildpack hover:border-red-500'}
on:click={selectBuildPack}
>
NestJS
</div>
<div
class={$application.build.pack === 'docker'
? 'buildpack bg-purple-500'
: 'buildpack hover:border-purple-500'}
on:click={selectBuildPack}
>
Docker
</div>
<div
class={$application.build.pack === 'python'
? 'buildpack bg-green-500'
: 'buildpack hover:border-green-500'}
on:click={selectBuildPack}
>
Python
</div>
</div>
</div>
<div class="text-2xl font-bold border-gradient w-52">General settings</div>
<div class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10">
<div>
<ul class="divide-y divide-warmGray-800">
<li class="pb-6 flex items-center justify-between">
<div class="flex flex-col">
<p class="text-base font-bold text-warmGray-100">Preview deployments</p>
<p class="text-sm font-medium text-warmGray-400">
PR's will be deployed so you could review them easily
</p>
</div>
{#if $isPullRequestPermissionsGranted}
<div
class="relative"
class:animate-wiggle={loading.previewDeployment}
class:opacity-25={loading.previewDeployment}
>
<button
type="button"
disabled={loading.previewDeployment}
on:click={setPreviewDeployment}
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"
class:bg-green-600={$application.general.isPreviewDeploymentEnabled}
class:bg-warmGray-700={!$application.general.isPreviewDeploymentEnabled}
class:cursor-not-allowed={loading.previewDeployment}
>
<span class="sr-only">Use setting</span>
<span
class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transition ease-in-out duration-200 transform"
class:translate-x-5={$application.general.isPreviewDeploymentEnabled}
class:translate-x-0={!$application.general.isPreviewDeploymentEnabled}
>
<span
class=" ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
class:opacity-0={$application.general.isPreviewDeploymentEnabled}
class:opacity-100={!$application.general.isPreviewDeploymentEnabled}
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"
/>
</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={$application.general.isPreviewDeploymentEnabled}
class:opacity-0={!$application.general.isPreviewDeploymentEnabled}
>
<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"
/>
</svg>
</span>
</span>
</button>
{#if loading.previewDeployment}
<div class="absolute left-0 bottom-0 -mb-4 -ml-2 text-xs font-bold">
{$application.general.isPreviewDeploymentEnabled ? 'Enabling...' : 'Disabling...'}
</div>
{/if}
</div>
{:else}
<div class="relative">
{#if !howToActivate}
<button
class="button py-2 px-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
on:click={() => (howToActivate = !howToActivate)}>How to active this?</button
>
{:else}
<button
class="button py-2 px-2 bg-green-600 hover:bg-green-500 text-white"
on:click={openGithub}>Open Github</button
>
{/if}
{#if howToActivate}
<div class="absolute right-0 w-64 z-10">
<div class="bg-warmGray-800 p-4 my-2 rounded text-white">
<div
class="absolute right-0 top-0 p-2 my-3 mx-1 text-xs font-bold cursor-pointer hover:bg-warmGray-700"
on:click={() => (howToActivate = false)}
>
X
</div>
<p class="text-sm font-medium text-warmGray-400">
You need to add <span class="text-white">two new permissions</span> to your GitHub
App:
</p>
<br />
<p class="text-sm font-medium text-warmGray-400">
1. In <span class="text-white">Repository permissions</span>, add
<span class="text-white">Read-only</span>
access to <span class="text-white">Pull requests</span>.
</p>
<br />
<p class="text-sm font-medium text-warmGray-400">
2. In <span class="text-white">Subscribe to events</span> section,
<span class="text-white"> check Pull request</span> field.
</p>
<br />
<p class="text-sm font-medium text-warmGray-400">
3. You <span class="text-white">receive an email</span> where you need to
<span class="text-white">accept the new permissions</span>.
</p>
</div>
</div>
{/if}
</div>
{/if}
</li>
</ul>
</div>
<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
bind:this={domainInput}
class="border-2"
disabled={$page.path !== '/application/new'}
class:cursor-not-allowed={$page.path !== '/application/new'}
class:bg-warmGray-900={$page.path !== '/application/new'}
class:hover:bg-warmGray-900={$page.path !== '/application/new'}
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)"
/>
</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 || '<yourdomain>'
}/api`}
/></label
>
<input
id="Path"
bind:value={$application.publish.path}
disabled={$page.path !== '/application/new'}
class:cursor-not-allowed={$page.path !== '/application/new'}
class:bg-warmGray-900={$page.path !== '/application/new'}
class:hover:bg-warmGray-900={$page.path !== '/application/new'}
placeholder="/"
/>
</div>
</div>
<label for="Port" class:text-warmGray-800={!buildpacks[$application.build.pack].port.active}
>Port</label
>
<input
disabled={!buildpacks[$application.build.pack].port.active}
id="Port"
class:bg-warmGray-900={!buildpacks[$application.build.pack].port.active}
class:text-warmGray-900={!buildpacks[$application.build.pack].port.active}
class:placeholder-warmGray-800={!buildpacks[$application.build.pack].port.active}
class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].port.active}
class:cursor-not-allowed={!buildpacks[$application.build.pack].port.active}
bind:value={$application.publish.port}
placeholder={buildpacks[$application.build.pack].port.number}
/>
<div class="grid grid-flow-col gap-2 items-center pt-6 pb-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="eg: sourcedir" />
</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="eg: dist, _site, public"
/>
</div>
</div>
</div>
<div class="text-2xl font-bold w-40 border-gradient">Commands</div>
<div class=" max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10 pb-32">
<div class="grid grid-flow-col gap-2 items-center">
<div class="grid grid-flow-row">
{#if $application.build.pack === 'python'}
<label for="ModulePackageName"
>Module/Package Name<TooltipInfo
label="The module/package name to start (eg: the entry filename [main], without the py extension. See gunicorn.org for more details)"
/>
</label>
<input
class="mb-6"
id="ModulePackageName"
bind:value={$application.build.command.python.module}
placeholder="main"
/>
<label for="ApplicationInstance"
>Application Instance<TooltipInfo
label="The instance name (the main function name. See gunicorn.org for more details)"
/>
</label>
<input
class="mb-6"
id="ApplicationInstance"
bind:value={$application.build.command.python.instance}
placeholder="app"
/>
{:else}
<label
for="installCommand"
class:text-warmGray-800={!buildpacks[$application.build.pack].build}
>Install Command <TooltipInfo
label="Command to run for installing dependencies. eg: yarn install"
/>
</label>
<input
class="mb-6"
class:bg-warmGray-900={!buildpacks[$application.build.pack].build}
class:text-warmGray-900={!buildpacks[$application.build.pack].build}
class:placeholder-warmGray-800={!buildpacks[$application.build.pack].build}
class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].build}
class:cursor-not-allowed={!buildpacks[$application.build.pack].build}
id="installCommand"
bind:value={$application.build.command.installation}
placeholder="eg: yarn install"
/>
<label
for="buildCommand"
class:text-warmGray-800={!buildpacks[$application.build.pack].build}
>Build Command <TooltipInfo
label="Command to run for building your application. If empty, no build phase initiated in the deploy process."
/></label
>
<input
class="mb-6"
class:bg-warmGray-900={!buildpacks[$application.build.pack].build}
class:text-warmGray-900={!buildpacks[$application.build.pack].build}
class:placeholder-warmGray-800={!buildpacks[$application.build.pack].build}
class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].build}
class:cursor-not-allowed={!buildpacks[$application.build.pack].build}
id="buildCommand"
bind:value={$application.build.command.build}
placeholder="eg: yarn build"
/>
<label
for="startCommand"
class:text-warmGray-800={!buildpacks[$application.build.pack].start}
>Start Command <TooltipInfo
label="Command to start the application. eg: yarn start"
/></label
>
<input
class="mb-6"
class:bg-warmGray-900={!buildpacks[$application.build.pack].start}
class:text-warmGray-900={!buildpacks[$application.build.pack].start}
class:placeholder-warmGray-800={!buildpacks[$application.build.pack].start}
class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].start}
class:cursor-not-allowed={!buildpacks[$application.build.pack].start}
id="startcommand"
bind:value={$application.build.command.start}
placeholder="eg: yarn start"
/>
{/if}
</div>
</div>
</div>
</div>
<style lang="postcss">
.buildpack {
@apply px-6 py-2 mx-2 my-2 bg-warmGray-800 w-48 ease-in-out hover:scale-105 text-center rounded border-2 border-transparent border-dashed cursor-pointer transition duration-100;
}
</style>

102
src/components/Application/ActiveTab/PullRequests.svelte
View File

@@ -1,102 +0,0 @@
<script>
import { browser } from '$app/env';
import { goto } from '$app/navigation';
import { onDestroy, onMount } from 'svelte';
import { session } from '$app/stores';
import { request } from '$lib/request';
import { toast } from '@zerodevx/svelte-toast';
import { application, prApplication } from '$store';
let loadPRDeployments = null;
onMount(async () => {
await getPRDeployments();
loadPRDeployments = setInterval(async () => {
await getPRDeployments();
}, 1000);
});
onDestroy(() => {
clearInterval(loadPRDeployments);
});
async function getPRDeployments() {
const { configuration } = await request(`/api/v1/application/config`, $session, {
body: {
nickname: $application.general.nickname
}
});
$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
}
async function removePR(prConfiguration) {
const result = window.confirm("DANGER ZONE! It's NOT reversible! Are you sure?");
if (result) {
await request(`/api/v1/application/remove`, $session, {
body: {
nickname: prConfiguration.general.nickname
}
});
browser && toast.push('PR deployment removed.');
const { configuration } = await request(`/api/v1/application/config`, $session, {
body: {
nickname: prConfiguration.general.nickname
}
});
$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
}
}
</script>
<div class="text-2xl font-bold border-gradient w-48">Pull Requests</div>
<div class="text-center pt-4">
{#if $prApplication.length > 0}
<div class="py-4 ">
{#each $prApplication as pr}
<div class="flex space-x-4 justify-center items-center">
<div class="text-left font-bold tracking-tight ">
{pr.publish.domain}
</div>
<a
target="_blank"
class="icon mx-2 "
href={'https://' + pr.publish.domain + pr.publish.path}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg></a
>
<!-- <div class="flex-1" /> -->
<button
class="icon hover:text-red-500 hover:bg-warmGray-800"
on:click={() => removePR(pr)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
{/each}
</div>
{:else}
<div class="font-bold text-center">No PR deployments found</div>
{/if}
</div>

128
src/components/Application/ActiveTab/Secrets.svelte
View File

@@ -1,128 +0,0 @@
<script>
import { application } from '$store';
import BuildEnv from '../BuildEnv.svelte';
let secret = {
name: null,
value: null,
isBuild: false
};
let foundSecret = null;
async function saveSecret() {
if (secret.name && secret.value) {
const found = $application.publish.secrets.find((s) => s.name === secret.name);
if (!found) {
$application.publish.secrets = [
...$application.publish.secrets,
{
name: secret.name,
value: secret.value,
isBuild: secret.isBuild
}
];
secret = {
name: null,
value: null,
isBuild: false
};
} else {
foundSecret = found;
}
}
}
async function removeSecret(name) {
foundSecret = null;
$application.publish.secrets = [...$application.publish.secrets.filter((s) => s.name !== name)];
}
</script>
<div class="text-2xl font-bold border-gradient w-24">Secrets</div>
<div class="max-w-3xl mx-auto text-center pt-4">
<div class="flex space-x-4">
<div class="grid grid-flow-row">
<label for="secretName">Secret Name</label>
<input
id="secretName"
bind:value={secret.name}
placeholder="Name"
class="w-64 border-2 border-transparent"
/>
</div>
<div class="grid grid-flow-row">
<label for="secretValue">Secret Value</label>
<input
id="secretValue"
bind:value={secret.value}
placeholder="Value"
class="w-64 border-2 border-transparent"
/>
</div>
<div class="grid grid-flow-row">
<label for="buildVariable">Is build variable?</label>
<div class="mt-2 w-full">
<BuildEnv {secret} />
</div>
</div>
<div class="mt-6">
<button class="icon hover:text-green-500" on:click={saveSecret}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</button>
</div>
</div>
{#if $application.publish.secrets.length > 0}
<div class="pt-1">
{#each $application.publish.secrets as secret}
<div class="flex space-x-4 space-y-2">
<input
id={secret.name}
value={secret.name}
disabled
class="border-2 bg-transparent border-transparent w-64 hover:bg-transparent"
class:border-red-600={foundSecret && foundSecret.name === secret.name}
/>
<input
id={secret.createdAt}
value="SAVED"
disabled
class="border-2 bg-transparent border-transparent w-64 hover:bg-transparent"
/>
<div class="flex justify-center items-center px-12">
<BuildEnv {secret} readOnly />
</div>
<button class="icon hover:text-red-500" on:click={() => removeSecret(secret.name)}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
{/each}
</div>
{/if}
</div>

46
src/components/Application/Branches.svelte
View File

@@ -1,46 +0,0 @@
<script>
import { page } from '$app/stores';
export let loading, branches;
import { application } from '$store';
import Select from 'svelte-select';
const selectedValue = $page.path !== '/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>
<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>
<div class="repository-select-search col-span-2">
<Select
containerClasses="w-full border-none bg-transparent"
on:select={handleSelect}
{selectedValue}
isClearable={false}
items={branches.map((b) => ({ label: b.name, value: b.name }))}
showIndicator={$page.path === '/application/new'}
noOptionsMessage="No branches found"
placeholder="Select a branch"
isDisabled={$page.path !== '/application/new'}
/>
</div>
</div>
{/if}

55
src/components/Application/BuildEnv.svelte
View File

@@ -1,55 +0,0 @@
<script>
export let secret;
export let readOnly = false;
function isBuildSet() {
if (!readOnly) secret.isBuild = !secret.isBuild;
}
</script>
<button
id="buildVariable"
type="button"
aria-pressed="false"
on:click={isBuildSet}
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-100"
class:bg-green-600={secret.isBuild}
class:bg-warmGray-700={!secret.isBuild}
class:opacity-50={readOnly}
class:cursor-not-allowed={readOnly}
>
<span class="sr-only">Use setting</span>
<span
class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transition ease-in-out duration-200 transform"
class:translate-x-5={secret.isBuild}
class:translate-x-0={!secret.isBuild}
>
<span
class=" ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
class:opacity-0={secret.isBuild}
class:opacity-100={!secret.isBuild}
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"
/>
</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={secret.isBuild}
class:opacity-0={!secret.isBuild}
>
<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"
/>
</svg>
</span>
</span>
</button>

198
src/components/Application/Configuration.svelte
View File

@@ -1,198 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { request } from '$lib/request';
import { session } from '$app/stores';
import {
githubRepositories,
application,
githubInstallations,
prApplication,
initConf,
isPullRequestPermissionsGranted
} from '$store';
import { fade } from 'svelte/transition';
import Loading from '$components/Loading.svelte';
import { browser } from '$app/env';
import Branches from '$components/Application/Branches.svelte';
import Tabs from '$components/Application/Tabs.svelte';
import Repositories from '$components/Application/Repositories.svelte';
import Login from '$components/Application/Login.svelte';
import { dashify } from '$lib/common';
let loading = {
github: false,
branches: false
};
let branches = [];
let relogin = false;
let permissions = {};
async function getGithubRepos(id, page) {
return await request(
`https://api.github.com/user/installations/${id}/repositories?per_page=100&page=${page}`,
$session
);
}
async function loadGithubRepositories(force) {
if ($githubRepositories.length > 0 && !force) {
$application.github.installation.id = $githubInstallations.id;
$application.github.app.id = $githubInstallations.app_id;
const foundRepositoryOnGithub = $githubRepositories.find(
(r) =>
r.full_name === `${$application.repository.organization}/${$application.repository.name}`
);
if (foundRepositoryOnGithub) {
$application.repository.id = foundRepositoryOnGithub.id;
$application.repository.organization = foundRepositoryOnGithub.owner.login;
$application.repository.name = foundRepositoryOnGithub.name;
}
return;
} else {
loading.github = true;
let installations = [];
try {
const data = await request('https://api.github.com/user/installations', $session);
installations = data.installations;
} catch (error) {
relogin = true;
console.log(error);
return false;
}
if (installations.length === 0) {
loading.github = false;
return false;
}
$application.github.installation.id = installations[0].id;
$application.github.app.id = installations[0].app_id;
$githubInstallations = installations[0];
try {
let page = 1;
let userRepos = 0;
const data = await getGithubRepos($application.github.installation.id, page);
$githubRepositories = $githubRepositories.concat(data.repositories);
userRepos = data.total_count;
if (userRepos > $githubRepositories.length) {
while (userRepos > $githubRepositories.length) {
page = page + 1;
const repos = await getGithubRepos($application.github.installation.id, page);
$githubRepositories = $githubRepositories.concat(repos.repositories);
}
}
const foundRepositoryOnGithub = $githubRepositories.find(
(r) =>
r.full_name ===
`${$application.repository.organization}/${$application.repository.name}`
);
if (foundRepositoryOnGithub) {
$application.repository.id = foundRepositoryOnGithub.id;
await loadBranches();
}
} catch (error) {
return false;
} finally {
loading.github = false;
}
}
}
async function loadBranches() {
loading.branches = true;
const selectedRepository = $githubRepositories.find((r) => r.id === $application.repository.id);
if (selectedRepository) {
$application.repository.organization = selectedRepository.owner.login;
$application.repository.name = selectedRepository.name;
}
branches = await request(
`https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/branches`,
$session
);
loading.branches = false;
await loadPermissions();
}
async function loadPermissions() {
const config = await request(
`https://api.github.com/apps/${dashify(import.meta.env.VITE_GITHUB_APP_NAME)}`,
$session
);
if (config.permissions['pull_requests'] && config.events.includes('pull_request')) {
$isPullRequestPermissionsGranted = true;
}
}
async function modifyGithubAppConfig() {
if (browser) {
const left = screen.width / 2 - 1020 / 2;
const top = screen.height / 2 - 618 / 2;
const newWindow = open(
`https://github.com/apps/${dashify(
import.meta.env.VITE_GITHUB_APP_NAME
)}/installations/new`,
'Install App',
'resizable=1, scrollbars=1, fullscreen=0, height=1000, width=1020,top=' +
top +
', left=' +
left +
', toolbar=0, menubar=0, status=0'
);
const timer = setInterval(async () => {
if (newWindow?.closed) {
clearInterval(timer);
loading.github = true;
if ($application.repository.name) {
try {
const { configuration } = await request(`/api/v1/application/config`, $session, {
body: {
name: $application.repository.name,
organization: $application.repository.organization,
branch: $application.repository.branch
}
});
$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
$application = configuration.find((c) => c.general.pullRequest === 0);
$initConf = JSON.parse(JSON.stringify($application));
} catch (error) {
browser && goto('/dashboard/applications', { replaceState: true });
}
}
branches = [];
$githubRepositories = [];
await loadGithubRepositories(true);
}
}, 100);
}
}
</script>
<div in:fade={{ duration: 100 }}>
{#if relogin}
<Login />
{:else}
{#await loadGithubRepositories(false)}
<Loading github githubLoadingText="Loading repositories..." />
{:then}
{#if loading.github}
<Loading github githubLoadingText="Loading repositories..." />
{:else}
<div class="space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
<Repositories
on:loadBranches={loadBranches}
on:modifyGithubAppConfig={modifyGithubAppConfig}
/>
{#if $application.repository.organization}
<Branches loading={loading.branches} {branches} />
{/if}
{#if $application.repository.branch}
<Tabs />
{/if}
</div>
{/if}
{/await}
{/if}
</div>

42
src/components/Application/Login.svelte
View File

@@ -1,42 +0,0 @@
<script>
function login() {
const left = screen.width / 2 - 1020 / 2;
const top = screen.height / 2 - 618 / 2;
const newWindow = open(
`https://github.com/login/oauth/authorize?client_id=${
import.meta.env.VITE_GITHUB_APP_CLIENTID
}`,
'Authenticate',
'resizable=1, scrollbars=1, fullscreen=0, height=618, width=1020,top=' +
top +
', left=' +
left +
', toolbar=0, menubar=0, status=0'
);
const timer = setInterval(() => {
if (newWindow?.closed) {
clearInterval(timer);
location.reload()
}
}, 100);
}
</script>
<div class="text-center text-white">
<div class="text-2xl font-bold text-center pb-4">Choose your Git provider</div>
<button on:click={login} class="hover:scale-110 duration-100 transition">
<svg
class="w-16"
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"
/></svg
>
</button>
</div>

173
src/components/Application/Navbar.svelte
View File

@@ -1,173 +0,0 @@
<script>
import { application, initialApplication, initConf, originalDomain } from '$store';
import { onDestroy } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import Tooltip from '$components/Tooltip.svelte';
import { request } from '$lib/request';
import { page, session } from '$app/stores';
import { goto } from '$app/navigation';
import { browser } from '$app/env';
async function removeApplication() {
const result = window.confirm(
"DANGER ZONE! It will delete all deployments, including PR's. It's NOT reversible! Are you sure?"
);
if (result) {
await request(`/api/v1/application/remove`, $session, {
body: {
nickname: $application.general.nickname
}
});
browser && toast.push('Application removed.');
$application = JSON.parse(JSON.stringify(initialApplication));
browser && goto(`/dashboard/applications`, { replaceState: true });
}
}
onDestroy(() => {
$application = JSON.parse(JSON.stringify(initialApplication));
});
async function deploy() {
try {
browser && toast.push('Checking configuration.');
await request(`/api/v1/application/check`, $session, {
body: $application
});
const { nickname, name, deployId } = await request(`/api/v1/application/deploy`, $session, {
body: $application
});
$application.general.nickname = nickname;
$application.build.container.name = name;
$application.general.deployId = deployId;
$initConf = JSON.parse(JSON.stringify($application));
if (browser) {
toast.push('Application deployment queued.');
goto(`/application/${$application.general.nickname}/logs/${$application.general.deployId}`, {
replaceState: true
});
}
} catch (error) {
// browser && toast.push(error.error || error || 'Ooops something went wrong.');
}
}
</script>
<nav class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4 z-50">
<Tooltip position="bottom" label="Deploy">
<button
disabled={$application.publish.domain === '' || $application.publish.domain === null}
class:cursor-not-allowed={$application.publish.domain === '' ||
$application.publish.domain === null}
class:hover:bg-green-500={$application.publish.domain}
class:bg-green-600={$application.publish.domain}
class:hover:bg-transparent={!$application.publish.domain && $page.path === '/application/new'}
class:text-warmGray-700={$application.publish.domain === '' ||
$application.publish.domain === null}
class="icon"
on:click={deploy}
>
<svg
class="w-6"
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"
><polyline points="16 16 12 12 8 16" /><line x1="12" y1="12" x2="12" y2="21" /><path
d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"
/><polyline points="16 16 12 12 8 16" /></svg
>
</button>
</Tooltip>
<Tooltip position="bottom" label="Delete">
<button
disabled={$application.publish.domain === '' ||
$application.publish.domain === null ||
$page.path === '/application/new'}
class:cursor-not-allowed={$application.publish.domain === '' ||
$application.publish.domain === null ||
$page.path === '/application/new'}
class:hover:text-red-500={$application.publish.domain && $page.path !== '/application/new'}
class:hover:bg-warmGray-700={$application.publish.domain && $page.path !== '/application/new'}
class:hover:bg-transparent={$page.path === '/application/new'}
class:text-warmGray-700={$application.publish.domain === '' ||
$application.publish.domain === null ||
$page.path === '/application/new'}
class="icon"
on:click={removeApplication}
>
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</Tooltip>
<div class="border border-warmGray-700 h-8" />
<Tooltip position="bottom" label="Logs">
<button
class="icon"
class:text-warmGray-700={$page.path === '/application/new'}
disabled={$page.path === '/application/new'}
class:hover:text-blue-400={$page.path !== '/application/new'}
class:hover:bg-transparent={$page.path === '/application/new'}
class:cursor-not-allowed={$page.path === '/application/new'}
class:text-blue-400={/logs\/*/.test($page.path)}
class:bg-warmGray-700={/logs\/*/.test($page.path)}
on:click={() => goto(`/application/${$application.general.nickname}/logs`)}
>
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
/>
</svg>
</button>
</Tooltip>
<Tooltip position="bottom-left" label="Configuration">
<button
class="icon hover:text-yellow-400"
disabled={$page.path === '/application/new'}
class:text-yellow-400={$page.path.endsWith('configuration') ||
$page.path === '/application/new'}
class:bg-warmGray-700={$page.path.endsWith('configuration') ||
$page.path === '/application/new'}
on:click={() => goto(`/application/${$application.general.nickname}/configuration`)}
>
<svg
class="w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
/>
</svg>
</button>
</Tooltip>
</nav>

54
src/components/Application/Repositories.svelte
View File

@@ -1,54 +0,0 @@
<script>
import { createEventDispatcher } from 'svelte';
import { application, githubRepositories } from '$store';
import Select from 'svelte-select';
import { page } from '$app/stores';
function handleSelect(event) {
$application.build.pack = 'static';
$application.repository.id = parseInt(event.detail.value, 10);
$application.repository.branch = null
dispatch('loadBranches');
}
const path = $page.path === '/application/new';
let items = $githubRepositories.map((repo) => ({
label: `${repo.owner.login}/${repo.name}`,
value: repo.id.toString()
}));
const selectedValue =
!path && `${$application.repository.organization}/${$application.repository.name}`;
const dispatch = createEventDispatcher();
const modifyGithubAppConfig = () => dispatch('modifyGithubAppConfig');
</script>
<div class="grid grid-cols-1 pt-4">
{#if $githubRepositories.length !== 0}
<label for="repository">Organization / Repository</label>
<div class="grid grid-cols-3 ">
<div class="repository-select-search col-span-2">
<Select
isFocused="{true}"
containerClasses="w-full border-none bg-transparent"
on:select={handleSelect}
{selectedValue}
isClearable={false}
{items}
showIndicator={path}
noOptionsMessage="No Repositories found"
placeholder="Select a Repository"
isDisabled={!path}
/>
</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
>
</div>
{:else}
<button
class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white py-2"
on:click={modifyGithubAppConfig}>Add repositories on Github</button
>
{/if}
</div>

131
src/components/Application/Tabs.svelte
View File

@@ -1,131 +0,0 @@
<script>
import { toast } from '@zerodevx/svelte-toast';
import templates from '$lib/api/applications/packs/templates';
import { application, dashboard, initConf, prApplication } from '$store';
import General from '$components/Application/ActiveTab/General.svelte';
import Secrets from '$components/Application/ActiveTab/Secrets.svelte';
import Loading from '$components/Loading.svelte';
import { goto } from '$app/navigation';
import { page, session } from '$app/stores';
import { request } from '$lib/request';
import { browser } from '$app/env';
import PullRequests from './ActiveTab/PullRequests.svelte';
let activeTab = {
general: true,
secrets: false,
pullRequests: false
};
function activateTab(tab) {
if (activeTab.hasOwnProperty(tab)) {
activeTab = {
general: false,
pullRequests: false,
secrets: false
};
activeTab[tab] = true;
}
}
async function load() {
if ($page.path === '/application/new') {
try {
const dir = await request(
`https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/contents/?ref=${$application.repository.branch}`,
$session
);
const packageJson = dir.find((f) => f.type === 'file' && f.name === 'package.json');
const Dockerfile = dir.find((f) => f.type === 'file' && f.name === 'Dockerfile');
const CargoToml = dir.find((f) => f.type === 'file' && f.name === 'Cargo.toml');
const requirementsTXT = dir.find((f) => f.type === 'file' && f.name === 'requirements.txt');
if (packageJson) {
const { content } = await request(packageJson.git_url, $session);
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.start) {
$application.build.command.start = config.start;
}
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;
}
browser && toast.push(`${config.name} detected. Default values set.`);
}
});
} else if (CargoToml) {
$application.build.pack = 'rust';
browser && toast.push(`Rust language detected. Default values set.`);
} else if (requirementsTXT) {
$application.build.pack = 'python';
browser && toast.push('Python language detected. Default values set.');
} else if (Dockerfile) {
$application.build.pack = 'docker';
browser && toast.push('Custom Dockerfile found. Build pack set to docker.');
}
} catch (error) {
// Nothing detected
}
}
}
</script>
{#await load()}
<Loading github githubLoadingText="Scanning repository..." />
{:then}
<div class="block text-center py-8">
<nav class="flex space-x-4 justify-center font-bold text-md text-white" aria-label="Tabs">
<div
on:click={() => activateTab('general')}
class:text-green-500={activeTab.general}
class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
>
General
</div>
<div
on:click={() => activateTab('secrets')}
class:text-green-500={activeTab.secrets}
class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
>
Secrets
</div>
{#if $application.general.isPreviewDeploymentEnabled}
<div
on:click={() => activateTab('pullRequests')}
class:text-green-500={activeTab.pullRequests}
class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
>
Pull Requests
</div>
{/if}
</nav>
</div>
<div class="max-w-4xl mx-auto">
<div class="h-full">
{#if activeTab.general}
<General />
{:else if activeTab.secrets}
<Secrets />
{:else if activeTab.pullRequests && $page.path !== '/application/new'}
<PullRequests />
{/if}
</div>
</div>
{/await}

136
src/components/Database/Configuration.svelte
View File

@@ -1,136 +0,0 @@
<script>
import { fade } from 'svelte/transition';
import { toast } from '@zerodevx/svelte-toast';
import MongoDb from './SVGs/MongoDb.svelte';
import Postgresql from './SVGs/Postgresql.svelte';
import Mysql from './SVGs/Mysql.svelte';
import CouchDb from './SVGs/CouchDb.svelte';
import Redis from './SVGs/Redis.svelte';
import { page, session } from '$app/stores';
import { goto } from '$app/navigation';
import { request } from '$lib/request';
import { browser } from '$app/env';
import Loading from '$components/Loading.svelte';
let type;
let defaultDatabaseName;
let loading = false;
async function deploy() {
try {
loading = true;
await request(`/api/v1/databases/deploy`, $session, {
body: {
type,
defaultDatabaseName
}
});
if (browser) {
toast.push('Database deployment queued.');
goto(`/dashboard/databases`, { replaceState: true });
}
} catch (error) {
console.log(error);
} finally {
loading = false;
}
}
</script>
{#if loading}
<Loading />
{:else}
<div class="text-center space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
{#if $page.path === '/database/new'}
<div class="flex justify-center space-x-4 font-bold pb-6">
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-green-600 p-2 rounded bg-warmGray-800 w-32"
class:border-green-600={type === 'mongodb'}
on:click={() => (type = 'mongodb')}
>
<div class="flex items-center justify-center my-2">
<MongoDb customClass="w-6" />
</div>
<div class="text-white">MongoDB</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-red-600 p-2 rounded bg-warmGray-800 w-32"
class:border-red-600={type === 'couchdb'}
on:click={() => (type = 'couchdb')}
>
<div class="flex items-center justify-center my-2">
<CouchDb customClass="w-12 text-red-600 fill-current" />
</div>
<div class="text-white">Couchdb</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-600 p-2 rounded bg-warmGray-800 w-32"
class:border-blue-600={type === 'postgresql'}
on:click={() => (type = 'postgresql')}
>
<div class="flex items-center justify-center my-2">
<Postgresql customClass="w-12" />
</div>
<div class="text-white">PostgreSQL</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-orange-600 p-2 rounded bg-warmGray-800 w-32"
class:border-orange-600={type === 'mysql'}
on:click={() => (type = 'mysql')}
>
<div class="flex items-center justify-center">
<Mysql customClass="w-10" />
</div>
<div class="text-white">MySQL</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-red-600 p-2 rounded bg-warmGray-800 w-32"
class:border-red-600={type === 'redis'}
on:click={() => (type = 'redis')}
>
<div class="flex items-center justify-center">
<Redis customClass="w-12" />
</div>
<div class="text-white">Redis</div>
</div>
<!-- <button
class="button bg-gray-500 p-2 text-white hover:bg-yellow-500 cursor-pointer w-32"
on:click="{() => (type = 'clickhouse')}"
class:bg-yellow-500="{type === 'clickhouse'}"
>
Clickhouse
</button> -->
</div>
{#if type}
<div class="flex justify-center space-x-4 items-center">
{#if type !== 'redis'}
<label for="defaultDB">Default database</label>
<input
id="defaultDB"
class="w-64"
placeholder="random"
bind:value={defaultDatabaseName}
/>
{/if}
<button
class:bg-green-600={type === 'mongodb'}
class:hover:bg-green-500={type === 'mongodb'}
class:bg-blue-600={type === 'postgresql'}
class:hover:bg-blue-500={type === 'postgresql'}
class:bg-orange-600={type === 'mysql'}
class:hover:bg-orange-500={type === 'mysql'}
class:bg-red-600={type === 'couchdb' || type === 'redis'}
class:hover:bg-red-500={type === 'couchdb' || type === 'redis'}
class:bg-yellow-500={type === 'clickhouse'}
class:hover:bg-yellow-400={type === 'clickhouse'}
class="button p-2 w-32 text-white"
on:click={deploy}>Deploy</button
>
</div>
{/if}
{/if}
</div>
{/if}

9
src/components/Database/SVGs/Clickhouse.svelte
View File

@@ -1,9 +0,0 @@
<script>
export let customClass;
</script>
<svg class="{customClass}" viewBox="0 0 9 8" xmlns="http://www.w3.org/2000/svg"
><path d="m0 7h1v1h-1z" fill="#f00"></path><path
d="m0 0h1v7h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 3.25h1v1.5h-1z"
fill="#fc0"></path></svg
>

16
src/components/Database/SVGs/CouchDb.svelte
View File

@@ -1,16 +0,0 @@
<script>
export let customClass;
</script>
<svg
class={customClass}
id="CouchDB"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128"
><g id="original"
><path
class=""
d="M101.4,77.2c0,5-2.7,7.5-7.6,7.7H33.9c-4.9,0-7.6-2.5-7.6-7.7,0-5,2.7-7.5,7.6-7.7H94.1C99,69.7,101.4,72.2,101.4,77.2ZM94.1,88.7H33.9c-4.9,0-7.6,2.4-7.6,7.7,0,5,2.7,7.4,7.6,7.7H94.1c4.9,0,7.6-2.5,7.6-7.7C101.4,91.1,99,88.7,94.1,88.7Zm18.6-42.1h0c-4.9,0-7.6,2.5-7.6,7.4V96.1c0,5,2.7,7.5,7.6,7.7h0c7.4-.2,11.3-7.7,11.3-22.9V62C124,51.8,120.1,46.8,112.7,46.6Zm-97.4,0h0C7.9,46.8,4,51.8,4,62V80.9c0,15.2,3.9,22.7,11.3,22.9h0c4.9,0,7.6-2.4,7.6-7.7V54.3C22.7,49.3,20.2,46.8,15.3,46.6Zm97.4-3.8c0-12.7-6.6-18.7-18.6-18.9H33.9c-12.2.2-18.6,6.5-18.6,18.9h0c7.4,0,11.3,4,11.3,11.5s3.9,11.4,11.3,11.4H90.4c7.3,0,11.3-3.9,11.3-11.4-.3-7.7,3.9-11.2,11-11.5Z"
></path></g
></svg
>

32
src/components/Database/SVGs/MongoDb.svelte
View File

@@ -1,32 +0,0 @@
<script>
export let customClass;
</script>
<svg
class={customClass}
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
data-name="Layer 1"
viewBox="0 0 216.56 448.5"
><defs
><style>
.cls-1 {
fill: #10aa50;
}
.cls-2 {
fill: #b8c4c2;
}
.cls-3 {
fill: #12924f;
}
</style></defs
><title>MongoDB_Leaf_FullColor_RGB</title><path
class="cls-1"
d="M202.8,179.68c-23-101.47-71-128.49-83.18-147.59C113,21.7,106.25,5.91,106.25,5.91c-.66,9-1.83,14.7-9.51,21.54C81.36,41.16,16,94.42,10.51,209.72c-5.12,107.5,79,173.8,90.18,180.65,8.54,4.2,19,.08,24-3.77,40.54-27.84,96-102.07,78.06-206.92"
></path><path
class="cls-2"
d="M109.73,333.11c-2.11,26.62-3.63,42.11-9,57.29,0,0,3.54,25.33,6,52.17l8.77,0a488.62,488.62,0,0,1,9.57-56.2C113.71,380.8,110.16,356.46,109.73,333.11Z"
></path><path
class="cls-3"
d="M125.06,386.39h0c-11.48-5.3-14.8-30.13-15.31-53.28A1090.8,1090.8,0,0,0,112.2,218.4c-.6-20.07.3-185.92-4.94-210.2,2.12,4.75,7.24,15.91,12.36,23.88,12.23,19.11,60.19,46.13,83.17,147.61C220.7,284.27,165.57,358.37,125.06,386.39Z"
></path>
</svg>

60
src/components/Database/SVGs/Postgresql.svelte
View File

@@ -1,60 +0,0 @@
<script>
export let customClass;
</script>
<svg
class={customClass}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 432.071 445.383"
xml:space="preserve"
>
<g
id="orginal"
style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;"
>
</g>
<g
id="Layer_x0020_3"
style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
>
<path
style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;"
d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322 C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31 c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224 l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"
></path>
<path
style="fill:#336791;stroke:none;"
d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902 c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416 c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555 c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"
></path>
<path
d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"
></path>
<path
d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"
></path>
<path
d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"
></path>
<path
style="stroke-linejoin:bevel;"
d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338 c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"
></path>
<path
d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"
></path>
<path
d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"
></path>
<path
style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;"
d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"
></path>
<path
style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;"
d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"
></path>
<path
d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"
></path>
<path style="stroke-width:3;" d="M0,60.232"></path>
</g>
</svg>

83
src/components/Loading.svelte
View File

@@ -1,83 +0,0 @@
<script>
export let github = false;
export let githubLoadingText = 'Loading GitHub...';
export let fullscreen = true;
</script>
{#if fullscreen}
{#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"
/></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" />
</div>
{/if}
{:else}
<div class="main h-64 py-24 left-0 top-0 flex flex-wrap content-center mx-auto">
<span class="loader" />
</div>
{/if}
<style lang="postcss">
.loader {
width: 8px;
height: 40px;
border-radius: 4px;
display: block;
margin: 20px auto;
position: relative;
background: currentColor;
color: #fff;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
width: 8px;
height: 40px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
box-sizing: border-box;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% {
height: 48px;
}
100% {
height: 4px;
}
}
</style>

56
src/components/PasswordField.svelte
View File

@@ -1,56 +0,0 @@
<script>
export let value;
let showPassword = false;
export let isEditable = false;
</script>
<div class="relative w-full">
{#if showPassword}
<input type="text" class="w-full" bind:value disabled={!isEditable} />
{:else}
<input type="password" class="w-full" bind:value disabled={!isEditable} />
{/if}
<div
class="absolute top-0 my-2 mx-2 right-0 cursor-pointer text-warmGray-600 hover:text-white"
on:click={() => (showPassword = !showPassword)}
>
{#if showPassword}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
{/if}
</div>
</div>

35
src/components/Service/CodeServer.svelte
View File

@@ -1,35 +0,0 @@
<script>
import { fade } from 'svelte/transition';
import { toast } from '@zerodevx/svelte-toast';
import Loading from '../Loading.svelte';
import Tooltip from '$components/Tooltip.svelte';
import { request } from '$lib/request';
import { page, session } from '$app/stores';
import PasswordField from '$components/PasswordField.svelte';
import { browser } from '$app/env';
export let service;
async function getPassword() {
try {
const { password } = await request(`/api/v1/services/deploy/${$page.params.name}/password`, $session);
service.config.password = password
} catch (error) {
console.log(error);
browser && toast.push(`Ooops, there was an error activating users for VSCode Server?!`);
}
}
</script>
{#await getPassword()}
<Loading />
{:then}
<div class="text-left max-w-5xl mx-auto px-6" in:fade={{ duration: 100 }}>
<div class="pb-2 pt-5 space-y-4">
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Password</div>
<PasswordField value={service.config.password} />
</div>
</div>
</div>
{/await}

26
src/components/Service/MinIO.svelte
View File

@@ -1,26 +0,0 @@
<script>
import { fade } from 'svelte/transition';
import { toast } from '@zerodevx/svelte-toast';
import Loading from '../Loading.svelte';
import Tooltip from '$components/Tooltip.svelte';
import { request } from '$lib/request';
import { page, session } from '$app/stores';
import PasswordField from '$components/PasswordField.svelte';
import { browser } from '$app/env';
export let service;
</script>
<div class="text-left max-w-5xl mx-auto px-6" in:fade={{ duration: 100 }}>
<div class="pb-2 pt-5 space-y-4">
<div class="flex items-center pt-4">
<div class="font-bold w-64 text-warmGray-400">Root User</div>
<input class="w-full" value={service.config.generateEnvsMinIO.MINIO_ROOT_USER} disabled />
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Root Password</div>
<PasswordField value={service.config.generateEnvsMinIO.MINIO_ROOT_PASSWORD} />
</div>
</div>
</div>

88
src/components/Service/Plausible.svelte
View File

@@ -1,88 +0,0 @@
<script>
import { fade } from 'svelte/transition';
import { toast } from '@zerodevx/svelte-toast';
import Loading from '../Loading.svelte';
import Tooltip from '$components/Tooltip.svelte';
import { request } from '$lib/request';
import { page, session } from '$app/stores';
import PasswordField from '$components/PasswordField.svelte';
import { browser } from '$app/env';
export let service;
let loading = false;
async function activate() {
try {
loading = true;
await request(`/api/v1/services/deploy/${$page.params.name}/activate`, $session, {
method: 'PATCH',
body: {}
});
browser && toast.push(`All users are activated for Plausible.`);
} catch (error) {
console.log(error);
browser && toast.push(`Ooops, there was an error activating users for Plausible?!`);
} finally {
loading = false;
}
}
</script>
{#if loading}
<Loading />
{:else}
<div class="text-left max-w-5xl mx-auto px-6" in:fade={{ duration: 100 }}>
<div class="pb-2 pt-5 space-y-4">
<div class="flex space-x-5 items-center">
<div class="text-2xl font-bold border-gradient">General</div>
<div class="flex-1" />
<Tooltip
position="bottom"
size="large"
label="Activate all users in Plausible database, so you can login without the email verification."
>
<button class="button bg-blue-500 hover:bg-blue-400 px-2" on:click={activate}
>Activate All Users</button
>
</Tooltip>
</div>
<div class="flex items-center pt-4">
<div class="font-bold w-64 text-warmGray-400">Domain</div>
<input class="w-full" value={service.config.baseURL} disabled />
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Email address</div>
<input class="w-full" value={service.config.email} disabled />
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Username</div>
<input class="w-full" value={service.config.userName} disabled />
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Password</div>
<PasswordField value={service.config.userPassword} />
</div>
<div class="text-2xl font-bold pt-4 border-gradient w-32">PostgreSQL</div>
<div class="flex items-center pt-4">
<div class="font-bold w-64 text-warmGray-400">Username</div>
<input
class="w-full"
value={service.config.generateEnvsPostgres.POSTGRESQL_USERNAME}
disabled
/>
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Password</div>
<PasswordField value={service.config.generateEnvsPostgres.POSTGRESQL_PASSWORD} />
</div>
<div class="flex items-center">
<div class="font-bold w-64 text-warmGray-400">Database</div>
<input
class="w-full"
value={service.config.generateEnvsPostgres.POSTGRESQL_DATABASE}
disabled
/>
</div>
</div>
</div>
{/if}

15
src/components/Tooltip.svelte
View File

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

25
src/components/TooltipInfo.svelte
View File

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

176
src/global.d.ts vendored
View File

@@ -1,8 +1,75 @@
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
/// <reference types="vite/client" />
interface Cookies {
teamId?: string;
gitlabToken?: string;
'kit.session'?: string;
}
interface Locals {
gitlabToken?: string;
user: {
teamId: string;
permission: string;
isAdmin: boolean;
};
session: {
data: {
uid?: string;
teams?: string[];
expires?: string;
};
};
}
export type DateTimeFormatOptions = {
type Applications = {
name: string;
domain: string;
};
interface Hash {
iv: string;
content: string;
}
interface BuildPack {
name: string;
}
// TODO: Not used, not working what?!
enum GitSource {
Github = 'github',
Gitlab = 'gitlab',
Bitbucket = 'bitbucket'
}
type RawHaproxyConfiguration = {
_version: number;
data: string;
};
type NewTransaction = {
_version: number;
id: string;
status: string;
};
type HttpRequestRuleForceSSL = {
return_hdrs: null;
cond: string;
cond_test: string;
index: number;
redir_code: number;
redir_type: string;
redir_value: string;
type: string;
};
// TODO: No any please
type HttpRequestRule = {
_version: number;
data: Array<any>;
};
type DateTimeFormatOptions = {
localeMatcher?: 'lookup' | 'best fit';
weekday?: 'long' | 'short' | 'narrow';
era?: 'long' | 'short' | 'narrow';
@@ -17,106 +84,3 @@ export type DateTimeFormatOptions = {
hour12?: boolean;
timeZone?: string;
};
export type Application = {
github: {
installation: {
id: number;
};
app: {
id: number;
};
};
repository: {
id: number;
organization: string;
name: string;
branch: string;
};
general: {
deployId: string;
nickname: string;
workdir: string;
isPreviewDeploymentEnabled: boolean;
pullRequest: number;
};
build: {
pack: string;
directory: string;
command: {
build: string | null;
installation: string;
start: string;
python: {
module?: string;
instance?: string;
};
};
container: {
name: string;
tag: string;
baseSHA: string;
};
};
publish: {
directory: string;
domain: string;
path: string;
port: number;
secrets: Array<Record<string, unknown>>;
};
};
export type Database = {
config:
| {
general: {
deployId: string;
nickname: string;
workdir: string;
type: string;
};
database: {
usernames: Array;
passwords: Array;
defaultDatabaseName: string;
};
deploy: {
name: string;
};
}
| Record<string, unknown>;
envs: Array;
};
export type Dashboard = {
databases: {
deployed:
| [
{
configuration: Database;
}
]
| [];
};
services: {
deployed:
| [
{
configuration: any;
}
]
| [];
};
applications: {
deployed:
| [
{
configuration: Application;
UpdatedAt: any;
}
]
| [];
};
};
export type GithubInstallations = {
id: number;
app_id: number;
};

77
src/hooks.ts Normal file
View File

@@ -0,0 +1,77 @@
import dotEnvExtended from 'dotenv-extended';
dotEnvExtended.load();
import type { GetSession } from '@sveltejs/kit';
import { handleSession } from 'svelte-kit-cookie-session';
import { getUserDetails, isTeamIdTokenAvailable, sentry } from '$lib/common';
import { version } from '$lib/common';
import cookie from 'cookie';
import { dev } from '$app/env';
export const handle = handleSession(
{
secret: process.env['COOLIFY_SECRET_KEY'],
expires: 30
},
async function ({ event, resolve }) {
let response;
try {
const cookies: Cookies = cookie.parse(event.request.headers.get('cookie') || '');
if (cookies['kit.session']) {
const { permission, teamId } = await getUserDetails(event, false);
event.locals.user = {
teamId,
permission,
isAdmin: permission === 'admin' || permission === 'owner'
};
}
if (cookies.gitlabToken) {
event.locals.gitlabToken = cookies.gitlabToken;
}
response = await resolve(event, {
ssr: !event.url.pathname.startsWith('/webhooks/success')
});
} catch (error) {
response = await resolve(event, {
ssr: !event.url.pathname.startsWith('/webhooks/success')
});
response.headers.append(
'Set-Cookie',
cookie.serialize('kit.session', '', {
path: '/',
expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
})
);
response.headers.append(
'Set-Cookie',
cookie.serialize('teamId', '', {
path: '/',
expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
})
);
response.headers.append(
'Set-Cookie',
cookie.serialize('gitlabToken', '', {
path: '/',
expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
})
);
} finally {
return response;
}
}
);
export const getSession: GetSession = function (request) {
return {
version,
gitlabToken: request.locals?.gitlabToken || null,
uid: request.locals.session.data?.uid || null,
teamId: request.locals.user?.teamId || null,
permission: request.locals.user?.permission,
isAdmin: request.locals.user?.isAdmin || false
};
};
export async function handleError({ error, event }) {
if (!dev) sentry.captureException(error, { event });
}

151
src/hooks/index.ts
View File

@@ -1,151 +0,0 @@
import dotEnvExtended from 'dotenv-extended';
dotEnvExtended.load();
import { publicPages } from '$lib/consts';
import mongoose from 'mongoose';
import { verifyUserId } from '$lib/api/common';
import { initializeSession } from 'svelte-kit-cookie-session';
import { cleanupStuckedDeploymentsInDB } from '$lib/api/applications/cleanup';
import { docker } from '$lib/api/docker';
import Configuration from '$models/Configuration';
process.on('SIGINT', function () {
mongoose.connection.close(function () {
console.log('Mongoose default connection disconnected through app termination');
process.exit(0);
});
});
async function connectMongoDB() {
// TODO: Save configurations on start?
const { MONGODB_USER, MONGODB_PASSWORD, MONGODB_HOST, MONGODB_PORT, MONGODB_DB } = process.env;
try {
if (process.env.NODE_ENV === 'production') {
await mongoose.connect(
`mongodb://${MONGODB_USER}:${MONGODB_PASSWORD}@${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DB}?authSource=${MONGODB_DB}&readPreference=primary&ssl=false`,
{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
);
} else {
await mongoose.connect(
'mongodb://supercooldbuser:developmentPassword4db@localhost:27017/coolify?&readPreference=primary&ssl=false',
{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
);
}
console.log('Connected to mongodb.');
} catch (error) {
console.log(error);
}
}
(async () => {
if (mongoose.connection.readyState !== 1) await connectMongoDB();
try {
await mongoose.connection.db.dropCollection('logs-servers');
} catch (error) {
//
}
try {
await cleanupStuckedDeploymentsInDB();
} catch (error) {
console.log(error);
}
try {
const dockerServices = await docker.engine.listServices();
let applications: any = dockerServices.filter(
(r) =>
r.Spec.Labels.managedBy === 'coolify' &&
r.Spec.Labels.type === 'application' &&
r.Spec.Labels.configuration
);
applications = applications.map((r) => {
if (JSON.parse(r.Spec.Labels.configuration)) {
return {
configuration: JSON.parse(r.Spec.Labels.configuration),
UpdatedAt: r.UpdatedAt
};
}
return {};
});
applications = [
...new Map(
applications.map((item) => [
item.configuration.publish.domain + item.configuration.publish.path,
item
])
).values()
];
for (const application of applications) {
await Configuration.findOneAndUpdate(
{
'repository.name': application.configuration.repository.name,
'repository.organization': application.configuration.repository.organization,
'repository.branch': application.configuration.repository.branch,
'publish.domain': application.configuration.publish.domain
},
{
...application.configuration
},
{ upsert: true, new: true }
);
}
} catch (error) {
console.log(error);
}
})();
export async function handle({ request, resolve }) {
const { SECRETS_ENCRYPTION_KEY } = process.env;
let session;
try {
session = initializeSession(request.headers, {
secret: SECRETS_ENCRYPTION_KEY,
cookie: { path: '/', secure: true }
});
} catch (error) {
console.log(error);
return {
status: 302,
headers: {
'set-cookie': 'kit.session=deleted;path=/;expires=Wed, 21 Oct 2015 07:28:00 GMT',
location: '/'
}
};
}
request.locals.session = session;
if (session?.data?.coolToken) {
try {
await verifyUserId(session.data.coolToken);
request.locals.session = session;
} catch (error) {
request.locals.session.destroy = true;
}
}
const response = await resolve(request);
if (!session['set-cookie']) {
if (!session?.data?.coolToken && !publicPages.includes(request.path)) {
return {
status: 302,
headers: {
location: '/'
}
};
}
return response;
}
return {
...response,
headers: {
...response.headers,
...session
}
};
}
export function getSession(request) {
const { data } = request.locals.session;
return {
isLoggedIn: data && Object.keys(data).length !== 0 ? true : false,
expires: data.expires,
coolToken: data.coolToken,
ghToken: data.ghToken || null
};
}

60
src/lib/api.ts Normal file
View File

@@ -0,0 +1,60 @@
async function send({ method, path, data = {}, headers, timeout = 30000 }) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
const opts = { method, headers: {}, body: null, signal: controller.signal };
if (Object.keys(data).length > 0) {
let parsedData = data;
for (const [key, value] of Object.entries(data)) {
if (value === '') {
parsedData[key] = null;
}
}
if (parsedData) {
opts.headers['Content-Type'] = 'application/json';
opts.body = JSON.stringify(parsedData);
}
}
if (headers) {
opts.headers = {
...opts.headers,
...headers
};
}
const response = await fetch(`${path}`, opts);
clearTimeout(id);
const contentType = response.headers.get('content-type');
let responseData = {};
if (contentType) {
if (contentType?.indexOf('application/json') !== -1) {
responseData = await response.json();
} else if (contentType?.indexOf('text/plain') !== -1) {
responseData = await response.text();
} else {
return {};
}
} else {
return {};
}
if (!response.ok) throw responseData;
return responseData;
}
export function get(path, headers = {}): Promise<any> {
return send({ method: 'GET', path, headers });
}
export function del(path, data = {}, headers = {}): Promise<any> {
return send({ method: 'DELETE', path, data, headers });
}
export function post(path, data, headers = {}): Promise<any> {
return send({ method: 'POST', path, data, headers });
}
export function put(path, data, headers = {}): Promise<any> {
return send({ method: 'PUT', path, data, headers });
}

29
src/lib/api/applications/buildContainer.ts
View File

@@ -1,29 +0,0 @@
import Deployment from '$models/Deployment';
import { saveAppLog } from './logging';
import * as packs from './packs';
export default async function (configuration) {
const { id, organization, name, branch } = configuration.repository;
const { domain } = configuration.publish;
const deployId = configuration.general.deployId;
const execute = packs[configuration.build.pack];
if (execute) {
await Deployment.findOneAndUpdate(
{ repoId: id, branch, deployId, organization, name, domain },
{ repoId: id, branch, deployId, organization, name, domain, progress: 'inprogress' }
);
await saveAppLog('### Building application.', configuration);
await execute(configuration);
await saveAppLog('### Building done.', configuration);
} else {
try {
await Deployment.findOneAndUpdate(
{ repoId: id, branch, deployId, organization, name, domain },
{ repoId: id, branch, deployId, organization, name, domain, progress: 'failed' }
);
} catch (error) {
// Hmm.
}
throw new Error('No buildpack found.');
}
}

66
src/lib/api/applications/cleanup.ts
View File

@@ -1,66 +0,0 @@
import { docker } from '$lib/api/docker';
import Deployment from '$models/Deployment';
import { execShellAsync } from '../common';
import crypto from 'crypto';
export async function deleteSameDeployments(configuration, originalDomain = null) {
await (
await docker.engine.listServices()
)
.filter((r) => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application')
.map(async (s) => {
const running = JSON.parse(s.Spec.Labels.configuration);
if (
running.repository.id === configuration.repository.id &&
running.repository.branch === configuration.repository.branch &&
running.publish.domain === originalDomain || configuration.publish.domain
) {
await execShellAsync(`docker stack rm ${s.Spec.Labels['com.docker.stack.namespace']}`);
}
});
}
export async function cleanupStuckedDeploymentsInDB() {
// Cleanup stucked deployments.
await Deployment.updateMany(
{ progress: { $in: ['queued', 'inprogress'] } },
{ progress: 'failed' }
);
}
export async function purgeImagesContainers(configuration, deleteAll = false) {
const { name, tag } = configuration.build.container;
try {
await execShellAsync('docker container prune -f');
} catch (error) {
//
}
try {
if (deleteAll) {
const IDsToDelete = (
await execShellAsync(
`docker images ls --filter=reference='${name}' --format '{{json .ID }}'`
)
)
.trim()
.replace(/"/g, '')
.split('\n');
if (IDsToDelete.length > 0) await execShellAsync(`docker rmi -f ${IDsToDelete.join(' ')}`);
} else {
const IDsToDelete = (
await execShellAsync(
`docker images ls --filter=reference='${name}' --filter=before='${name}:${tag}' --format '{{json .ID }}'`
)
)
.trim()
.replace(/"/g, '')
.split('\n');
if (IDsToDelete.length > 1) await execShellAsync(`docker rmi -f ${IDsToDelete.join(' ')}`);
}
} catch (error) {
console.log(error);
}
try {
await execShellAsync('docker image prune -f');
} catch (error) {
//
}
}

54
src/lib/api/applications/cloneRepository.ts
View File

@@ -1,54 +0,0 @@
import jsonwebtoken from 'jsonwebtoken';
import { execShellAsync } from '../common';
export default async function (configuration) {
try {
const { GITHUB_APP_PRIVATE_KEY } = process.env;
const { workdir, isPreviewDeploymentEnabled, pullRequest } = configuration.general;
const { organization, name, branch } = configuration.repository;
const github = configuration.github;
if (!github.installation.id || !github.app.id) {
throw new Error('Github installation ID is invalid.');
}
const githubPrivateKey = GITHUB_APP_PRIVATE_KEY.replace(/\\n/g, '\n').replace(/"/g, '');
const payload = {
iat: Math.round(new Date().getTime() / 1000),
exp: Math.round(new Date().getTime() / 1000 + 60),
iss: parseInt(github.app.id)
};
const jwtToken = jsonwebtoken.sign(payload, githubPrivateKey, {
algorithm: 'RS256'
});
const { token } = await (
await fetch(
`https://api.github.com/app/installations/${github.installation.id}/access_tokens`,
{
method: 'POST',
headers: {
Authorization: 'Bearer ' + jwtToken,
Accept: 'application/vnd.github.machine-man-preview+json'
}
}
)
).json();
await execShellAsync(
`mkdir -p ${workdir} && git clone -q -b ${branch} https://x-access-token:${token}@github.com/${organization}/${name}.git ${workdir}/`
);
if (isPreviewDeploymentEnabled && pullRequest && pullRequest !== 0) {
await execShellAsync(
`cd ${workdir} && git fetch origin pull/${pullRequest}/head:pull_${pullRequest} && git checkout pull_${pullRequest}`
);
}
configuration.build.container.tag = (
await execShellAsync(`cd ${workdir}/ && git rev-parse HEAD`)
)
.replace('\n', '')
.slice(0, 7);
} catch (error) {
console.log(error);
}
}

18
src/lib/api/applications/common.ts
View File

@@ -1,18 +0,0 @@
export const baseServiceConfiguration = {
replicas: 1,
restart_policy: {
condition: 'any',
max_attempts: 6
},
update_config: {
parallelism: 1,
delay: '10s',
order: 'start-first'
},
rollback_config: {
parallelism: 1,
delay: '10s',
order: 'start-first',
failure_action: 'rollback'
}
};

198
src/lib/api/applications/configuration.ts
View File

@@ -1,198 +0,0 @@
import cuid from 'cuid';
import crypto from 'crypto';
import { uniqueNamesGenerator, adjectives, colors, animals } from 'unique-names-generator';
import { docker } from '$lib/api/docker';
import { baseServiceConfiguration } from './common';
import { execShellAsync } from '../common';
import { promises as fs } from 'fs';
import Configuration from '$models/Configuration';
function getUniq() {
return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 });
}
export function setDefaultConfiguration(configuration) {
const nickname = configuration.general.nickname || getUniq();
const deployId = cuid();
const shaBase = JSON.stringify({ path: configuration.publish.path, domain: configuration.publish.domain });
const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex');
configuration.build.container.name = sha256.slice(0, 15);
configuration.general.nickname = nickname;
configuration.general.deployId = deployId;
configuration.general.workdir = `/tmp/${deployId}`;
if (configuration.general.isPreviewDeploymentEnabled && configuration.general.pullRequest !== 0) {
configuration.build.container.name = `pr${configuration.general.pullRequest}-${sha256.slice(
0,
8
)}`;
configuration.publish.domain = `pr${configuration.general.pullRequest}.${configuration.publish.domain}`;
}
if (!configuration.publish.path) configuration.publish.path = '/';
if (!configuration.publish.port) {
if (
configuration.build.pack === 'nodejs' ||
configuration.build.pack === 'nuxtjs' ||
configuration.build.pack === 'rust' ||
configuration.build.pack === 'nextjs' ||
configuration.build.pack === 'nestjs'
) {
configuration.publish.port = 3000;
} else if (configuration.build.pack === 'python') {
configuration.publish.port = 4000;
} else {
configuration.publish.port = 80;
}
}
if (!configuration.build.directory) configuration.build.directory = '';
if (configuration.build.directory.startsWith('/'))
configuration.build.directory = configuration.build.directory.replace('/', '');
if (!configuration.publish.directory) configuration.publish.directory = '';
if (configuration.publish.directory.startsWith('/'))
configuration.publish.directory = configuration.publish.directory.replace('/', '');
if (configuration.build.pack === 'nodejs') {
if (!configuration.build.command.installation)
configuration.build.command.installation = 'yarn install';
}
if (
configuration.build.pack === 'nodejs' ||
configuration.build.pack === 'vuejs' ||
configuration.build.pack === 'nuxtjs' ||
configuration.build.pack === 'nextjs' ||
configuration.build.pack === 'nestjs'
) {
if (!configuration.build.command.start) configuration.build.command.start = 'yarn start';
}
if (configuration.build.pack === 'python') {
if (!configuration.build.command.python.module)
configuration.build.command.python.module = 'main';
if (!configuration.build.command.python.instance)
configuration.build.command.python.instance = 'app';
}
configuration.build.container.baseSHA = crypto
.createHash('sha256')
.update(JSON.stringify(baseServiceConfiguration))
.digest('hex');
configuration.baseServiceConfiguration = baseServiceConfiguration;
return configuration;
}
export async function precheckDeployment(configuration) {
const services = await Configuration.find({
'publish.domain': configuration.publish.domain,
'publish.path': configuration.publish.path
})
// const services = (await docker.engine.listServices()).filter(
// (r) =>
// r.Spec.Labels.managedBy === 'coolify' &&
// r.Spec.Labels.type === 'application' &&
// JSON.parse(r.Spec.Labels.configuration).publish.domain === configuration.publish.domain
// );
let foundService = false;
let configChanged = false;
let imageChanged = false;
let forceUpdate = false;
for (const service of services) {
// const running = JSON.parse(service.Spec.Labels.configuration);
if (
service.repository.id === configuration.repository.id &&
service.repository.branch === configuration.repository.branch
) {
foundService = true;
// Base service configuration changed
if (
!service.build.container.baseSHA ||
service.build.container.baseSHA !== configuration.build.container.baseSHA
) {
forceUpdate = true;
}
// If the deployment is in error state, forceUpdate
const state = await execShellAsync(
`docker stack ps ${service.build.container.name} --format '{{ json . }}'`
);
const isError = state
.split('\n')
.filter((n) => n)
.map((s) => JSON.parse(s))
.filter(
(n) =>
n.DesiredState !== 'Running' && n.Image.split(':')[1] === service.build.container.tag
);
if (isError.length > 0) {
forceUpdate = true;
}
const compareObjects = (a, b) => {
if (a === b) return true;
if (typeof a != 'object' || typeof b != 'object' || a == null || b == null) return false;
const keysA = Object.keys(a),
keysB = Object.keys(b);
if (keysA.length != keysB.length) return false;
for (const key of keysA) {
if (!keysB.includes(key)) return false;
if (typeof a[key] === 'function' || typeof b[key] === 'function') {
if (a[key].toString() != b[key].toString()) return false;
} else {
if (!compareObjects(a[key], b[key])) return false;
}
}
return true;
};
const runningWithoutContainer = JSON.parse(JSON.stringify(service));
delete runningWithoutContainer.build.container;
const configurationWithoutContainer = JSON.parse(JSON.stringify(configuration));
delete configurationWithoutContainer.build.container;
// If only the configuration changed
if (
!compareObjects(runningWithoutContainer.build, configurationWithoutContainer.build) ||
!compareObjects(runningWithoutContainer.publish, configurationWithoutContainer.publish) ||
runningWithoutContainer.general.isPreviewDeploymentEnabled !==
configurationWithoutContainer.general.isPreviewDeploymentEnabled
) {
configChanged = true;
}
// If only the image changed
if (service.build.container.tag !== configuration.build.container.tag) imageChanged = true;
// If build pack changed, forceUpdate the service
if (service.build.pack !== configuration.build.pack) forceUpdate = true;
if (
configuration.general.isPreviewDeploymentEnabled &&
configuration.general.pullRequest !== 0
)
forceUpdate = true;
}
}
if (forceUpdate) {
imageChanged = false;
configChanged = false;
}
return {
foundService,
imageChanged,
configChanged,
forceUpdate
};
}
export async function updateServiceLabels(configuration) {
return await execShellAsync(
`docker service update --label-add configuration='${JSON.stringify(configuration)}' ${
configuration.build.container.name
}_${configuration.build.container.name}`
);
}

69
src/lib/api/applications/copyFiles.ts
View File

@@ -1,69 +0,0 @@
import { promises as fs } from 'fs';
export default async function (configuration) {
const staticDeployments = ['react', 'vuejs', 'static', 'svelte', 'gatsby'];
try {
// TODO: Write full .dockerignore for all deployments!!
if (configuration.build.pack === 'php') {
await fs.writeFile(
`${configuration.general.workdir}/.htaccess`,
`
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.php [QSA,L]
`
);
}
// await fs.writeFile(`${configuration.general.workdir}/.dockerignore`, 'node_modules')
if (staticDeployments.includes(configuration.build.pack)) {
await fs.writeFile(
`${configuration.general.workdir}/nginx.conf`,
`user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
access_log off;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/index.html $uri/ /index.html =404;
}
error_page 404 /50x.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
`
);
}
} catch (error) {
console.log(error);
throw new Error(error);
}
}

80
src/lib/api/applications/deploy.ts
View File

@@ -1,80 +0,0 @@
import { docker } from '$lib/api/docker';
import { saveAppLog } from './logging';
import { promises as fs } from 'fs';
import { deleteSameDeployments, purgeImagesContainers } from './cleanup';
import yaml from 'js-yaml';
import { delay, execShellAsync } from '../common';
export default async function (configuration, nextStep) {
const generateEnvs = {};
for (const secret of configuration.publish.secrets) {
generateEnvs[secret.name] = secret.value;
}
const containerName = configuration.build.container.name;
const containerTag = configuration.build.container.tag;
// Only save SHA256 of it in the configuration label
const baseServiceConfiguration = configuration.baseServiceConfiguration;
delete configuration.baseServiceConfiguration;
const stack = {
version: '3.8',
services: {
[containerName]: {
image: `${containerName}:${containerTag}`,
networks: [`${docker.network}`],
environment: generateEnvs,
deploy: {
...baseServiceConfiguration,
labels: [
'managedBy=coolify',
'type=application',
'configuration=' + JSON.stringify(configuration),
'traefik.enable=true',
'traefik.http.services.' +
containerName +
`.loadbalancer.server.port=${configuration.publish.port}`,
'traefik.http.routers.' + containerName + '.entrypoints=websecure',
'traefik.http.routers.' +
containerName +
'.rule=Host(`' +
configuration.publish.domain +
'`) && PathPrefix(`' +
configuration.publish.path +
'`)',
'traefik.http.routers.' + containerName + '.tls.certresolver=letsencrypt',
'traefik.http.routers.' + containerName + '.middlewares=global-compress'
]
}
}
},
networks: {
[`${docker.network}`]: {
external: true
}
}
};
await saveAppLog('### Publishing.', configuration);
await fs.writeFile(`${configuration.general.workdir}/stack.yml`, yaml.dump(stack));
if (nextStep === 2) {
// console.log('image changed')
await execShellAsync(
`docker service update --image ${containerName}:${containerTag} ${containerName}_${containerName}`
);
} else {
// console.log('new deployment or force deployment or config changed')
// if (originalDomain !== configuration.publish.domain) {
// await deleteSameDeployments(configuration, originalDomain);
// } else {
// await deleteSameDeployments(configuration);
// }
// await deleteSameDeployments(configuration);
await execShellAsync(
`cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
);
}
await saveAppLog('### Published done!', configuration);
}

58
src/lib/api/applications/logging.ts
View File

@@ -1,58 +0,0 @@
import Settings from '$models/Settings';
import ServerLog from '$models/ServerLog';
import ApplicationLog from '$models/ApplicationLog';
import dayjs from 'dayjs';
import { version } from '../../../../package.json';
function generateTimestamp() {
return `${dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')} `;
}
const patterns = [
'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))'
].join('|');
export async function saveAppLog(event, configuration, isError?: boolean) {
try {
const deployId = configuration.general.deployId;
const repoId = configuration.repository.id;
const branch = configuration.repository.branch;
if (isError) {
const clearedEvent =
'[ERROR 😱] ' +
generateTimestamp() +
event.replace(new RegExp(patterns, 'g'), '').replace(/(\r\n|\n|\r)/gm, '');
await new ApplicationLog({ repoId, branch, deployId, event: clearedEvent }).save();
} else {
if (event && event !== '\n') {
const clearedEvent =
'[INFO] ' +
generateTimestamp() +
event.replace(new RegExp(patterns, 'g'), '').replace(/(\r\n|\n|\r)/gm, '');
await new ApplicationLog({ repoId, branch, deployId, event: clearedEvent }).save();
}
}
} catch (error) {
console.log(error);
return error;
}
}
export async function saveServerLog(error) {
const settings = await Settings.findOne({ applicationName: 'coolify' });
const payload = {
message: error.message,
stack: error.stack,
type: error.type || 'spaghetticode',
version
};
const found = await ServerLog.find(payload);
if (found.length === 0 && error.message) await new ServerLog(payload).save();
if (settings && settings.sendErrors && process.env.NODE_ENV === 'production') {
await fetch('https://errors.coollabs.io/api/error', {
method: 'POST',
body: JSON.stringify({ ...payload })
});
}
}

17
src/lib/api/applications/packs/docker/index.ts
View File

@@ -1,17 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
export default 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 new Error('No custom dockerfile found.');
}
}

28
src/lib/api/applications/packs/gatsby/index.ts
View File

@@ -1,28 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
const publishStaticDocker = (configuration) => {
return [
'FROM nginx:stable-alpine',
'COPY nginx.conf /etc/nginx/nginx.conf',
'WORKDIR /usr/share/nginx/html',
`COPY --from=${configuration.build.container.name}:${configuration.build.container.tag}-cache /usr/src/app/${configuration.publish.directory} ./`,
'EXPOSE 80',
'CMD ["nginx", "-g", "daemon off;"]'
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration, true);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishStaticDocker(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);
}

43
src/lib/api/applications/packs/helpers.ts
View File

@@ -1,43 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
const buildImageNodeDocker = (configuration, prodBuild, generateEnvs) => {
return [
'FROM node:lts',
...generateEnvs,
'WORKDIR /usr/src/app',
`COPY ${configuration.build.directory}/package*.json ./`,
configuration.build.command.installation && `RUN ${configuration.build.command.installation}`,
`COPY ./${configuration.build.directory} ./`,
`RUN ${configuration.build.command.build}`,
prodBuild && `RUN rm -fr node_modules && ${configuration.build.command.installation} --prod`
].join('\n');
};
export async function buildImage(configuration, cacheBuild?: boolean, prodBuild?: boolean) {
// TODO: Edit secrets
// TODO: Add secret from .env file / json
const generateEnvs = [];
const dotEnv = []
for (const secret of configuration.publish.secrets) {
dotEnv.push(`${secret.name}=${secret.value}`)
if (secret.isBuild) generateEnvs.push(`ENV ${secret.name}=${secret.value}`)
}
await fs.writeFile(
`${configuration.general.workdir}/.env`,
dotEnv.join('\n')
)
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
buildImageNodeDocker(configuration, prodBuild, generateEnvs)
);
const stream = await docker.engine.buildImage(
{ src: ['.'], context: configuration.general.workdir },
{
t: `${configuration.build.container.name}:${cacheBuild
? `${configuration.build.container.tag}-cache`
: configuration.build.container.tag
}`
}
);
await streamEvents(stream, configuration);
}

31
src/lib/api/applications/packs/nestjs/index.ts
View File

@@ -1,31 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// `HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost:${configuration.publish.port}${configuration.publish.path} || exit 1`,
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}/package*.json ./
RUN ${configuration.build.command.installation}
COPY ./${configuration.build.directory} ./`,
`EXPOSE ${configuration.publish.port}`,
`CMD ${configuration.build.command.start}`
].join('\n');
};
export default async function (configuration) {
if (configuration.build.command.build) await buildImage(configuration, false, true);
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}` }
);
await streamEvents(stream, configuration);
}

30
src/lib/api/applications/packs/nextjs/index.ts
View File

@@ -1,30 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// `HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost:${configuration.publish.port}${configuration.publish.path} || exit 1`,
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}/package*.json ./
RUN ${configuration.build.command.installation}
COPY ./${configuration.build.directory} ./`,
`EXPOSE ${configuration.publish.port}`,
`CMD ${configuration.build.command.start}`
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration);
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}` }
);
await streamEvents(stream, configuration);
}

31
src/lib/api/applications/packs/nodejs/index.ts
View File

@@ -1,31 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// `HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost:${configuration.publish.port}${configuration.publish.path} || exit 1`,
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}/package*.json ./
RUN ${configuration.build.command.installation}
COPY ./${configuration.build.directory} ./`,
`EXPOSE ${configuration.publish.port}`,
`CMD ${configuration.build.command.start}`
].join('\n');
};
export default async function (configuration) {
if (configuration.build.command.build) await buildImage(configuration);
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}` }
);
await streamEvents(stream, configuration);
}

31
src/lib/api/applications/packs/nuxtjs/index.ts
View File

@@ -1,31 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// `HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost:${configuration.publish.port}${configuration.publish.path} || exit 1`,
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}/package*.json ./
RUN ${configuration.build.command.installation}
COPY ./${configuration.build.directory} ./`,
`EXPOSE ${configuration.publish.port}`,
`CMD ${configuration.build.command.start}`
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration);
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}` }
);
await streamEvents(stream, configuration);
}

25
src/lib/api/applications/packs/php/index.ts
View File

@@ -1,25 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
const publishPHPDocker = (configuration) => {
return [
'FROM php:apache',
'RUN a2enmod rewrite',
'WORKDIR /usr/src/app',
`COPY ./${configuration.build.directory} /var/www/html`,
'EXPOSE 80',
'CMD ["apache2-foreground"]'
].join('\n');
};
export default 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);
}

24
src/lib/api/applications/packs/python/index.ts
View File

@@ -1,24 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
// `HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost:${configuration.publish.port}${configuration.publish.path} || exit 1`,
const publishPython = (configuration) => {
return [
'FROM python:3-alpine',
'WORKDIR /usr/src/app',
'RUN pip install gunicorn',
`COPY ./${configuration.build.directory}/requirements.txt ./`,
`RUN pip install --no-cache-dir -r ./${configuration.build.directory}/requirements.txt`,
`COPY ./${configuration.build.directory}/ .`,
`EXPOSE ${configuration.publish.port}`,
`CMD gunicorn -w=4 ${configuration.build.command.python.module}:${configuration.build.command.python.instance}`
].join('\n');
};
export default async function (configuration) {
await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, publishPython(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);
}

28
src/lib/api/applications/packs/react/index.ts
View File

@@ -1,28 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
const publishStaticDocker = (configuration) => {
return [
'FROM nginx:stable-alpine',
'COPY nginx.conf /etc/nginx/nginx.conf',
'WORKDIR /usr/share/nginx/html',
`COPY --from=${configuration.build.container.name}:${configuration.build.container.tag}-cache /usr/src/app/${configuration.publish.directory} ./`,
'EXPOSE 80',
'CMD ["nginx", "-g", "daemon off;"]'
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration, true);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishStaticDocker(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);
}

66
src/lib/api/applications/packs/rust/index.ts
View File

@@ -1,66 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import TOML from '@iarna/toml';
import { execShellAsync } from '$lib/api/common';
const publishRustDocker = (configuration, custom) => {
return [
'FROM rust:latest',
'WORKDIR /app',
`COPY --from=${configuration.build.container.name}:cache /app/target target`,
`COPY --from=${configuration.build.container.name}:cache /usr/local/cargo /usr/local/cargo`,
'COPY . .',
`RUN cargo build --release --bin ${custom.name}`,
'FROM debian:buster-slim',
'WORKDIR /app',
'RUN apt-get update -y && apt-get install -y --no-install-recommends openssl libcurl4 ca-certificates && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/*',
'RUN update-ca-certificates',
`COPY --from=${configuration.build.container.name}:cache /app/target/release/${custom.name} ${custom.name}`,
`EXPOSE ${configuration.publish.port}`,
`CMD ["/app/${custom.name}"]`
].join('\n');
};
const cacheRustDocker = (configuration, custom) => {
return [
`FROM rust:latest AS planner-${configuration.build.container.name}`,
'WORKDIR /app',
'RUN cargo install cargo-chef',
'COPY . .',
'RUN cargo chef prepare --recipe-path recipe.json',
'FROM rust:latest',
'WORKDIR /app',
'RUN cargo install cargo-chef',
`COPY --from=planner-${configuration.build.container.name} /app/recipe.json recipe.json`,
'RUN cargo chef cook --release --recipe-path recipe.json'
].join('\n');
};
export default async function (configuration) {
const cargoToml = await execShellAsync(`cat ${configuration.general.workdir}/Cargo.toml`);
const parsedToml = TOML.parse(cargoToml);
const custom = {
name: parsedToml.package.name
};
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
cacheRustDocker(configuration, custom)
);
let stream = await docker.engine.buildImage(
{ src: ['.'], context: configuration.general.workdir },
{ t: `${configuration.build.container.name}:cache` }
);
await streamEvents(stream, configuration);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishRustDocker(configuration, custom)
);
stream = await docker.engine.buildImage(
{ src: ['.'], context: configuration.general.workdir },
{ t: `${configuration.build.container.name}:${configuration.build.container.tag}` }
);
await streamEvents(stream, configuration);
}

30
src/lib/api/applications/packs/static/index.ts
View File

@@ -1,30 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
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}-cache /usr/src/app/${configuration.publish.directory} ./`
: `COPY ./${configuration.build.directory} ./`,
'EXPOSE 80',
'CMD ["nginx", "-g", "daemon off;"]'
].join('\n');
};
export default async function (configuration) {
if (configuration.build.command.build) await buildImage(configuration, true);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishStaticDocker(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);
}

28
src/lib/api/applications/packs/svelte/index.ts
View File

@@ -1,28 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
const publishStaticDocker = (configuration) => {
return [
'FROM nginx:stable-alpine',
'COPY nginx.conf /etc/nginx/nginx.conf',
'WORKDIR /usr/share/nginx/html',
`COPY --from=${configuration.build.container.name}:${configuration.build.container.tag}-cache /usr/src/app/${configuration.publish.directory} ./`,
'EXPOSE 80',
'CMD ["nginx", "-g", "daemon off;"]'
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration, true);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishStaticDocker(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);
}

66
src/lib/api/applications/packs/templates.ts
View File

@@ -1,66 +0,0 @@
const defaultBuildAndDeploy = {
installation: 'yarn install',
build: 'yarn build',
start: 'yarn start'
};
const templates = {
svelte: {
pack: 'svelte',
...defaultBuildAndDeploy,
directory: 'public',
name: 'Svelte'
},
'@nestjs/core': {
pack: 'nestjs',
...defaultBuildAndDeploy,
start: 'yarn start:prod',
port: 3000,
name: 'NestJS'
},
next: {
pack: 'nextjs',
...defaultBuildAndDeploy,
port: 3000,
name: 'NextJS'
},
nuxt: {
pack: 'nuxtjs',
...defaultBuildAndDeploy,
port: 3000,
name: 'NuxtJS'
},
'react-scripts': {
pack: 'react',
...defaultBuildAndDeploy,
directory: 'build',
name: 'React'
},
'parcel-bundler': {
pack: 'static',
...defaultBuildAndDeploy,
directory: 'dist',
name: 'Parcel'
},
'@vue/cli-service': {
pack: 'vuejs',
...defaultBuildAndDeploy,
directory: 'dist',
port: 80,
name: 'Vue'
},
gatsby: {
pack: 'gatsby',
...defaultBuildAndDeploy,
directory: 'public',
name: 'Gatsby'
},
'preact-cli': {
pack: 'react',
...defaultBuildAndDeploy,
directory: 'build',
name: 'Preact'
}
};
export default templates;

28
src/lib/api/applications/packs/vuejs/index.ts
View File

@@ -1,28 +0,0 @@
import { docker, streamEvents } from '$lib/api/docker';
import { promises as fs } from 'fs';
import { buildImage } from '../helpers';
// 'HEALTHCHECK --timeout=10s --start-period=10s --interval=5s CMD curl -I -s -f http://localhost/ || exit 1',
const publishStaticDocker = (configuration) => {
return [
'FROM nginx:stable-alpine',
'COPY nginx.conf /etc/nginx/nginx.conf',
'WORKDIR /usr/share/nginx/html',
`COPY --from=${configuration.build.container.name}:${configuration.build.container.tag}-cache /usr/src/app/${configuration.publish.directory} ./`,
'EXPOSE 80',
'CMD ["nginx", "-g", "daemon off;"]'
].join('\n');
};
export default async function (configuration) {
await buildImage(configuration, true);
await fs.writeFile(
`${configuration.general.workdir}/Dockerfile`,
publishStaticDocker(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);
}

76
src/lib/api/applications/preChecks.ts
View File

@@ -1,76 +0,0 @@
import Configuration from "$models/Configuration";
import { compareObjects, execShellAsync } from "../common";
export default async function (configuration) {
/*
0 => nothing changed, no need to redeploy
1 => force update
2 => configuration changed
3 => continue normally
*/
const currentConfiguration = await Configuration.findOne({
'general.nickname': configuration.general.nickname
})
if (currentConfiguration) {
// Base service configuration changed
if (
!currentConfiguration.build.container.baseSHA ||
currentConfiguration.build.container.baseSHA !== configuration.build.container.baseSHA
) {
return 1
}
// If the deployment is in error state, forceUpdate
try {
const state = await execShellAsync(
`docker stack ps ${currentConfiguration.build.container.name} --format '{{ json . }}'`
);
const isError = state
.split('\n')
.filter((n) => n)
.map((s) => JSON.parse(s))
.filter(
(n) =>
n.DesiredState !== 'Running' && n.Image.split(':')[1] === currentConfiguration.build.container.tag
);
if (isError.length > 0) {
return 1
}
} catch(error) {
console.log(error)
}
// If previewDeployments enabled
if (
currentConfiguration.general.isPreviewDeploymentEnabled &&
currentConfiguration.general.pullRequest !== 0
) {
return 1
}
// If build pack changed, forceUpdate the service
if (currentConfiguration.build.pack !== configuration.build.pack) {
return 1
}
const currentConfigurationCompare = JSON.parse(JSON.stringify(currentConfiguration));
const configurationCompare = JSON.parse(JSON.stringify(configuration));
delete currentConfigurationCompare.build.container;
delete configurationCompare.build.container;
if (
!compareObjects(currentConfigurationCompare.build, configurationCompare.build) ||
!compareObjects(currentConfigurationCompare.publish, configurationCompare.publish) ||
currentConfigurationCompare.general.isPreviewDeploymentEnabled !==
configurationCompare.general.isPreviewDeploymentEnabled
) {
return 1
}
if (currentConfiguration.build.container.tag !== configuration.build.container.tag) {
return 2
}
return 0
}
return 3
}

44
src/lib/api/applications/preTasks.ts
View File

@@ -1,44 +0,0 @@
import Configuration from "$models/Configuration";
import Deployment from "$models/Deployment";
export default async function (configuration) {
// Check if deployment is already queued
const alreadyQueued = await Deployment.find({
path: configuration.publish.path,
domain: configuration.publish.domain,
progress: { $in: ['queued', 'inprogress'] }
});
if (alreadyQueued.length > 0) {
return {
status: 200,
body: {
success: false,
message: 'Deployment already queued.'
}
};
}
const { id, organization, name, branch } = configuration.repository;
const { domain, path } = configuration.publish;
const { deployId, nickname } = configuration.general;
// Save new deployment
await new Deployment({
repoId: id,
branch,
deployId,
domain,
organization,
name,
nickname
}).save();
await Configuration.findOneAndUpdate(
{
'publish.domain': domain,
'publish.path': path,
'general.pullRequest': { $in: [null, 0] }
},
{ ...configuration },
{ upsert: true, new: true }
);
return
}

32
src/lib/api/applications/queueAndBuild.ts
View File

@@ -1,32 +0,0 @@
import Deployment from '$models/Deployment';
import dayjs from 'dayjs';
import buildContainer from './buildContainer';
import { purgeImagesContainers } from './cleanup';
import { updateServiceLabels } from './configuration';
import copyFiles from './copyFiles';
import deploy from './deploy';
import { saveAppLog } from './logging';
export default async function (configuration, nextStep) {
const { id, organization, name, branch } = configuration.repository;
const { domain } = configuration.publish;
const { deployId } = configuration.general;
try {
await saveAppLog(`### Successfully queued.`, configuration);
await copyFiles(configuration);
await buildContainer(configuration);
await deploy(configuration, nextStep);
await Deployment.findOneAndUpdate(
{ repoId: id, branch, deployId, organization, name, domain },
{ repoId: id, branch, deployId, organization, name, domain, progress: 'done' }
);
await updateServiceLabels(configuration);
await purgeImagesContainers(configuration);
} catch (error) {
await Deployment.findOneAndUpdate(
{ repoId: id, branch, deployId, organization, name, domain },
{ repoId: id, branch, deployId, organization, name, domain, progress: 'failed' }
);
}
}

72
src/lib/api/common.ts
View File

@@ -1,72 +0,0 @@
import shell from 'shelljs';
import User from '$models/User';
import jsonwebtoken from 'jsonwebtoken';
import { saveServerLog } from './applications/logging';
export function execShellAsync(cmd, opts = {}) {
try {
return new Promise(function (resolve, reject) {
shell.config.silent = true;
shell.exec(cmd, opts, async function (code, stdout, stderr) {
if (code !== 0) {
await saveServerLog({ message: JSON.stringify({ cmd, opts, code, stdout, stderr }) });
return reject(new Error(stderr));
}
return resolve(stdout);
});
});
} catch (error) {
return new Error('Oops');
}
}
export function cleanupTmp(dir) {
if (dir !== '/') shell.rm('-fr', dir);
}
export async function verifyUserId(token) {
const { JWT_SIGN_KEY } = process.env;
try {
const verify = jsonwebtoken.verify(token, JWT_SIGN_KEY);
const found = await User.findOne({ uid: verify.jti });
if (found) {
return Promise.resolve(true);
} else {
return Promise.reject(false);
}
} catch (error) {
console.log(error);
return Promise.reject(false);
}
}
export function delay(t) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve('OK');
}, t);
});
}
export function compareObjects(a, b) {
if (a === b) return true;
if (typeof a != 'object' || typeof b != 'object' || a == null || b == null) return false;
const keysA = Object.keys(a),
keysB = Object.keys(b);
if (keysA.length != keysB.length) return false;
for (const key of keysA) {
if (!keysB.includes(key)) return false;
if (typeof a[key] === 'function' || typeof b[key] === 'function') {
if (a[key].toString() != b[key].toString()) return false;
} else {
if (!compareObjects(a[key], b[key])) return false;
}
}
return true;
};

27
src/lib/api/docker.ts
View File

@@ -1,27 +0,0 @@
import Dockerode from 'dockerode';
import { saveAppLog } from './applications/logging';
const { DOCKER_ENGINE, DOCKER_NETWORK } = process.env;
export const docker = {
engine: new Dockerode({
socketPath: DOCKER_ENGINE
}),
network: DOCKER_NETWORK
};
export async function streamEvents(stream, configuration) {
await new Promise((resolve, reject) => {
docker.engine.modem.followProgress(stream, onFinished, onProgress);
function onFinished(err, res) {
if (err) reject(err);
resolve(res);
}
function onProgress(event) {
if (event.error) {
saveAppLog(event.error, configuration, true);
reject(event.error);
} else if (event.stream) {
saveAppLog(event.stream, configuration);
}
}
});
}

23
src/lib/api/github.ts
View File

@@ -1,23 +0,0 @@
import type { Request } from '@sveltejs/kit';
export async function githubAPI(
request: Request,
resource: string,
token?: string,
data?: Record<string, unknown>
) {
const base = 'https://api.github.com';
const res = await fetch(`${base}${resource}`, {
method: request.method,
headers: {
'content-type': 'application/json',
accept: 'application/json',
authorization: token ? `token ${token}` : ''
},
body: data && JSON.stringify(data)
});
return {
status: res.status,
body: await res.json()
};
}

191
src/lib/buildPacks/common.ts Normal file
View File

@@ -0,0 +1,191 @@
import { base64Encode } from '$lib/crypto';
import { getDomain, saveBuildLog, version } from '$lib/common';
import * as db from '$lib/database';
import { scanningTemplates } from '$lib/components/templates';
import { promises as fs } from 'fs';
import { staticDeployments } from '$lib/components/common';
export function makeLabelForStandaloneApplication({
applicationId,
fqdn,
name,
type,
pullmergeRequestId = null,
buildPack,
repository,
branch,
projectId,
port,
commit,
installCommand,
buildCommand,
startCommand,
baseDirectory,
publishDirectory
}) {
if (pullmergeRequestId) {
const protocol = fqdn.startsWith('https://') ? 'https' : 'http';
const domain = getDomain(fqdn);
fqdn = `${protocol}://${pullmergeRequestId}.${domain}`;
}
return [
'--label coolify.managed=true',
`--label coolify.version=${version}`,
`--label coolify.type=standalone-application`,
`--label coolify.configuration=${base64Encode(
JSON.stringify({
applicationId,
fqdn,
name,
type,
pullmergeRequestId,
buildPack,
repository,
branch,
projectId,
port,
commit,
installCommand,
buildCommand,
startCommand,
baseDirectory,
publishDirectory
})
)}`
];
}
export async function makeLabelForStandaloneDatabase({ id, image, volume }) {
const database = await db.prisma.database.findFirst({ where: { id } });
delete database.destinationDockerId;
delete database.createdAt;
delete database.updatedAt;
return [
'coolify.managed=true',
`coolify.version=${version}`,
`coolify.type=standalone-database`,
`coolify.configuration=${base64Encode(
JSON.stringify({
version,
image,
volume,
...database
})
)}`
];
}
export async function makeLabelForPlausibleAnalytics({ id, images, volume }) {
const service = await db.prisma.service.findFirst({
where: { id },
include: { plausibleAnalytics: true }
});
delete service.destinationDockerId;
delete service.createdAt;
delete service.updatedAt;
return [
'coolify.managed=true',
`coolify.version=${version}`,
`coolify.type=service-plausibleanalytics`,
`coolify.configuration=${base64Encode(
JSON.stringify({
version,
images,
volume,
...service
})
)}`
];
}
export const setDefaultConfiguration = async (data) => {
let { buildPack, port, installCommand, startCommand, buildCommand, publishDirectory } = data;
const template = scanningTemplates[buildPack];
if (!port) {
port = template?.port || 3000;
if (buildPack === 'static') port = 80;
else if (buildPack === 'node') port = 3000;
else if (buildPack === 'php') port = 80;
}
if (!installCommand) installCommand = template?.installCommand || 'yarn install';
if (!startCommand) startCommand = template?.startCommand || 'yarn start';
if (!buildCommand) buildCommand = template?.buildCommand || null;
if (!publishDirectory) publishDirectory = template?.publishDirectory || null;
return {
buildPack,
port,
installCommand,
startCommand,
buildCommand,
publishDirectory
};
};
export async function copyBaseConfigurationFiles(buildPack, workdir, buildId, applicationId) {
try {
// TODO: Write full .dockerignore for all deployments!!
if (buildPack === 'php') {
await fs.writeFile(
`${workdir}/.htaccess`,
`
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.php [QSA,L]
`
);
saveBuildLog({ line: 'Copied default configuration file for PHP.', buildId, applicationId });
} else if (staticDeployments.includes(buildPack)) {
await fs.writeFile(
`${workdir}/nginx.conf`,
`user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
access_log off;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/index.html $uri/ /index.html =404;
}
error_page 404 /50x.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
`
);
saveBuildLog({ line: 'Copied default configuration file.', buildId, applicationId });
}
} catch (error) {
console.log(error);
throw new Error(error);
}
}

36
src/lib/buildPacks/docker.ts Normal file
View File

@@ -0,0 +1,36 @@
import { buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
export default async function ({
applicationId,
debug,
tag,
workdir,
docker,
buildId,
baseDirectory,
secrets
}) {
try {
let file = `${workdir}/Dockerfile`;
if (baseDirectory) {
file = `${workdir}/${baseDirectory}/Dockerfile`;
}
const Dockerfile: Array<string> = (await fs.readFile(`${file}`, 'utf8'))
.toString()
.trim()
.split('\n');
if (secrets.length > 0) {
secrets.forEach((secret) => {
if (secret.isBuildSecret) {
Dockerfile.push(`ARG ${secret.name} ${secret.value}`);
}
});
}
await fs.writeFile(`${file}`, Dockerfile.join('\n'));
await buildImage({ applicationId, tag, workdir, docker, buildId, debug });
} catch (error) {
throw error;
}
}

27
src/lib/buildPacks/gatsby.ts Normal file
View File

@@ -0,0 +1,27 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, imageforBuild): Promise<void> => {
const { applicationId, tag, workdir, publishDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${imageforBuild}`);
Dockerfile.push('WORKDIR /usr/share/nginx/html');
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${publishDirectory} ./`);
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["nginx", "-g", "daemon off;"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'nginx:stable-alpine';
const imageForBuild = 'node:lts';
await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

46
src/lib/api/applications/packs/index.ts → src/lib/buildPacks/index.ts
View File

@@ -1,29 +1,27 @@
import vuejs from './vuejs';
import svelte from './svelte';
import Static from './static';
import rust from './rust';
import react from './react';
import php from './php';
import nuxtjs from './nuxtjs';
import nodejs from './nodejs';
import nextjs from './nextjs';
import nestjs from './nestjs';
import gatsby from './gatsby';
import node from './node';
import staticApp from './static';
import docker from './docker';
import python from './python';
import gatsby from './gatsby';
import svelte from './svelte';
import react from './react';
import nestjs from './nestjs';
import nextjs from './nextjs';
import nuxtjs from './nuxtjs';
import vuejs from './vuejs';
import php from './php';
import rust from './rust';
export {
vuejs,
svelte,
Static as static,
rust,
react,
php,
nuxtjs,
nodejs,
nextjs,
nestjs,
gatsby,
node,
staticApp as static,
docker,
python
gatsby,
svelte,
react,
nestjs,
nextjs,
nuxtjs,
vuejs,
php,
rust
};

29
src/lib/buildPacks/nestjs.ts Normal file
View File

@@ -0,0 +1,29 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { applicationId, tag, port, startCommand, workdir, baseDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/src/app');
Dockerfile.push(
`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${baseDirectory || ''} ./`
);
Dockerfile.push(`EXPOSE ${port}`);
Dockerfile.push(`CMD ${startCommand}`);
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'node:lts';
const imageForBuild = 'node:lts';
await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

45
src/lib/buildPacks/nextjs.ts Normal file
View File

@@ -0,0 +1,45 @@
import { buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { workdir, port, installCommand, buildCommand, startCommand, baseDirectory, secrets } =
data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/src/app');
if (secrets.length > 0) {
secrets.forEach((secret) => {
if (secret.isBuildSecret) {
Dockerfile.push(`ARG ${secret.name} ${secret.value}`);
}
});
}
Dockerfile.push(`COPY ./${baseDirectory || ''}package*.json ./`);
try {
await fs.stat(`${workdir}/yarn.lock`);
Dockerfile.push(`COPY ./${baseDirectory || ''}yarn.lock ./`);
} catch (error) {}
try {
await fs.stat(`${workdir}/pnpm-lock.yaml`);
Dockerfile.push(`COPY ./${baseDirectory || ''}pnpm-lock.yaml ./`);
} catch (error) {}
Dockerfile.push(`RUN ${installCommand}`);
Dockerfile.push(`COPY ./${baseDirectory || ''} ./`);
if (buildCommand) {
Dockerfile.push(`RUN ${buildCommand}`);
}
Dockerfile.push(`EXPOSE ${port}`);
Dockerfile.push(`CMD ${startCommand}`);
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'node:lts';
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

45
src/lib/buildPacks/node.ts Normal file
View File

@@ -0,0 +1,45 @@
import { buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { workdir, port, installCommand, buildCommand, startCommand, baseDirectory, secrets } =
data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/src/app');
if (secrets.length > 0) {
secrets.forEach((secret) => {
if (secret.isBuildSecret) {
Dockerfile.push(`ARG ${secret.name} ${secret.value}`);
}
});
}
Dockerfile.push(`COPY ./${baseDirectory || ''}package*.json ./`);
try {
await fs.stat(`${workdir}/yarn.lock`);
Dockerfile.push(`COPY ./${baseDirectory || ''}yarn.lock ./`);
} catch (error) {}
try {
await fs.stat(`${workdir}/pnpm-lock.yaml`);
Dockerfile.push(`COPY ./${baseDirectory || ''}pnpm-lock.yaml ./`);
} catch (error) {}
Dockerfile.push(`RUN ${installCommand}`);
Dockerfile.push(`COPY ./${baseDirectory || ''} ./`);
if (buildCommand) {
Dockerfile.push(`RUN ${buildCommand}`);
}
Dockerfile.push(`EXPOSE ${port}`);
Dockerfile.push(`CMD ${startCommand}`);
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'node:lts';
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

45
src/lib/buildPacks/nuxtjs.ts Normal file
View File

@@ -0,0 +1,45 @@
import { buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { workdir, port, installCommand, buildCommand, startCommand, baseDirectory, secrets } =
data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/src/app');
if (secrets.length > 0) {
secrets.forEach((secret) => {
if (secret.isBuildSecret) {
Dockerfile.push(`ARG ${secret.name} ${secret.value}`);
}
});
}
Dockerfile.push(`COPY ./${baseDirectory || ''}package*.json ./`);
try {
await fs.stat(`${workdir}/yarn.lock`);
Dockerfile.push(`COPY ./${baseDirectory || ''}yarn.lock ./`);
} catch (error) {}
try {
await fs.stat(`${workdir}/pnpm-lock.yaml`);
Dockerfile.push(`COPY ./${baseDirectory || ''}pnpm-lock.yaml ./`);
} catch (error) {}
Dockerfile.push(`RUN ${installCommand}`);
Dockerfile.push(`COPY ./${baseDirectory || ''} ./`);
if (buildCommand) {
Dockerfile.push(`RUN ${buildCommand}`);
}
Dockerfile.push(`EXPOSE ${port}`);
Dockerfile.push(`CMD ${startCommand}`);
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'node:lts';
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

25
src/lib/buildPacks/php.ts Normal file
View File

@@ -0,0 +1,25 @@
import { buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { workdir, baseDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('RUN a2enmod rewrite');
Dockerfile.push('WORKDIR /var/www/html');
Dockerfile.push(`COPY ./${baseDirectory || ''} /var/www/html`);
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["apache2-foreground"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'php:apache';
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

26
src/lib/buildPacks/react.ts Normal file
View File

@@ -0,0 +1,26 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { applicationId, tag, workdir, publishDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/share/nginx/html');
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${publishDirectory} ./`);
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["nginx", "-g", "daemon off;"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'nginx:stable-alpine';
const imageForBuild = 'node:lts';
await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

43
src/lib/buildPacks/rust.ts Normal file
View File

@@ -0,0 +1,43 @@
import { asyncExecShell } from '$lib/common';
import { buildCacheImageWithCargo, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
import TOML from '@iarna/toml';
const createDockerfile = async (data, image, name): Promise<void> => {
const { workdir, port, applicationId, tag } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/src/app');
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/src/app/target target`);
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/local/cargo /usr/local/cargo`);
Dockerfile.push(`COPY . .`);
Dockerfile.push(`RUN cargo build --release --bin ${name}`);
Dockerfile.push('FROM debian:buster-slim');
Dockerfile.push('WORKDIR /usr/src/app');
Dockerfile.push(
`RUN apt-get update -y && apt-get install -y --no-install-recommends openssl libcurl4 ca-certificates && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/*`
);
Dockerfile.push(`RUN update-ca-certificates`);
Dockerfile.push(
`COPY --from=${applicationId}:${tag}-cache /usr/src/app/target/release/${name} ${name}`
);
Dockerfile.push(`EXPOSE ${port}`);
Dockerfile.push(`CMD ["/usr/src/app/${name}"]`);
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const { workdir } = data;
const image = 'rust:latest';
const imageForBuild = 'rust:latest';
const { stdout: cargoToml } = await asyncExecShell(`cat ${workdir}/Cargo.toml`);
const parsedToml: any = TOML.parse(cargoToml);
const name = parsedToml.package.name;
await buildCacheImageWithCargo(data, imageForBuild);
await createDockerfile(data, image, name);
await buildImage(data);
} catch (error) {
throw error;
}
}

40
src/lib/buildPacks/static.ts Normal file
View File

@@ -0,0 +1,40 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { applicationId, tag, workdir, buildCommand, baseDirectory, publishDirectory, secrets } =
data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/share/nginx/html');
if (secrets.length > 0) {
secrets.forEach((secret) => {
if (secret.isBuildSecret) {
Dockerfile.push(`ARG ${secret.name} ${secret.value}`);
}
});
}
if (buildCommand) {
Dockerfile.push(
`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${publishDirectory} ./`
);
} else {
Dockerfile.push(`COPY ./${baseDirectory || ''} ./`);
}
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["nginx", "-g", "daemon off;"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'nginx:stable-alpine';
const imageForBuild = 'node:lts';
if (data.buildCommand) await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

27
src/lib/buildPacks/svelte.ts Normal file
View File

@@ -0,0 +1,27 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { applicationId, tag, workdir, publishDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/share/nginx/html');
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${publishDirectory} ./`);
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["nginx", "-g", "daemon off;"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'nginx:stable-alpine';
const imageForBuild = 'node:lts';
await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

26
src/lib/buildPacks/vuejs.ts Normal file
View File

@@ -0,0 +1,26 @@
import { buildCacheImageWithNode, buildImage } from '$lib/docker';
import { promises as fs } from 'fs';
const createDockerfile = async (data, image): Promise<void> => {
const { applicationId, tag, workdir, publishDirectory } = data;
const Dockerfile: Array<string> = [];
Dockerfile.push(`FROM ${image}`);
Dockerfile.push('WORKDIR /usr/share/nginx/html');
Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /usr/src/app/${publishDirectory} ./`);
Dockerfile.push(`EXPOSE 80`);
Dockerfile.push('CMD ["nginx", "-g", "daemon off;"]');
await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
};
export default async function (data) {
try {
const image = 'nginx:stable-alpine';
const imageForBuild = 'node:lts';
await buildCacheImageWithNode(data, imageForBuild);
await createDockerfile(data, image);
await buildImage(data);
} catch (error) {
throw error;
}
}

159
src/lib/common.ts
View File

@@ -1,9 +1,150 @@
export function dashify(str: string, options?: any) {
if (typeof str !== 'string') return str;
return str
.trim()
.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
.replace(/^-+|-+$/g, '')
.replace(/-{2,}/g, (m) => (options && options.condense ? '-' : m))
.toLowerCase();
}
import child from 'child_process';
import util from 'util';
import { dev } from '$app/env';
import * as Sentry from '@sentry/node';
import { uniqueNamesGenerator, Config, adjectives, colors, animals } from 'unique-names-generator';
import * as db from '$lib/database';
import { buildLogQueue } from './queues';
import { version as currentVersion } from '../../package.json';
import { dockerInstance } from './docker';
import dayjs from 'dayjs';
import Cookie from 'cookie';
try {
if (!dev) {
Sentry.init({
dsn: process.env['COOLIFY_SENTRY_DSN'],
tracesSampleRate: 0,
environment: 'production'
});
}
} catch (err) {
console.log('Could not initialize Sentry, no worries.');
}
const customConfig: Config = {
dictionaries: [adjectives, colors, animals],
style: 'capital',
separator: ' ',
length: 3
};
export const version = currentVersion;
export const asyncExecShell = util.promisify(child.exec);
export const asyncSleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
export const sentry = Sentry;
export const uniqueName = () => uniqueNamesGenerator(customConfig);
export const saveBuildLog = async ({ line, buildId, applicationId }) => {
const addTimestamp = `${generateTimestamp()} ${line}`;
return await buildLogQueue.add(buildId, { buildId, line: addTimestamp, applicationId });
};
export const isTeamIdTokenAvailable = (request) => {
const cookie = request.headers.cookie
?.split(';')
.map((s) => s.trim())
.find((s) => s.startsWith('teamId='))
?.split('=')[1];
if (!cookie) {
return getTeam(request);
} else {
return cookie;
}
};
export const getTeam = (event) => {
const cookies: Cookies = Cookie.parse(event.request.headers.get('cookie'));
if (cookies.teamId) {
return cookies.teamId;
} else if (event.locals.session.data.teamId) {
return event.locals.session.data.teamId;
}
return null;
};
export const getUserDetails = async (event, isAdminRequired = true) => {
// try {
const teamId = getTeam(event);
const userId = event.locals.session.data.uid || null;
const { permission = 'read' } = await db.prisma.permission.findFirst({
where: { teamId, userId },
select: { permission: true },
rejectOnNotFound: true
});
const payload = {
teamId,
userId,
permission,
status: 200,
body: {
message: 'OK'
}
};
if (isAdminRequired && permission !== 'admin' && permission !== 'owner') {
payload.status = 401;
payload.body.message =
'You do not have permission to do this. \nAsk an admin to modify your permissions.';
}
return payload;
// } catch (err) {
// console.log(err);
// return {
// teamId: null,
// userId: null,
// permission: 'read',
// status: 401,
// body: {
// message: 'You do not have permission to do this. \nAsk an admin to modify your permissions.'
// }
// };
// }
};
export function getEngine(engine) {
return engine === '/var/run/docker.sock' ? 'unix:///var/run/docker.sock' : `tcp://${engine}:2375`;
}
export async function removeContainer(id, engine) {
const host = getEngine(engine);
try {
const { stdout } = await asyncExecShell(
`DOCKER_HOST=${host} docker inspect --format '{{json .State}}' ${id}`
);
if (JSON.parse(stdout).Running) {
await asyncExecShell(`DOCKER_HOST=${host} docker stop -t 0 ${id}`);
await asyncExecShell(`DOCKER_HOST=${host} docker rm ${id}`);
}
} catch (error) {
console.log(error);
throw error;
}
}
export const removeDestinationDocker = async ({ id, engine }) => {
return await removeContainer(id, engine);
};
export const createDirectories = async ({ repository, buildId }) => {
const repodir = `/tmp/build-sources/${repository}/`;
const workdir = `/tmp/build-sources/${repository}/${buildId}`;
await asyncExecShell(`mkdir -p ${workdir}`);
return {
workdir,
repodir
};
};
export function generateTimestamp() {
return `${dayjs().format('HH:mm:ss.SSS')} `;
}
export function getDomain(domain) {
return domain?.replace('https://', '').replace('http://', '');
}

148
src/lib/components/CopyPasswordField.svelte Normal file
View File

@@ -0,0 +1,148 @@
<script>
import { browser } from '$app/env';
import { toast } from '@zerodevx/svelte-toast';
export let value;
let showPassword = false;
export let disabled = false;
export let isPasswordField = false;
export let readonly = false;
export let textarea = false;
export let required = false;
export let pattern = null;
export let id;
export let name;
export let placeholder = '';
let disabledClass = 'bg-coolback disabled:bg-coolblack select-all';
let actionsShow = false;
let isHttps = browser && window.location.protocol === 'https:';
function showActions(value) {
actionsShow = value;
// if (value === false) {
// showPassword = false;
// }
}
function copyToClipboard() {
if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value);
toast.push('Copied to clipboard');
}
}
</script>
<span
class="relative"
on:mouseenter={() => showActions(true)}
on:mouseleave={() => showActions(false)}
>
{#if !isPasswordField || showPassword}
{#if textarea}
<textarea
rows="3"
class={disabledClass}
{placeholder}
type="text"
{id}
{pattern}
{required}
{readonly}
{disabled}
{name}>{value}</textarea
>
{:else}
<input
class={disabledClass}
type="text"
{id}
{name}
{required}
{pattern}
{readonly}
bind:value
{disabled}
{placeholder}
/>
{/if}
{:else}
<input
class={disabledClass}
type="password"
{id}
{name}
{readonly}
{pattern}
{required}
bind:value
{disabled}
{placeholder}
/>
{/if}
{#if actionsShow}
<div class="absolute top-0 right-0 mx-2 cursor-pointer text-warmGray-600 hover:text-white">
<div class="flex space-x-2">
{#if isPasswordField}
<div on:click={() => (showPassword = !showPassword)}>
{#if showPassword}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
{/if}
</div>
{/if}
{#if value && isHttps}
<div on:click={copyToClipboard}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="8" y="8" width="12" height="12" rx="2" />
<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
</svg>
</div>
{/if}
</div>
</div>
{/if}
</span>

17
src/lib/components/DeleteIcon.svelte Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="4" y1="7" x2="20" y2="7" />
<line x1="10" y1="11" x2="10" y2="17" />
<line x1="14" y1="11" x2="14" y2="17" />
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 486 B

6
src/lib/components/Explainer.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script>
export let text;
export let maxWidthClass = 'max-w-[24rem]';
</script>
<div class="py-1 text-xs text-stone-400 {maxWidthClass}">{@html text}</div>

67
src/lib/components/Loading.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
export let fullscreen = true;
export let cover = false;
</script>
{#if fullscreen}
<div
class="main fixed left-0 top-0 flex h-full flex-wrap content-center"
class:bg-coolblack={cover}
>
<span class="loader" />
</div>
{:else}
<div class=" main h-64 py-24 left-0 top-0 flex flex-wrap content-center mx-auto">
<span class="loader" />
</div>
{/if}
<style lang="postcss">
.loader {
width: 8px;
height: 40px;
border-radius: 4px;
display: block;
margin: 20px auto;
position: relative;
background: currentColor;
color: #fff;
box-sizing: border-box;
animation: animloader 0.3s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
width: 8px;
height: 4px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
box-sizing: border-box;
animation: animloader2 0.3s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% {
height: 48px;
}
100% {
height: 4px;
}
}
@keyframes animloader2 {
0% {
height: 4px;
}
100% {
height: 48px;
}
}
</style>

68
src/lib/components/Setting.svelte Normal file
View File

@@ -0,0 +1,68 @@
<script lang="ts">
import Explainer from '$lib/components/Explainer.svelte';
export let setting;
export let title;
export let description;
export let isPadding = true;
export let disabled = false;
// export let disabledReason = '';
</script>
<li class="flex items-center py-4">
<div class="flex w-96 flex-col" class:px-4={isPadding} class:pr-32={!isPadding}>
<p class="text-xs font-bold text-stone-100 md:text-base">{title}</p>
<Explainer text={description} />
</div>
<!-- {#if disabled}
<div class="flex" class:px-4={isPadding} class:pr-32={!isPadding}>
<p class="text-xs font-bold text-stone-400">{disabledReason}</p>
</div>
{:else} -->
<div
type="button"
on:click
aria-pressed="false"
class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
class:opacity-50={disabled}
class:bg-green-600={setting}
class:bg-stone-700={!setting}
>
<span class="sr-only">Use setting</span>
<span
class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
class:translate-x-5={setting}
class:translate-x-0={!setting}
>
<span
class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
class:opacity-0={setting}
class:opacity-100={!setting}
aria-hidden="true"
>
<svg class="h-3 w-3 bg-white 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"
/>
</svg>
</span>
<span
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
aria-hidden="true"
class:opacity-100={setting}
class:opacity-0={!setting}
>
<svg class="h-3 w-3 bg-white 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"
/>
</svg>
</span>
</span>
</div>
<!-- {/if} -->
</li>

33
src/lib/components/common.ts Normal file
View File

@@ -0,0 +1,33 @@
export const asyncSleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
export const dateOptions: DateTimeFormatOptions = {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: false
};
export async function getGithubToken({ apiUrl, application, githubToken }): Promise<void> {
const response = await fetch(
`${apiUrl}/app/installations/${application.gitSource.githubApp.installationId}/access_tokens`,
{
method: 'POST',
headers: {
Authorization: `Bearer ${githubToken}`
}
}
);
if (!response.ok) {
throw new Error('Git Source not configured.');
}
const data = await response.json();
return data.token;
}
export const staticDeployments = ['react', 'vuejs', 'static', 'svelte', 'gatsby', 'php'];
export const notNodeDeployments = ['php', 'docker', 'rust'];
export function getDomain(domain) {
return domain?.replace('https://', '').replace('http://', '');
}

73
src/lib/components/svg/applications/Docker.svelte Normal file
View File

@@ -0,0 +1,73 @@
<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-8 h-16 w-16">
<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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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"
/></g
>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

6
src/lib/components/svg/applications/Gatsby.svelte Normal file
View File

@@ -0,0 +1,6 @@
<svg class="absolute top-0 left-0 -m-4 h-10 w-10" viewBox="0 0 128 128">
<path
fill="#64328B"
d="M64,0C28.7,0,0,28.7,0,64v0c0,35.3,28.7,64,64,64s64-28.7,64-64v0C128,28.7,99.3,0,64,0z M13.2,64L64,114.8 C35.9,114.8,13.2,92.1,13.2,64z M75.4,113.5l-60.9-61C19.7,30,39.9,13.2,64,13.2c16.6,0,31.3,7.9,40.5,20.2l-7.5,7.2 C89.7,30.2,77.7,23.5,64,23.5c-17.6,0-32.5,11.2-38.1,26.8C33.1,57,75.4,98.8,78.1,102c12.7-4.7,22.3-15.5,25.4-28.9H81.9v-9.4 l33,0.2C114.8,88.2,98,108.4,75.4,113.5z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 494 B

6
src/lib/components/svg/applications/Nestjs.svelte Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

5
src/lib/components/svg/applications/Nextjs.svelte Normal file
View File

@@ -0,0 +1,5 @@
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 fill-current text-blue-500" viewBox="0 0 128 128">
<path
d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

14
src/lib/components/svg/applications/Nodejs.svelte Normal file
View File

@@ -0,0 +1,14 @@
<svg
class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="node-js"
role="img"
viewBox="0 0 448 512"
><path
fill="currentColor"
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"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

20
src/lib/components/svg/applications/Nuxtjs.svelte Normal file
View File

@@ -0,0 +1,20 @@
<svg
class="absolute top-0 left-0 -m-4 h-10 w-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 400"
>
<g fill-rule="nonzero" transform="translate(0 50)" fill="none">
<path
d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z"
fill="#00C58E"
/>
<path
d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z"
fill="#FFF"
/>
<path
d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z"
fill="#108775"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

6
src/lib/components/svg/applications/PHP.svelte Normal file
View File

@@ -0,0 +1,6 @@
<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-6 h-14 w-14 text-white">
<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"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

50
src/lib/components/svg/applications/Python.svelte Normal file
View File

@@ -0,0 +1,50 @@
<svg class="absolute top-0 left-0 -m-6 h-14 w-14" viewBox="0 0 128 128">
<linearGradient
id="a"
gradientUnits="userSpaceOnUse"
x1="70.252"
y1="1237.476"
x2="170.659"
y2="1151.089"
gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
><stop offset="0" stop-color="#5A9FD4" /><stop
offset="1"
stop-color="#306998"
/></linearGradient
><path
fill="url(#a)"
d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137h-33.961c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491v-11.282c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548v-23.513c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zm-13.354 7.569c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z"
/><linearGradient
id="b"
gradientUnits="userSpaceOnUse"
x1="209.474"
y1="1098.811"
x2="173.62"
y2="1149.537"
gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
><stop offset="0" stop-color="#FFD43B" /><stop
offset="1"
stop-color="#FFE873"
/></linearGradient
><path
fill="url(#b)"
d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655h-24.665c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412h-24.664v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zm-13.873 59.547c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z"
/><radialGradient
id="c"
cx="1825.678"
cy="444.45"
r="26.743"
gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)"
gradientUnits="userSpaceOnUse"
><stop offset="0" stop-color="#B8B8B8" stop-opacity=".498" /><stop
offset="1"
stop-color="#7F7F7F"
stop-opacity="0"
/></radialGradient
><path
opacity=".444"
fill="url(#c)"
enable-background="new"
d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

7
src/lib/components/svg/applications/React.svelte Normal file
View File

@@ -0,0 +1,7 @@
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-blue-500" viewBox="0 0 128 128">
<g fill="#61DAFB"
><circle cx="64" cy="64" r="11.4" /><path
d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"
/></g
>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

8
src/lib/components/svg/applications/Rust.svelte Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

28
src/lib/components/svg/applications/Static.svelte Normal file
View File

@@ -0,0 +1,28 @@
<svg
class="absolute top-0 left-0 -m-4 h-10 w-10 text-white"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><g clip-path="url(#HTML5_Clip0_4)"
><path
d="M30.216 0L27.6454 28.7967L16.0907 32L4.56783 28.8012L2 0H30.216Z"
fill="#E44D26"
/><path
d="M16.108 29.5515L25.4447 26.963L27.6415 2.35497H16.108V29.5515Z"
fill="#F16529"
/><path
d="M11.1109 9.4197H16.108V5.88731H7.25053L7.33509 6.83499L8.20327 16.5692H16.108V13.0369H11.4338L11.1109 9.4197Z"
fill="#EBEBEB"
/><path
d="M11.907 18.3354H8.36111L8.856 23.8818L16.0917 25.8904L16.108 25.8859V22.2108L16.0925 22.2149L12.1585 21.1527L11.907 18.3354Z"
fill="#EBEBEB"
/><path
d="M16.0958 16.5692H20.4455L20.0354 21.1504L16.0958 22.2138V25.8887L23.3373 23.8817L23.3904 23.285L24.2205 13.9855L24.3067 13.0369H16.0958V16.5692Z"
fill="white"
/><path
d="M16.0958 9.41105V9.41969H24.6281L24.6989 8.62572L24.8599 6.83499L24.9444 5.88731H16.0958V9.41105Z"
fill="white"
/></g
><defs><clipPath id="HTML5_Clip0_4"><rect width="32" height="32" fill="white" /></clipPath></defs
></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

21
src/lib/components/svg/applications/Svelte.svelte Normal file
View File

@@ -0,0 +1,21 @@
<svg
class="absolute top-0 left-0 -m-4 h-10 w-10"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 98.1 118"
style="enable-background:new 0 0 98.1 118;"
xml:space="preserve"
>
<path
fill="#FF3E00"
d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3 c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1 c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"
/>
<path
fill="#FFFFFF"
d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1 c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72 c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7 c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5 c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1 c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1 c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5 c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

12
src/lib/components/svg/applications/Vuejs.svelte Normal file
View File

@@ -0,0 +1,12 @@
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500" viewBox="0 0 128 128">
<path
d="m-2.3125e-8 8.9337 49.854 0.1586 14.167 24.47 14.432-24.47 49.547-0.1577-63.834 110.14zm126.98 0.6374-24.36 0.0207-38.476 66.052-38.453-66.052-24.749-0.0194 63.211 107.89zm-25.149-0.008-22.745 0.16758l-15.053 24.647-14.817-24.647-22.794-0.1679 37.731 64.476zM25.997 9.3929l23.002 0.0087M25.997 9.3929l23.002 0.0087"
fill="none"
/><path
d="m25.997 9.3929 23.002 0.0087l15.036 24.958 14.983-24.956 22.982-0.0057-37.85 65.655z"
fill="#35495e"
/><path
d="m0.91068 9.5686 25.066-0.1711 38.151 65.658 37.852-65.654 25.11 0.0263-62.966 108.06z"
fill="#41b883"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 676 B

13
src/lib/components/svg/databases/Clickhouse.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
viewBox="0 0 9 8"
xmlns="http://www.w3.org/2000/svg"
><path d="m0 7h1v1h-1z" fill="#f00" /><path
d="m0 0h1v7h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 3.25h1v1.5h-1z"
fill="#fc0"
/></svg
>

18
src/lib/components/svg/databases/CouchDB.svelte Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={isAbsolute
? 'absolute top-0 left-0 -m-5 h-10 w-10 fill-current text-red-500'
: 'mx-auto w-8 h-8 text-red-500'}
id="CouchDB"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128"
><g id="original"
><path
d="M101.4,77.2c0,5-2.7,7.5-7.6,7.7H33.9c-4.9,0-7.6-2.5-7.6-7.7,0-5,2.7-7.5,7.6-7.7H94.1C99,69.7,101.4,72.2,101.4,77.2ZM94.1,88.7H33.9c-4.9,0-7.6,2.4-7.6,7.7,0,5,2.7,7.4,7.6,7.7H94.1c4.9,0,7.6-2.5,7.6-7.7C101.4,91.1,99,88.7,94.1,88.7Zm18.6-42.1h0c-4.9,0-7.6,2.5-7.6,7.4V96.1c0,5,2.7,7.5,7.6,7.7h0c7.4-.2,11.3-7.7,11.3-22.9V62C124,51.8,120.1,46.8,112.7,46.6Zm-97.4,0h0C7.9,46.8,4,51.8,4,62V80.9c0,15.2,3.9,22.7,11.3,22.9h0c4.9,0,7.6-2.4,7.6-7.7V54.3C22.7,49.3,20.2,46.8,15.3,46.6Zm97.4-3.8c0-12.7-6.6-18.7-18.6-18.9H33.9c-12.2.2-18.6,6.5-18.6,18.9h0c7.4,0,11.3,4,11.3,11.5s3.9,11.4,11.3,11.4H90.4c7.3,0,11.3-3.9,11.3-11.4-.3-7.7,3.9-11.2,11-11.5Z"
/></g
></svg
>

33
src/lib/components/svg/databases/MongoDB.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
data-name="Layer 1"
viewBox="0 0 216.56 448.5"
><defs
><style>
.cls-1 {
fill: #10aa50;
}
.cls-2 {
fill: #b8c4c2;
}
.cls-3 {
fill: #12924f;
}
</style></defs
><path
class="cls-1"
d="M202.8,179.68c-23-101.47-71-128.49-83.18-147.59C113,21.7,106.25,5.91,106.25,5.91c-.66,9-1.83,14.7-9.51,21.54C81.36,41.16,16,94.42,10.51,209.72c-5.12,107.5,79,173.8,90.18,180.65,8.54,4.2,19,.08,24-3.77,40.54-27.84,96-102.07,78.06-206.92"
/><path
class="cls-2"
d="M109.73,333.11c-2.11,26.62-3.63,42.11-9,57.29,0,0,3.54,25.33,6,52.17l8.77,0a488.62,488.62,0,0,1,9.57-56.2C113.71,380.8,110.16,356.46,109.73,333.11Z"
/><path
class="cls-3"
d="M125.06,386.39h0c-11.48-5.3-14.8-30.13-15.31-53.28A1090.8,1090.8,0,0,0,112.2,218.4c-.6-20.07.3-185.92-4.94-210.2,2.12,4.75,7.24,15.91,12.36,23.88,12.23,19.11,60.19,46.13,83.17,147.61C220.7,284.27,165.57,358.37,125.06,386.39Z"
/>
</svg>

27
src/components/Database/SVGs/Mysql.svelte → src/lib/components/svg/databases/MySQL.svelte
View File

@@ -1,16 +1,17 @@
<script>
export let customClass;
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={customClass}
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 25.6 25.6"
><path
d="M179.076 94.886c-3.568-.1-6.336.268-8.656 1.25-.668.27-1.74.27-1.828 1.116.357.355.4.936.713 1.428.535.893 1.473 2.096 2.32 2.72l2.855 2.053c1.74 1.07 3.703 1.695 5.398 2.766.982.625 1.963 1.428 2.945 2.098.5.357.803.938 1.428 1.16v-.135c-.312-.4-.402-.98-.713-1.428l-1.34-1.293c-1.293-1.74-2.9-3.258-4.64-4.506-1.428-.982-4.55-2.32-5.13-3.97l-.088-.1c.98-.1 2.14-.447 3.078-.715 1.518-.4 2.9-.312 4.46-.713l2.143-.625v-.4c-.803-.803-1.383-1.874-2.23-2.632-2.275-1.963-4.775-3.882-7.363-5.488-1.383-.892-3.168-1.473-4.64-2.23-.537-.268-1.428-.402-1.74-.848-.805-.98-1.25-2.275-1.83-3.436l-3.658-7.763c-.803-1.74-1.295-3.48-2.275-5.086-4.596-7.585-9.594-12.18-17.268-16.687-1.65-.937-3.613-1.34-5.7-1.83l-3.346-.18c-.715-.312-1.428-1.16-2.053-1.562-2.543-1.606-9.102-5.086-10.977-.5-1.205 2.9 1.785 5.755 2.8 7.228.76 1.026 1.74 2.186 2.277 3.346.3.758.4 1.562.713 2.365.713 1.963 1.383 4.15 2.32 5.98.5.937 1.025 1.92 1.65 2.767.357.5.982.714 1.115 1.517-.625.893-.668 2.23-1.025 3.347-1.607 5.042-.982 11.288 1.293 15 .715 1.115 2.4 3.57 4.686 2.632 2.008-.803 1.56-3.346 2.14-5.577.135-.535.045-.892.312-1.25v.1l1.83 3.703c1.383 2.186 3.793 4.462 5.8 5.98 1.07.803 1.918 2.187 3.256 2.677v-.135h-.088c-.268-.4-.67-.58-1.027-.892-.803-.803-1.695-1.785-2.32-2.677-1.873-2.498-3.523-5.265-4.996-8.12-.715-1.383-1.34-2.9-1.918-4.283-.27-.536-.27-1.34-.715-1.606-.67.98-1.65 1.83-2.143 3.034-.848 1.918-.936 4.283-1.248 6.737-.18.045-.1 0-.18.1-1.426-.356-1.918-1.83-2.453-3.078-1.338-3.168-1.562-8.254-.402-11.913.312-.937 1.652-3.882 1.117-4.774-.27-.848-1.16-1.338-1.652-2.008-.58-.848-1.203-1.918-1.605-2.855-1.07-2.5-1.605-5.265-2.766-7.764-.537-1.16-1.473-2.365-2.232-3.435-.848-1.205-1.783-2.053-2.453-3.48-.223-.5-.535-1.294-.178-1.83.088-.357.268-.5.623-.58.58-.5 2.232.134 2.812.4 1.65.67 3.033 1.294 4.416 2.23.625.446 1.295 1.294 2.098 1.518h.938c1.428.312 3.033.1 4.37.5 2.365.76 4.506 1.874 6.426 3.08 5.844 3.703 10.664 8.968 13.92 15.26.535 1.026.758 1.963 1.25 3.034.938 2.187 2.098 4.417 3.033 6.56.938 2.097 1.83 4.24 3.168 5.98.67.937 3.346 1.427 4.55 1.918.893.4 2.275.76 3.08 1.25 1.516.937 3.033 2.008 4.46 3.034.713.534 2.945 1.65 3.078 2.54zm-45.5-38.772a7.09 7.09 0 0 0-1.828.223v.1h.088c.357.714.982 1.205 1.428 1.83l1.027 2.142.088-.1c.625-.446.938-1.16.938-2.23-.268-.312-.312-.625-.535-.937-.268-.446-.848-.67-1.206-1.026z"
transform="matrix(.390229 0 0 .38781 -46.300037 -16.856717)"
fill-rule="evenodd"
fill="#00678c"></path></svg
>
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 25.6 25.6"
><path
d="M179.076 94.886c-3.568-.1-6.336.268-8.656 1.25-.668.27-1.74.27-1.828 1.116.357.355.4.936.713 1.428.535.893 1.473 2.096 2.32 2.72l2.855 2.053c1.74 1.07 3.703 1.695 5.398 2.766.982.625 1.963 1.428 2.945 2.098.5.357.803.938 1.428 1.16v-.135c-.312-.4-.402-.98-.713-1.428l-1.34-1.293c-1.293-1.74-2.9-3.258-4.64-4.506-1.428-.982-4.55-2.32-5.13-3.97l-.088-.1c.98-.1 2.14-.447 3.078-.715 1.518-.4 2.9-.312 4.46-.713l2.143-.625v-.4c-.803-.803-1.383-1.874-2.23-2.632-2.275-1.963-4.775-3.882-7.363-5.488-1.383-.892-3.168-1.473-4.64-2.23-.537-.268-1.428-.402-1.74-.848-.805-.98-1.25-2.275-1.83-3.436l-3.658-7.763c-.803-1.74-1.295-3.48-2.275-5.086-4.596-7.585-9.594-12.18-17.268-16.687-1.65-.937-3.613-1.34-5.7-1.83l-3.346-.18c-.715-.312-1.428-1.16-2.053-1.562-2.543-1.606-9.102-5.086-10.977-.5-1.205 2.9 1.785 5.755 2.8 7.228.76 1.026 1.74 2.186 2.277 3.346.3.758.4 1.562.713 2.365.713 1.963 1.383 4.15 2.32 5.98.5.937 1.025 1.92 1.65 2.767.357.5.982.714 1.115 1.517-.625.893-.668 2.23-1.025 3.347-1.607 5.042-.982 11.288 1.293 15 .715 1.115 2.4 3.57 4.686 2.632 2.008-.803 1.56-3.346 2.14-5.577.135-.535.045-.892.312-1.25v.1l1.83 3.703c1.383 2.186 3.793 4.462 5.8 5.98 1.07.803 1.918 2.187 3.256 2.677v-.135h-.088c-.268-.4-.67-.58-1.027-.892-.803-.803-1.695-1.785-2.32-2.677-1.873-2.498-3.523-5.265-4.996-8.12-.715-1.383-1.34-2.9-1.918-4.283-.27-.536-.27-1.34-.715-1.606-.67.98-1.65 1.83-2.143 3.034-.848 1.918-.936 4.283-1.248 6.737-.18.045-.1 0-.18.1-1.426-.356-1.918-1.83-2.453-3.078-1.338-3.168-1.562-8.254-.402-11.913.312-.937 1.652-3.882 1.117-4.774-.27-.848-1.16-1.338-1.652-2.008-.58-.848-1.203-1.918-1.605-2.855-1.07-2.5-1.605-5.265-2.766-7.764-.537-1.16-1.473-2.365-2.232-3.435-.848-1.205-1.783-2.053-2.453-3.48-.223-.5-.535-1.294-.178-1.83.088-.357.268-.5.623-.58.58-.5 2.232.134 2.812.4 1.65.67 3.033 1.294 4.416 2.23.625.446 1.295 1.294 2.098 1.518h.938c1.428.312 3.033.1 4.37.5 2.365.76 4.506 1.874 6.426 3.08 5.844 3.703 10.664 8.968 13.92 15.26.535 1.026.758 1.963 1.25 3.034.938 2.187 2.098 4.417 3.033 6.56.938 2.097 1.83 4.24 3.168 5.98.67.937 3.346 1.427 4.55 1.918.893.4 2.275.76 3.08 1.25 1.516.937 3.033 2.008 4.46 3.034.713.534 2.945 1.65 3.078 2.54zm-45.5-38.772a7.09 7.09 0 0 0-1.828.223v.1h.088c.357.714.982 1.205 1.428 1.83l1.027 2.142.088-.1c.625-.446.938-1.16.938-2.23-.268-.312-.312-.625-.535-.937-.268-.446-.848-.67-1.206-1.026z"
transform="matrix(.390229 0 0 .38781 -46.300037 -16.856717)"
fill-rule="evenodd"
fill="#00678c"
/></svg
>

56
src/lib/components/svg/databases/PostgreSQL.svelte Normal file
View File

@@ -0,0 +1,56 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 432.071 445.383"
xml:space="preserve"
>
<g id="orginal" style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;" />
<g
id="Layer_x0020_3"
style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
>
<path
style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;"
d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322 C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31 c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224 l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"
/>
<path
style="fill:#336791;stroke:none;"
d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902 c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416 c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555 c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"
/>
<path
d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"
/>
<path
d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"
/>
<path
d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"
/>
<path
style="stroke-linejoin:bevel;"
d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338 c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"
/>
<path
d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"
/>
<path
d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"
/>
<path
style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;"
d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"
/>
<path
style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;"
d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"
/>
<path
d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"
/>
<path style="stroke-width:3;" d="M0,60.232" />
</g>
</svg>

7
src/components/Database/SVGs/Redis.svelte → src/lib/components/svg/databases/Redis.svelte
View File

@@ -1,10 +1,9 @@
<script>
export let customClass;
<script lang="ts">
export let isAbsolute = false;
</script>
<svg
class={customClass}
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-10 w-10' : 'mx-auto w-8 h-8'}
height="64"
viewBox="0 0 32 32"
width="64"

9
src/lib/components/svg/services/MinIO.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<img
alt="minio logo"
class={isAbsolute ? 'w-7 absolute top-0 left-0 -m-3 -mt-5' : 'w-4 mx-auto'}
src="https://cdn.coollabs.io/assets/coolify/services/minio/MINIO_Bird.png"
/>

9
src/lib/components/svg/services/NocoDB.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<img
alt="nocodb logo"
class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
src="https://cdn.coollabs.io/assets/coolify/services/nocodb/nocodb.png"
/>

9
src/lib/components/svg/services/PlausibleAnalytics.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
export let isAbsolute = false;
</script>
<img
alt="plausible logo"
class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-6 mx-auto'}
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
/>

Some files were not shown because too many files have changed in this diff Show More