mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-26 07:13:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: split into separate files

Browse Source
This commit is contained in:
tonyaellie
2025-04-11 15:25:44 +00:00
parent c980ce679c
commit 1d941b148c
10 changed files with 1347 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
docs/.vitepress/components/BasicConfig.vue Normal file
View File

@@ -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>

844
docs/.vitepress/components/ConfigEditor.vue
View File

@@ -15,408 +15,48 @@
</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>
<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>
<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>
<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')
@@ -424,7 +64,7 @@ const activeTab = ref('basic')
const tabs = [
{ label: 'Basic', value: 'basic' },
{ label: 'Database', value: 'database' },
{ label: 'Proxy', value: 'proxy' },
{ label: 'HTTPS', value: 'https' },
{ label: 'Storage', value: 'storage' }
]
@@ -446,9 +86,37 @@ const config = reactive({
logFormat: "text",
maxFileUpload: "10",
allowAnalytics: false,
useTraefik: false,
traefikDomain: "homebox.example.com",
traefikEmail: "",
// 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",
@@ -476,6 +144,21 @@ const config = reactive({
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",
},
},
})
@@ -484,162 +167,14 @@ function regeneratePassword() {
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())
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()], { type: "text/plain" })
const file = new Blob([generateDockerCompose(config)], { type: "text/plain" })
element.href = URL.createObjectURL(file)
element.download = "docker-compose.yml"
document.body.appendChild(element)
@@ -648,7 +183,7 @@ function downloadConfig() {
}
</script>
<style scoped>
<style>
.config-generator {
font-family: var(--vp-font-family-base);
color: var(--vp-c-text-1);
@@ -657,55 +192,19 @@ function downloadConfig() {
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;
}
.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%;
}
@@ -737,167 +236,4 @@ function downloadConfig() {
.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>

81
docs/.vitepress/components/ConfigPreview.vue Normal file
View File

@@ -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>

112
docs/.vitepress/components/DatabaseConfig.vue Normal file
View File

@@ -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>

179
docs/.vitepress/components/HttpsConfig.vue Normal file
View File

@@ -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>

76
docs/.vitepress/components/StorageConfig.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div 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 -->
<StorageTypeSelector
storage-key="homeboxStorage"
label="Homebox Data Storage"
description="Store Homebox data in a Docker volume or host directory"
:config="config"
/>
<!-- PostgreSQL Storage -->
<StorageTypeSelector
v-if="config.databaseType === 'postgres'"
storage-key="postgresStorage"
label="PostgreSQL Data Storage"
description="Store PostgreSQL data in a Docker volume or host directory"
:config="config"
/>
<!-- HTTPS Service Storage -->
<StorageTypeSelector
v-if="config.httpsOption === 'traefik'"
storage-key="traefikStorage"
label="Traefik Data Storage"
description="Store Traefik certificates in a Docker volume or host directory"
:config="config"
/>
<StorageTypeSelector
v-if="config.httpsOption === 'nginx'"
storage-key="nginxStorage"
label="Nginx Data Storage"
description="Store Nginx configuration and certificates in a Docker volume or host directory"
:config="config"
/>
<StorageTypeSelector
v-if="config.httpsOption === 'caddy'"
storage-key="caddyStorage"
label="Caddy Data Storage"
description="Store Caddy configuration and certificates in a Docker volume or host directory"
:config="config"
/>
<StorageTypeSelector
v-if="config.httpsOption === 'cloudflared'"
storage-key="cloudflaredStorage"
label="Cloudflared Data Storage"
description="Store Cloudflared configuration in a Docker volume or host directory"
:config="config"
/>
</div>
</div>
</div>
</template>
<script setup>
import StorageTypeSelector from './StorageTypeSelector.vue'
defineProps({
config: {
type: Object,
required: true
}
})
</script>
<style scoped>
@import './common.css';
</style>

95
docs/.vitepress/components/StorageTypeSelector.vue Normal file
View File

@@ -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>

150
docs/.vitepress/components/common.css Normal file
View File

@@ -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);
}

369
docs/.vitepress/components/dockerComposeGenerator.ts Normal file
View File

@@ -0,0 +1,369 @@
import type { AppConfig, DockerServices } from "./types" // Assuming types are in a separate file
export function generateDockerCompose(config: AppConfig): string {
const services: DockerServices = {
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/`,
)
}
// Configure ports based on HTTPS option
if (config.httpsOption === "none") {
services.homebox.ports = [`${config.port}:7745`]
} else {
// For HTTPS options, the proxy will handle the ports
services.homebox.expose = ["7745"]
}
// Add database configuration if PostgreSQL is selected
if (config.databaseType === "postgres") {
// Ensure environment array exists before pushing
if (!services.homebox.environment) {
services.homebox.environment = []
}
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 HTTPS configuration based on selected option
switch (config.httpsOption) {
case "traefik":
addTraefikConfig(services, config)
break
case "nginx":
addNginxConfig(services, config)
break
case "caddy":
addCaddyConfig(services, config)
break
case "cloudflared":
addCloudflaredConfig(services, config)
break
}
// 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: string) => {
// Added type assertion for item
dockerCompose += ` - ${item}\n`
})
} else if (value !== undefined) {
// Check for undefined before adding
dockerCompose += ` ${key}: ${value}\n`
}
})
})
// Add volumes section if needed
const volumeNames: string[] = []
// 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)
}
// Add HTTPS-related volumes
if (
config.httpsOption === "traefik" &&
config.storageConfig.traefikStorage.type === "volume"
) {
volumeNames.push(config.storageConfig.traefikStorage.volumeName)
}
if (
config.httpsOption === "nginx" &&
config.storageConfig.nginxStorage.type === "volume"
) {
volumeNames.push(config.storageConfig.nginxStorage.volumeName)
}
if (
config.httpsOption === "caddy" &&
config.storageConfig.caddyStorage.type === "volume"
) {
volumeNames.push(config.storageConfig.caddyStorage.volumeName)
}
if (
config.httpsOption === "cloudflared" &&
config.storageConfig.cloudflaredStorage.type === "volume"
) {
volumeNames.push(config.storageConfig.cloudflaredStorage.volumeName)
}
if (volumeNames.length > 0) {
dockerCompose += "\nvolumes:\n"
volumeNames.forEach((volumeName: string) => {
dockerCompose += ` ${volumeName}:\n driver: local\n`
})
}
return dockerCompose
}
function addTraefikConfig(services: DockerServices, config: AppConfig): void {
// Add Traefik labels to Homebox
services.homebox.labels = [
"traefik.enable=true",
`traefik.http.routers.homebox.rule=Host(\`${config.traefikConfig.domain}\`)`,
"traefik.http.routers.homebox.entrypoints=websecure",
"traefik.http.routers.homebox.tls.certresolver=letsencrypt",
"traefik.http.services.homebox.loadbalancer.server.port=7745",
]
// Add Traefik service
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.traefikConfig.email}`,
"--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`,
)
}
}
function addNginxConfig(services: DockerServices, config: AppConfig): void {
// Add Nginx service
services["nginx"] = {
image: "nginx:latest",
container_name: "homebox-nginx",
restart: "always",
ports: [`${config.nginxConfig.port}:443`, "80:80"],
volumes: [],
depends_on: ["homebox"],
}
// Configure nginx volumes based on storage type
if (config.storageConfig.nginxStorage.type === "volume") {
services.nginx.volumes.push(
`${config.storageConfig.nginxStorage.volumeName}/conf.d:/etc/nginx/conf.d`,
)
services.nginx.volumes.push(
`${config.storageConfig.nginxStorage.volumeName}/ssl:/etc/nginx/ssl`,
)
} else {
services.nginx.volumes.push(
`${config.storageConfig.nginxStorage.directory}/conf.d:/etc/nginx/conf.d`,
)
services.nginx.volumes.push(
`${config.storageConfig.nginxStorage.directory}/ssl:/etc/nginx/ssl`,
)
}
// Add default Nginx configuration path (assuming the file exists)
const nginxConfVolume =
config.storageConfig.nginxStorage.type === "volume"
? `${config.storageConfig.nginxStorage.volumeName}/conf.d/default.conf:/etc/nginx/conf.d/default.conf`
: `${config.storageConfig.nginxStorage.directory}/conf.d/default.conf:/etc/nginx/conf.d/default.conf`
services.nginx.volumes.push(nginxConfVolume)
// Add comments via environment variables (Docker Compose doesn't support comments directly in YAML this way)
services.nginx.environment = [
"# You need to create SSL certificates and place them in the SSL directory",
`# Certificate path: ${config.nginxConfig.sslCertPath}`,
`# Key path: ${config.nginxConfig.sslKeyPath}`,
"# Then create a default.conf file in the conf.d directory with the following content:",
"# server {",
"# listen 80;",
`# server_name ${config.nginxConfig.domain};`,
"# return 301 https://$host$request_uri;",
"# }",
"# server {",
"# listen 443 ssl;",
`# server_name ${config.nginxConfig.domain};`,
`# ssl_certificate ${config.nginxConfig.sslCertPath};`,
`# ssl_certificate_key ${config.nginxConfig.sslKeyPath};`,
"# location / {",
"# proxy_pass http://homebox:7745;",
"# proxy_set_header Host $host;",
"# proxy_set_header X-Real-IP $remote_addr;",
"# }",
"# }",
]
}
function addCaddyConfig(services: DockerServices, config: AppConfig): void {
// Add Caddy service
services["caddy"] = {
image: "caddy:latest",
container_name: "homebox-caddy",
restart: "always",
ports: ["80:80", "443:443"],
volumes: [],
depends_on: ["homebox"],
}
// Configure caddy volumes based on storage type
if (config.storageConfig.caddyStorage.type === "volume") {
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.volumeName}/data:/data`,
)
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.volumeName}/config:/config`,
)
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.volumeName}/Caddyfile:/etc/caddy/Caddyfile`,
)
} else {
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.directory}/data:/data`,
)
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.directory}/config:/config`,
)
services.caddy.volumes.push(
`${config.storageConfig.caddyStorage.directory}/Caddyfile:/etc/caddy/Caddyfile`,
)
}
// Add environment variables for Caddy comments and potential ACME config
services.caddy.environment = [
`# Create a Caddyfile in ${config.storageConfig.caddyStorage.type === "volume" ? config.storageConfig.caddyStorage.volumeName : config.storageConfig.caddyStorage.directory} with the following content:`,
`# ${config.caddyConfig.domain} {`,
"# reverse_proxy homebox:7745",
"# }",
]
// Add email if provided for ACME
if (config.caddyConfig.email) {
// Ensure environment array exists
if (!services.caddy.environment) {
services.caddy.environment = []
}
services.caddy.environment.push(`ACME_AGREE=true`) // Note: Caddy v2 doesn't use ACME_AGREE env var, email is set in Caddyfile
services.caddy.environment.push(`EMAIL=${config.caddyConfig.email}`) // This might be useful for scripting but Caddy reads email from Caddyfile
services.caddy.environment.push(
`# Add 'email ${config.caddyConfig.email}' to your Caddyfile for automatic HTTPS`,
)
}
}
function addCloudflaredConfig(
services: DockerServices,
config: AppConfig,
): void {
// Add Cloudflared service
services["cloudflared"] = {
image: "cloudflare/cloudflared:latest",
container_name: "homebox-cloudflared",
restart: "always",
command: ["tunnel", "--no-autoupdate", "run"],
volumes: [],
environment: [`TUNNEL_TOKEN=${config.cloudflaredConfig.token}`],
depends_on: ["homebox"],
}
// Configure cloudflared volumes based on storage type
if (config.storageConfig.cloudflaredStorage.type === "volume") {
services.cloudflared.volumes.push(
`${config.storageConfig.cloudflaredStorage.volumeName}:/etc/cloudflared`,
)
} else {
services.cloudflared.volumes.push(
`${config.storageConfig.cloudflaredStorage.directory}:/etc/cloudflared`,
)
}
// Add comments via environment variables
// Ensure environment array exists
if (!services.cloudflared.environment) {
services.cloudflared.environment = []
}
services.cloudflared.environment.push(
"# Create a tunnel in the Cloudflare Zero Trust dashboard",
`# Configure DNS for ${config.cloudflaredConfig.domain} to point to your tunnel`,
"# Add a public hostname in the tunnel configuration pointing to http://homebox:7745",
)
}

90
docs/.vitepress/components/types.ts Normal file
View File

@@ -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
}