Cycle 3 Deployment

Merge pull request #269 from coollabsio/next

Author: ShadowArcanist

.github/workflows/production-build.yml

@@ -13,11 +13,12 @@ jobs:
   build:
     runs-on: [self-hosted, arm64]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
         with:
+          version: latest
           buildkitd-flags: --debug
 
       - uses: actions/cache@v4.2.0

.github/workflows/staging-build.yml

@@ -13,11 +13,12 @@ jobs:
   build:
     runs-on: [self-hosted, arm64]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
         with:
+          version: latest
           buildkitd-flags: --debug
 
       - uses: actions/cache@v4.2.0

Dockerfile

@@ -1,6 +1,7 @@
 # Stage 1: Build Stage (oven/bun:1.1.44-alpine, ARM64)
 FROM oven/bun:1.1.44-alpine AS builder
 
+ENV VITE_ANALYTICS_DOMAIN=next.coolify.io/docs
 RUN apk add --no-cache nodejs npm
 
 # Set working directory and copy necessary files

docs/.vitepress/config.mts

@@ -9,7 +9,8 @@ import { bundledLanguages } from 'shiki'
 import { join, dirname } from 'node:path'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
-
+import { loadEnv } from 'vitepress'
+const env = loadEnv('', process.cwd())
 const sidebar = useSidebar({ spec, collapsible: true })
 
 // Add SSH to bundled languages
@@ -19,6 +20,8 @@ bundledLanguages['ssh'] = {
   path: join(dirname(fileURLToPath(import.meta.url)), '../../node_modules/shiki/languages/ssh-config.tmLanguage.json')
 }
 
+console.log(env)
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   lang: 'en-US',
@@ -48,7 +51,7 @@ export default defineConfig({
     ['meta', { property: 'twitter:image', content: 'https://coolcdn.b-cdn.net/assets/coolify/og-image-docs.png' }],
     ['link', { rel: 'icon', href: '/docs/coolify-logo-transparent.png' }],
     ['link', { rel: 'icon', type: 'image/x-icon', href: '/docs/public/favicon.ico' }],
-    ['script', { defer: 'true', src: 'https://analytics.coollabs.io/js/script.tagged-events.js', 'data-domain': 'coolify.io/docs' }],
+    ['script', { defer: 'true', src: 'https://analytics.coollabs.io/js/script.tagged-events.js', 'data-domain': env.VITE_ANALYTICS_DOMAIN ?? 'coolify.io/docs' }],
     ['script', { async: 'true', src: '/docs/trieve-user-script.js' }],
   ],
   themeConfig: {
@@ -91,24 +94,25 @@ export default defineConfig({
         collapsed: false,
         items: [
           { text: 'Introduction', link: '/get-started/introduction' },
-          { 
-            text: 'Installation', 
+          {
+            text: 'Installation',
             link: '/get-started/installation',
-            collapsed: false, 
+            collapsed: false,
             items: [
               { text: 'Upgrade', link: '/get-started/upgrade' },
               { text: 'Downgrade', link: '/get-started/downgrade' },
               { text: 'Uninstallation', link: '/get-started/uninstallation' },
             ]
           },
           { text: 'Usage', link: '/get-started/usage' },
-          { text: 'Concepts', link: '/get-started/concepts',
+          {
+            text: 'Concepts', link: '/get-started/concepts',
             collapsed: true,
             items: [
               { text: 'Screenshots', link: '/get-started/screenshots' },
               { text: 'Videos', link: '/get-started/videos' },
             ]
-           },
+          },
           { text: 'Team', link: '/get-started/team' },
           { text: 'Support', link: '/get-started/support' },
           { text: 'Sponsors', link: '/get-started/sponsors' },
@@ -124,6 +128,25 @@ export default defineConfig({
 
         ],
       },
+      {
+        text: 'Builds',
+        collapsed: true,
+        items: [
+          { text: 'Introduction', link: '/builds/introduction' },
+          {
+            text: 'Build Packs',
+            collapsed: true,
+            items: [
+              { text: 'Overview', link: '/builds/packs/overview' },
+              { text: 'Static', link: '/builds/packs/static' },
+              { text: 'Nixpacks', link: '/builds/packs/nixpacks' },
+              { text: 'Dockerfile', link: '/builds/packs/dockerfile' },
+              { text: 'Docker Compose', link: '/builds/packs/docker-compose' },
+            ]
+          },
+          { text: 'Build Servers', link: '/builds/servers' },
+        ],
+      },
       {
         text: 'Applications',
         collapsed: true,
@@ -601,7 +624,7 @@ export default defineConfig({
     plugins: [
       yaml as any,
       llmstxt({
-        ignoreFiles: [    
+        ignoreFiles: [
           '/docs/api-reference/api/**/*',
           '**/api-reference/api/**/*'
         ],

docs/.vitepress/theme/style.css

@@ -168,10 +168,11 @@
   --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
 
   /* Enhanced code highlighting, especially for Safari */
-  --vp-code-color: #f8f8f8;
-  --vp-code-link-color: #42b883;
-  --vp-code-link-hover-color: #35495e;
-  --vp-code-bg: #292d3e;  /* Darker background for better contrast */
+  --vp-code-color: #24292f;
+  --vp-code-link-color: #0969da;
+  --vp-code-link-hover-color: #0969da;
+  --vp-code-bg: #f6f8fa !important;
+  --vp-c-text-dark-1: #24292f;
 }
 
 /**
@@ -242,13 +243,13 @@
   --vp-c-bg: #0D0B0F;
   --vp-c-bg-alt: #0D0B0F;
   --vp-c-bg-elv: #202127;
-  --vp-c-bg-soft: #202127;
+  --vp-c-bg-soft: #161b22 !important;
   --vp-c-text-1: #F2F2F2;
   --vp-c-text-2: #9A989D;
   --vp-c-text-3: #9A989D;
 
   /* Lighter code background in dark mode */
-  --vp-code-bg: #1a1a1f;  /* Darker background in dark mode */
+  --vp-code-bg: #161b22 !important;  /* Darker background in dark mode */
 
   --vp-custom-block-tip-border: #0C4C69;
   --vp-custom-block-tip-text: #A7D2E8;
@@ -311,7 +312,7 @@
 
   /* Enhanced code highlighting, especially for Safari */
   --vp-code-color: #F2F2F2;
-  --vp-code-bg: #1a1a1f;  /* Darker background in dark mode */
+  --vp-code-bg: #161b22 !important;  /* Darker background in dark mode */
 }
 
 /* Container padding override */
@@ -391,7 +392,7 @@ code:hover {
 .vp-doc div[class*='language-'] {
   position: relative;
   margin: 0;
-  background-color: var(--vp-c-bg-soft);
+  background-color: var(--vp-code-bg);
   border-radius: 10px;
   overflow-x: visible;
 }
@@ -574,6 +575,7 @@ code:hover {
 
 /* Reset webkit styles for code blocks */
 .vp-doc [class*='language-'] code {
+  
   -webkit-text-fill-color: initial !important;
 }
 
@@ -683,16 +685,16 @@ code:hover {
 
 /* Markdown Labels like NODE_ENV */
 :not(pre) > code {
-  background-color: rgba(40, 44, 52, 0.95) !important;
-  color: #f0f0f0 !important;
-  -webkit-text-fill-color: #f0f0f0 !important;
-  font-weight: 500 !important;
-  padding: 4px 8px !important;
+  background-color: rgba(40, 44, 52, 0) !important;
+  color: rgba(185, 185, 185, 0.795)  !important;
+  -webkit-text-fill-color: rgba(95, 95, 95, 0.795) !important;
+  font-weight: 600 !important;
+  padding: 4px 4px !important;
   border-radius: 6px !important;
   font-size: 0.7em !important;
-  border: 1px solid rgba(255, 255, 255, 0.15) !important;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 
-              0 0 2px rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(185, 185, 185, 0.795) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 
+              0 0 1px rgba(255, 255, 255, 0.05) !important;
   margin: 0 3px !important;
   /* text-transform: uppercase !important; */
   letter-spacing: 0.02em !important;
@@ -701,7 +703,7 @@ code:hover {
 
 /* Dark mode adjustments */
 .dark :not(pre) > code {
-  background-color: rgba(50, 50, 60, 0.95) !important;
+  background-color: rgb(50, 50, 60) !important;
   color: #ffffff !important;
   -webkit-text-fill-color: #ffffff !important;
   border-color: rgba(255, 255, 255, 0.2) !important;
@@ -720,47 +722,25 @@ code:hover {
   }
 }
 
-/* Explicitly prevent hover color change for ALL code blocks with higher specificity */
-.vp-doc [class*='language-'] code:hover,
-div[class*='language-'] code:hover,
-pre[class*='language-'] code:hover {
-  background-color: transparent !important;
+/* Disable ALL hover effects for code blocks */
+.vp-doc [class*='language-'] *:hover,
+.vp-doc div[class*='language-'] *:hover,
+.vp-doc pre[class*='language-'] *:hover,
+.shiki *:hover,
+.vp-code *:hover,
+.vp-doc code *:hover,
+div[class*='language-'] *:hover,
+pre[class*='language-'] *:hover {
   color: inherit !important;
   -webkit-text-fill-color: inherit !important;
-  transform: none !important;
-  box-shadow: none !important;
-  border-color: transparent !important;
-}
-
-/* Additional specific prevention with maximum specificity for shell/bash/ssh code blocks */
-.vp-doc .language-bash code:hover,
-.vp-doc .language-ssh code:hover,
-.vp-doc .language-sh code:hover,
-div.language-bash code:hover,
-div.language-ssh code:hover,
-div.language-sh code:hover,
-pre.language-bash code:hover,
-pre.language-ssh code:hover,
-pre.language-sh code:hover,
-.language-sh code:hover,
-.language-sh .line:hover,
-.language-sh span:hover {
   background-color: transparent !important;
-  color: inherit !important;
-  -webkit-text-fill-color: inherit !important;
   transform: none !important;
   box-shadow: none !important;
   border-color: transparent !important;
+  text-decoration: none !important;
 }
 
-/* Override any other hover effects for code blocks */
-.vp-doc pre *:hover,
-.shiki *:hover,
-.vp-code *:hover {
-  background-color: inherit !important;
-  color: inherit !important;
-  -webkit-text-fill-color: inherit !important;
-}
+/* Remove all the other hover prevention blocks since they're now consolidated above */
 
 @media (prefers-color-scheme: dark) {
   p code:hover, li code:hover,
@@ -776,4 +756,15 @@ pre.language-sh code:hover,
     border-radius: 8px;
     overflow-x: auto;
   }
+}
+
+/* Override Shiki theme colors for light mode */
+.shiki.github-light {
+  --shiki-light-keyword: #cf222e !important;     /* red */
+  --shiki-light-string: #0a3069 !important;      /* dark blue for strings */
+  --shiki-light-function: #8250df !important;    /* purple */
+  --shiki-light-number: #0550ae !important;      /* blue */
+  --shiki-light-boolean: #0550ae !important;     /* blue */
+  --shiki-light-comment: #6e7781 !important;     /* gray */
+  --shiki-light-property: #953800 !important;    /* brown */
 }

docs/builds/introduction.md

@@ -0,0 +1,42 @@
+---
+title: Introduction to Builds
+---
+
+<ZoomableImage src="/docs/images/builds/introduction/builds-banner.webp" />
+
+<br />
+
+Coolify deploys all applications as Docker containers. This means your app, database, or website runs inside a container. 
+
+No matter what you deploy or which build pack you use, it is always run as a Docker container.
+
+
+## How Docker Containers Work
+- **Docker Image:** To run a container, you need a Docker image.  
+- **Dockerfile:** The image is built using a Dockerfile, just a file with step-by-step instructions to build the docker image.
+- **Build Process:**  If you're building your own application, you'll need to create your docker image using a Dockerfile. 
+    - Coolify helps with this build process by letting you use different build packs. A commonly used build pack is [Nixpacks ↗](https://nixpacks.com?utm_source=coolify.io), which automatically prepares a Dockerfile and builds the docker image for you.
+
+
+## Build Packs in Coolify
+Coolify offers build packs like [Nixpack ↗](https://nixpacks.com?utm_source=coolify.io) and **Static Build Pack** that automatically create your Docker image. 
+
+If you need more control over the process, you can write your own Dockerfile and Docker Compose file. In that case, Coolify will use your file to build the image on the server and deploy it as a container.
+
+
+## Using Pre-built Images
+If you already have a Docker image stored in a registry (for example, [Docker Hub ↗](https://hub.docker.com/?utm_source=coolify.io) or [GitHub Container Registry ↗](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry?utm_source=coolify.io)), you can use that image directly in Coolify. This means you do not have to rebuild the image on your server.
+
+
+## Managing Build Resources  
+Building Docker images can consume a lot of resources on your server, potentially causing it to crash. 
+
+To reduce the load on your main server, Coolify allows you to connect additional servers to manage the build process.  
+
+You can set up a separate [build server ↗](/builds/servers) to handle the builds, or use external tools like [GitHub Actions ↗](https://github.com/features/actions?utm_source=coolify.io) to build your images and push them to any container registry. 
+
+Once the images are pushed, you can easily use them on Coolify.
+
+
+## What's Next?
+Check the pages in the sidebar to learn more about build packs, build commands, and build servers.