mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
feat: actually do it properly
This commit is contained in:
tonyaellie
903
docs/.vitepress/components/ConfigEditor.vue
Normal file
903
docs/.vitepress/components/ConfigEditor.vue
Normal file
@@ -0,0 +1,903 @@
|
|||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Basic Tab -->
|
||||||
|
<div v-show="activeTab === 'basic'" 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 with Traefik 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>
|
||||||
|
|
||||||
|
<!-- Database Tab -->
|
||||||
|
<div v-show="activeTab === 'database'" 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="showPassword = !showPassword"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span v-if="showPassword">Hide</span>
|
||||||
|
<span v-else>Show</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="icon-button"
|
||||||
|
@click="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>
|
||||||
|
|
||||||
|
<!-- Proxy Tab -->
|
||||||
|
<div v-show="activeTab === 'proxy'" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 class="card-title">Proxy Configuration with Traefik</h2>
|
||||||
|
<p class="card-description">Configure Traefik as a reverse proxy with automatic HTTPS for your Homebox instance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="form-row">
|
||||||
|
<label for="useTraefik">Enable HTTPS with Traefik</label>
|
||||||
|
<div class="toggle-switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="useTraefik"
|
||||||
|
v-model="config.useTraefik"
|
||||||
|
/>
|
||||||
|
<label for="useTraefik"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="config.useTraefik" class="nested-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="traefikDomain">Domain Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="traefikDomain"
|
||||||
|
v-model="config.traefikDomain"
|
||||||
|
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.traefikEmail"
|
||||||
|
placeholder="your-email@example.com"
|
||||||
|
/>
|
||||||
|
<p class="help-text">Required for Let's Encrypt certificate notifications</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Storage Tab -->
|
||||||
|
<div v-show="activeTab === 'storage'" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 class="card-title">Storage Configuration</h2>
|
||||||
|
<p class="card-description">Configure storage options for your Homebox instance and related services.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<!-- Homebox Storage -->
|
||||||
|
<div class="storage-selector">
|
||||||
|
<h3>Homebox Data Storage</h3>
|
||||||
|
<p class="help-text">Store Homebox data in a Docker volume or host directory</p>
|
||||||
|
|
||||||
|
<div class="radio-group">
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="homeboxStorage-volume"
|
||||||
|
value="volume"
|
||||||
|
v-model="config.storageConfig.homeboxStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="homeboxStorage-volume">Docker Volume</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="homeboxStorage-directory"
|
||||||
|
value="directory"
|
||||||
|
v-model="config.storageConfig.homeboxStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="homeboxStorage-directory">Host Directory</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="config.storageConfig.homeboxStorage.type === 'volume'" class="form-group">
|
||||||
|
<label for="homeboxStorage-volume-name">Volume Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="homeboxStorage-volume-name"
|
||||||
|
v-model="config.storageConfig.homeboxStorage.volumeName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else class="form-group">
|
||||||
|
<label for="homeboxStorage-directory-path">Directory Path</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="homeboxStorage-directory-path"
|
||||||
|
v-model="config.storageConfig.homeboxStorage.directory"
|
||||||
|
/>
|
||||||
|
<p class="help-text">Absolute path recommended (e.g., /home/user/homebox-data)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PostgreSQL Storage -->
|
||||||
|
<div v-if="config.databaseType === 'postgres'" class="storage-selector">
|
||||||
|
<h3>PostgreSQL Data Storage</h3>
|
||||||
|
<p class="help-text">Store PostgreSQL data in a Docker volume or host directory</p>
|
||||||
|
|
||||||
|
<div class="radio-group">
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="postgresStorage-volume"
|
||||||
|
value="volume"
|
||||||
|
v-model="config.storageConfig.postgresStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="postgresStorage-volume">Docker Volume</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="postgresStorage-directory"
|
||||||
|
value="directory"
|
||||||
|
v-model="config.storageConfig.postgresStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="postgresStorage-directory">Host Directory</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="config.storageConfig.postgresStorage.type === 'volume'" class="form-group">
|
||||||
|
<label for="postgresStorage-volume-name">Volume Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="postgresStorage-volume-name"
|
||||||
|
v-model="config.storageConfig.postgresStorage.volumeName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else class="form-group">
|
||||||
|
<label for="postgresStorage-directory-path">Directory Path</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="postgresStorage-directory-path"
|
||||||
|
v-model="config.storageConfig.postgresStorage.directory"
|
||||||
|
/>
|
||||||
|
<p class="help-text">Absolute path recommended (e.g., /home/user/postgres-data)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Traefik Storage -->
|
||||||
|
<div v-if="config.useTraefik" class="storage-selector">
|
||||||
|
<h3>Traefik Data Storage</h3>
|
||||||
|
<p class="help-text">Store Traefik certificates in a Docker volume or host directory</p>
|
||||||
|
|
||||||
|
<div class="radio-group">
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="traefikStorage-volume"
|
||||||
|
value="volume"
|
||||||
|
v-model="config.storageConfig.traefikStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="traefikStorage-volume">Docker Volume</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio-option">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="traefikStorage-directory"
|
||||||
|
value="directory"
|
||||||
|
v-model="config.storageConfig.traefikStorage.type"
|
||||||
|
/>
|
||||||
|
<label for="traefikStorage-directory">Host Directory</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="config.storageConfig.traefikStorage.type === 'volume'" class="form-group">
|
||||||
|
<label for="traefikStorage-volume-name">Volume Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="traefikStorage-volume-name"
|
||||||
|
v-model="config.storageConfig.traefikStorage.volumeName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else class="form-group">
|
||||||
|
<label for="traefikStorage-directory-path">Directory Path</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="traefikStorage-directory-path"
|
||||||
|
v-model="config.storageConfig.traefikStorage.directory"
|
||||||
|
/>
|
||||||
|
<p class="help-text">Absolute path recommended (e.g., /home/user/traefik-data)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="copyToClipboard" title="Copy to clipboard">
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
<button class="icon-button" @click="downloadConfig" 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="generateDockerCompose()"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
|
||||||
|
const showPassword = ref(false)
|
||||||
|
const activeTab = ref('basic')
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ label: 'Basic', value: 'basic' },
|
||||||
|
{ label: 'Database', value: 'database' },
|
||||||
|
{ label: 'Proxy', value: 'proxy' },
|
||||||
|
{ 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,
|
||||||
|
useTraefik: false,
|
||||||
|
traefikDomain: "homebox.example.com",
|
||||||
|
traefikEmail: "",
|
||||||
|
databaseType: "sqlite",
|
||||||
|
postgresConfig: {
|
||||||
|
host: "postgres",
|
||||||
|
port: "5432",
|
||||||
|
username: "homebox",
|
||||||
|
password: generateRandomPassword(),
|
||||||
|
database: "homebox",
|
||||||
|
},
|
||||||
|
allowRegistration: true,
|
||||||
|
autoIncrementAssetId: true,
|
||||||
|
checkGithubRelease: true,
|
||||||
|
storageConfig: {
|
||||||
|
homeboxStorage: {
|
||||||
|
type: "volume", // "volume" or "directory"
|
||||||
|
directory: "./homebox-data",
|
||||||
|
volumeName: "homebox-data",
|
||||||
|
},
|
||||||
|
postgresStorage: {
|
||||||
|
type: "volume",
|
||||||
|
directory: "./postgres-data",
|
||||||
|
volumeName: "postgres-data",
|
||||||
|
},
|
||||||
|
traefikStorage: {
|
||||||
|
type: "volume",
|
||||||
|
directory: "./traefik-data",
|
||||||
|
volumeName: "traefik-data",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function regeneratePassword() {
|
||||||
|
config.postgresConfig.password = generateRandomPassword()
|
||||||
|
alert('A new random password has been generated for the database.')
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateDockerCompose() {
|
||||||
|
const services = {
|
||||||
|
homebox: {
|
||||||
|
image: config.rootless
|
||||||
|
? "ghcr.io/sysadminsmedia/homebox:latest-rootless"
|
||||||
|
: "ghcr.io/sysadminsmedia/homebox:latest",
|
||||||
|
container_name: "homebox",
|
||||||
|
restart: "always",
|
||||||
|
environment: [
|
||||||
|
`HBOX_LOG_LEVEL=${config.logLevel}`,
|
||||||
|
`HBOX_LOG_FORMAT=${config.logFormat}`,
|
||||||
|
`HBOX_WEB_MAX_FILE_UPLOAD=${config.maxFileUpload}`,
|
||||||
|
`HBOX_OPTIONS_ALLOW_ANALYTICS=${config.allowAnalytics}`,
|
||||||
|
`HBOX_OPTIONS_ALLOW_REGISTRATION=${config.allowRegistration}`,
|
||||||
|
`HBOX_OPTIONS_AUTO_INCREMENT_ASSET_ID=${config.autoIncrementAssetId}`,
|
||||||
|
`HBOX_OPTIONS_CHECK_GITHUB_RELEASE=${config.checkGithubRelease}`,
|
||||||
|
],
|
||||||
|
volumes: [],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Configure homebox volumes based on storage type
|
||||||
|
if (config.storageConfig.homeboxStorage.type === "volume") {
|
||||||
|
services.homebox.volumes.push(`${config.storageConfig.homeboxStorage.volumeName}:/data/`)
|
||||||
|
} else {
|
||||||
|
services.homebox.volumes.push(`${config.storageConfig.homeboxStorage.directory}:/data/`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add ports or labels based on whether Traefik is used
|
||||||
|
if (config.useTraefik) {
|
||||||
|
services.homebox.labels = [
|
||||||
|
"traefik.enable=true",
|
||||||
|
`traefik.http.routers.homebox.rule=Host(\`${config.traefikDomain}\`)`,
|
||||||
|
"traefik.http.routers.homebox.entrypoints=websecure",
|
||||||
|
"traefik.http.routers.homebox.tls.certresolver=letsencrypt",
|
||||||
|
"traefik.http.services.homebox.loadbalancer.server.port=7745",
|
||||||
|
]
|
||||||
|
// No need to expose ports when using Traefik
|
||||||
|
} else {
|
||||||
|
services.homebox.ports = [`${config.port}:7745`]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add database configuration if PostgreSQL is selected
|
||||||
|
if (config.databaseType === "postgres") {
|
||||||
|
services.homebox.environment.push(
|
||||||
|
"HBOX_DATABASE_DRIVER=postgres",
|
||||||
|
`HBOX_DATABASE_HOST=${config.postgresConfig.host}`,
|
||||||
|
`HBOX_DATABASE_PORT=${config.postgresConfig.port}`,
|
||||||
|
`HBOX_DATABASE_USERNAME=${config.postgresConfig.username}`,
|
||||||
|
`HBOX_DATABASE_PASSWORD=${config.postgresConfig.password}`,
|
||||||
|
`HBOX_DATABASE_DATABASE=${config.postgresConfig.database}`,
|
||||||
|
)
|
||||||
|
|
||||||
|
// Add PostgreSQL service
|
||||||
|
services["postgres"] = {
|
||||||
|
image: "postgres:14",
|
||||||
|
container_name: "homebox-postgres",
|
||||||
|
restart: "always",
|
||||||
|
environment: [
|
||||||
|
`POSTGRES_USER=${config.postgresConfig.username}`,
|
||||||
|
`POSTGRES_PASSWORD=${config.postgresConfig.password}`,
|
||||||
|
`POSTGRES_DB=${config.postgresConfig.database}`,
|
||||||
|
],
|
||||||
|
volumes: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
// Configure postgres volumes based on storage type
|
||||||
|
if (config.storageConfig.postgresStorage.type === "volume") {
|
||||||
|
services.postgres.volumes.push(`${config.storageConfig.postgresStorage.volumeName}:/var/lib/postgresql/data`)
|
||||||
|
} else {
|
||||||
|
services.postgres.volumes.push(`${config.storageConfig.postgresStorage.directory}:/var/lib/postgresql/data`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Traefik if selected
|
||||||
|
if (config.useTraefik) {
|
||||||
|
services["traefik"] = {
|
||||||
|
image: "traefik:v2.10",
|
||||||
|
container_name: "homebox-traefik",
|
||||||
|
restart: "always",
|
||||||
|
ports: ["80:80", "443:443"],
|
||||||
|
command: [
|
||||||
|
"--api.insecure=false",
|
||||||
|
"--providers.docker=true",
|
||||||
|
"--providers.docker.exposedbydefault=false",
|
||||||
|
"--entrypoints.web.address=:80",
|
||||||
|
"--entrypoints.web.http.redirections.entrypoint.to=websecure",
|
||||||
|
"--entrypoints.web.http.redirections.entrypoint.scheme=https",
|
||||||
|
"--entrypoints.websecure.address=:443",
|
||||||
|
"--certificatesresolvers.letsencrypt.acme.tlschallenge=true",
|
||||||
|
`--certificatesresolvers.letsencrypt.acme.email=${config.traefikEmail}`,
|
||||||
|
"--certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json",
|
||||||
|
],
|
||||||
|
volumes: ["/var/run/docker.sock:/var/run/docker.sock:ro"],
|
||||||
|
}
|
||||||
|
|
||||||
|
// Configure traefik volumes based on storage type
|
||||||
|
if (config.storageConfig.traefikStorage.type === "volume") {
|
||||||
|
services.traefik.volumes.push(`${config.storageConfig.traefikStorage.volumeName}:/letsencrypt`)
|
||||||
|
} else {
|
||||||
|
services.traefik.volumes.push(`${config.storageConfig.traefikStorage.directory}:/letsencrypt`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format the Docker Compose YAML
|
||||||
|
let dockerCompose = "# generated by homebox config generator v0.0.1\n\nservices:\n"
|
||||||
|
|
||||||
|
// Add services
|
||||||
|
Object.entries(services).forEach(([serviceName, serviceConfig]) => {
|
||||||
|
dockerCompose += ` ${serviceName}:\n`
|
||||||
|
Object.entries(serviceConfig).forEach(([key, value]) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
dockerCompose += ` ${key}:\n`
|
||||||
|
value.forEach((item) => {
|
||||||
|
dockerCompose += ` - ${item}\n`
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
dockerCompose += ` ${key}: ${value}\n`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add volumes section if needed
|
||||||
|
const volumeNames = []
|
||||||
|
|
||||||
|
// Only add volumes that are configured as Docker volumes, not directories
|
||||||
|
if (config.storageConfig.homeboxStorage.type === "volume") {
|
||||||
|
volumeNames.push(config.storageConfig.homeboxStorage.volumeName)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.databaseType === "postgres" && config.storageConfig.postgresStorage.type === "volume") {
|
||||||
|
volumeNames.push(config.storageConfig.postgresStorage.volumeName)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.useTraefik && config.storageConfig.traefikStorage.type === "volume") {
|
||||||
|
volumeNames.push(config.storageConfig.traefikStorage.volumeName)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (volumeNames.length > 0) {
|
||||||
|
dockerCompose += "\nvolumes:\n"
|
||||||
|
volumeNames.forEach((volumeName) => {
|
||||||
|
dockerCompose += ` ${volumeName}:\n driver: local\n`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return dockerCompose
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyToClipboard() {
|
||||||
|
navigator.clipboard.writeText(generateDockerCompose())
|
||||||
|
alert('Docker Compose configuration has been copied to your clipboard.')
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadConfig() {
|
||||||
|
const element = document.createElement("a")
|
||||||
|
const file = new Blob([generateDockerCompose()], { 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 scoped>
|
||||||
|
.config-generator {
|
||||||
|
font-family: var(--vp-font-family-base);
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-title-with-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 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-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-input {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-input input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@@ -42,7 +42,7 @@ $ docker run -d \
|
|||||||
|
|
||||||
1. Create a `docker-compose.yml` file.
|
1. Create a `docker-compose.yml` file.
|
||||||
|
|
||||||
<iframe src="https://v0-homebox-config-editor.vercel.app/" width="100%" height="800px"></iframe>
|
<ConfigEditor />
|
||||||
|
|
||||||
::: info
|
::: 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).
|
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).
|
||||||
@@ -82,3 +82,7 @@ You can learn more about Docker by [reading the official Docker documentation.](
|
|||||||
2. Extract the archive.
|
2. Extract the archive.
|
||||||
3. Run the `homebox` executable.
|
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)
|
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user