Update to add new blob storage options

docs/.vitepress/components/BasicConfig.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="tab-content">
+    <div class="card">
+      <div class="card-header">
+        <h2 class="card-title">Basic Configuration</h2>
+        <p class="card-description">Configure the basic settings for your Homebox instance.</p>
+      </div>
+      <div class="card-content">
+        <div class="form-row">
+          <label for="rootless">Use Rootless Image</label>
+          <div class="toggle-switch">
+            <input 
+              type="checkbox" 
+              id="rootless" 
+              v-model="config.rootless"
+            />
+            <label for="rootless"></label>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="port">External Port</label>
+          <input 
+            type="text" 
+            id="port" 
+            v-model="config.port"
+          />
+          <p class="help-text">Only used if HTTPS is not enabled</p>
+        </div>
+
+        <div class="form-group">
+          <label for="maxFileUpload">Max File Upload (MB)</label>
+          <input 
+            type="text" 
+            id="maxFileUpload" 
+            v-model="config.maxFileUpload"
+          />
+        </div>
+
+        <div class="form-row">
+          <label for="allowAnalytics">Allow Analytics</label>
+          <div class="toggle-switch">
+            <input 
+              type="checkbox" 
+              id="allowAnalytics" 
+              v-model="config.allowAnalytics"
+            />
+            <label for="allowAnalytics"></label>
+          </div>
+        </div>
+
+        <div class="separator"></div>
+
+        <div class="form-row">
+          <label for="allowRegistration">Allow Registration</label>
+          <div class="toggle-switch">
+            <input 
+              type="checkbox" 
+              id="allowRegistration" 
+              v-model="config.allowRegistration"
+            />
+            <label for="allowRegistration"></label>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <label for="autoIncrementAssetId">Auto Increment Asset ID</label>
+          <div class="toggle-switch">
+            <input 
+              type="checkbox" 
+              id="autoIncrementAssetId" 
+              v-model="config.autoIncrementAssetId"
+            />
+            <label for="autoIncrementAssetId"></label>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <label for="checkGithubRelease">Check GitHub Release</label>
+          <div class="toggle-switch">
+            <input 
+              type="checkbox" 
+              id="checkGithubRelease" 
+              v-model="config.checkGithubRelease"
+            />
+            <label for="checkGithubRelease"></label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+@import 'common.css';
+</style>

docs/.vitepress/components/ConfigEditor.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="config-generator">
+    <div class="config-layout">
+      <div class="config-form">
+        <div class="tabs">
+          <div class="tab-list">
+            <button 
+              v-for="tab in tabs" 
+              :key="tab.value" 
+              class="tab-button" 
+              :class="{ active: activeTab === tab.value }"
+              @click="activeTab = tab.value"
+            >
+              {{ tab.label }}
+            </button>
+          </div>
+
+          <BasicConfig 
+            v-show="activeTab === 'basic'" 
+            :config="config" 
+          />
+          
+          <DatabaseConfig 
+            v-show="activeTab === 'database'" 
+            :config="config" 
+            :show-password="showPassword"
+            @toggle-password="showPassword = !showPassword"
+            @regenerate-password="regeneratePassword"
+          />
+          
+          <HttpsConfig 
+            v-show="activeTab === 'https'" 
+            :config="config" 
+          />
+          
+          <StorageConfig 
+            v-show="activeTab === 'storage'" 
+            :config="config" 
+          />
+        </div>
+      </div>
+
+      <ConfigPreview 
+        :config="generateDockerCompose(config)"
+        @copy="copyToClipboard"
+        @download="downloadConfig"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import BasicConfig from './BasicConfig.vue'
+import DatabaseConfig from './DatabaseConfig.vue'
+import HttpsConfig from './HttpsConfig.vue'
+import StorageConfig from './StorageConfig.vue'
+import ConfigPreview from './ConfigPreview.vue'
+import { generateDockerCompose } from './dockerComposeGenerator'
+
+const showPassword = ref(false)
+const activeTab = ref('basic')
+
+const tabs = [
+  { label: 'Basic', value: 'basic' },
+  { label: 'Database', value: 'database' },
+  { label: 'HTTPS', value: 'https' },
+  { label: 'Storage', value: 'storage' }
+]
+
+function generateRandomPassword(length = 16) {
+  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+"
+  let password = ""
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length)
+    password += charset[randomIndex]
+  }
+  return password
+}
+
+const config = reactive({
+  image: "ghcr.io/sysadminsmedia/homebox:latest",
+  rootless: false,
+  port: "3100",
+  logLevel: "info",
+  logFormat: "text",
+  maxFileUpload: "10",
+  allowAnalytics: false,
+  
+  // HTTPS options
+  httpsOption: "none", // none, traefik, nginx, caddy, cloudflared
+  
+  // Traefik config
+  traefikConfig: {
+    domain: "homebox.example.com",
+    email: "",
+  },
+  
+  // Nginx config
+  nginxConfig: {
+    domain: "homebox.example.com",
+    port: "443",
+    sslCertPath: "/etc/nginx/ssl/cert.pem",
+    sslKeyPath: "/etc/nginx/ssl/key.pem",
+  },
+  
+  // Caddy config
+  caddyConfig: {
+    domain: "homebox.example.com",
+    email: "",
+  },
+  
+  // Cloudflared config
+  cloudflaredConfig: {
+    tunnel: "homebox-tunnel",
+    domain: "homebox.example.com",
+    token: "",
+  },
+  
+  databaseType: "sqlite",
+  postgresConfig: {
+    host: "postgres",
+    port: "5432",
+    username: "homebox",
+    password: generateRandomPassword(),
+    database: "homebox",
+  },
+  allowRegistration: true,
+  autoIncrementAssetId: true,
+  checkGithubRelease: true,
+
+  // Storage Configuration
+  storageType: "local", // local, s3, gcs, azure
+  storageConfig: {
+    // Local storage settings
+    local: {
+      type: "volume", // "volume" or "directory"
+      directory: "./homebox-data",
+      volumeName: "homebox-data",
+      path: "/data", // Custom path for local storage
+    },
+
+    // S3 storage settings
+    s3: {
+      bucket: "",
+      region: "",
+      endpoint: "", // For S3-compatible storage
+      awsAccessKeyId: "",
+      awsSecretAccessKey: "",
+      awsSessionToken: "", // Optional for temporary credentials
+      prefixPath: "", // Storage prefix path
+      awsSdk: "v2", // AWS SDK version
+      disableSSL: false,
+      s3ForcePathStyle: false,
+      sseType: "", // Server-side encryption type
+      kmsKeyId: "", // KMS key ID for encryption
+      fips: false,
+      dualstack: false,
+      accelerate: false,
+      isCompatible: false, // Whether using S3-compatible storage
+      compatibleService: "", // minio, cloudflare-r2, backblaze-b2, custom
+    },
+
+    // Google Cloud Storage settings
+    gcs: {
+      bucket: "",
+      projectId: "",
+      credentialsPath: "/app/gcs-credentials.json", // Path to service account key
+      prefixPath: "", // Storage prefix path
+    },
+
+    // Azure Blob Storage settings
+    azure: {
+      container: "",
+      storageAccount: "",
+      storageKey: "",
+      sasToken: "", // Optional SAS token
+      useEmulator: false,
+      emulatorEndpoint: "localhost:10001", // For local emulator
+      prefixPath: "", // Storage prefix path
+    },
+
+    // Container storage volumes (for non-local storage types)
+    containerStorage: {
+      postgresStorage: {
+        type: "volume",
+        directory: "./postgres-data",
+        volumeName: "postgres-data",
+      },
+      traefikStorage: {
+        type: "volume",
+        directory: "./traefik-data",
+        volumeName: "traefik-data",
+      },
+      nginxStorage: {
+        type: "volume",
+        directory: "./nginx-data",
+        volumeName: "nginx-data",
+      },
+      caddyStorage: {
+        type: "volume",
+        directory: "./caddy-data",
+        volumeName: "caddy-data",
+      },
+      cloudflaredStorage: {
+        type: "volume",
+        directory: "./cloudflared-data",
+        volumeName: "cloudflared-data",
+      },
+    },
+  },
+})
+
+function regeneratePassword() {
+  config.postgresConfig.password = generateRandomPassword()
+  alert('A new random password has been generated for the database.')
+}
+
+function copyToClipboard() {
+  navigator.clipboard.writeText(generateDockerCompose(config))
+  alert('Docker Compose configuration has been copied to your clipboard.')
+}
+
+function downloadConfig() {
+  const element = document.createElement("a")
+  const file = new Blob([generateDockerCompose(config)], { type: "text/plain" })
+  element.href = URL.createObjectURL(file)
+  element.download = "docker-compose.yml"
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+}
+</script>
+
+<style>
+.config-generator {
+  font-family: var(--vp-font-family-base);
+  color: var(--vp-c-text-1);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+  color: var(--vp-c-brand);
+}
+
+.config-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+
+.tabs {
+  width: 100%;
+}
+
+.tab-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.tab-button {
+  padding: 0.5rem;
+  background-color: var(--vp-c-bg-mute);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-button.active {
+  background-color: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.tab-button:hover:not(.active) {
+  background-color: var(--vp-c-bg-alt);
+}
+</style>

docs/.vitepress/components/ConfigPreview.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="config-preview">
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title-with-actions">
+          <h2 class="card-title">Docker Compose Configuration</h2>
+          <div class="card-actions">
+            <button class="icon-button" @click="$emit('copy')" title="Copy to clipboard">
+              Copy
+            </button>
+            <button class="icon-button" @click="$emit('download')" title="Download as file">
+              Download
+            </button>
+          </div>
+        </div>
+        <p class="card-description">This configuration will be saved as docker-compose.yml</p>
+      </div>
+      <div class="card-content">
+        <textarea 
+          class="code-preview" 
+          readonly 
+          :value="config"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  config: {
+    type: String,
+    required: true
+  },
+})
+
+defineEmits(['copy', 'download'])
+</script>
+
+<style scoped>
+@import './common.css';
+
+.config-preview {
+  height: 100%;
+}
+
+.card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-content {
+  flex: 1;
+}
+
+.card-title-with-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.code-preview {
+  width: 100%;
+  height: 600px;
+  font-family: monospace;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background-color: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  resize: none;
+  white-space: pre;
+  overflow: auto;
+}
+</style>

docs/.vitepress/components/DatabaseConfig.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="tab-content">
+    <div class="card">
+      <div class="card-header">
+        <h2 class="card-title">Database Configuration</h2>
+        <p class="card-description">Configure the database for your Homebox instance.</p>
+      </div>
+      <div class="card-content">
+        <div class="form-group">
+          <label for="databaseType">Database Type</label>
+          <select id="databaseType" v-model="config.databaseType">
+            <option value="sqlite">SQLite (Default)</option>
+            <option value="postgres">PostgreSQL</option>
+          </select>
+        </div>
+
+        <div v-if="config.databaseType === 'postgres'" class="nested-form">
+          <div class="form-group">
+            <label for="postgresHost">PostgreSQL Host</label>
+            <input 
+              type="text" 
+              id="postgresHost" 
+              v-model="config.postgresConfig.host"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="postgresPort">PostgreSQL Port</label>
+            <input 
+              type="text" 
+              id="postgresPort" 
+              v-model="config.postgresConfig.port"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="postgresUsername">PostgreSQL Username</label>
+            <input 
+              type="text" 
+              id="postgresUsername" 
+              v-model="config.postgresConfig.username"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="postgresPassword">PostgreSQL Password</label>
+            <div class="password-input">
+              <input 
+                :type="showPassword ? 'text' : 'password'" 
+                id="postgresPassword" 
+                v-model="config.postgresConfig.password"
+              />
+              <button 
+                class="icon-button" 
+                @click="$emit('togglePassword')"
+                type="button"
+              >
+                <span v-if="showPassword">Hide</span>
+                <span v-else>Show</span>
+              </button>
+              <button 
+                class="icon-button" 
+                @click="$emit('regeneratePassword')"
+                type="button"
+                title="Generate new random password"
+              >
+                Regenerate
+              </button>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="postgresDatabase">PostgreSQL Database</label>
+            <input 
+              type="text" 
+              id="postgresDatabase" 
+              v-model="config.postgresConfig.database"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  config: {
+    type: Object,
+    required: true
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['togglePassword', 'regeneratePassword'])
+</script>
+
+<style scoped>
+@import './common.css';
+
+.password-input {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.password-input input {
+  flex: 1;
+}
+</style>

docs/.vitepress/components/HttpsConfig.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="tab-content">
+    <div class="card">
+      <div class="card-header">
+        <h2 class="card-title">HTTPS Configuration</h2>
+        <p class="card-description">Configure HTTPS for your Homebox instance.</p>
+      </div>
+      <div class="card-content">
+        <div class="form-group">
+          <label for="httpsOption">HTTPS Option</label>
+          <select id="httpsOption" v-model="config.httpsOption">
+            <option value="none">None (HTTP only)</option>
+            <option value="traefik">Traefik (Automatic HTTPS with Let's Encrypt)</option>
+            <option value="nginx">Nginx (Custom SSL certificates)</option>
+            <option value="caddy">Caddy (Automatic HTTPS with Let's Encrypt)</option>
+            <option value="cloudflared">Cloudflare Tunnel</option>
+          </select>
+        </div>
+
+        <!-- Traefik Configuration -->
+        <div v-if="config.httpsOption === 'traefik'" class="nested-form">
+          <h3>Traefik Configuration</h3>
+          <p class="help-text">Traefik automatically handles HTTPS certificates via Let's Encrypt</p>
+          
+          <div class="form-group">
+            <label for="traefikDomain">Domain Name</label>
+            <input 
+              type="text" 
+              id="traefikDomain" 
+              v-model="config.traefikConfig.domain"
+              placeholder="homebox.example.com"
+            />
+            <p class="help-text">The domain name must be pointed to your server's IP address</p>
+          </div>
+
+          <div class="form-group">
+            <label for="traefikEmail">Email Address (for Let's Encrypt)</label>
+            <input 
+              type="email" 
+              id="traefikEmail" 
+              v-model="config.traefikConfig.email"
+              placeholder="your-email@example.com"
+            />
+            <p class="help-text">Required for Let's Encrypt certificate notifications</p>
+          </div>
+        </div>
+
+        <!-- Nginx Configuration -->
+        <div v-if="config.httpsOption === 'nginx'" class="nested-form">
+          <h3>Nginx Configuration</h3>
+          <p class="help-text">Nginx requires you to provide SSL certificates</p>
+          
+          <div class="form-group">
+            <label for="nginxDomain">Domain Name</label>
+            <input 
+              type="text" 
+              id="nginxDomain" 
+              v-model="config.nginxConfig.domain"
+              placeholder="homebox.example.com"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="nginxPort">HTTPS Port</label>
+            <input 
+              type="text" 
+              id="nginxPort" 
+              v-model="config.nginxConfig.port"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="nginxSslCert">SSL Certificate Path</label>
+            <input 
+              type="text" 
+              id="nginxSslCert" 
+              v-model="config.nginxConfig.sslCertPath"
+            />
+            <p class="help-text">Path to SSL certificate file inside the Nginx container</p>
+          </div>
+
+          <div class="form-group">
+            <label for="nginxSslKey">SSL Key Path</label>
+            <input 
+              type="text" 
+              id="nginxSslKey" 
+              v-model="config.nginxConfig.sslKeyPath"
+            />
+            <p class="help-text">Path to SSL key file inside the Nginx container</p>
+          </div>
+        </div>
+
+        <!-- Caddy Configuration -->
+        <div v-if="config.httpsOption === 'caddy'" class="nested-form">
+          <h3>Caddy Configuration</h3>
+          <p class="help-text">Caddy automatically handles HTTPS certificates via Let's Encrypt</p>
+          
+          <div class="form-group">
+            <label for="caddyDomain">Domain Name</label>
+            <input 
+              type="text" 
+              id="caddyDomain" 
+              v-model="config.caddyConfig.domain"
+              placeholder="homebox.example.com"
+            />
+            <p class="help-text">The domain name must be pointed to your server's IP address</p>
+          </div>
+
+          <div class="form-group">
+            <label for="caddyEmail">Email Address (for Let's Encrypt)</label>
+            <input 
+              type="email" 
+              id="caddyEmail" 
+              v-model="config.caddyConfig.email"
+              placeholder="your-email@example.com"
+            />
+            <p class="help-text">Optional: Used for Let's Encrypt certificate notifications</p>
+          </div>
+        </div>
+
+        <!-- Cloudflared Configuration -->
+        <div v-if="config.httpsOption === 'cloudflared'" class="nested-form">
+          <h3>Cloudflare Tunnel Configuration</h3>
+          <p class="help-text">Cloudflare Tunnel provides secure access without exposing ports</p>
+          
+          <div class="form-group">
+            <label for="cloudflaredTunnel">Tunnel Name</label>
+            <input 
+              type="text" 
+              id="cloudflaredTunnel" 
+              v-model="config.cloudflaredConfig.tunnel"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="cloudflaredDomain">Domain Name</label>
+            <input 
+              type="text" 
+              id="cloudflaredDomain" 
+              v-model="config.cloudflaredConfig.domain"
+              placeholder="homebox.example.com"
+            />
+            <p class="help-text">The domain must be managed by Cloudflare</p>
+          </div>
+
+          <div class="form-group">
+            <label for="cloudflaredToken">Tunnel Token</label>
+            <input 
+              type="password" 
+              id="cloudflaredToken" 
+              v-model="config.cloudflaredConfig.token"
+              placeholder="Your Cloudflare Tunnel token"
+            />
+            <p class="help-text">Create a tunnel in the Cloudflare Zero Trust dashboard to get a token</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+@import './common.css';
+
+h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+}
+</style>

docs/.vitepress/components/StorageConfig.vue

@@ -0,0 +1,552 @@
+<template>
+  <div class="storage-config">
+    <h3>Storage Configuration</h3>
+
+    <!-- Storage Type Selector -->
+    <div class="form-group">
+      <label for="storageType">Storage Type</label>
+      <select id="storageType" v-model="config.storageType" class="form-input">
+        <option value="local">Local Storage</option>
+        <option value="s3">Amazon S3 / S3-Compatible</option>
+        <option value="gcs">Google Cloud Storage</option>
+        <option value="azure">Azure Blob Storage</option>
+      </select>
+      <p class="form-help">Choose where Homebox will store your data</p>
+    </div>
+
+    <!-- Local Storage Configuration -->
+    <div v-if="config.storageType === 'local'" class="storage-section">
+      <h4>Local Storage Settings</h4>
+
+      <div class="form-group">
+        <label for="localType">Storage Type</label>
+        <select id="localType" v-model="config.storageConfig.local.type" class="form-input">
+          <option value="volume">Docker Volume</option>
+          <option value="directory">Host Directory</option>
+        </select>
+      </div>
+
+      <div v-if="config.storageConfig.local.type === 'directory'" class="form-group">
+        <label for="localDirectory">Host Directory Path</label>
+        <input
+          id="localDirectory"
+          v-model="config.storageConfig.local.directory"
+          type="text"
+          class="form-input"
+          placeholder="./homebox-data"
+        />
+        <p class="form-help">Path on the host system where data will be stored</p>
+      </div>
+
+      <div v-if="config.storageConfig.local.type === 'volume'" class="form-group">
+        <label for="localVolume">Volume Name</label>
+        <input
+          id="localVolume"
+          v-model="config.storageConfig.local.volumeName"
+          type="text"
+          class="form-input"
+          placeholder="homebox-data"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="localPath">Custom Storage Path (Optional)</label>
+        <input
+          id="localPath"
+          v-model="config.storageConfig.local.path"
+          type="text"
+          class="form-input"
+          placeholder="/data"
+        />
+        <p class="form-help">Custom path inside the container. Leave as /data for default.</p>
+      </div>
+    </div>
+
+    <!-- S3 Storage Configuration -->
+    <div v-if="config.storageType === 's3'" class="storage-section">
+      <h4>S3 Storage Settings</h4>
+
+      <div class="form-group">
+        <label>
+          <input
+            type="checkbox"
+            v-model="config.storageConfig.s3.isCompatible"
+            class="form-checkbox"
+          />
+          Use S3-Compatible Storage (MinIO, Cloudflare R2, Backblaze B2, etc.)
+        </label>
+      </div>
+
+      <div v-if="config.storageConfig.s3.isCompatible" class="form-group">
+        <label for="s3Service">S3-Compatible Service</label>
+        <select id="s3Service" v-model="config.storageConfig.s3.compatibleService" class="form-input">
+          <option value="">Custom/Other</option>
+          <option value="minio">MinIO</option>
+          <option value="cloudflare-r2">Cloudflare R2</option>
+          <option value="backblaze-b2">Backblaze B2</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="s3Bucket">Bucket Name</label>
+        <input
+          id="s3Bucket"
+          v-model="config.storageConfig.s3.bucket"
+          type="text"
+          class="form-input"
+          placeholder="my-homebox-bucket"
+          required
+        />
+      </div>
+
+      <div v-if="!config.storageConfig.s3.isCompatible" class="form-group">
+        <label for="s3Region">AWS Region</label>
+        <input
+          id="s3Region"
+          v-model="config.storageConfig.s3.region"
+          type="text"
+          class="form-input"
+          placeholder="us-east-1"
+          required
+        />
+      </div>
+
+      <div v-if="config.storageConfig.s3.isCompatible" class="form-group">
+        <label for="s3Endpoint">Endpoint URL</label>
+        <input
+          id="s3Endpoint"
+          v-model="config.storageConfig.s3.endpoint"
+          type="text"
+          class="form-input"
+          :placeholder="getS3EndpointPlaceholder()"
+        />
+        <p class="form-help">The endpoint URL for your S3-compatible service</p>
+      </div>
+
+      <div class="form-group">
+        <label for="s3AccessKey">AWS Access Key ID</label>
+        <input
+          id="s3AccessKey"
+          v-model="config.storageConfig.s3.awsAccessKeyId"
+          type="text"
+          class="form-input"
+          placeholder="AKIAIOSFODNN7EXAMPLE"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="s3SecretKey">AWS Secret Access Key</label>
+        <input
+          id="s3SecretKey"
+          v-model="config.storageConfig.s3.awsSecretAccessKey"
+          type="password"
+          class="form-input"
+          placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="s3SessionToken">AWS Session Token (Optional)</label>
+        <input
+          id="s3SessionToken"
+          v-model="config.storageConfig.s3.awsSessionToken"
+          type="password"
+          class="form-input"
+          placeholder="For temporary credentials"
+        />
+        <p class="form-help">Only needed for temporary AWS credentials</p>
+      </div>
+
+      <div class="form-group">
+        <label for="s3PrefixPath">Storage Prefix Path (Optional)</label>
+        <input
+          id="s3PrefixPath"
+          v-model="config.storageConfig.s3.prefixPath"
+          type="text"
+          class="form-input"
+          placeholder="homebox/"
+        />
+        <p class="form-help">Prefix for all stored objects in the bucket</p>
+      </div>
+
+      <!-- Advanced S3 Settings -->
+      <details class="advanced-settings">
+        <summary>Advanced S3 Settings</summary>
+
+        <div class="form-group">
+          <label for="s3AwsSdk">AWS SDK Version</label>
+          <select id="s3AwsSdk" v-model="config.storageConfig.s3.awsSdk" class="form-input">
+            <option value="v2">v2 (Recommended)</option>
+            <option value="v1">v1</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <input
+              type="checkbox"
+              v-model="config.storageConfig.s3.disableSSL"
+              class="form-checkbox"
+            />
+            Disable SSL
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <input
+              type="checkbox"
+              v-model="config.storageConfig.s3.s3ForcePathStyle"
+              class="form-checkbox"
+            />
+            Force Path Style Access
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label for="s3SseType">Server-Side Encryption</label>
+          <select id="s3SseType" v-model="config.storageConfig.s3.sseType" class="form-input">
+            <option value="">None</option>
+            <option value="AES256">AES256</option>
+            <option value="aws:kms">AWS KMS</option>
+            <option value="aws:kms:dsse">AWS KMS DSSE</option>
+          </select>
+        </div>
+
+        <div v-if="config.storageConfig.s3.sseType.includes('kms')" class="form-group">
+          <label for="s3KmsKey">KMS Key ID</label>
+          <input
+            id="s3KmsKey"
+            v-model="config.storageConfig.s3.kmsKeyId"
+            type="text"
+            class="form-input"
+            placeholder="arn:aws:kms:us-east-1:123456789012:key/12345678-1234-1234-1234-123456789012"
+          />
+        </div>
+
+        <div class="form-group">
+          <label>
+            <input
+              type="checkbox"
+              v-model="config.storageConfig.s3.fips"
+              class="form-checkbox"
+            />
+            Use FIPS Endpoints
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <input
+              type="checkbox"
+              v-model="config.storageConfig.s3.dualstack"
+              class="form-checkbox"
+            />
+            Use Dual-Stack Endpoints
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label>
+            <input
+              type="checkbox"
+              v-model="config.storageConfig.s3.accelerate"
+              class="form-checkbox"
+            />
+            Use S3 Transfer Acceleration
+          </label>
+        </div>
+      </details>
+    </div>
+
+    <!-- Google Cloud Storage Configuration -->
+    <div v-if="config.storageType === 'gcs'" class="storage-section">
+      <h4>Google Cloud Storage Settings</h4>
+
+      <div class="form-group">
+        <label for="gcsBucket">Bucket Name</label>
+        <input
+          id="gcsBucket"
+          v-model="config.storageConfig.gcs.bucket"
+          type="text"
+          class="form-input"
+          placeholder="my-homebox-bucket"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="gcsProject">Project ID</label>
+        <input
+          id="gcsProject"
+          v-model="config.storageConfig.gcs.projectId"
+          type="text"
+          class="form-input"
+          placeholder="my-gcp-project"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="gcsCredentialsPath">Service Account Key Path</label>
+        <input
+          id="gcsCredentialsPath"
+          v-model="config.storageConfig.gcs.credentialsPath"
+          type="text"
+          class="form-input"
+          placeholder="/app/gcs-credentials.json"
+        />
+        <p class="form-help">Path to the service account JSON key file inside the container</p>
+      </div>
+
+      <div class="form-group">
+        <label for="gcsPrefixPath">Storage Prefix Path (Optional)</label>
+        <input
+          id="gcsPrefixPath"
+          v-model="config.storageConfig.gcs.prefixPath"
+          type="text"
+          class="form-input"
+          placeholder="homebox/"
+        />
+        <p class="form-help">Prefix for all stored objects in the bucket</p>
+      </div>
+
+      <div class="info-box">
+        <h5>📋 Setup Instructions:</h5>
+        <ol>
+          <li>Create a service account in your GCP project</li>
+          <li>Grant Storage Admin permissions to the service account</li>
+          <li>Download the JSON key file</li>
+          <li>Mount the key file as a read-only volume in your container</li>
+          <li>Set GOOGLE_APPLICATION_CREDENTIALS environment variable</li>
+        </ol>
+      </div>
+    </div>
+
+    <!-- Azure Blob Storage Configuration -->
+    <div v-if="config.storageType === 'azure'" class="storage-section">
+      <h4>Azure Blob Storage Settings</h4>
+
+      <div class="form-group">
+        <label>
+          <input
+            type="checkbox"
+            v-model="config.storageConfig.azure.useEmulator"
+            class="form-checkbox"
+          />
+          Use Azure Storage Emulator (for development)
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label for="azureContainer">Container Name</label>
+        <input
+          id="azureContainer"
+          v-model="config.storageConfig.azure.container"
+          type="text"
+          class="form-input"
+          placeholder="homebox-container"
+          required
+        />
+      </div>
+
+      <div v-if="!config.storageConfig.azure.useEmulator" class="form-group">
+        <label for="azureAccount">Storage Account Name</label>
+        <input
+          id="azureAccount"
+          v-model="config.storageConfig.azure.storageAccount"
+          type="text"
+          class="form-input"
+          placeholder="mystorageaccount"
+          required
+        />
+      </div>
+
+      <div v-if="!config.storageConfig.azure.useEmulator" class="form-group">
+        <label for="azureKey">Storage Account Key</label>
+        <input
+          id="azureKey"
+          v-model="config.storageConfig.azure.storageKey"
+          type="password"
+          class="form-input"
+          placeholder="Your Azure storage account key"
+          required
+        />
+      </div>
+
+      <div v-if="!config.storageConfig.azure.useEmulator" class="form-group">
+        <label for="azureSas">SAS Token (Optional)</label>
+        <input
+          id="azureSas"
+          v-model="config.storageConfig.azure.sasToken"
+          type="password"
+          class="form-input"
+          placeholder="?sv=2021-06-08&ss=b&srt=sco&sp=rwdlacupx&se=..."
+        />
+        <p class="form-help">Use SAS token instead of storage account key</p>
+      </div>
+
+      <div v-if="config.storageConfig.azure.useEmulator" class="form-group">
+        <label for="azureEmulatorEndpoint">Emulator Endpoint</label>
+        <input
+          id="azureEmulatorEndpoint"
+          v-model="config.storageConfig.azure.emulatorEndpoint"
+          type="text"
+          class="form-input"
+          placeholder="localhost:10001"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="azurePrefixPath">Storage Prefix Path (Optional)</label>
+        <input
+          id="azurePrefixPath"
+          v-model="config.storageConfig.azure.prefixPath"
+          type="text"
+          class="form-input"
+          placeholder="homebox/"
+        />
+        <p class="form-help">Prefix for all stored objects in the container</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true
+  }
+})
+
+function getS3EndpointPlaceholder() {
+  const service = props.config.storageConfig.s3.compatibleService
+  switch (service) {
+    case 'minio':
+      return 'http://minio:9000'
+    case 'cloudflare-r2':
+      return 'https://<account-id>.r2.cloudflarestorage.com'
+    case 'backblaze-b2':
+      return 'https://s3.us-west-004.backblazeb2.com'
+    default:
+      return 'https://your-s3-compatible-endpoint.com'
+  }
+}
+</script>
+
+<style scoped>
+.storage-config {
+  padding: 1.5rem;
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.storage-section {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: var(--vp-c-bg);
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background-color: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-light);
+}
+
+.form-checkbox {
+  width: auto;
+  margin-right: 0.5rem;
+}
+
+.form-help {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.advanced-settings {
+  margin-top: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+.advanced-settings summary {
+  padding: 0.75rem;
+  background-color: var(--vp-c-bg-mute);
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.advanced-settings[open] summary {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.advanced-settings .form-group {
+  margin: 1rem;
+}
+
+.info-box {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: var(--vp-c-bg-alt);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 4px;
+}
+
+.info-box h5 {
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-text-1);
+}
+
+.info-box ol {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.info-box li {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+}
+
+h3 {
+  margin: 0 0 1.5rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+h4 {
+  margin: 0 0 1rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+</style>

docs/.vitepress/components/StorageTypeSelector.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="storage-selector">
+    <h3>{{ label }}</h3>
+    <p class="help-text">{{ description }}</p>
+    
+    <div class="radio-group">
+      <div class="radio-option">
+        <input 
+          type="radio" 
+          :id="`${storageKey}-volume`" 
+          value="volume" 
+          v-model="config.storageConfig[storageKey].type"
+        />
+        <label :for="`${storageKey}-volume`">Docker Volume</label>
+      </div>
+      <div class="radio-option">
+        <input 
+          type="radio" 
+          :id="`${storageKey}-directory`" 
+          value="directory" 
+          v-model="config.storageConfig[storageKey].type"
+        />
+        <label :for="`${storageKey}-directory`">Host Directory</label>
+      </div>
+    </div>
+
+    <div v-if="config.storageConfig[storageKey].type === 'volume'" class="form-group">
+      <label :for="`${storageKey}-volume-name`">Volume Name</label>
+      <input 
+        type="text" 
+        :id="`${storageKey}-volume-name`" 
+        v-model="config.storageConfig[storageKey].volumeName"
+      />
+    </div>
+    <div v-else class="form-group">
+      <label :for="`${storageKey}-directory-path`">Directory Path</label>
+      <input 
+        type="text" 
+        :id="`${storageKey}-directory-path`" 
+        v-model="config.storageConfig[storageKey].directory"
+      />
+      <p class="help-text">Absolute path recommended (e.g., /home/user/data)</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  storageKey: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  config: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+@import './common.css';
+
+.storage-selector {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+.storage-selector h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+}
+
+.radio-group {
+  display: flex;
+  gap: 1.5rem;
+  margin: 1rem 0;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>

docs/.vitepress/components/common.css

@@ -0,0 +1,150 @@
+.card {
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-bottom: 1.5rem;
+}
+
+.card-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+
+  border-top: 0px;
+  padding-top: 0px;
+}
+
+.card-description {
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.card-content {
+  padding: 1.5rem;
+}
+
+.tab-content {
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px soli var(--vp-c-divider);
+  border-radius: 4px;
+  background-color: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px rgba(var(--vp-c-brand-rgb), 0.1);
+}
+
+.form-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch label {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--vp-c-divider);
+  transition: .4s;
+  border-radius: 20px;
+}
+
+.toggle-switch label:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+.toggle-switch input:checked + label {
+  background-color: var(--vp-c-brand);
+}
+
+.toggle-switch input:checked + label:before {
+  transform: translateX(20px);
+}
+
+.help-text {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.25rem;
+}
+
+.separator {
+  height: 1px;
+  background-color: var(--vp-c-divider);
+  margin: 1.5rem 0;
+}
+
+.nested-form {
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+.icon-button {
+  padding: 0.5rem;
+  background-color: var(--vp-c-bg-mute);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.icon-button:hover {
+  background-color: var(--vp-c-bg-alt);
+}

docs/.vitepress/components/dockerComposeGenerator.ts

@@ -0,0 +1,440 @@
+export function generateDockerCompose(config: any): string {
+    const services: any = {}
+    const volumes: any = {}
+    const networks: any = {
+        homebox: {
+            driver: 'bridge'
+        }
+    }
+
+    // Generate Homebox service
+    services.homebox = generateHomeboxService(config)
+
+    // Add database service if PostgreSQL is selected
+    if (config.databaseType === 'postgres') {
+        services.postgres = generatePostgresService(config)
+        if (config.storageConfig.containerStorage.postgresStorage.type === 'volume') {
+            volumes[config.storageConfig.containerStorage.postgresStorage.volumeName] = null
+        }
+    }
+
+    // Ensure homebox-data volume exists if SQLite is selected
+    if (config.databaseType === 'sqlite') {
+        volumes['homebox-data'] = null
+    }
+
+    // Add reverse proxy services based on HTTPS option
+    switch (config.httpsOption) {
+        case 'traefik':
+            services.traefik = generateTraefikService(config)
+            if (config.storageConfig.containerStorage.traefikStorage.type === 'volume') {
+                volumes[config.storageConfig.containerStorage.traefikStorage.volumeName] = null
+            }
+            break
+        case 'nginx':
+            services.nginx = generateNginxService(config)
+            if (config.storageConfig.containerStorage.nginxStorage.type === 'volume') {
+                volumes[config.storageConfig.containerStorage.nginxStorage.volumeName] = null
+            }
+            break
+        case 'caddy':
+            services.caddy = generateCaddyService(config)
+            if (config.storageConfig.containerStorage.caddyStorage.type === 'volume') {
+                volumes[config.storageConfig.containerStorage.caddyStorage.volumeName] = null
+            }
+            break
+        case 'cloudflared':
+            services.cloudflared = generateCloudflaredService(config)
+            if (config.storageConfig.containerStorage.cloudflaredStorage.type === 'volume') {
+                volumes[config.storageConfig.containerStorage.cloudflaredStorage.volumeName] = null
+            }
+            break
+    }
+
+    // Add Homebox storage volume only for local storage
+    if (config.storageType === 'local' && config.storageConfig.local.type === 'volume') {
+        volumes[config.storageConfig.local.volumeName] = null
+    }
+
+    const compose = {
+        version: '3.8',
+        services,
+        ...(Object.keys(volumes).length > 0 && {volumes}),
+        networks
+    }
+
+    return `# Generated Homebox Docker Compose Config Generator 1.0 Beta
+# Storage Type: ${config.storageType.toUpperCase()}
+# Generated on: ${new Date().toISOString()}
+${yaml.stringify(compose)}`
+}
+
+function generateHomeboxService(config: any): any {
+    const service: any = {
+        image: config.rootless ? config.image.replace(':latest', ':latest-rootless') : config.image,
+        container_name: 'homebox',
+        restart: 'unless-stopped',
+        environment: generateEnvironmentVariables(config),
+        networks: ['homebox']
+    }
+
+    // Add ports for direct access (when no reverse proxy is used)
+    if (config.httpsOption === 'none') {
+        service.ports = [`${config.port}:7745`]
+    }
+
+    // Configure storage based on storage type
+    if (config.storageType === 'local') {
+        service.volumes = generateLocalStorageVolumes(config)
+    } else {
+        // For cloud storage, we might still need some local volumes for certain files
+        service.volumes = generateCloudStorageVolumes(config)
+    }
+
+    // Always mount homebox-data at /data if SQLite is used
+    if (config.databaseType === 'sqlite') {
+        if (!service.volumes) service.volumes = []
+        // Only add if not already present
+        if (!service.volumes.some(v => v.startsWith('homebox-data:'))) {
+            service.volumes.push('homebox-data:/data')
+        }
+    }
+
+    return service
+}
+
+function generateEnvironmentVariables(config: any): string[] {
+    const env: string[] = [
+        `HBOX_LOG_LEVEL=${config.logLevel}`,
+        `HBOX_LOG_FORMAT=${config.logFormat}`,
+        `HBOX_MAX_UPLOAD_SIZE=${config.maxFileUpload}`,
+        `HBOX_AUTO_INCREMENT_ASSET_ID=${config.autoIncrementAssetId}`,
+        `HBOX_WEB_PORT=7745`
+    ]
+
+    // Database configuration
+    if (config.databaseType === 'postgres') {
+        env.push(
+            `HBOX_DATABASE_DRIVER=postgres`,
+            `HBOX_DATABASE_HOST=${config.postgresConfig.host}`,
+            `HBOX_DATABASE_PORT=${config.postgresConfig.port}`,
+            `HBOX_DATABASE_NAME=${config.postgresConfig.database}`,
+            `HBOX_DATABASE_USER=${config.postgresConfig.username}`,
+            `HBOX_DATABASE_PASS=${config.postgresConfig.password}`
+        )
+    }
+
+    // Registration settings
+    if (!config.allowRegistration) {
+        env.push('HBOX_OPTIONS_ALLOW_REGISTRATION=false')
+    }
+
+    // Analytics settings
+    if (!config.allowAnalytics) {
+        env.push('HBOX_OPTIONS_ALLOW_ANALYTICS=false')
+    }
+
+    // GitHub release check
+    if (!config.checkGithubRelease) {
+        env.push('HBOX_OPTIONS_CHECK_GITHUB_RELEASE=false')
+    }
+
+    // Storage configuration
+    env.push(...generateStorageEnvironmentVariables(config))
+
+    return env
+}
+
+function generateStorageEnvironmentVariables(config: any): string[] {
+    const env: string[] = []
+
+    switch (config.storageType) {
+        case 'local':
+            const storagePath = config.storageConfig.local.path || '/data'
+            env.push(`HBOX_STORAGE_CONN_STRING=file://${storagePath}`)
+            if (config.storageConfig.local.prefixPath) {
+                env.push(`HBOX_STORAGE_PREFIX_PATH=${config.storageConfig.local.prefixPath}`)
+            }
+            break
+
+        case 's3':
+            const s3Config = config.storageConfig.s3
+            let connectionString = `s3://${s3Config.bucket}?awssdk=${s3Config.awsSdk}`
+
+            if (s3Config.region && !s3Config.isCompatible) {
+                connectionString += `&region=${s3Config.region}`
+            }
+
+            if (s3Config.endpoint) {
+                connectionString += `&endpoint=${s3Config.endpoint}`
+            }
+
+            if (s3Config.disableSSL) {
+                connectionString += '&disableSSL=true'
+            }
+
+            if (s3Config.s3ForcePathStyle) {
+                connectionString += '&s3ForcePathStyle=true'
+            }
+
+            if (s3Config.sseType) {
+                connectionString += `&sseType=${s3Config.sseType}`
+            }
+
+            if (s3Config.kmsKeyId) {
+                connectionString += `&kmskeyid=${s3Config.kmsKeyId}`
+            }
+
+            if (s3Config.fips) {
+                connectionString += '&fips=true'
+            }
+
+            if (s3Config.dualstack) {
+                connectionString += '&dualstack=true'
+            }
+
+            if (s3Config.accelerate) {
+                connectionString += '&accelerate=true'
+            }
+
+            env.push(`HBOX_STORAGE_CONN_STRING=${connectionString}`)
+
+            if (s3Config.prefixPath) {
+                env.push(`HBOX_STORAGE_PREFIX_PATH=${s3Config.prefixPath}`)
+            }
+
+            // AWS credentials
+            env.push(`AWS_ACCESS_KEY_ID=${s3Config.awsAccessKeyId}`)
+            env.push(`AWS_SECRET_ACCESS_KEY=${s3Config.awsSecretAccessKey}`)
+
+            if (s3Config.awsSessionToken) {
+                env.push(`AWS_SESSION_TOKEN=${s3Config.awsSessionToken}`)
+            }
+            break
+
+        case 'gcs':
+            const gcsConfig = config.storageConfig.gcs
+            env.push(`HBOX_STORAGE_CONN_STRING=gcs://${gcsConfig.bucket}`)
+
+            if (gcsConfig.prefixPath) {
+                env.push(`HBOX_STORAGE_PREFIX_PATH=${gcsConfig.prefixPath}`)
+            }
+
+            env.push(`GOOGLE_APPLICATION_CREDENTIALS=${gcsConfig.credentialsPath}`)
+            break
+
+        case 'azure':
+            const azureConfig = config.storageConfig.azure
+            let azureConnectionString = `azblob://${azureConfig.container}`
+
+            if (azureConfig.useEmulator) {
+                azureConnectionString += `?protocol=http&domain=${azureConfig.emulatorEndpoint}`
+            }
+
+            env.push(`HBOX_STORAGE_CONN_STRING=${azureConnectionString}`)
+
+            if (azureConfig.prefixPath) {
+                env.push(`HBOX_STORAGE_PREFIX_PATH=${azureConfig.prefixPath}`)
+            }
+
+            if (!azureConfig.useEmulator) {
+                env.push(`AZURE_STORAGE_ACCOUNT=${azureConfig.storageAccount}`)
+
+                if (azureConfig.sasToken) {
+                    env.push(`AZURE_STORAGE_SAS_TOKEN=${azureConfig.sasToken}`)
+                } else {
+                    env.push(`AZURE_STORAGE_KEY=${azureConfig.storageKey}`)
+                }
+            }
+            break
+    }
+
+    return env
+}
+
+function generateLocalStorageVolumes(config: any): string[] {
+    const volumes: string[] = []
+
+    if (config.storageConfig.local.type === 'volume') {
+        const mountPath = config.storageConfig.local.path || '/data'
+        volumes.push(`${config.storageConfig.local.volumeName}:${mountPath}`)
+    } else {
+        const mountPath = config.storageConfig.local.path || '/data'
+        volumes.push(`${config.storageConfig.local.directory}:${mountPath}`)
+    }
+
+    return volumes
+}
+
+function generateCloudStorageVolumes(config: any): string[] {
+    const volumes: string[] = []
+
+    // For cloud storage, we might still need local volumes for certain files like GCS credentials
+    if (config.storageType === 'gcs') {
+        volumes.push('/path/to/gcs-credentials.json:/app/gcs-credentials.json:ro')
+    }
+
+    return volumes
+}
+
+function generatePostgresService(config: any): any {
+    const service: any = {
+        image: 'postgres:17-alpine',
+        container_name: 'homebox_postgres',
+        restart: 'unless-stopped',
+        environment: [
+            `POSTGRES_USER=${config.postgresConfig.username}`,
+            `POSTGRES_PASSWORD=${config.postgresConfig.password}`,
+            `POSTGRES_DB=${config.postgresConfig.database}`
+        ],
+        networks: ['homebox']
+    }
+
+    if (config.storageConfig.containerStorage.postgresStorage.type === 'volume') {
+        service.volumes = [`${config.storageConfig.containerStorage.postgresStorage.volumeName}:/var/lib/postgresql/data`]
+    } else {
+        service.volumes = [`${config.storageConfig.containerStorage.postgresStorage.directory}:/var/lib/postgresql/data`]
+    }
+
+    return service
+}
+
+function generateTraefikService(config: any): any {
+    const service: any = {
+        image: 'traefik:v3.0',
+        container_name: 'traefik',
+        restart: 'unless-stopped',
+        command: [
+            '--api.dashboard=true',
+            '--providers.docker=true',
+            '--providers.docker.exposedbydefault=false',
+            '--entrypoints.web.address=:80',
+            '--entrypoints.websecure.address=:443',
+            '--certificatesresolvers.letsencrypt.acme.tlschallenge=true',
+            `--certificatesresolvers.letsencrypt.acme.email=${config.traefikConfig.email}`,
+            '--certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json'
+        ],
+        ports: ['80:80', '443:443'],
+        networks: ['homebox'],
+        labels: [
+            'traefik.enable=true',
+            'traefik.http.routers.traefik.rule=Host(`traefik.${config.traefikConfig.domain}`)',
+            'traefik.http.routers.traefik.entrypoints=websecure',
+            'traefik.http.routers.traefik.tls.certresolver=letsencrypt',
+            'traefik.http.routers.traefik.service=api@internal'
+        ]
+    }
+
+    if (config.storageConfig.containerStorage.traefikStorage.type === 'volume') {
+        service.volumes = [
+            '/var/run/docker.sock:/var/run/docker.sock:ro',
+            `${config.storageConfig.containerStorage.traefikStorage.volumeName}:/letsencrypt`
+        ]
+    } else {
+        service.volumes = [
+            '/var/run/docker.sock:/var/run/docker.sock:ro',
+            `${config.storageConfig.containerStorage.traefikStorage.directory}:/letsencrypt`
+        ]
+    }
+
+    return service
+}
+
+function generateNginxService(config: any): any {
+    // This would generate an Nginx service with SSL configuration
+    // Implementation would depend on specific Nginx configuration needs
+    return {
+        image: 'nginx:alpine',
+        container_name: 'nginx',
+        restart: 'unless-stopped',
+        ports: [`${config.nginxConfig.port}:443`, '80:80'],
+        networks: ['homebox']
+    }
+}
+
+function generateCaddyService(config: any): any {
+    return {
+        image: 'caddy:alpine',
+        container_name: 'caddy',
+        restart: 'unless-stopped',
+        ports: ['80:80', '443:443'],
+        networks: ['homebox']
+    }
+}
+
+function generateCloudflaredService(config: any): any {
+    return {
+        image: 'cloudflare/cloudflared:latest',
+        container_name: 'cloudflared',
+        restart: 'unless-stopped',
+        command: `tunnel --no-autoupdate run --token ${config.cloudflaredConfig.token}`,
+        networks: ['homebox']
+    }
+}
+
+// Simple YAML stringifier (basic implementation
+
+const yaml = {
+    stringify(obj: any, indent = 0, parentKey = "", isTopLevel = true): string {
+        const spaces = '  '.repeat(indent)
+        const nextSpaces = '  '.repeat(indent + 1)
+        if (obj === null || obj === undefined) {
+            return 'null'
+        }
+        if (typeof obj === 'string') {
+            if (parentKey === 'environment') {
+                // Should not be used, handled by stringifyEnv
+                return obj
+            }
+            if (obj.includes(':') || obj.includes('#') || obj.includes('\n') || /^[0-9]/.test(obj) || obj.includes('${')) {
+                return `"${obj.replace(/"/g, '\\"')}"`
+            }
+            return obj
+        }
+        if (typeof obj === 'number' || typeof obj === 'boolean') {
+            return String(obj)
+        }
+        if (Array.isArray(obj)) {
+            if (obj.length === 0) return '[]'
+            if (parentKey === 'environment') {
+                return yaml.stringifyEnv(obj, indent)
+            }
+            // For arrays under object keys, indent dashes at the same level as the parent key's value (spaces)
+            return '\n' + obj.map(item => `${spaces}- ${this.stringify(item, indent + 1, '', false).replace(/^\s+/, '')}`).join('\n')
+        }
+        if (typeof obj === 'object') {
+            const keys = Object.keys(obj)
+            if (keys.length === 0) return '{}'
+            return (isTopLevel ? '' : '\n') + keys.map(key => {
+                const value = this.stringify(obj[key], indent + 1, key, false)
+                // If value is an array, ensure correct indentation
+                if (Array.isArray(obj[key])) {
+                    // Place key at current indent, then array items at next indent
+                    return `${isTopLevel ? '' : spaces}${key}:${value}`
+                }
+                if (value.startsWith('\n')) {
+                    return `${isTopLevel ? '' : spaces}${key}:${value}`
+                }
+                return `${isTopLevel ? '' : spaces}${key}: ${value}`
+            }).join('\n')
+        }
+        return String(obj)
+    },
+
+    stringifyEnv(envArr: string[], indent = 0): string {
+        const spaces = '  '.repeat(indent)
+        return '\n' + envArr.map(env => {
+            const eqIdx = env.indexOf('=')
+            if (eqIdx !== -1) {
+                const key = env.slice(0, eqIdx + 1)
+                let value = env.slice(eqIdx + 1)
+                // Only quote the value if it contains special YAML characters
+                if (value.match(/[:#\n]|^\d|\${/)) {
+                    value = `"${value.replace(/"/g, '\\"')}"`
+                }
+                return `${spaces}- ${key}${value}`
+            }
+            return `${spaces}- ${env}`
+        }).join('\n')
+    }
+}

docs/.vitepress/components/types.ts

@@ -0,0 +1,90 @@
+// types.ts
+
+export type StorageType = "volume" | "directory"
+export type HttpsOption = "none" | "traefik" | "nginx" | "caddy" | "cloudflared"
+export type DatabaseType = "sqlite" | "postgres"
+
+export interface StorageDetail {
+  type: StorageType
+  directory: string
+  volumeName: string
+}
+
+export interface StorageConfig {
+  homeboxStorage: StorageDetail
+  postgresStorage: StorageDetail
+  traefikStorage: StorageDetail
+  nginxStorage: StorageDetail
+  caddyStorage: StorageDetail
+  cloudflaredStorage: StorageDetail
+}
+
+export interface PostgresConfig {
+  host: string
+  port: string
+  username: string
+  password: string
+  database: string
+}
+
+export interface TraefikConfig {
+  domain: string
+  email: string
+}
+
+export interface NginxConfig {
+  domain: string
+  port: string
+  sslCertPath: string
+  sslKeyPath: string
+}
+
+export interface CaddyConfig {
+  domain: string
+  email: string
+}
+
+export interface CloudflaredConfig {
+  tunnel: string // Note: This wasn't used in the generator function, but kept for completeness
+  domain: string
+  token: string
+}
+
+export interface AppConfig {
+  image: string // Not directly used in generator, but part of the config
+  rootless: boolean
+  port: string
+  logLevel: string
+  logFormat: string
+  maxFileUpload: string
+  allowAnalytics: boolean
+  httpsOption: HttpsOption
+  traefikConfig: TraefikConfig
+  nginxConfig: NginxConfig
+  caddyConfig: CaddyConfig
+  cloudflaredConfig: CloudflaredConfig
+  databaseType: DatabaseType
+  postgresConfig: PostgresConfig
+  allowRegistration: boolean
+  autoIncrementAssetId: boolean
+  checkGithubRelease: boolean
+  storageConfig: StorageConfig
+}
+
+// Types for the generated Docker Compose structure
+export interface DockerService {
+  image: string
+  container_name: string
+  restart: string
+  environment?: string[]
+  volumes: string[]
+  ports?: string[]
+  expose?: string[]
+  labels?: string[]
+  command?: string[]
+  depends_on?: string[]
+}
+
+export interface DockerServices {
+  [key: string]: DockerService
+}

docs/en/installation.md

@@ -42,28 +42,7 @@ $ docker run -d \
 
 1. Create a `docker-compose.yml` file.
 
-```yaml
+<ConfigEditor />
-services:
-  homebox:
-    image: ghcr.io/sysadminsmedia/homebox:latest
-#   image: ghcr.io/sysadminsmedia/homebox:latest-rootless
-    container_name: homebox
-    restart: always
-    environment:
-    - HBOX_LOG_LEVEL=info
-    - HBOX_LOG_FORMAT=text
-    - HBOX_WEB_MAX_FILE_UPLOAD=10
-    # Please consider allowing analytics to help us improve Homebox (basic computer information, no personal data)
-    - HBOX_OPTIONS_ALLOW_ANALYTICS=false
-    volumes:
-      - homebox-data:/data/
-    ports:
-      - 3100:7745
-
-volumes:
-   homebox-data:
-     driver: local
-```
 
 ::: info
 If you use the `rootless` image, and instead of using named volumes you would prefer using a hostMount directly (e.g., `volumes: [ /path/to/data/folder:/data ]`) you need to `chown` the chosen directory in advance to the `65532` user (as shown in the Docker example above).
@@ -103,3 +82,7 @@ You can learn more about Docker by [reading the official Docker documentation.](
 2. Extract the archive.
 3. Run the `homebox` executable.
 4. The web interface will be accessible on port 7745 by default. Access the page by navigating to `http://local.ip.address:7745/` (replace with the right ip address)
+
+<script setup>
+  import ConfigEditor from '../.vitepress/components/ConfigEditor.vue'
+</script>