Feat: Right click to deploy

CLAUDE.md

@@ -0,0 +1,88 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the official documentation repository for Coolify, built with VitePress. The documentation covers installation, usage, troubleshooting, and API reference for Coolify - an open-source self-hostable alternative to Heroku/Netlify/Vercel.
+
+## Development Commands
+
+**Package Manager**: The project uses pnpm as specified in package.json, but contributors are encouraged to use bun for local development as mentioned in the README.
+
+### Core Commands
+```bash
+# Install dependencies
+bun install  # or npm install
+
+# Start development server
+bun run dev  # or npm run dev
+# Serves on localhost:5173/docs/
+
+# Build for production
+bun run build  # or npm run build
+
+# Preview production build
+bun run preview  # or npm run preview
+
+# Convert OpenAPI YAML to JSON
+bun run transform-openapi  # or npm run transform-openapi
+```
+
+### VitePress Commands
+- `vitepress dev docs` - Start development server
+- `vitepress build docs` - Build documentation
+- `vitepress preview docs` - Preview built documentation
+
+## Architecture & Structure
+
+### Content Organization
+- **docs/**: Main documentation content directory
+  - **get-started/**: Installation, introduction, concepts
+  - **applications/**: Framework-specific guides (Django, Laravel, Next.js, etc.)
+  - **services/**: Individual service documentation (200+ services)
+  - **databases/**: Database-specific guides
+  - **knowledge-base/**: Advanced topics, how-tos, troubleshooting
+  - **api-reference/**: Auto-generated API documentation
+  - **troubleshoot/**: Common issues and solutions
+
+### Technical Stack
+- **VitePress 1.6.3**: Static site generator
+- **Vue 3.5.13**: Component framework
+- **TailwindCSS 3.2.4**: Styling
+- **TypeScript**: Type checking via tsx
+- **OpenAPI Integration**: Auto-generated API docs from openapi.yml
+
+### Key Configuration Files
+- **docs/.vitepress/config.mts**: Main VitePress configuration
+  - Sidebar structure with 200+ service pages
+  - Custom theme components and aliases
+  - OpenAPI integration via vitepress-openapi
+  - Markdown plugins (tabs, containers, group icons)
+- **package.json**: Dependencies and npm scripts
+- **tailwind.config.js**: TailwindCSS configuration
+- **scripts/convert-openapi.ts**: YAML to JSON converter for OpenAPI spec
+
+### Custom Components & Plugins
+- **ZoomableImage**: For documentation images (all images must be .webp format in docs/public/)
+- **Custom VitePress theme**: Overrides default components (VPNavBar, VPSidebar, etc.)
+- **vitepress-plugin-llms**: LLM integration
+- **vitepress-plugin-tabs**: Tabbed content
+- **vitepress-plugin-group-icons**: Code group icons
+- **vitepress-openapi**: API documentation generation
+
+### Contribution Workflow
+- **Main branch**: Production
+- **Next branch**: Development branch for contributions
+- **Pull requests**: Must target the `next` branch, not `main`
+- **Images**: Must be .webp format, stored in docs/public/
+- **Content**: Use ZoomableImage component for images
+- **Package managers**: Bun preferred for development, avoid committing lockfiles from other managers
+
+### Development Notes
+- The documentation uses a complex sidebar structure with 400+ pages
+- Custom markdown containers (success blocks, etc.)
+- SSH syntax highlighting support via custom Shiki configuration
+- Carbon Ads integration
+- Analytics via Plausible
+- Custom OpenAPI spec processing from YAML to JSON

docs/.vitepress/config.mts

@@ -21,6 +21,15 @@ bundledLanguages['ssh'] = {
   path: join(dirname(fileURLToPath(import.meta.url)), '../../node_modules/shiki/languages/ssh-config.tmLanguage.json')
 }
 
+const serviceUrl = 'https://raw.githubusercontent.com/coollabsio/coolify/v4.x/templates/service-templates.json'
+const serviceData = await fetch(serviceUrl).then(res => res.json())
+const services = Object.keys(serviceData).map((key: string) => {
+  return {
+    text: key,
+    link: `/services/${key.toLowerCase().replace(/ /g, '-')}`
+  }
+})
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   lang: 'en-US',
@@ -61,7 +70,6 @@ export default defineConfig({
     },
     logo: '/coolify-logo-transparent.png',
     nav: [
-      { text: 'Services', link: '/services/overview' },
       { text: 'Coolify Cloud', link: 'https://coolify.io/pricing/' },
       {
         text: 'Resources',
@@ -173,6 +181,18 @@ export default defineConfig({
           }
         ],
       },
+      {
+        text: 'Services',
+        collapsed: true,
+        link: '/services/overview',
+        items: [
+          {
+            text: 'Overview & Quick Deploy',
+            link: '/services/overview',
+            items: services
+          }
+        ],
+      },
       {
         text: 'Databases',
         collapsed: true,

docs/.vitepress/plugins/vitepress-plugin-coolbot.ts

@@ -44,7 +44,7 @@ export default function coolbotPlugin(options: coolbotPluginOptions = {}): Plugi
   };
 
   return {
-    name: 'vitepress-plugin-CoolBot',
+    name: 'vitepress-plugin-coolbot',
 
     async closeBundle() {
       try {
@@ -87,7 +87,6 @@ export default function coolbotPlugin(options: coolbotPluginOptions = {}): Plugi
           }
         }
 
-
         // Write the file map
         const mapPath = resolve(convertedDir, 'llms-text.json');
         writeFileSync(mapPath, JSON.stringify(fileMap, null, 2), 'utf-8');

docs/.vitepress/theme/components/CoolIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <Icon v-if="IconComponent" :icon="name" v-bind="$attrs" />
+  <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="2" width="20" height="20" rx="2" stroke="currentColor" stroke-width="2"/>
+    <text x="12" y="14" text-anchor="middle" font-size="8" fill="currentColor">?</text>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, markRaw } from 'vue'
+import type { Component } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface Props {
+  /** 
+   * Icon name from icones.js.org in the format: "collection:icon-name"
+   * 
+   * Examples:
+   * - "mdi:home" (Material Design Icons)
+   * - "heroicons:command-line" (Heroicons)
+   * - "logos:vue" (Logos)
+   * - "simple-icons:github" (Simple Icons)
+   * - "carbon:user" (Carbon Icons)
+   * 
+   * Find icons at: https://icones.js.org/
+   */
+  name: string
+}
+
+const props = defineProps<Props>()
+const IconComponent = ref<Component | null>(null)
+
+// Load the Iconify component dynamically
+const loadIconifyComponent = async () => {
+  try {
+    const { Icon } = await import('@iconify/vue')
+    IconComponent.value = markRaw(Icon)
+  } catch (error) {
+    // sole.warn('Failed to load Iconify component:', error)
+    IconComponent.value = null
+  }
+}
+
+onMounted(() => {
+  loadIconifyComponent()
+})
+</script>
+